<template>
  <el-form ref="shouShuBiaoGe" :model="props.data" :rules="jiaoYanGuiZe" label-width="80px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="手术" prop="opCode">
          <xc-combo-grid v-model="props.data"
                         code="opCode"
                         @row-click="clickToSelectSurgery"
                         :table-header="tableHeader"
                         name="opName"
                         :query-data-func="queryOperation">
            <el-table-column prop="opScale" label="手术等级"/>
          </xc-combo-grid>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="申请时间" prop="applyDate">
          {{ props.data.applyDate }}
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="手术时间" prop="opDatetime">
          <el-date-picker v-model="props.data.opDatetime"
                          @change="buildOrderName"
                          format="YYYY-MM-DD HH:mm:ss"
                          placeholder="time"
                          type="datetime"
                          value-format="YYYY-MM-DD HH:mm:ss"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="情况">
          <el-switch
              v-model="props.data.urgentClinicFlag"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              active-text="急诊"
              inactive-color="#ff4949"
              inactive-text="择期">
          </el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="班次">
          <el-switch
              v-model="props.data.ssbc"
              :active-value="1"
              :inactive-value="2"
              active-color="#13ce66"
              active-text="正常"
              inactive-color="#ff4949"
              inactive-text="加班">
          </el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="术前诊断" prop="diagBeforeCode">
          <xc-select-v3 v-model="props.data"
                        :data="shouShuZhenDuan"
                        code="diagBeforeCode"
                        name="diagBeforeOp"
                        :remote-method="souSuoZhenDuan"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="自费">
          <el-switch
              v-model="props.data.ybSelfFlag"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              active-text="是"
              inactive-color="#ff4949"
              inactive-text="否">
          </el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="手术部位" prop="partCode">
          <xc-select-v3 v-model="props.data"
                        code="partCode" name="partCodeName"
                        :data="shouShuBuWeiShuJu"
                        :remote-method="souSuoBuWei" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="手术等级" prop="opScale">
          <el-select v-model="props.data.opScale"
                     :disabled="disabledOpScale">
            <xc-el-option :data="shouShuDengJi"/>
          </el-select>

        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="麻醉方式">
          <xc-select-v3 v-model="props.data"
                        code="hocusCode"
                        @row-click="buildOrderName"
                        name="hocusCodeName"
                        :data="props.anestheticMode"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="主刀医生" prop="doctorZd">
          <xc-select-v3 v-model="props.data"
                        code="doctorZd"
                        name="doctorZdName"
                        :remote-method="suoSouYiShen"
                        clearable
                        :data="yiShengShuJu">
            <xc-table-column label="编码" prop="code"/>
            <xc-table-column label="姓名" prop="name"/>
            <xc-table-column label="科室" prop="deptName"/>
            <xc-table-column label="级别" prop="empTitName"/>
          </xc-select-v3>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="第一助手">
          <xc-select-v3 v-model="props.data" code="doctor1" name="doctor1Name"
                        :remote-method="suoSouYiShen" clearable
                        :data="yiShengShuJu">
            <xc-table-column label="编码" prop="code"/>
            <xc-table-column label="姓名" prop="name"/>
            <xc-table-column label="科室" prop="deptName"/>
            <xc-table-column label="级别" prop="empTitName"/>
          </xc-select-v3>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="第二助手">
          <xc-select-v3 v-model="data" code="doctor2" name="doctor2Name"
                        :remote-method="suoSouYiShen" clearable
                        :props.data="yiShengShuJu">
            <xc-table-column label="编码" prop="code"/>
            <xc-table-column label="姓名" prop="name"/>
            <xc-table-column label="科室" prop="deptName"/>
            <xc-table-column label="级别" prop="empTitName"/>
          </xc-select-v3>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="第三助手">
          <xc-select-v3 v-model="props.data" code="doctor3" name="doctor3Name"
                        :remote-method="suoSouYiShen" clearable
                        :data="yiShengShuJu">
            <xc-table-column label="编码" prop="code"/>
            <xc-table-column label="姓名" prop="name"/>
            <xc-table-column label="科室" prop="deptName"/>
            <xc-table-column label="级别" prop="empTitName"/>
          </xc-select-v3>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="麻醉医生">
          <xc-select-v3 v-model="props.data" code="doctorMz" name="doctorMzName"
                        :remote-method="suoSouYiShen" clearable
                        :data="yiShengShuJu">
            <xc-table-column label="编码" prop="code"/>
            <xc-table-column label="姓名" prop="name"/>
            <xc-table-column label="科室" prop="deptName"/>
            <xc-table-column label="级别" prop="empTitName"/>
          </xc-select-v3>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="器械护士">
          <xc-select-v3 v-model="props.data" code="nurseQx" name="nurseQxName"
                        :remote-method="suoSouYiShen" clearable
                        :data="yiShengShuJu">
            <xc-table-column label="编码" prop="code"/>
            <xc-table-column label="姓名" prop="name"/>
            <xc-table-column label="科室" prop="deptName"/>
            <xc-table-column label="级别" prop="empTitName"/>
          </xc-select-v3>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="巡回护士">
          <xc-select-v3 v-model="props.data" code="nurseXh" name="nurseXhName"
                        :remote-method="suoSouYiShen" clearable
                        :data="yiShengShuJu">
            <xc-table-column label="编码" prop="code"/>
            <xc-table-column label="姓名" prop="name"/>
            <xc-table-column label="科室" prop="deptName"/>
            <xc-table-column label="级别" prop="empTitName"/>
          </xc-select-v3>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="医嘱名：">
          <el-input style="width: 220px"
                    :rows="3"
                    type="textarea"
                    show-word-limit
                    maxlength="50"
                    v-model="props.data.orderName"/>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="附注说明">
          <el-input v-model="props.data.remark" :rows="6" maxlength="50" show-word-limit
                    style="width: 450px;"
                    type="textarea"/>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup name="BianJiShouShu">
import {ref} from "vue";
import {diagnosisInOurHospital} from "@/api/zhu-yuan-yi-sheng/jian-yan-jian-cha-shen-qing";
import {getDoctorByOpCode, huoQuShouShuBuWei, obtainSurgicalItems} from "@/api/zhu-yuan-yi-sheng/shou-shu-shen-qing";
import {getRenYuan} from "@/api/public-api";
import moment from "moment";
import XcSelectV3 from "@/components/xiao-chan/select-v3/XcSelectV3.vue";
import XcTableColumn from "@/components/xiao-chan/select-v3/XcTableColumn";
import {getFormatDatetime} from "@/utils/date";
import XcComboGrid from "@/components/xiao-chan/combo-grid/XcComboGrid.vue";
import XcElOption from "@/components/xiao-chan/xc-el-option/XcElOption.vue";
import XEUtils from 'xe-utils'
import {xcMessage} from "@/utils/xiaochan-element-plus";
import {isDev} from "@/utils/public";

const props = defineProps({
  anestheticMode: {
    type: Array,
  },
  data: Object,
  index: Number
})

const tableHeader = [
  {label: '编码', prop: 'code', width: 120},
  {label: '名称', prop: 'name', width: 240},
  {label: '类型', prop: 'opTypeName', width: 140},
]

const emit = defineEmits(['qu-xiao'])

const queryOperation = (val) => {
  return obtainSurgicalItems(val, 0)
}

const selectOpRow = ref({})
const designateASurgeonInChief = ref([])
const clickToSelectSurgery = async (val) => {
  disabledOpScale.value = false
  selectOpRow.value = val

  if (isDev) {
    let res = await getDoctorByOpCode(val.code)
    designateASurgeonInChief.value = res
    yiShengShuJu.value = res
    if (designateASurgeonInChief.value.length > 0) {
      xcMessage.warning('医务部锁定手术主刀医生无法修改');
    }
    if (val.opScale !== null) {
      disabledOpScale.value = true
      props.data.opScale = gradeToCode(val.opScale)
      xcMessage.warning('医务部锁定手术等级无法修改')
    }
  }


  buildOrderName()
}

const disabledOpScale = ref(false)


// 手术部位
const shouShuBuWeiShuJu = ref([])
// 手术诊断
const shouShuZhenDuan = ref([])

// 医生信息
const yiShengShuJu = ref([])

// 搜索手术部位
const souSuoBuWei = (val) => {
  huoQuShouShuBuWei(val).then((res) => {
    shouShuBuWeiShuJu.value = res
  })
}

// 搜索诊断
const souSuoZhenDuan = (val) => {
  diagnosisInOurHospital(val).then(res => {
    shouShuZhenDuan.value = res
  })
}


// 搜索医生
const suoSouYiShen = (val) => {

  if (designateASurgeonInChief.value.length > 0) {
    return
  }

  getRenYuan(val).then(res => {
    yiShengShuJu.value = res
  });

}


const shouShuBiaoGe = ref()

// 时间校验
const shenQingShiJian = (rule, value, callback) => {
  const oDate1 = moment(value).format('YYYY-MM-DD HH:mm:ss')
  const oDate2 = moment(props.data.applyDate).format('YYYY-MM-DD HH:mm:ss')
  if (moment(oDate1).isBefore(moment(oDate2))) {
    callback(new Error('手术时间不能小于申请时间'))
  } else {
    callback()
  }
}

// 校验数据
const jiaoYanGuiZe = ref({
  opCode: [{required: true, message: '项目编码不能为空', trigger: 'blur'}],
  opName: [{required: true, message: '项目名称不能为空', trigger: 'blur'}],
  applyDate: [{required: true, message: '申请时间不能为空', trigger: 'blur'}],
  opDatetime: [{required: true, message: '手术时间不能为空', trigger: 'blur'},
    {validator: shenQingShiJian, trigger: 'blur'}],
  diagBeforeCode: [{required: true, message: '术前诊断不能为空', trigger: 'blur'}],
  partCode: [{required: true, message: '手术部位不能为空', trigger: 'blur'}],
  doctorZd: [{required: true, message: '主刀医生不能为空', trigger: 'blur'}],
  opScale: [{required: true, message: '手术等级不能为空', trigger: 'blur'}],
})


const buildOrderName = () => {
  props.data.orderName =
      `拟于${getFormatDatetime(props.data.opDatetime, 'YYYY-MM-DD HH:mm')}在${props.data.hocusCodeName === null ? '' : props.data.hocusCodeName}下行${props.data.opName}`
}

const shouShuDengJi = [
  {code: 1, name: '四级', value: 4},
  {code: 2, name: '三级', value: 3},
  {code: 3, name: '二级', value: 2},
  {code: 4, name: '一级', value: 1},
]

const gradeToCode = (val) => {
  return XEUtils.filter(shouShuDengJi, (item) => {
    return item.value === val
  })[0].code
}
</script>

<style scoped>

</style>
