<template>
  <el-dialog :title="showTitle" :visible="visible" width="600px" center :before-close="onClose">
    <el-form :model="formData" :disabled="isLoading" ref="formRef" :rules="formRules" label-width="120px">
      <el-form-item label="应用科室：" prop="deptId">
        <TreeDept v-model="formData.deptId" clearable style="width: 100%" :options="deptList" :autoFetch="false"
          :props="{ emitPath: false }" placeholder="请选择应用科室" @change="onChangeDept" />
      </el-form-item>
      <el-form-item label="应用疾病：" prop="labelId">
        <el-select v-model="formData.labelId" placeholder="请选择应用疾病" filterable clearable>
              <el-option v-for="item in diseaseList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
      </el-form-item>
      <el-form-item label="提醒类型：" prop="categoryId">
        <el-select v-model="formData.categoryId" placeholder="请选择提醒类型" filterable clearable>
          <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提醒名称" prop="name">
        <el-input v-model.trim="formData.name" type="textarea" placeholder="请输入提醒名称" maxlength="30" resize="none" show-word-limit />
      </el-form-item>
      <el-form-item label="提醒内容：" prop="remark">
        <el-input v-model.trim="formData.remark" type="textarea" placeholder="请输入提醒内容" maxlength="30" resize="none" show-word-limit/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :disabled="isLoading" @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { updateRemindTemplateApi } from '@/api/hospital/remindManage/remindList'
import { getClientId } from '@/utils/auth'
import TreeDept from "@/components/TreeDept";
import { getTreeHospDeptByPatient } from "@/api/admin";
import { getMedicalLabel } from "@/api/hospital";
import { getReminderListApi } from '@/api/common/dictManage/reminder'
export default {
  name: 'AddDialog',
  components: {
    TreeDept
  },
  computed: {
    showTitle() {
      return this.formData.id ? '编辑提醒' : '新增提醒'
    }
  },
  data() {
    return {
      visible: false,
      deptList: [],
      diseaseList: [],
      categoryList: [],
      formData: {
        id: undefined,
        deptId: '',
        labelId: null,
        categoryId: null,
        remark: null,
        name: ''
      },
      formRules: {
        deptId: [
          {
            required: true,
            message: '请选择应用科室',
            trigger: ['blur', 'change']
          }
        ],
        labelId: [
          {
            required: true,
            message: '请选择应用疾病 ',
            trigger: ['blur', 'change']
          }
        ],
        categoryId: [
          {
            required: true,
            message: '请选择提醒类型 ',
            trigger: ['blur', 'change']
          }
        ],
        name: [
          {
            required: true,
            message: '请输入提醒名称',
            trigger: ['blur', 'change']
          }
        ],
        remark: [
          {
            required: true,
            message: '请输入提醒内容',
            trigger: ['blur', 'change']
          }
        ]
      },
      isLoading: false
    }
  },
  methods: {
    /*获取科室数据*/
    async getDeptList() {
      const res = await getTreeHospDeptByPatient();
      this.deptList = res.data || [];
    },
    // 获取病种数据
    async loadMedicalLabel() {
      const { deptId } = this.formData
      const res = await getMedicalLabel({
        deptId,
      });
      this.diseaseList = res.data || [];
    },
    // 获取提醒分类列表
    async getRemindTypeList() {
      const { data: { list } } = await getReminderListApi({
        pageNum: 1,
        pageSize: 1000,
        clientId: getClientId()
      })
      this.categoryList = list || []
    },
    loadOptions() {
      this.getDeptList()
      this.loadMedicalLabel()
      this.getRemindTypeList()
    },
    onChangeDept() {
      this.formData.labelId = null;
      this.loadMedicalLabel();
    },
    openDialog(initData) {
      if (initData) {
        const { id, deptId, labelId, categoryId,remark, name } = initData
        console.log('initData=', initData)
        this.formData = {
          id,
          deptId,
          labelId,
          categoryId,
          remark,
          name
        }
      }
      this.loadOptions()
      this.visible = true
    },
    onClose() {
      this.formData = {
        id: undefined,
        deptId: '',
        labelId: null,
        categoryId: null,
        remark: null,
        name: ''
      }
      this.$nextTick(() => {
        this.$refs.formRef.clearValidate()
      })

      console.log('formData=', this.formData)
      this.visible = false
    },
    onSubmit() {
      this.$refs.formRef.validate(async isValid => {
        if (!isValid) {
          return
        }
        const { deptId } = this.formData
        try {
          this.isLoading = true
          await updateRemindTemplateApi({
            ...this.formData,
            deptId,
            clientId: getClientId()
          })
          this.$message.success('操作成功')
          this.onClose()
          this.$emit('onOk')
        } catch (err) {
          console.log(err)
        } finally {
          this.isLoading = false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>
