<script>
import {dispatchList} from '@/api/pda';
import dayjs from 'dayjs';
import PrintContainer from './printContainer.vue';
import ScanPanel from '@/views/pda/dispatch/scanPanel.vue';

export default {
  name: 'pda-dispatch',
  components: {ScanPanel, PrintContainer},
  data() {
    return {
      queryParams: {
        yfId: window.localStorage.getItem('pharmacyId'),
        pageNum: 1,
        pageSize: 10,
        date: [],
        name: '',
        expressCode: '',
        orderNo: '',
        preNo: '',
        thread: '',
      },
      // 遮罩层
      showSearch: true,
      // 显示搜索条件
      loading: true,
      dataset: [],
      total: 0,

      deployStateArr: [
        {name: '已审核', id: 110, key: 'audited'},
        // { name: "已审核不通过", id: 120, key: "---" },
        {name: '已调配', id: 130, key: 'allocated'},
        {name: '已复核', id: 140, key: 'reviewed'},
        {name: '已浸泡', id: 150, key: 'soaked'},
        {name: '已煎煮', id: 160, key: 'cooked'},
        {name: '已先煎', id: 161, key: 'preCooked'},
        {name: '已开始煎煮', id: 162, key: 'startedCooking'},
        {name: '已后下', id: 163, key: 'lowered'},
        {name: '已结束煎煮', id: 164, key: 'finishedCooking'},
        {name: '已开始浓缩', id: 165, key: 'startedConcentration'},
        {name: '已结束浓缩', id: 166, key: 'finishedConcentration'},
        {name: '已打包', id: 170, key: 'packaged'},
        {name: '已打包复核', id: 195, key: 'packReviewed'},
        {name: '已上架', id: 171, key: 'grounding'},
        {name: '已发药', id: 175, key: 'send'},
        // { name: "煎药已作废", id: 999, key: "---" },
      ],

      showScanPanel: false,
      showPrint: false,
      showPrintId: '',
      showPrintExpressCom: false,
    };
  },
  created() {
    this.resetQuery();
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm');
      this.queryParams.date = [
        dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
      ];
      this.handleQuery();
    },
    getList() {
      this.loading = true;
      const model = Object.assign({}, this.queryParams);
      dispatchList(model).then((response) => {
        this.dataset = response.rows;
        this.total = response.total;
        this.loading = false;
      }, () => {
        this.loading = false;
      });
    },
    handlePrint(row) {
      this.showPrint = true;
      this.showPrintId = row.id;
      this.showPrintExpressCom = row.expressExecutor === '顺丰';
    },
    handlePreview(row) {

    },
    openScanPanel() {
      this.showScanPanel = true;
      this.$nextTick(() => {
        const $scan = this.$refs.scan;
        if ($scan && typeof $scan.open === 'function') return $scan.open();
      });
    },
    closeScanPanel(done) {
      this.$nextTick(() => {
        const $scan = this.$refs.scan;
        if ($scan && typeof $scan.close === 'function') return $scan.close();
      });
      done();
    },
  },
};
</script>

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <div class="query-box">
        <div class="query-box__left">
          <el-form-item label="时间" prop="date">
            <el-date-picker style="width:340px" v-model="queryParams.date"
                            type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
                            start-placeholder="开始时间" end-placeholder="结束时间"
                            size="small" clearable
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="溯源状态" prop="thread">
            <el-select style="width:160px" v-model="queryParams.thread" placeholder="请选择溯源状态" clearable>
              <el-option
                v-for="item in deployStateArr" :key="item.id"
                :value="item.id" :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单号" prop="orderNo">
            <el-input
              v-model="queryParams.orderNo"
              class="defwidth"
              placeholder="请输入订单号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="处方号" prop="preNo">
            <el-input
              style="width:160px"
              v-model="queryParams.preNo"
              placeholder="请输入处方号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="患者" prop="name">
            <el-input
              style="width:160px"
              v-model="queryParams.name"
              placeholder="请输入患者姓名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="物流单号" prop="expressCode">
            <el-input
              style="width:160px"
              v-model="queryParams.expressCode"
              placeholder="请输入物流单号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </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 icon="el-icon-printer" size="mini" @click="openScanPanel">扫码枪</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>

    <el-table v-loading="loading" :data="dataset" size="mini" border>
      <el-table-column type="index" width="55" align="center" label="序号"/>
      <el-table-column label="系统id" align="center" prop="id"/>
      <el-table-column label="订单号" align="center" prop="orderNo"/>
      <el-table-column label="处方号" align="center" prop="preNo"/>
      <el-table-column label="医疗机构" align="center" prop="hospitalName"/>
      <el-table-column label="下单时间" align="center" prop="printTime"/>
      <el-table-column label="患者姓名" align="center" prop="name"/>
      <el-table-column label="收件人" align="center" prop="consignee"/>
      <el-table-column label="收件电话" align="center" prop="contactNumber"/>
      <el-table-column label="收件地址" align="center" prop="address"/>
      <el-table-column label="是否代煎" align="center" prop="isBehalf">
        <template slot-scope="scope">{{ scope.row.isBehalf == 1 ? '是' : '否' }}</template>
      </el-table-column>
      <el-table-column label="快递结算" align="center" prop="expressSettlement"/>
      <el-table-column label="溯源状态" align="center" prop="thread">
        <template slot-scope="scope">
          <dict-tag :options="deployStateArr" :value="scope.row.thread"/>
        </template>
      </el-table-column>
      <el-table-column label="配送公司" align="center" prop="expressExecutor"/>
      <el-table-column label="物流单号" align="center" prop="expressCode"/>
      <el-table-column label="打印状态" align="center" prop="isPrint">
        <template slot-scope="scope">{{ scope.row.isPrint == 0 ? '未打印' : '已打印' }}</template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120" fixed="right">
        <template slot-scope="scope">
          <el-button style="width: 40px;" type="primary" size="mini" @click="handlePrint(scope.row)">打印</el-button>
          <el-button style="width: 40px;" type="default" size="mini" @click="handlePreview(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="打印预览" :visible.sync="showPrint" @closed="showPrintId = ''">
      <print-container v-if="showPrintId" :id="showPrintId"
                       :load-express="showPrintExpressCom"
      />
    </el-dialog>

    <el-dialog title="扫条码打印顺丰快递单" :visible.sync="showScanPanel" :before-close="closeScanPanel" width="60vim">
      <scan-panel ref="scan"></scan-panel>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>
