<template>
  <el-dialog v-model="dialog" title="编辑检查" @close="guanBi">
    <el-pagination
        :current-page="index"
        :page-size="1"
        :total="count"
        background
        layout="total,  prev, pager, next"
        @current-change="bianJiFenYe">
    </el-pagination>
    <el-form label-width="100px" size="mini">
      <el-row>
        <el-col :span="12">
          <el-form-item label="检查项目编码:">
            {{ bianJiJianChaShuJu.orderCode }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检查项目名称:">
            {{ bianJiJianChaShuJu.orderName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检查时间:">
            <el-date-picker v-model="bianJiJianChaShuJu.startTime"
                            format="YYYY-MM-DD HH:mm:ss" style="width: 180px" 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="执行科室:">
            {{ bianJiJianChaShuJu.execDeptName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="急诊:">
            <el-switch
                v-model="bianJiJianChaShuJu.jzFlag"
                :active-value="1"
                :inactive-value="null"
                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="bianJiJianChaShuJu.ybSelfFlag"
                :active-value="1"
                :inactive-value="null"
                active-color="#13ce66"
                active-text="急诊"
                inactive-color="#ff4949"
                inactive-text="普通">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="!jianCha" label="标本：">
            <el-select v-model="bianJiJianChaShuJu.inspectStuff" :remote-method="biaoBenSouSuo" clearable filterable
                       remote
                       @change="bianBenMing">
              <el-option v-for="item in biaoBenShuJu" :key="item.code" :label="item.name" :value="item.code">
                <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="jianCha ? '病室摘要:':'申请说明'">
            <el-input v-model="bianJiJianChaShuJu.reqComment" :rows="6" maxlength="125" show-word-limit
                      type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="jianCha" :span="12">
          <el-button @click="daKaiShuoMingMuBan">说明模板</el-button>
        </el-col>
        <el-col v-if="jianCha" :span="24">
          <el-form-item label="体征信息:">
            <el-input v-model="bianJiJianChaShuJu.reqTzComment" :rows="6" maxlength="125" show-word-limit
                      type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="jianCha" :span="24">
          <el-form-item label="相关辅检结果:">
            <el-input v-model="bianJiJianChaShuJu.reqOtherResult" :rows="6" maxlength="125" show-word-limit
                      type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="jianCha" :span="12">
          <el-form-item label="临床诊断:">
            <el-select v-model="bianJiJianChaShuJu.diagCode"
                       :remote-method="linChuangZhenDuanSuoSou" clearable
                       filterable remote size="mini"
                       @change="huoQuXiangXiZhenDuan">
              <el-pagination
                  :current-page="linChuangDangQianYe"
                  :page-size="20"
                  :pager-count="7"
                  :total="linChuangZhenDuanShuJu.length"
                  layout="total,  prev, pager, next"
                  @current-change="linChuangFanYe">
              </el-pagination>
              <el-option
                  v-for="item in linChuangZhenDuanShuJu.slice((linChuangDangQianYe - 1) * 20,linChuangDangQianYe * 20)"
                  :key="item.code" :label="item.name" :value="item.code">
                <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="jianCha" :span="12">
          <el-switch
              v-model="zhenDuanLaiYuan"
              :active-value="true"
              :inactive-value="false"
              active-color="#13ce66"
              active-text="医保"
              inactive-color="#ff4949"
              inactive-text="本院">
          </el-switch>
        </el-col>
        <el-col :offset="20" :span="24">
          <el-button icon="el-icon-check" type="primary" @click="guanBi">确定</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
  <shuo-ming-mu-ban ref="shouMingMuBan" @huoQuXuanZhongShuJu="xuanZhongMuBan"></shuo-ming-mu-ban>
</template>

<script>
import {computed, ref} from "vue";
import store from "@/store";
import ShuoMingMuBan from "@/components/zhu-yuan-yi-sheng/jian-cha-shen-qing/ShuoMingMuBan.vue";
import {ElMessage} from "element-plus";
import {stringIsBlank, stringNotBlank} from "@/utils/blank-utils";
import {biaoBenApi, huoQuLinChuangZhenDuan} from "@/api/zhu-yuan-yi-sheng/jian-yan-jian-cha-shen-qing";

export default {
  name: "BianJiJianChaShenQing",
  components: {ShuoMingMuBan},
  emits: ['fan-ye'],
  props: {
    jianCha: {
      type: Boolean,
      default: true
    }
  },
  setup(props, ctx) {
    const windowSize = computed(() => {
      return store.state.app.windowSize
    })

    const dialog = ref(false)
    const bianJiJianChaShuJu = ref({})
    const shouMingMuBan = ref(null)
    const linChuangZhenDuanShuJu = ref([])
    const linChuangDangQianYe = ref(1)
    const biaoBenShuJu = ref([])

    const count = ref(0)
    const index = ref(0)

    const shuoMingMuBan = ref({
      dialog: true,
      data: [],
      currentPage: 1,
      total: 0,
      leiXing: 2,
      name: ''
    })
    // 诊断来源
    const zhenDuanLaiYuan = ref(false)

    const daKaiBenDuiHua = (val, xiaBiao, zhongShu) => {
      index.value = xiaBiao + 1
      count.value = zhongShu
      dialog.value = true
      bianJiJianChaShuJu.value = val
      if (stringNotBlank(val.diagCode)) {
        linChuangZhenDuanShuJu.value.push({code: val.diagCode, name: val.diagText})
      }
      if (!props.jianCha) {
        if (stringNotBlank(val.inspectStuffName)) {
          biaoBenShuJu.value.push({code: val.inspectStuff, name: val.inspectStuffName})
        }
      }
    }

    const daKaiShuoMingMuBan = () => {
      shouMingMuBan.value.dialog = true
      shouMingMuBan.value.huoQuShuoMingMuBan(0)
    }

    const xuanZhongMuBan = (val) => {
      if (stringIsBlank(bianJiJianChaShuJu.value.reqComment)) {
        bianJiJianChaShuJu.value.reqComment = ''
      }
      if (val.length + bianJiJianChaShuJu.value.reqComment.length > 125) {
        return ElMessage.error('字符超长无法添加，病室摘要最多125个字。')
      }
      bianJiJianChaShuJu.value.reqComment += val + '，'
      ElMessage.success('复制成功。')
    }

    const linChuangZhenDuanSuoSou = (val) => {
      if (stringNotBlank(val) && val.length > 1) {
        huoQuLinChuangZhenDuan(val, zhenDuanLaiYuan.value).then(res => {
          linChuangZhenDuanShuJu.value = res
        })
      }
    }

    const huoQuXiangXiZhenDuan = (val) => {
      if (stringIsBlank(val)) return
      for (let item of linChuangZhenDuanShuJu.value) {
        if (item.code === val) {
          return bianJiJianChaShuJu.value.diagText = item.name
        }
      }
    }

    const bianJiFenYe = (val) => {
      biaoBenShuJu.value = []
      linChuangZhenDuanShuJu.value = []
      index.value = val
      ctx.emit('fan-ye', {val})
    }

    const linChuangFanYe = (val) => {
      linChuangDangQianYe.value = val
    }

    const guanBi = () => {
      biaoBenShuJu.value = []
      linChuangZhenDuanShuJu.value = []
      bianJiJianChaShuJu.value = {}
      dialog.value = false
    }

    const bianBenMing = (val) => {
      for (let item of biaoBenShuJu.value) {
        if (item.code === val) {
          return bianJiJianChaShuJu.value.inspectStuffName = item.name
        }
      }
    }
    const biaoBenSouSuo = (val) => {
      if (val.length > 1) {
        biaoBenApi(val).then((res) => {
          biaoBenShuJu.value = res
        })
      }
    }

    return {
      dialog,
      bianJiJianChaShuJu,
      shuoMingMuBan,
      windowSize,
      zhenDuanLaiYuan,
      daKaiShuoMingMuBan,
      shouMingMuBan,
      xuanZhongMuBan,
      linChuangZhenDuanShuJu,
      linChuangZhenDuanSuoSou,
      daKaiBenDuiHua,
      huoQuXiangXiZhenDuan,
      linChuangDangQianYe,
      linChuangFanYe,
      guanBi,
      bianJiFenYe,
      count,
      index,
      jianCha: props.jianCha,
      biaoBenShuJu,
      biaoBenSouSuo,
      bianBenMing
    }
  }
}
</script>

<style scoped>

</style>
