<template>
  <div class="layout_container">
    <header>
      <cy-date-range v-model="queryParam.dateRange" />
      <el-select v-model="queryParam.flag" style="width: 120px">
        <el-option label="全部" :value="-1" />
        <el-option label="待审核" :value="0" />
        <el-option label="通过" :value="1" />
        <el-option label="不通过" :value="2" />
      </el-select>
      <el-button icon="Search" @click="queryData()" type="primary"
        >查询
      </el-button>
      <el-button icon="Download" @click="download" type="primary"
        >导出
      </el-button>
    </header>
    <div class="layout_main layout_el-table">
      <xc-table :data="queryParam" @current-change="currentPage" open-paging>
        <el-table-column label="住院号" prop="patNo" width="90" />
        <el-table-column label="次数" prop="times" width="90" />
        <el-table-column label="申请人" prop="applicantName" width="90" />
        <el-table-column label="申请时间" prop="applicationTime" width="130" />
        <el-table-column label="申请权限" prop="unlockJson" width="130" />
        <el-table-column label="申请编辑" prop="effectiveTime" width="130" />
        <el-table-column
          label="申请备注"
          prop="requestRemarks"
          width="450"
          show-overflow-tooltip
          show-tooltip-when-overflow
        />
        <el-table-column label="状态" prop="state" width="100">
          <template #default="{ row }">
            <component :is="stateHtml(row.state)" />
          </template>
        </el-table-column>
        <el-table-column label="审核人" prop="approveName" width="90" />
        <el-table-column label="审核时间" prop="reviewTime" width="130" />
        <el-table-column label="审核备注" prop="reviewNotes" width="130" />

        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button @click="approved(row)">通过</el-button>
            <el-button @click="refuseToPass(row)">拒绝</el-button>
          </template>
        </el-table-column>
      </xc-table>
    </div>
  </div>
</template>

<script setup>
import {
  getApplicationData,
  reviewMedicalRecordsToUnlock,
} from "@/api/zhu-yuan-yi-sheng/emr-control-rule";
import XcTable from "@/components/xiao-chan/xc-table/XcTable.vue";
import { ElMessageBox, ElTag } from "element-plus";
import { clone } from "@/utils/clone";
import { downloadExcel } from "@/utils/excel";
import CyDateRange from "@/components/cy/date-range/CyDateRange.vue";

const queryParam = ref({
  dateRange: [],
  flag: 0,
  currentPage: 1,
  pageSize: 30,
  total: 0,
  data: [],
});

const queryData = (total = 0) => {
  queryParam.value.total = total;
  getApplicationData(queryParam.value).then(res => {
    queryParam.value.data = res.records;
    queryParam.value.total = res.total;
  });
};

const currentPage = val => {
  queryParam.value.currentPage = val;
  queryData(queryParam.value.total);
};

const download = () => {
  const tempData = {
    param: queryParam.value,
    url: "/emrControlRule/exportExcelUnlock",
    fileName: "质控解锁导出",
  };
  setTimeout(() => {
    downloadExcel(tempData);
  });
};

const approved = row => {
  toExamine(row, 1);
};

const refuseToPass = row => {
  ElMessageBox.prompt("审核备注", "提示", {
    inputPattern: /\S/,
    inputErrorMessage: "审核备注不能为空",
  }).then(({ value }) => {
    toExamine(row, 2, value);
  });
};

const toExamine = (data, state, reviewNotes = "审核通过") => {
  let temp = clone(data);
  temp.state = state;
  temp.reviewNotes = reviewNotes;
  reviewMedicalRecordsToUnlock(temp).then(() => {
    queryData();
  });
};

onMounted(() => {
  queryData();
});

const stateHtml = val => {
  switch (val) {
    case 0:
      return h(
        ElTag,
        {
          type: "info",
        },
        { default: () => "待审核" }
      );
    case 1:
      return h(
        ElTag,
        {
          type: "success",
        },
        { default: () => "审核通过" }
      );
    case 2:
      return h(
        ElTag,
        {
          type: "danger",
        },
        { default: () => "审核拒绝" }
      );
    case 3:
      return h(
        ElTag,
        {
          type: "warning",
        },
        { default: () => "申请替换" }
      );
  }
};
</script>
