<template>
  <div class="plan-base-form">
    <!--判断预览页 禁用状态设置-->
    <el-form :model="form" :rules="rules" ref="form" label-width="110px" style="height: 100%" :disabled="isPreview === 'preview' ? true : false">
      <el-form-item label="模板名称" prop="name" required>
        <el-input v-model="form.name" maxlength="32"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="应用科室" prop="deptId">
            <TreeDept
              ref="treeDept"
              :defaultName="defaultDeptName"
              v-model="form.deptId"
              @change="onChangeDept"
            />
          </el-form-item>

          <el-form-item label="随访周期" prop="periodNumber" required>
            <PeriodSelector
              :value="{ quantity: form.periodNumber, unit: form.periodUnit }"
              @change="hanldeSelectorTimeChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="应用疾病" prop="labelId">
            <el-select v-model="form.labelId" filterable>
              <el-option
                v-for="item in diseaseList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否自动匹配" prop="isMatch">
            <el-radio-group v-model="form.isMatch">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { getMedicalLabel } from "@/api/hospital";
import TreeDept from "@/components/TreeDept";
import PeriodSelector from "../PeriodSelector";
export default {
  enums: ["periodUnitMap"],
  components: {
    PeriodSelector,
    TreeDept,
  },
  data() {
    return {
      form: {
        name: "",
        deptId: "",
        labelId: "",
        periodNumber: "",
        periodUnit: "",
        isMatch: 0,
        wardId: null
      },
      rules: {
        name: [
          { required: true, message: "请输入模板名称", trigger: "blur" },
          { max: 32, message: "长度不能超过32个字符", trigger: "blur" },
        ],
        deptId: [{ required: true, message: "请选择应用科室", trigger: "change" }],
        labelId: [{ required: true, message: "请选择应用疾病", trigger: "change" }],
        periodNumber: [{ required: true, message: "请选择随访周期", trigger: "change" }],
        isMatch: [
          {
            required: true,
            message: '请选择是否字动匹配',
            trigger: ['blur', 'change']
          }
        ]
      },
      diseaseList: [],
      defaultDeptName: "",
    };
  },
  created() {
    this.form.periodUnit = this.periodUnitMap.day;
  },
  watch: {
    "form.deptId": {
      handler: "loadDisease",
    },
  },
  props: {
    isPreview: { // 预览标记
      type: String,
    },
  },
  methods: {
    init(params) {
      for (const key of Object.keys(this.form)) {
        this.form[key] = params[key];
        this.defaultDeptName = params.deptName;
      }
    },
    submit() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve(this.form);
          } else {
            reject(new Error("校验不通过"));
            console.log("error submit!!");
            return false;
          }
        });
      });
    },
    resetForm() {
      this.resetForm("form");
    },
    onChangeDept(val, selectItem) {
      console.log('val=', val, selectItem)
      this.form.labelId = ''
      this.form.wardId = selectItem?.wardId || null
    },
    hanldeSelectorTimeChange({ quantity, unit }) {
      this.form.periodNumber = quantity;
      this.form.periodUnit = unit;
    },
    async loadDisease() {
      const res = await getMedicalLabel({ deptId: this.form.deptId || "" });
      this.diseaseList = res.data || [];
    },
  },
};
</script>

<style lang="scss" scoped>
.plan-base-form {
}
</style>
