<template>
  <el-dialog
      :title="mode === 'add' ? '添加登记来件' : '修改登记来件'"
      v-model="visibleProxy"
      width="80vw"
      top="5vh"
      style="margin-bottom: 0"
  >
    <el-scrollbar max-height="76vh">
      <el-form
          ref="formRef"
          :model="model"
          :label-width="150"
          class="form-layout"
          style="min-height: 66vh"
          :rules="rules"
      >
        <!-- 来源 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="来源" prop="sourcePath">
              <el-cascader
                  v-model="model.sourcePath"
                  :options="dict.sourceTableAndLevel"
                  :props="{ emitPath: true, checkStrictly: false }"
                  clearable
                  filterable
                  show-all-levels
                  style="width: 100%"
                  placeholder="请选择来源（一级/二级）"
                  :disabled="mode=== 'edit'"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="业务类别" prop="handleMethod">
              <el-select
                  v-model="model.businessTypeCode"
                  placeholder="业务类别"
                  clearable
              >
                <el-option
                    v-for="item in dict.businessType"
                    :key="item.id"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <!-- 编号 + 受理时间 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="编号" prop="originId">
              <el-input
                  v-model="model.originId"
                  :placeholder="model.originIdSkip ? '无' : '请输入编号'"
                  :disabled="mode === 'edit' || model.originIdSkip"
              >
                <template #append>
                  <el-checkbox
                      v-model="model.originIdSkip"
                      @change="(v) => v && (model.originId = '')"
                  >
                    无
                  </el-checkbox>
                </template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="受理时间" prop="discoveryTime">
              <el-date-picker
                  v-model="model.discoveryTime"
                  type="datetime"
                  placeholder="请选择"
                  value-format="YYYY-MM-DDTHH:mm:ss"
                  format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 来件人姓名 + 身份证号码 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="来件人姓名" prop="responderName">
              <el-input
                  v-model="model.responderName"
                  :placeholder="model.responderNameSkip ? '无' : '请输入来件人姓名'"
                  :disabled="model.responderNameSkip"
              >
                <template #append>
                  <el-checkbox
                      v-model="model.responderNameSkip"
                      @change="(v) => v && (model.responderName = '')"
                  >
                    无
                  </el-checkbox>
                </template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="身份证号码" prop="responderIdCode">
              <el-input
                  v-model="model.responderIdCode"
                  :placeholder="model.responderIdCodeSkip ? '无' : '请输入身份证号码'"
                  :disabled="model.responderIdCodeSkip"
              >
                <template #append>
                  <el-checkbox
                      v-model="model.responderIdCodeSkip"
                      @change="(v) => v && (model.responderIdCode = '')"
                  >
                    无
                  </el-checkbox>
                </template>
              </el-input>
            </el-form-item>

          </el-col>
        </el-row>

        <!-- 联系电话 + 被投诉二级机构 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="responderPhone">
              <el-input
                  v-model="model.responderPhone"
                  :placeholder="model.responderPhoneSkip ? '无' : '请输入联系电话'"
                  :disabled="model.responderPhoneSkip"
              >
                <template #append>
                  <el-checkbox
                      v-model="model.responderPhoneSkip"
                      @change="(v) => v && (model.responderPhone = '')"
                  >
                    无
                  </el-checkbox>
                </template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="被投诉二级机构" prop="secondDepartId" >
              <depart-tree-select
                  v-model="model.secondDepartId"
                  :check-strictly="true"
                  @node-click="(row) => (model.secondDepartName = row.shortName)"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 来件内容 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="来件内容" prop="thingDesc">
              <el-input v-model="model.thingDesc" type="textarea" :autosize="{ minRows: 4 }" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 涉嫌问题 + 是否重复件 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="涉嫌问题" prop="involveProblemIdList">
              <el-select v-model="model.involveProblemIdList" multiple clearable style="width: 100%">
                <el-option
                    v-for="item in dict.suspectProblem"
                    :key="item.dictValue"
                    :value="item.dictValue"
                    :label="item.dictLabel"
                >
                  <!-- 复选框展示 -->
                  <el-checkbox :model-value="model.involveProblemIdList.includes(item.dictValue)">
                    {{ item.dictLabel }}
                  </el-checkbox>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="是否重复件" prop="repeatt">
              <el-radio-group v-model="model.repeatt" clearable>
                <el-radio v-for="item in dict.yesNo" :key="item.id" :label="item.dictValue">
                  {{ item.dictLabel }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 标签 -->
        <el-row>
          <el-col :span="18">
            <el-form-item label="标签" prop="tags">
              <el-checkbox-group v-model="model.tags">
                <el-checkbox v-for="item in dict.tagList" :key="item.id" :label="item.dictValue">
                  {{ item.dictLabel }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 办理方式 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="办理方式" prop="handleMethod">
              <el-radio-group v-model="model.handleMethod" clearable>
                <el-radio v-for="item in dict.handleMethodType" :key="item.id" :label="item.dictValue">
                  {{ item.dictLabel }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visibleProxy = false" size="large">取消</el-button>
        <el-button type="primary" @click="onSubmit" size="large">
          {{ mode === 'add' ? '添加' : '修改' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, ref, watch } from "vue";

const props = defineProps({
  modelValue: Boolean, // 控制弹窗显示
  mode: { type: String, default: "add" }, // add | edit
  model: { type: Object, required: true }, // addForm / updateForm
  dict: { type: Object, required: true },
  rules: { type: Object, required: true },
});

const emit = defineEmits(["update:modelValue", "submit"]);

const formRef = ref();

const visibleProxy = computed({
  get: () => props.modelValue,
  set: (v) => emit("update:modelValue", v),
});
watch(
    () => visibleProxy.value,
    (v) => {
      if (v) {
        // 打开弹窗时，统一重置所有 “无” 勾选状态
        props.model.originIdSkip = false
        props.model.responderNameSkip = false
        props.model.responderIdCodeSkip = false
        props.model.responderPhoneSkip = false
      }
    }
)


// 级联选择 -> 拆字段（和你现在 addForm 的 watch 一样）
watch(
    () => props.model.sourcePath,
    (path) => {
      if (!path || path.length === 0) return;
      props.model.sourceTable = (path && path[0]) || "";
      props.model.sourceTableSubOne = (path && path[1]) || "";
    },
    { deep: true }
);


function fillFiledName() {
  const code = props.model.businessTypeCode;
  const hit = props.dict.businessType?.find(
      (d) => String(d.dictValue) === String(code)
  );
  props.model.businessTypeName = hit?.dictLabel || "";
}

async function onSubmit() {
  fillFiledName();
  await formRef.value.validate();
  emit("submit");
}
</script>

<style>
.form-layout {
  padding: 0 34px;
}

.dialog-footer {
  padding: 16px 24px 24px;
}

</style>
