<template>
  <el-dialog :model-value="visible" :title="data._id ?'编辑诊断':'新增诊断'" @close="close" :width="width">
    <el-form class="p-15px" label-width="100">
      <el-form-item class="is-required" label="诊断名称" prop="name">
        <el-input clearable v-model="form.name" placeholder="请输入诊断名称" />
      </el-form-item>
      <el-form-item class="is-required" label="诊断编码" prop="code">
        <el-input clearable v-model="form.code" placeholder="请输入诊断编码" />
      </el-form-item>
      <el-form-item class="is-required" label="诊断拼音码" prop="pinyin">
        <el-input clearable v-model="form.pinyin" placeholder="请输入诊断拼音码" />
      </el-form-item>
      <el-form-item label="常用诊断名" prop="category">
        <el-select clearable v-model="form.category" class="w-full" placeholder="请选择">
          <el-option v-for="i in  diseases" :key="i.value" :label="i.label" :value="i.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div text-center>
        <el-button plain class="w-100px" @click="close()">取消</el-button>
        <el-button class="w-100px" type="primary" @click="save()">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { computed, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { useHlw } from "@/api/hlw";
import { verifyString, verifyNumber, verifyListItem } from '@/utils/index'

const emits = defineEmits(["close", "change", "reloadDiseases"]);
const props = defineProps({
  data: { type: Object, default: () => ({}) },
  diseases: { type: Array, default: () => [] },
  visible: { type: Boolean, default: false },
  width: { type: Number, default: 300 },
});

const form = ref({})

function close() {
  emits("close");
};

async function save() {
  const [namePass, name] = verifyString(form.value.name, '诊断名称', 1, 50);
  if (!namePass) {
    ElMessage.info(name);
    return;
  };
  const [codePass, code] = verifyString(form.value.code, '诊断编码', 1, 50);
  if (!codePass) {
    ElMessage.info(code);
    return;
  };
  const [pinyinPass, pinyin] = verifyString(form.value.pinyin, '诊断拼音码', 1, 50);
  if (!pinyinPass) {
    ElMessage.info(pinyin);
    return;
  };
  const category = form.value.category || '';
  const params = { code, name, pinyin, category };
  if (props.data._id) {
    params.id = props.data._id;
  }
  const apiName = props.data._id ? 'updateHlwDiagnosis' : 'addHlwDiagnosis';
  const { success, message } = await useHlw({ type: apiName, ...params });
  if (success) {
    ElMessage.success(message);
    emits("change");
    close()
  } else {
    ElMessage.error(message)
  }
}

watch(() => props.visible, (val) => {
  if (val) {
    form.value.name = typeof props.data.name === 'string' ? props.data.name.trim() : '';
    form.value.code = typeof props.data.code === 'string' ? props.data.code.trim() : '';
    form.value.pinyin = typeof props.data.pinyin === 'string' ? props.data.pinyin : '';
    form.value.category = typeof props.data.category === 'string' ? props.data.category : '';
    emits('reloadDiseases');
  }
})

</script>