<template>
  <el-dialog v-model="dialog" title="患者过敏源信息" @closed="emit('close')">
    <el-radio-group v-model="allergenType" @change="typeChangeClear()">
      <el-radio-button :label="0">过敏源</el-radio-button>
      <el-radio-button :label="1">本院药品</el-radio-button>
    </el-radio-group>
    <xc-combo-grid v-model="newAllergen.name"
                   @rowClick="rowClick"
                   row-key="code"
                   :current-key="newAllergen.code"
                   :query-data-func="methodAllergen">
    </xc-combo-grid>
    <!--    <el-button icon="Plus" type="primary" @click="clickNewPatientAllergens">添加</el-button>-->
    <el-table :data="patientAllergenData.data" :height="windowSize.h - 400">
      <el-table-column label="编码" prop="allergenCode"></el-table-column>
      <el-table-column label="名称" prop="allergenName"></el-table-column>
      <el-table-column label="来源" prop="type">
        <template #default="scope">
          <span v-if="scope.row.type === 0"> 过敏源 </span>
          <span v-else> 本院药品 </span>
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="scope">
          <el-popconfirm
              cancel-button-text="取消"
              confirm-button-text="确定"
              icon="Info"
              icon-color="red"
              title="确定要删除吗？"
              @confirm="clickRemoveAllergens(scope.$index, scope.row.id)">
            <template #reference>
              <el-button icon="Delete" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script name="AllergenEntry" setup>
import {stringNotBlank} from '@/utils/blank-utils'
import {
  getAllergens,
  getDrugInfo,
  getPatientAllergens,
  newPatientAllergens,
  removePatientAllergens
} from '@/api/public-api'
import store from '@/store'
import {ElMessage} from 'element-plus'
import XcComboGrid from "@/components/xiao-chan/combo-grid/XcComboGrid.vue";

const props = defineProps({
  patNo: '',
})
const emit = defineEmits(['close'])

const windowSize = computed(() => {
  return store.state.app.windowSize
})
let newAllergen = $ref({
  code: '',
  name: '',
})
let allergenData = $ref([])
let allergenType = $ref(0)

const dialog = ref(true)
let patNo = $ref('')
let patientAllergenData = $ref({
  data: [],
  currentPage: 1,
  sizePage: 10,
  total: 0,
})

const methodAllergen = (val) => {
  if (val.length < 1) {
    return
  }
  if (allergenType === 0) {
    return getAllergens(val)
  } else {
    return getDrugInfo(val)
  }
}

const rowClick = (value) => {
  newAllergen.code = value.code
  newAllergen.name = value.name
  clickNewPatientAllergens()
}

/**
 *
 * @returns {IMessageHandle} 错误信息
 */
const clickNewPatientAllergens = () => {
  if (newAllergen.code === '') {
    return ElMessage.error('请先选择数据')
  }
  if (typeof patientAllergenData.data.find((item) => item.allergenCode === newAllergen.code) !== 'undefined') {
    return ElMessage.error('无法录入相同的过敏源')
  }
  newPatientAllergens(patNo, newAllergen.code, allergenType).then((res) => {
    patientAllergenData.data.push({
      id: res,
      allergenCode: newAllergen.code,
      allergenName: newAllergen.name,
      type: allergenType,
    })
    patientAllergenData.total = patientAllergenData.data.length
  })
}

/**
 * 删除数据
 * @param index 当前下标
 * @param id
 */
const clickRemoveAllergens = (index, id) => {
  removePatientAllergens(id).then((res) => {
    patientAllergenData.data.splice(index, 1)
  })
}

const typeChangeClear = () => {
  newAllergen.code = ''
  newAllergen.name = ''
  allergenData = []
}

onMounted(() => {
  patNo = props.patNo
  if (stringNotBlank(patNo)) {
    getPatientAllergens(patNo).then((res) => {
      patientAllergenData.data = res
      patientAllergenData.total = patientAllergenData.data.length
    })
  }
})
</script>

<style scoped></style>
