<template>
  <div class="wrap app-container">
  	<div class="tools">
  		<el-select v-model="form.type" size="mini" placeholder="处方类型">
        <el-option label="中药处方" value="1"></el-option>
        <el-option label="中药制剂" value="2"></el-option>
      </el-select>
	  	<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.preMzZy" size="mini" placeholder="发药类型">
        <el-option label="门诊" value="1"></el-option>
        <el-option label="住院" value="2"></el-option>
      </el-select>
	    <el-button size="mini" type="primary" @click="search">搜索</el-button>
	    <el-button size="mini" type="primary" @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="department"></el-table-column>
       <!--  <el-table-column label="药品名称" prop="matName"></el-table-column>
        <el-table-column label="发药类型">
          <template slot-scope="scope">{{scope.row.preMzZy==1?'门诊':'住院'}}</template>
        </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="difference"></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 { fySummary, fySummaryExport } from '@/api/inventory/inventory'
export default {
  data() {
    return {
      currentPage: 1,
      page: 1,
      form: {
        pharmacyId: localStorage.getItem('pharmacyId'),
        type: '',
        preMzZy: ''
      },
      total: 0,
      date: '',
      drugsTypeOptions: [],
    	date: [],
    	tableData: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
  	init () {
      this.getDataList()
    },
    getDataList () {
      var form = {
        pharmacyId: this.form.pharmacyId,
        type: this.form.type,
        preMzZy: this.form.preMzZy,
        pageNum: this.page,
        pageSize: 10
      }
      if (this.date && this.date.length) {
        form.startTime = this.date[0]
        form.endTime = this.date[1]
      }
      fySummary(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'),
        type: '',
        preMzZy: ''
      }
      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]
      }
      fySummaryExport(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>