<script>
import dayjs from 'dayjs';
import {listMedicalMechanism} from '@/api/medical/mechanism';
import {listPrescriptionReception} from '@/api/prescription/prescriptionCore';
import Edit from './edit.vue';

export default {
  name: 'PrescriptionReception',
  components: {Edit},
  data() {
    const now = dayjs();
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,

        appId: null,
        yljgId: '',
        name: '',
        preNo: '',
        isReceive: '',
        prescriptionTime: [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: [],
      dosageFormOptions: [],
      receptionStateArr: [
        {name: '已接收', id: 1},
        {name: '未接收', id: 0},
      ],
      loading: false,
      total: 0,
      prescriptionCoreList: [],

      recipeEditMode: 'preview',
      recipeEditOpen: false,
      recipeEditShow: false,
      recipeEditId: null,
    };
  },
  created() {
    this.handleQuery();
    this.getListMedicalMechanism();
    this.getDicts('dosage_form').then((response) => { this.dosageFormOptions = response.data; });
  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm('queryForm');
      const now = dayjs();
      this.queryParams.prescriptionTime = [now.startOf('day').format('YYYY-MM-DD HH:mm:ss'), now.endOf('day').format('YYYY-MM-DD HH:mm:ss')];
      this.handleQuery();
    },
    getListMedicalMechanism() {
      listMedicalMechanism().then((res) => { this.listMedicalMechanismArr = res.data; });
    },
    getList() {
      this.loading = true;
      const {prescriptionTime, ...form} = this.queryParams;
      if (Array.isArray(prescriptionTime) && prescriptionTime.length) {
        form.startTime = prescriptionTime[0];
        form.endTime = prescriptionTime[1];
      } else {
        form.startTime = '';
        form.endTime = '';
      }
      listPrescriptionReception(form).then((response) => {
        this.prescriptionCoreList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleDetail(row) {
      this.recipeEditId = row.id;
      this.recipeEditShow = true;
      this.recipeEditOpen = true;
      this.recipeEditMode = +row.isReceive !== 1 ? 'reception' : 'preview';
    },
  },
};
</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="请选择医疗机构" clearable>
              <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="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="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="prescriptionTime">
            <el-date-picker style="width: 340px" v-model="queryParams.prescriptionTime"
                            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="isReceive">
            <el-select style="width: 160px" v-model="queryParams.isReceive" placeholder="接收状态" clearable>
              <el-option v-for="item in receptionStateArr" :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-form-item>
        </div>
      </div>
    </el-form>
    <el-table v-loading="loading" :data="prescriptionCoreList"
              border size="mini">
      <el-table-column type="index" width="55" align="center" label="序号"/>
      <el-table-column label="处方号" align="center" prop="preNo"/>
      <el-table-column label="医疗机构" align="center" prop="hospitalName" show-overflow-tooltip/>
      <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="preMzZy">
        <template slot-scope="scope">{{ {1: '门诊', 2: '住院'}[scope.row.preMzZy] }}</template>
      </el-table-column>
      <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="number"/>
      <el-table-column label="剂型" min-width="100" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dosageFormOptions" :value="scope.row.dosageForm"/>
        </template>
      </el-table-column>
      <el-table-column label="处方用法" align="center" prop="prescriptionUsage"/>
      <el-table-column label="服药频次" align="center" prop="frequency"/>
      <el-table-column label="包数" align="center" prop="packageNumber"/>
      <el-table-column label="浓煎量" align="center" prop="concentration"/>
      <el-table-column label="收件人" align="center" prop="consignee"/>
      <el-table-column label="收件电话" align="center" prop="contactNumber" width="100" show-overflow-tooltip/>
      <el-table-column label="收件地址" align="center" prop="address" show-overflow-tooltip/>
      <el-table-column label="接收状态" align="center" prop="isReceive">
        <template slot-scope="scope">{{ {1: '已接收', 0: '未接收'}[scope.row.isReceive] }}</template>
      </el-table-column>
      <el-table-column label="接收时间" align="center" prop="receiveTime"/>
      <el-table-column label="操作" fixed="right" width="160" align="center">
        <template slot-scope="scope">
          <el-button v-hasPermi="['rescription:prescriptionReception:reception']" v-if="scope.row.isReceive === '0'" type="primary" size="mini" @click="handleDetail(scope.row)">接收</el-button>
          <el-button v-hasPermi="['rescription:prescriptionReception:query']" v-else size="mini" @click="handleDetail(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"
    ></pagination>

    <el-dialog :fullscreen="true" title="接收处方详情" :visible.sync="recipeEditOpen"
               custom-class="prescription-core-edit-container" width="1180px" size="mini"
               append-to-body destroy-on-close @closed="recipeEditId = null;recipeEditShow = false">
      <edit v-if="recipeEditShow" :id="recipeEditId" :mode="recipeEditMode" :editable="false"
            @close="recipeEditOpen = false;$event && getList()"></edit>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>
