<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.drugsType" size="mini" placeholder="药品分类">
        <el-option v-for="dict in drugsTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
      </el-select>
      <el-select v-model="form.type" collapse-tags multiple size="mini" placeholder="出入库方式(多选)">
        <el-option v-for="item in markArr" :key="item.id" :value="item.name" :label="item.name"></el-option>
      </el-select>
      <el-input size="mini" v-model="form.drugsName" placeholder="药品名称"></el-input>
      <el-button size="mini" type="primary" @click="search">搜索</el-button>
      <el-button size="mini" @click="clear">清空</el-button>
      <el-button size="mini" type="primary" @click="exportExcel">导出</el-button>
      <el-button size="mini" type="primary" @click="print">打印</el-button>
  	</div>
    <div class="content">
      <el-table :data="tableData" size="mini" style="width: 100%" show-summary>
        <el-table-column label="序号" width="60">
          <template slot-scope="scope">{{scope.$index+1+(page-1)*10}}</template>
        </el-table-column>
        <el-table-column label="药品名称" prop="drugsName"></el-table-column>
        <el-table-column label="药品规格" prop="specsName"></el-table-column>
        <el-table-column label="单位" prop="unit"></el-table-column>
        <el-table-column label="产地" prop="placeName"></el-table-column>
        <el-table-column label="库存数量" prop="stock">
          <template slot-scope="scope">{{(scope.row.stock&&scope.row.stock).toFixed(4)}}</template>
        </el-table-column>
        <el-table-column label="入库数量" prop="warehousingNum"></el-table-column>
        <el-table-column label="入库零售金额" prop="warehousingRetail"></el-table-column>
        <el-table-column label="入库批发金额" prop="warehousingPurchase"></el-table-column>
        <el-table-column label="出库数量" prop="warehouseNum"></el-table-column>
        <el-table-column label="出库零售金额" prop="warehouseRetail"></el-table-column>
        <el-table-column label="出库批发金额" prop="warehousePurchase"></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 { getWarehousingAndWarehouse, getWarehousingAndWarehouseExport } from '@/api/inventory/inventory'
import { listStorage } from '@/api/pharmacy/storage'
export default {
  data() {
    return {
      form: {
        pharmacyId: localStorage.getItem('pharmacyId'),
        drugsId: '',
        drugsName: '',
        drugsType: '',
        endTime: '',
        startTime: '',
        type: [],
        pageNum: 1,
        pageSize: 10
      },
      page: 1,
      date: [],
      tableData: [],
      markArr: [],
      drugsTypeOptions: [],
      currentPage: 1,
      total: 0
    };
  },
  created() {},
  mounted() {
    this.getDicts("drugs_type").then((response) => {
      this.drugsTypeOptions = response.data
    })
    listStorage().then((response) => {
      this.markArr = response.rows;
    })
    this.init()
  },
  methods: {
    init () {
      this.getDataList()
    },
    getDataList () {
      var form = {
        pharmacyId: this.form.pharmacyId,
        drugsName: this.form.drugsName,
        drugsType: this.form.drugsType,
        type: this.form.type,
        pageNum: this.page,
        pageSize: 10
      }
      if (this.date && this.date.length) {
        form.startTime = this.date[0]
        form.endTime = this.date[1]
      }
      getWarehousingAndWarehouse(form).then(res => {
        if (res.code == 200) {
          this.tableData = res.rows
          this.total = res.total
        }
      })
    },
    search () {
      this.page = 1
      this.form.drugsName = decodeURIComponent(this.form.drugsName)
      this.getDataList()
    },
    clear () {
      this.form = {
        pharmacyId: localStorage.getItem('pharmacyId'),
        drugsId: '',
        drugsName: '',
        drugsType: '',
        endTime: '',
        startTime: '',
        type: []
      }
      this.date = []
      this.page = 1
      this.getDataList()
    },
    exportExcel () {
      var form = {
        pharmacyId: this.form.pharmacyId,
        drugsName: this.form.drugsName,
        drugsType: this.form.drugsType,
        type: this.form.type
      }
      if (this.date && this.date.length) {
        form.startTime = this.date[0]
        form.endTime = this.date[1]
      }
      getWarehousingAndWarehouseExport(form).then(res => {
        if (res.code == 200) {
          this.download(res.msg)
        }
      })
    },
    print () {},
    handleCurrentChange(val) {
      this.page = val
      this.getDataList()
    }
  }
};
</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>
