<script>
import {listMedicalMechanism} from '@/api/medical/mechanism';
import dayjs from 'dayjs';
import {getByMechanismId, listDept} from '@/api/medical/dept';
import {exportTransportReport, getTransportReport} from '@/api/inventory/inventory';
import {downloadBlob} from '@/utils/zipdownload';

export default {
  name: 'report-transport',
  data() {
    const now = dayjs();
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,

        appId: null,
        yljgId: '',
        deptId: '',
        isBehalf: '',
        expressExecutor: '',
        orderTime: [now.startOf('day').format('YYYY-MM-DD HH:mm:ss'), now.endOf('day').format('YYYY-MM-DD HH:mm:ss')],
        yfId: window.localStorage.getItem('pharmacyId'),
      },

      listMedicalMechanismArr: [],
      listDeptArr: [],
      isBehalfArr: [
        {name: '否', id: 0},
        {name: '是', id: 1},
      ],
      expressExecutorArr: [
        {name: '送医院', id: '送医院'},
        {name: '顺丰', id: '顺丰'},
        {name: '其他', id: '其他'},
      ],
      loading: false,
      exporting: false,
      total: 0,
      dataset: [],
    };
  },
  created() {
    this.getListMedicalMechanism().then(first => {
      if (!first) { throw {message: `暂无医疗机构可选，无法查询！`};}
      return first.id;
    }).then(id => {
      this.getListDeptArr(id);
      this.queryParams.yljgId = id;
      return this.handleQuery();
    }).catch(error => { this.$message.error(error.message); });
  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm('queryForm');
      const now = dayjs();
      this.queryParams.orderTime = [now.startOf('day').format('YYYY-MM-DD HH:mm:ss'), now.endOf('day').format('YYYY-MM-DD HH:mm:ss')];
      this.handleMechanismId();
      this.handleQuery();
    },
    handleMechanismId(e) {
      this.queryParams.deptId = '';
      this.getListDeptArr(e);
    },
    getQueryModel() {
      const {orderTime, ...form} = this.queryParams;
      if (Array.isArray(orderTime) && orderTime.length) {
        form.startTime = orderTime[0];
        form.endTime = orderTime[1];
      }
      if (form.yljgId) { form.hospitalName = this.listMedicalMechanismArr.find(item => item.id === form.yljgId).name; }
      if (form.deptId) { form.department = this.listDeptArr.find(item => item.id === form.deptId).name; }
      return form;
    },
    async getListMedicalMechanism() {
      this.listMedicalMechanismArr = await listMedicalMechanism().then((res) => res.data);
      return this.listMedicalMechanismArr[0];
    },
    async getListDeptArr(id) {
      this.listDeptArr = id ? await getByMechanismId(id).then(res => res.data) : await listDept().then(res => res.rows);
    },
    async getList() {
      this.loading = true;
      const form = this.getQueryModel();
      try {
        const {rows, total} = await getTransportReport(form);
        this.dataset = rows;
        this.total = total;
      } catch (e) { }
      this.loading = false;
    },
    async exportData() {
      const form = this.getQueryModel();
      this.exporting = true;
      try {
        const data = await exportTransportReport(form);
        await downloadBlob(data);
        this.$message.success(`导出 ${data.name} 成功`);
      } catch (error) {}
      this.exporting = false;
    },
  },
};
</script>

<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" inline label-suffix="68px">
      <div class="query-box">
        <div class="query-box__left">
          <el-form-item label="" prop="yljgId">
            <el-select style="width: 160px;" v-model="queryParams.yljgId" placeholder="请选择医疗机构"
                       @change="handleMechanismId">
              <el-option v-for="item in listMedicalMechanismArr" :key="item.id"
                         :label="item.name" :value="item.id" :disabled="+item.state!==1"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="deptId">
            <el-select style="width: 160px;" v-model="queryParams.deptId" placeholder="请选择科室" clearable>
              <el-option v-for="item in listDeptArr" :key="item.id"
                         :label="item.name" :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="orderTime">
            <el-date-picker style="width: 340px" v-model="queryParams.orderTime"
                            start-placeholder="开始时间" end-placeholder="结束时间"
                            clearable size="small"
                            type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="" prop="isBehalf">
            <el-select style="width: 160px" v-model="queryParams.isBehalf" placeholder="是否代煎" clearable>
              <el-option v-for="item in isBehalfArr" :key="item.id"
                         :label="item.name" :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="expressExecutor">
            <el-select style="width: 160px" v-model="queryParams.expressExecutor" placeholder="配送方式" clearable>
              <el-option v-for="item in expressExecutorArr" :key="item.id"
                         :label="item.name" :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button size="mini" type="primary" v-hasPermi="['inventory:transport:export']" @click="exportData">导出</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <el-table v-loading="loading" :data="dataset"
              border size="mini">
      <el-table-column type="index" width="55" align="center" label="序号"/>
<!--      <el-table-column label="医疗机构" align="center" prop="hospitalName" show-overflow-tooltip/>-->
      <el-table-column label="接方日期" align="center" prop="createTime"/>
      <el-table-column label="处方号" align="center" prop="preNo"/>
      <el-table-column label="患者" align="center" prop="name"/>
      <el-table-column label="年龄" align="center" prop="age">
        <template slot-scope="scope">{{ scope.row.age }}{{ scope.row.ageUnit || '岁' }}</template>
      </el-table-column>
      <el-table-column label="性别" align="center" prop="sex"/>
      <el-table-column label="剂数" align="center" prop="number"/>
      <el-table-column label="是否代煎" align="center" prop="isBehalf">
        <template slot-scope="scope">{{ {0: '否', 1: '是'}[scope.row.isBehalf] }}</template>
      </el-table-column>
      <el-table-column label="配送方式" align="center" prop="expressExecutor"/>
      <el-table-column label="备注" align="center" prop="entrust" show-overflow-tooltip/>
    </el-table>
    <pagination v-show="total > 0" :total="total"
                :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"
    ></pagination>
  </div>
</template>

<style scoped lang="scss">

</style>
