<template>
  <div class="wrap app-container">
  	<div class="tools">
  		<el-date-picker
	      v-model="date"
        size="mini"
	      type="daterange"
        value-format="yyyy-MM-dd"
	      range-separator="至"
	      start-placeholder="开始日期"
	      end-placeholder="结束日期">
	    </el-date-picker>
      <el-select v-model="form.type" collapse-tags multiple size="mini" placeholder="出入库方式(多选)">
        <el-option v-for="item in markArr" :key="item.id" :value="item.id" :label="item.name"></el-option>
      </el-select>
      <el-button size="mini" type="primary" @click="search">搜索</el-button>
      <el-button size="mini" type="primary" @click="clear">清空</el-button>
  	</div>
    <div class="content">
    	<el-table :data="prods" size="mini" style="width: 100%">
        <el-table-column label="药品名称">
        	<template slot-scope="scope">
        		<selectTable :index="scope.$index" @selectChange="selectChange"></selectTable>
        	</template>
        </el-table-column>
        <el-table-column label="规格" prop="drugsSpecsName"></el-table-column>
        <el-table-column label="单位" prop="packingUnit">
          <template slot-scope="scope">
            <dict-tag v-if="scope.row.packingUnit" :options="unitArr" :value="scope.row.packingUnit" />
          </template>
        </el-table-column>
        <el-table-column label="产地" prop="placeName"></el-table-column>
        <el-table-column label="批发价" prop="wholesale"></el-table-column>
        <el-table-column label="零售价" prop="retail"></el-table-column>
        <el-table-column label="账簿类别" prop="type"></el-table-column>
        <el-table-column label="库存数量" prop="inventory">
          <template slot-scope="scope"><span v-show="scope.row.inventory">{{(scope.row.inventory-0).toFixed(4)}}</span></template>
        </el-table-column>
        <el-table-column label="库存金额" prop="stockAll">
          <template slot-scope="scope"><span v-show="scope.row.inventory">{{(scope.row.retail*scope.row.inventory).toFixed(4)}}</span></template>
        </el-table-column>
      </el-table>
      
      <el-table :data="tableData" size="mini" style="width:100%;margin-top:20px;" show-summary>
        <el-table-column label="序号" width="60">
          <template slot-scope="scope">{{(scope.$index+1)+(form.pageNum-1)*10}}</template>
        </el-table-column>
        <el-table-column label="记账日期" prop="keepingTime"></el-table-column>
        <el-table-column label="记账单号">
          <template slot-scope="scope">{{scope.row.code+''}}</template>
        </el-table-column>
        <el-table-column label="出入库方式" prop="typeName"></el-table-column>
        <el-table-column label="出入数量" prop="stock"></el-table-column>
        <el-table-column label="进价" prop="purchasePrice"></el-table-column>
        <el-table-column label="零售价" prop="retailPrice"></el-table-column>
        <el-table-column label="进货总价" prop="purchasePriceSum"></el-table-column>
        <el-table-column label="零售总价" prop="retailPriceSum"></el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getAccountBook, detailList } from '@/api/inventory/inventory'
import { listStorage } from '@/api/pharmacy/storage'
import { listData } from '@/api/system/dict/data'
import selectTable from '@/components/selectTable/selectTable.vue'
export default {
  components: {
    selectTable
  },
  data() {
    return {
      form: {
        pharmacyId: localStorage.getItem('pharmacyId'),
        drugsId: '',
        drugsName: '',
        drugsType: '',
        endTime: '',
        startTime: '',
        type: [],
        pageNum: 1,
        pageSize: 10
      },
      date: [],
      prods: [{
      	drugsName: ''
      }],
      tableData: [],
      markArr: [],
      types: [],
      currentPage: 1,
      total: 0,
      unitArr: []
    };
  },
  created() {
    this.getDicts("unit").then((response) => {
      this.unitArr = response.data;
    })
  },
  mounted() {
  	listData({
  		pageNum: 1,
			pageSize: 1000,
			dictType: 'acc_type'
  	}).then(res => {
  		this.types = res.rows
  	})
    listStorage({
    	state: 1
    }).then((response) => {
      this.markArr = response.rows;
    })
  },
  methods: {
  	selectChange (data) {
      var index = data.index
      var r = data.data
      this.$set(this.prods, index, r)
      detailList({
    		pharmacyId: localStorage.getItem('pharmacyId'),
    		drugsName: this.prods[0].drugsName
    	}).then(res => {
    		if (res.code == 200) {
    			var prod = res.rows.find(v => v.priceId == r.priceId && v.specsId == r.specsId)
    			if (prod) {
            var type = this.types.find(v => v.dictValue == prod.accType)
	    			this.$set(this.prods[index], 'type', type ? type.dictLabel : '--')
    			} else {
    				this.$set(this.prods[index], 'type', '--')
    			}
    		}
     	})
      this.tableData = []
      this.total = 0
      this.getDataList()
    },
    getDataList () {
    	if (!this.prods[0].drugsName) {
    		return this.$message.warning('请输入药品名称')
    	}
    	var form = {
    		type: this.form.type,
      	pharmacyId: localStorage.getItem('pharmacyId'),
      	drugsName: this.prods[0].name,
      	drugsId: this.prods[0].drugsId,
      	specsId: this.prods[0].specsId,
      	priceId: this.prods[0].priceId,
      	pageNum: this.page,
      	pageSize: 10
      }
    	var startTime = ''
    	var endTime = ''
    	if (this.date && this.date.length) {
        form.startTime = this.date[0]
        form.endTime = this.date[1]
      }
      getAccountBook(form).then(res => {
      	if (res.code == 200) {
      		this.tableData = res.rows
      		this.total = res.total
      	}
      })
    },
    search () {
      this.page = 1
      this.getDataList()
    },
    clear () {
      this.form = {
        pharmacyId: localStorage.getItem('pharmacyId'),
        drugsId: '',
        drugsName: '',
        drugsType: '',
        endTime: '',
        startTime: '',
        type: [],
        pageNum: 1,
        pageSize: 10
      }
      this.date = []
      if (this.prods.length && this.prods[0].drugsName) {
        this.getDataList()
      }
      /*this.tableData = []
      this.total = 0
      this.prods = [{
        drugsName: ''
      }]*/
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style scoped lang="scss">
.wrap {
  .content {
    padding-top: 0;
  }
  .page {
    text-align: center;
    margin-top: 20px;
  }
  .tools {
    margin-bottom: 20px;
    .el-date-editor {
      width: 220px;
      margin-right: 10px;
    }
    .el-select {
      width: 140px;
      margin-right: 10px;
    }
    .el-input {
      width: 140px;
      margin-right: 10px;
    }
  }
}
</style>
