<template>
  <page-layer>
    <template #header>
      <el-input size="small" placeholder="在此输入住院号" @keyup.enter="query" v-model="inpatientNo" clearable prefix-icon="Search" style="width: 300px">
        <template #prepend>住院号</template>
      </el-input>
      <el-input size="small" placeholder="在此输入医嘱号" @keyup.enter="query" v-model="actOrderNo" clearable prefix-icon="Search" style="width: 300px">
        <template #prepend>医嘱号</template>
      </el-input>
      <el-select size="small" v-model="auditFlag" @change="query" placeholder="审核状态">
        <el-option v-for="item in yzZhuangTai" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-button type="primary" icon="Search" @click="query">查询</el-button>
      <el-button type="primary" icon="RefreshLeft" @click="query">刷新数据</el-button>
    </template>
    <template #aside>
      <el-table :height="tableHeight" stripe highlight-current-row :data="cptTable" style="text-align: center" @row-click="clickRow" empty-text="暂无申请">
        <el-table-column label="住院号" width="60" prop="inpatientNo"> </el-table-column>
        <el-table-column label="医嘱号" prop="actOrderNo"></el-table-column>
        <el-table-column label="医嘱名称" show-overflow-tooltip prop="orderName"> </el-table-column>
        <el-table-column label="审核状态">
          <template #default="scope">
            <span v-html="yZauditStatus(scope.row.auditFlag)"></span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @current-change="handleCurrentChange"
          :page-size="queryTerm.pageSize"
          :current-page="queryTerm.currentPage"
          background
          small
          style="background-color: white"
          layout="prev, pager, next,total"
          :total="queryTerm.total"
      >
      </el-pagination>
    </template>
    <template #main>
      <el-alert title="申请修改的数据为空，默认不会修改。" type="success" effect="dark" close-text="了解"></el-alert>
      <el-descriptions border title="原数据">
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-user"></i>
            患者姓名
          </template>
          {{ dataDetails.patientName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-s-order"></i>
            住院号
          </template>
          {{ dataDetails.inpatientNo }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-s-order"></i>
            医嘱号
          </template>
          {{ dataDetails.actOrderNo }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-s-claim"></i>
            医嘱名称
          </template>
          {{ dataDetails.orderName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-house"></i>
            病房
          </template>
          {{ dataDetails.wardCode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-tickets"></i>
            频次
          </template>
          {{ dataDetails.frequCode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-time"></i>
            开始时间
          </template>
          {{ dataDetails.startTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-time"></i>
            结束时间
          </template>
          {{ dataDetails.endTime }}
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-descriptions title="申请修改数据" border direction="vertical">
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-user"></i>
            申请人
          </template>
          {{ dataDetails.proposerName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-time"></i>
            申请时间
          </template>
          {{ dataDetails.proposeTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-s-claim"></i>
            申请备注
          </template>
          {{ dataDetails.proposeRemark }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-time"></i>
            开始时间
          </template>
          {{ dataDetails.newStartTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-time"></i>
            结束时间
          </template>
          {{ dataDetails.newEndTime }}
        </el-descriptions-item>
      </el-descriptions>
      <br />
      <el-row v-if="dataDetails.actOrderNo">
        <el-col :span="2">
          <el-button type="success" size="small" icon="Check" @click="tongGuo">通过</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="danger" size="small" icon="Check" @click="boHui">驳回</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="warning" size="small" icon="RefreshLeft" @click="huiChe">撤回</el-button>
        </el-col>
      </el-row>
    </template>
  </page-layer>
</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import store from '@/store'
import { yzZhuangTai } from '@/data/index'
import { yZauditStatus } from '@/utils/computed'
import { chaKanZhuangTai, shenHePanDuan, shenHeXinXi } from '@/api/yz-data-mod/yz-xiugai-shenhe'
import { computed, onActivated } from 'vue'
import { ElMessageBox, ElNotification } from 'element-plus'
import PageLayer from "@/layout/PageLayer";
export default {
  name: 'YzActOrderModifyVerify',
  components: {PageLayer},
  setup() {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 70

    const actOrderNo = ref('')
    const inpatientNo = ref('')
    const auditFlag = ref('1')

    const handleCurrentChange = (val) => {
      queryTerm.currentPage = val
      tijiao()
    }

    const queryTerm = reactive({
      actOrderNo: '',
      inpatientNo: '',
      auditFlag: 1,
      currentPage: 1,
      pageSize: 30,
      total: 0,
    })

    const cptTable = computed(() => {
      return dataTable.value.filter((item) => {
        return item.actOrderNo.toString().indexOf(actOrderNo.value) > -1
      })
    })

    const tijiao = () => {
      dataDetails.value = []
      chaKanZhuangTai(queryTerm)
        .then((res) => {
          dataTable.value = res.records
          queryTerm.total = res.total
        })
        .catch(() => {
          dataTable.value = []
        })
    }

    /**
     * 用来存放右边 表格的数据
     */
    const dataTable = ref([])
    /**
     * 用来 存放点击表格后获取的具体信息
     */
    const dataDetails = ref([])

    //点击 表格时触发
    const clickRow = (row) => {
      shenHeXinXi(row.actOrderNo).then((res) => {
        dataDetails.value = res
      })
    }

    const query = () => {
      queryTerm.actOrderNo = actOrderNo.value
      queryTerm.inpatientNo = inpatientNo.value
      queryTerm.auditFlag = auditFlag.value
      tijiao()
    }

    /**
     * 页面初始化化就 执行查询未提交的信息
     * 以及判断是否有超过五条的数据
     */
    onActivated(() => {
      tijiao()
    })

    const tongGuo = () => {
      switch (dataDetails.value.auditFlag) {
        case 2:
          return ElNotification({
            type: 'error',
            title: '失败',
            message: '审核已通过请勿重复点击 （＃￣～￣＃）',
          })
        case 3:
          return ElNotification({
            type: 'error',
            title: '失败',
            message: '审核已驳回请重新申请 （＃￣～￣＃）',
          })
        case 4:
          return ElNotification({
            type: 'error',
            title: '失败',
            message: '审核已回撤请重新申请 （＃￣～￣＃）',
          })
      }

      ElMessageBox.confirm('请认真核对是否通过审核', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
      })
        .then(() => {
          dataDetails.value.auditRemark = '审核通过  ㄟ(≧◇≦)ㄏ'
          shenHePanDuan(2, dataDetails.value.actOrderNo, dataDetails.value.auditRemark)
            .then((res) => {
              dataDetails.value = []
              tijiao()
            })
            .catch(() => {
              tijiao()
            })
        })
        .catch(() => {})
    }

    const boHui = () => {
      switch (dataDetails.value.auditFlag) {
        case 3:
          return ElNotification({
            type: 'error',
            message: '审核已驳回请勿重复点击  (* ￣︿￣)',
            title: '失败',
          })
        case 2:
          return ElNotification({
            type: 'error',
            dangerouslyUseHTMLString: true,
            message: '<p>审核已通过无法驳回</p><p>霸特您能撤回 ╮(﹀_﹀”)╭</p>',
            title: '失败',
          })
        case 4:
          return ElNotification({
            type: 'error',
            title: '失败',
            message: '审核已回撤请重新申请 （＃￣～￣＃）',
          })
      }

      ElMessageBox.prompt('审核备注,必填', '驳回原因', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
        inputPattern: /\S/,
        inputErrorMessage: '为什么驳回 ヽ（≧□≦）ノ',
      })
        .then(({ value }) => {
          dataDetails.value.auditRemark = value
          shenHePanDuan(3, dataDetails.value.actOrderNo, dataDetails.value.auditRemark).then((res) => {
            dataDetails.value = []
            tijiao()
          })
        })
        .catch(() => {})
    }

    const huiChe = () => {
      switch (dataDetails.value.auditFlag) {
        case 1:
          return ElNotification({
            type: 'error',
            title: '失败',
            message: '都没有审核回撤什么 o_O???',
          })
        case 3:
          return ElNotification({
            type: 'error',
            message: '数据已经驳回无法回撤 ╮(﹀_﹀”)╭',
            title: '失败',
          })
        case 4:
          return ElNotification({
            type: 'error',
            message: '近期已回撤无法再次回撤 ╮(﹀_﹀”)╭',
            title: '失败',
          })
      }

      ElMessageBox.prompt('是否回撤到原数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        inputPattern: /\S/,
        inputErrorMessage: '回撤原因 ヽ（≧□≦）ノ',
      })
        .then(({ value }) => {
          dataDetails.value.auditRemark = value
          shenHePanDuan(4, dataDetails.value.actOrderNo, dataDetails.value.auditRemark).then((res) => {
            dataDetails.value = []
            query()
          })
        })
        .catch(() => {})
    }

    return {
      actOrderNo,
      inpatientNo,
      query,
      tableHeight,
      queryTerm,
      handleCurrentChange,
      cptTable,
      clickRow,
      dataDetails,
      yZauditStatus,
      yzZhuangTai,
      auditFlag,
      tongGuo,
      huiChe,
      boHui,
    }
  },
}
</script>

<style></style>
