<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-select-v3 v-model="props.data"
                        code="opCode"
                        name="opName"
                        :data="surgicalItems"
                        :remote-method="queryOperation">
            <el-table-column label="编码" prop="code"/>
            <el-table-column label="名称" prop="name"/>
            <el-table-column label="类型" prop="opTypeName"/>
          </xc-select-v3>
        </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" format="YYYY-MM-DD HH:mm:ss"
                          placeholder="time" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
        </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">
          <xc-select-v3 v-model="props.data" code="opScale" name="opScaleName" :data="shouShuDengJi">
            <xc-table-column label="编码" prop="code"/>
            <xc-table-column label="名称" prop="name"/>
          </xc-select-v3>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="麻醉方式">
          <xc-select-v3 v-model="props.data"
                        code="hocusCode"
                        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 v-model="props.data.remark" :rows="6" maxlength="50" show-word-limit
                    style="width: 450px;"
                    type="textarea"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup name="BianJiShouShu">
import {ref, unref} from "vue";
import {diagnosisInOurHospital} from "@/api/zhu-yuan-yi-sheng/jian-yan-jian-cha-shen-qing";
import {huoQuShouShuBuWei, obtainSurgicalItems} from "@/api/zhu-yuan-yi-sheng/shou-shu-shen-qing";
import {getRenYuan} from "@/api/public-api";
import moment from "moment";
import {ElMessage} from "element-plus";
import XcSelectV3 from "@/components/xiao-chan/select-v3/XcSelectV3.vue";
import XcTableColumn from "@/components/xiao-chan/select-v3/XcTableColumn";

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

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

const surgicalItems = ref([])
const queryOperation = (val) => {
  obtainSurgicalItems(val, 0).then(res => {
    surgicalItems.value = res
  })
}

// 手术部位
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 (val.length > 1) {
    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 clickToAddSurgery = async () => {
  const form = unref(shouShuBiaoGe);
  if (!form) return
  try {
    await form.validate()
    console.log('校验通过')
    console.log(props.data)
  } catch (e) {
    ElMessage.error('请检查数据。')
  }
}


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

<style scoped>

</style>
