<template>
  <el-dialog
    :append-to-body="false"
    :title="title"
    :model-value="openShow"
    width="80%"
    @close="handleClose"
    fullscreen
  >
    <!-- 单个 Form 包裹所有内容（基础信息 + 表格） -->
    <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px" label-position="right">
      <!-- 项目基础信息表单 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="项目名称：" prop="projectName">
            <el-input :disabled="isDetail" v-model="addForm.projectName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目类型：" prop="bcId">
            <el-select :disabled="isDetail" v-model="addForm.bcId" clearable filterable>
              <el-option
                v-for="(item, index) in projectType"
                :key="index"
                :label="item.dictValue"
                :value="item.dictKey"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="制单部门：" prop="touchingDeptId">
            <el-select
              :disabled="isDetail"
              v-model="addForm.touchingDeptId"
              clearable
              filterable
              @change="deptChange()"
            >
              <el-option
                v-for="(item, index) in deplList"
                :key="index"
                :label="item.deptName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="项目背景：" prop="projectBackcloth">
            <el-input
              :disabled="isDetail"
              type="textarea"
              v-model="addForm.projectBackcloth"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="项目目标：" prop="projectTarget">
            <el-input
              :disabled="isDetail"
              type="textarea"
              v-model="addForm.projectTarget"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="预期效果：" prop="desiredResult">
            <el-input
              :disabled="isDetail"
              type="textarea"
              v-model="addForm.desiredResult"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="项目负责人：" prop="projectHeadId">
            <jhSelect
              :value="addForm.projectHeadId"
              @input="val => (addForm.projectHeadId = val)"
              placeholder="请搜索选择"
              api-url="/blade-system/user/page"
              echo-api="/blade-system/user/page"
              echoParamsKey="ids"
              echo-method="get"
              api-method="get"
              list-key="records"
              total-key="total"
              label-key="realName"
              value-key="id"
              search-key="realName"
              :debounce-time="500"
              @change="projectHeadChange"
              :title="title"
              :disabled="isDetail"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="成员名称：" prop="memberName">
            <!-- <el-select
              :disabled="isDetail"
              v-model="addForm.memberName"
              multiple
              placeholder="请选择成员名称"
              clearable
              filterable
            >
              <el-option
                v-for="item in memberList"
                :label="item.realName"
                :value="item.id"
              ></el-option>
            </el-select> -->
            <jhSelect
              :value="addForm.memberName"
              @input="val => (addForm.memberName = val)"
              placeholder="请搜索选择"
              api-url="/blade-system/user/page"
              echo-api="/blade-system/user/page"
              echoParamsKey="ids"
              api-method="get"
              list-key="records"
              total-key="total"
              label-key="realName"
              value-key="id"
              search-key="realName"
              multiple
              :debounce-time="500"
              :title="title"
              :disabled="isDetail"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="项目支持人：" prop="projectSupportMan">
            <!-- <el-select
              :disabled="isDetail"
              v-model="addForm.projectSupportMan"
              clearable
              filterable
            >
              <el-option
                v-for="item in memberList"
                :label="item.realName"
                :value="item.id"
              ></el-option>
            </el-select> -->
            <jhSelect
              :value="addForm.projectSupportMan"
              @input="val => (addForm.projectSupportMan = val)"
              placeholder="请搜索选择"
              api-url="/blade-system/user/page"
              echo-api="/blade-system/user/page"
              echoParamsKey="ids"
              api-method="get"
              list-key="records"
              total-key="total"
              label-key="realName"
              value-key="id"
              search-key="realName"
              :debounce-time="500"
              :title="title"
              :disabled="isDetail"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目开始时间：" prop="projectStartTime" label-width="110px">
            <el-date-picker
              :disabled="isDetail"
              style="width: 100%"
              v-model="addForm.projectStartTime"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目结束预期时间：" prop="projectDesiredEnd" label-width="130px">
            <el-date-picker
              :disabled="isDetail"
              style="width: 100%"
              v-model="addForm.projectDesiredEnd"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 里程碑表格操作 -->
      <div style="margin: 10px 0" v-if="!isDetail">
        <el-button type="primary" @click="handleOpenDialog">插入一行</el-button>
        <el-button type="danger" @click="delTable">删除选中行</el-button>
      </div>
      <!-- 全局错误提示 -->
      <div v-if="formError" class="error-message" style="color: #f56c6c; margin-bottom: 10px">
        {{ formError }}
      </div>
      <!-- 里程碑表格 -->
      <el-table
        :data="addForm.stoneList"
        ref="detailTable"
        border
        @select="selectChange"
        class="table_project"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index" width="80" label="序号"></el-table-column>
        <el-table-column align="center" :width="isDetail ? '120' : ''" label="里程碑计划">
          <template #header>
            <span><i style="color: red">*</i>里程碑计划</span>
          </template>
          <template #default="scope">
            <template v-if="!isDetail">
              <el-form-item
                label-width="0"
                :prop="`stoneList[${scope.$index}].milestonePlan`"
                :rules="addRules.milestonePlan"
              >
                <el-input
                  v-model="scope.row.milestonePlan"
                  placeholder="请输入里程碑计划"
                ></el-input>
              </el-form-item>
            </template>
            <template v-else>
              <span>{{ scope.row.milestonePlan }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :width="isDetail ? '120' : ''"
          label="里程碑负责人"
          prop="milestoneMemo"
        >
          <template #header>
            <span><i style="color: red">*</i>里程碑负责人</span>
          </template>
          <template #default="scope">
            <template v-if="!isDetail">
              <el-form-item
                label-width="0"
                :prop="`stoneList[${scope.$index}].milestoneMemo`"
                :rules="addRules.milestoneMemo"
              >
                <jhSelect
                  :value="scope.row.milestoneMemo"
                  @input="val => (scope.row.milestoneMemo = val)"
                  placeholder="请搜索选择"
                  api-url="/blade-system/user/page"
                  echo-api="/blade-system/user/page"
                  echoParamsKey="ids"
                  api-method="get"
                  list-key="records"
                  total-key="total"
                  label-key="realName"
                  value-key="id"
                  search-key="realName"
                  :debounce-time="500"
                  @change="(val, item) => handleStoneListChange(val, item, scope.$index, scope.row)"
                  :title="title"
                  :disabled="isDetail"
                />
                <!-- <el-select
                  v-model="scope.row.milestoneMemo"
                  placeholder="请选择里程碑负责人"
                  clearable
                  filterable
                  @change="handleStoneListChange(scope.$index, scope.row, 'milestoneMemo')"
                >
                  <el-option
                    v-for="item in memberList"
                    :label="item.realName"
                    :value="item.id"
                  ></el-option>
                </el-select> -->
              </el-form-item>
            </template>
            <template v-else>
              <span>{{ scope.row.milestoneMan }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :width="isDetail ? '120' : ''"
          label="里程碑输出物"
          prop="outputMaterial"
        >
          <template #header>
            <span><i style="color: red">*</i>里程碑输出物</span>
          </template>
          <template #default="scope">
            <template v-if="!isDetail">
              <el-form-item
                label-width="0"
                :prop="`stoneList[${scope.$index}].outputMaterial`"
                :rules="addRules.outputMaterial"
              >
                <el-input
                  v-model="scope.row.outputMaterial"
                  placeholder="请输入里程碑输出物"
                ></el-input>
              </el-form-item>
            </template>
            <template v-else>
              <span>{{ scope.row.outputMaterial }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :width="isDetail ? '180' : ''"
          label="里程碑节点"
          prop="milestoneNode"
        >
          <template #header>
            <span><i style="color: red">*</i>里程碑节点</span>
          </template>
          <template #default="scope">
            <template v-if="!isDetail">
              <el-form-item
                label-width="0"
                :prop="`stoneList[${scope.$index}].milestoneNode`"
                :rules="addRules.milestoneNode"
              >
                <el-date-picker
                  v-model="scope.row.milestoneNode"
                  type="date"
                  placeholder="选择日期时间"
                  style="width: 100%"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </template>
            <template v-else>
              <span>{{ scope.row.milestoneNode }}</span>
            </template>
          </template>
        </el-table-column>
        <!-- 详情页专属列 -->
        <el-table-column
          v-if="isDetail"
          align="center"
          label="执行类型"
          prop="executeType"
          :width="isDetail ? '120' : ''"
        >
          <template #default="scope">
            {{ scope.row.executeTypeText }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="isDetail"
          align="center"
          label="延期时间"
          prop="delayTime"
          :width="isDetail ? '120' : ''"
        ></el-table-column>
        <el-table-column
          v-if="isDetail"
          align="center"
          label="核查结果"
          prop="checkResult"
          :width="isDetail ? '120' : ''"
        >
          <template #default="scope">
            <span v-if="scope.row.checkResult === 0">未核查</span>
            <span v-else-if="scope.row.checkResult === 1">已核查</span>
            <span v-else-if="scope.row.checkResult === 2">已核准</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="isDetail"
          align="center"
          label="核查人"
          prop="checkMan"
          :width="isDetail ? '120' : ''"
        ></el-table-column>
        <el-table-column
          v-if="isDetail"
          align="center"
          label="评价等级"
          prop="gradeTitle"
          :width="isDetail ? '120' : ''"
        >
        </el-table-column>
        <el-table-column
          v-if="isDetail"
          align="center"
          label="评价人"
          prop="gradeMan"
          :width="isDetail ? '120' : ''"
        >
          <template #default="scope">
            {{ scope.row.gradeTitle == '待评价' ? '' : scope.row.gradeMan }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="isDetail"
          width="200"
          align="center"
          label="业务领导评价"
          prop="evaluate"
          :width="isDetail ? '120' : ''"
        ></el-table-column>
        <el-table-column v-if="isDetail" align="center" label="附件" :width="isDetail ? '120' : ''">
          <el-button type="text">附件</el-button>
        </el-table-column>
      </el-table>
    </el-form>
    <!-- 弹窗底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose" :loading="loadingShow">取 消</el-button>
        <el-button type="primary" @click="handleSubmitForm" :loading="loadingShow">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { addProcess, getProcessDetail, getDeplList } from '@/api/flowManagement/index';
import { getRoleUserList } from '@/api/processManagement/taskDispatch';
import { getDictionary } from '@/api/system/dict';
import jhSelect from '@/components/jh-select/index.vue';
import { vi } from 'element-plus/es/locales.mjs';
export default {
  name: 'AddDialog',
  components: { jhSelect },
  props: {
    title: {
      type: String,
      required: true,
      default: '',
    },
    visible: {
      type: Boolean,
      required: true,
      default: false,
    },
    rowItem: {
      type: Object,
      required: true,
      default: () => ({}),
    },
  },
  data() {
    return {
      loadingShow: false,
      formError: '',
      addRules: {
        projectName: [{ required: true, message: '请填写项目名称', trigger: ['blur', 'submit'] }],
        bcId: [{ required: true, message: '请选择项目类型', trigger: ['change', 'submit'] }],
        touchingDept: [
          { required: true, message: '请选择制单部门', trigger: ['change', 'submit'] },
        ],
        projectBackcloth: [
          { required: true, message: '请填写项目背景', trigger: ['blur', 'submit'] },
        ],
        projectTarget: [{ required: true, message: '请填写项目目标', trigger: ['blur', 'submit'] }],
        desiredResult: [{ required: true, message: '请填写预期效果', trigger: ['blur', 'submit'] }],
        projectHeadId: [
          { required: true, message: '请选择项目负责人', trigger: ['change', 'submit'] },
        ],
        memberName: [{ required: true, message: '请选择成员名称', trigger: ['change', 'submit'] }],
        projectSupportMan: [
          { required: true, message: '请选择项目支持人', trigger: ['change', 'submit'] },
        ],
        projectStartTime: [
          { required: true, message: '请选择项目开始时间', trigger: ['change', 'submit'] },
        ],
        projectDesiredEnd: [
          { required: true, message: '请选择项目结束预期时间', trigger: ['change', 'submit'] },
        ],
        stoneList: [
          {
            required: true,
            message: '请至少添加一行里程碑数据',
            trigger: 'submit',
            type: 'array',
          },
          {
            validator: (rule, value, callback) => {
              if (value.length === 0) {
                callback(new Error('请至少添加一行里程碑数据'));
              } else {
                callback();
              }
            },
            trigger: 'submit',
          },
        ],

        // 里程碑数组项字段校验
        milestonePlan: [
          { required: true, message: '请填写里程碑计划', trigger: ['blur', 'submit'] },
        ],
        milestoneMemo: [
          { required: true, message: '请选择里程碑负责人', trigger: ['change', 'submit'] },
        ],
        outputMaterial: [
          { required: true, message: '请输入里程碑输出物', trigger: ['blur', 'submit'] },
        ],
        milestoneNode: [
          { required: true, message: '请选择里程碑节点', trigger: ['change', 'submit'] },
        ],
      },
      memberList: [], //人员列表
      projectType: [], //项目类型
      deplList: [], //部门列表
      openShow: false,
      addForm: {
        stoneList: [],
        projectHeadId: null,
      },
      executeResultList: [], // 执行类型
    };
  },
  computed: {
    // 判断是否为详情页
    isDetail() {
      return this.title === '详情';
    },
  },
  mounted() {
    this.openShow = this.visible;
    // this.getRoleUserList();
    this.getDictionary();
    this.getDeplList();
    if (this.title === '详情' || this.title === '修改') {
      this.getDetails();
      this.getExecuteResultList();
    }
  },
  methods: {
    executeTypeFn(type) {
      const item = this.executeResultList.find(item => item.dictKey === type);
      return item ? item.dictValue : '';
    },
    getExecuteTypeText(type) {
      const item = this.executeResultList.find(item => item.dictKey === type);
      return item ? item.dictValue : '';
    },

    handleStoneListChange(val, item, index, row) {
      if (item) {
        // 假设你需要将姓名存到 milestoneMan 字段用于提交或展示
        row.milestoneMan = item.realName;
      } else {
        // 如果 val 为空，说明是清除操作
        if (!val) {
          row.milestoneMan = '';
        }
        // 如果 val 有值但 item 为空，说明是远程分页导致的匹配失败
        // 此时 jhSelect 内部应该已经显示了 label (姓名)，所以 UI 上用户能看到姓名
        // 如果提交需要 milestoneMan，建议在 submit 时处理，或者接受此时 milestoneMan 为空/旧值
      }
      // if (type === 'milestoneMemo') {
      //   let sel = this.memberList.filter(item => item.id == row.milestoneMemo)[0];
      // row.milestoneMan = item.realName;
      // }
    },
    // 制单部门名称
    deptChange() {
      let sel = this.deplList.filter(item => item.id == this.addForm.touchingDeptId)[0];
      this.addForm.touchingDept = sel.deptName;
    },
    // 项目负责人
    projectHeadChange(value, item) {
      if (item != undefined) {
        this.addForm.projectHead = item.realName;
      }
    },
    handleChange(value, item) {
      // // 制单部门
      // if (type == 'touchingDeptId') {
      //   let sel = this.deplList.filter(item => item.id == this.addForm.touchingDeptId)[0];
      //   this.addForm.touchingDept = sel.deptName;
      // }
      // // 项目负责人
      // if (type == 'projectHeadId') {
      // let sel = this.memberList.filter(item => item.id == this.addForm.projectHeadId)[0];
      // this.addForm.projectHead = sel.realName;
      // }
    },
    // 获取部门列表
    getDeplList() {
      getDeplList().then(res => {
        // console.log(res.data.data, 'res');
        this.deplList = res.data.data;
      });
    },
    // 获取人员
    getRoleUserList() {
      getRoleUserList({ size: 999999, current: 1 }).then(res => {
        this.memberList = res.data.data.records;
      });
    },
    // 获取项目类型 getDictionary
    getDictionary() {
      getDictionary({ code: 'flow_project_type' }).then(res => {
        this.projectType = res.data.data;
      });
    },
    // 获取执行类型字典
    getExecuteResultList() {
      getDictionary({ code: 'flow_project_executeResult' }).then(res => {
        this.executeResultList = res.data.data;
      });
    },
    // 获取详情数据
    getDetails() {
      getProcessDetail(this.rowItem.id).then(res => {
        this.$nextTick(() => {
          let data = res.data.data;
          Object.assign(this.addForm, data);

          const records = res.data.data;
          this.addForm.stoneList = records.stoneList.map(item => {
            item.executeTypeText = this.getExecuteTypeText(item.executeType);
            return item;
          });
          // 安全地处理 memberName 回显
          if (res.data.data.memberName) {
            this.addForm.memberName = String(res.data.data.memberName)
              .split(',')
              .map(id => id.trim())
              .filter(Boolean);
          } else {
            this.addForm.memberName = [];
          }
          this.$forceUpdate();
        });
      });
    },
    handleClose(type) {
      this.formError = '';
      this.openShow = false;
      this.$emit('close ', type);
    },
    selectChange(list, row) {
      row._select = !row._select;
    },
    // 删除选中行
    delTable() {
      this.addForm.stoneList = this.addForm.stoneList.filter(row => !row._select);
    },
    // 插入里程碑行
    handleOpenDialog() {
      const newRow = {
        id: null,
        fmProjectApplication: {},
        attachList: [], // 附件列表默认空数组
        paId: 0,
        paIndex: `${(this.addForm.stoneList?.length || 0) + 1}`,
        milestonePlan: '',
        outputMaterial: '',
        milestoneNode: '',
        milestoneMemo: null,
        evolve: '',
        lastPlan: '',
        grade: null,
        score: 0,
        executeResult: 0,
        executeType: '',
        delayTime: '',
        checkResult: 0,
        checkMan: '',
        checkTime: '',
        gradeMan: '',
        evaluate: '',
        okTime: '',
        delayDate: false,
        fileId: '',
      };
      if (!this.addForm.stoneList) this.addForm.stoneList = [];
      this.addForm.stoneList.push(newRow);

      //   this.$emit('open-dialog', newRow); // 通知父组件
    },
    // 删除里程碑行
    handleDelTable(index) {
      this.$confirm('确定删除该条数据么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.addForm.stoneList.splice(index, 1);
          this.$message.success('删除成功');
          this.$emit('del-table', index); // 通知父组件
        })
        .catch(() => {});
    },
    formatSubmitData(form) {
      const submitData = JSON.parse(JSON.stringify(form));
      if (Array.isArray(submitData.memberName)) {
        submitData.memberName = submitData.memberName.map(item => String(item)).join(',');
      }
      submitData.stoneList = submitData.stoneList.map(row => {
        const { fmProjectApplication, attachList, paIndex, ...validData } = row;
        validData.milestoneNode=validData.milestoneNode+' 00:00:00'
        return validData;
      });
      return submitData;
    },
    // 提交
    async handleSubmitForm() {
      this.formError = '';
      if (this.addForm.stoneList.length === 0) {
        return this.$message.error('立项申请数据不能为空！');
      }
      this.$refs.addForm.validate((isValid, invalidFields) => {
        if (!isValid) {
          this.formError = '存在未完善的字段，请检查红色提示';
          this.$nextTick(() => {
            const firstError = document.querySelector('.el-form-item.is-error');
            if (firstError) {
              firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
          });
          return;
        }
        this.loadingShow = true;
        const submitData = this.formatSubmitData(this.addForm);
        submitData.projectStartTime = submitData.projectStartTime + ' 00:00:00';
        submitData.projectDesiredEnd = submitData.projectDesiredEnd + ' 00:00:00';
        if (this.title === '详情') {
          updateProcess({ ...submitDat, approvalStatus: 1 })
            .then(res => {
              this.$message.success('修改成功');
              this.handleClose(true);
              this.loadingShow = false;
            })
            .catch(err => {
              this.loadingShow = false;
            });
          return;
        } else {
          addProcess({ ...submitData, approvalStatus: 1 })
            .then(res => {
              this.$message.success('提交成功');
              this.handleClose(true);
              this.loadingShow = false;
            })
            .catch(err => {
              this.loadingShow = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 优化表单字段样式
:deep(.el-table .el-form-item) {
  margin-bottom: 0; // 去掉默认边距
}

// 错误提示样式优化
:deep(.table_project .el-form-item__error) {
  font-size: 12px;
  white-space: nowrap;
  z-index: 10;
  background: #fff;
  padding: 2px 4px;
  border: 1px solid #f56c6c;
  border-radius: 4px;
}

.el-table__row {
  height: 80px !important;
}

.el-table__cell {
  vertical-align: middle !important;
}

.error-message {
  font-size: 14px;
  line-height: 1.5;
}
:deep(.el-table .el-table__body .el-table__cell) {
  height: 50px !important;
  padding: 0 !important;
  line-height: 50px !important;
}
</style>
