<template>
  <!-- 唯一根容器：包裹所有内容 -->
  <div class="dataset-form-wrapper">
    <!-- 数据集新建/修改弹窗：使用内部变量 dialogVisible 替代直接绑定 props -->
    <el-dialog
      class="l-dialog"
      :class="lDialog"
      :title="title"
      :visible.sync="dialogVisible"
      :showClose="true"
      :closeOnClickModal="false"
      @close="handleClose"
      :append-to-body="true"
      :width="width + 'px'"
    >
      <div class="form-container">
        <!-- 新增v-if="dialogVisible"：确保弹窗显示后再渲染表单，避免提前校验 -->
        <el-form
          v-if="dialogVisible"
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="0"
          label-position="top"
          class="dataset-form"
        >
          <!-- 第一行：数据集名称 + 数据类型 -->
          <div class="form-row">
            <el-form-item label="数据集名称" prop="datasetName" class="form-col-50">
              <el-input
                class="form-item"
                v-model="form.datasetName"
                clearable
                show-word-limit
                placeholder="请输入"
                maxlength="128"
              ></el-input>
            </el-form-item>

            <el-form-item label="数据类型" prop="datasetType" class="form-col-50">
              <el-select
                class="form-item"
                v-model="form.datasetType"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in dict.type.dataset_data_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>

          <!-- 第二行：标注类型 + 标注模板 -->
          <div class="form-row">
            <el-form-item label="标注类型" prop="labelingType" class="form-col-50">
              <el-select
                class="form-item"
                v-model="form.labelingType"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in dict.type.labeling_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="标注模板" prop="labelingTemplate" class="form-col-50">
              <el-select
                class="form-item"
                v-model="form.labelingTemplate"
                clearable
                placeholder="请先选择标注类型"
                :disabled="!form.labelingType"
              >
              <!-- 改动：绑定联动的标注模板列表 -->
              <el-option
                v-for="item in labelingTemplateList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
              </el-select>
            </el-form-item>
          </div>

          <!-- 第三行：样本名称 + 选择数据 -->
          <div class="form-row">
            <el-form-item label="样本名称" prop="sampleLibraryIds" class="form-col-50">
              <el-select
                class="form-item"
                multiple
                v-model="form.sampleLibraryIds"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in sampleLibraryList"
                  :key="item.sampleLibraryId"
                  :label="item.sampleLibraryName"
                  :value="item.sampleLibraryId"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="选择数据" prop="selectedDataIds" class="form-col-50">
              <div class="data-select-wrapper">
                <el-button
                  type="text"
                  class="select-data-btn"
                  @click="handleSelectData"
                >
                  选择数据
                </el-button>
                <span class="selected-count" v-if="form.selectedDataCount > 0">
                  已选择{{ form.selectedDataCount }}个数据
                </span>
              </div>
              <!-- 存储选中的样本ID列表（隐藏） -->
              <input type="hidden" v-model="form.selectedDataIds" />
            </el-form-item>
          </div>

          <!-- 描述 -->
          <el-form-item label="描述" prop="datasetDesc" class="form-col-100">
            <el-input
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 5 }"
              class="form-item"
              v-model.trim="form.datasetDesc"
              clearable
              show-word-limit
              placeholder="请输入"
              maxlength="200"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button class="cancel-btn" @click="handleClose" :disabled="disabled">取消</el-button>
        <el-button type="primary" class="confirm-btn" :disabled="disabled"
                   @click="submitForm('ruleForm')">保存</el-button>
      </span>
    </el-dialog>

    <!-- 引入选择数据子组件弹窗 -->
    <DataSelectDialog
      :visible="dataSelectVisible"
      :selected-ids="form.selectedDataIds"
      :sample-library-ids="form.sampleLibraryIds"
      @close="dataSelectVisible = false"
      @confirm="handleDataSelectConfirm"
    />
  </div>
</template>

<script>
import _ from 'lodash'
// 引入数据集相关接口（确保接口路径和名称正确）
import {
  addDatasetDataAPI,
  editDatasetDataAPI,
  getDatasetDetailAPI
} from '@/api/data/dataset'
import { sampleListAPI } from '@/api/data/sample'
import DataSelectDialog from './child/DataSelectDialog.vue'

const CONSTANT_PARAMS = {
  type: 'edit'
};

export default {
  name: "DatasetForm",
  // 注册子组件
  components: {
    DataSelectDialog: DataSelectDialog
  },
  props: {
    width: {
      type: Number,
      default: 900 // 直接设置默认宽度为900px，适配宽弹窗
    },
    rowData: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    isAdd: {
      type: String,
      default: ''
    },
    // 核心：接收父组件传递的显隐状态（只读）
    visible: {
      type: Boolean,
      default: false
    }
  },
  dicts: ['labeling_type', 'labeling_template', 'dataset_data_type'], // 数据集类型字典
  data() {
    return {
      // 内部变量：控制弹窗显隐，初始值置空，通过watch同步
      dialogVisible: false,
      lDialog: this.width > 500 ? "w700" : "w500",
      // 选择数据弹窗显隐状态
      dataSelectVisible: false,
      // 新增：标注模板联动数据源（随标注类型变化）
      labelingTemplateList: [],
      form: {
        datasetId: null,
        datasetName: '',        // 数据集名称
        datasetType: '',        // 数据类型（和后端字段对齐）
        labelingType: '',       // 标注类型
        labelingTemplate: '',   // 标注模板
        sampleLibraryIds: [],   // 样本库ID（多选数组）
        selectedDataIds: '',    // 选中的样本数据ID列表（逗号分隔）
        selectedDataCount: 0,   // 选中的数据数量
        datasetDesc: ''         // 描述
      },
      rules: {
        datasetName: [
          { required: true, message: '数据集名称不能为空', trigger: 'blur' }
        ],
        datasetType: [          // 校验字段名同步改为datasetType
          { required: true, message: '数据类型不能为空', trigger: 'change' }
        ],
        labelingType: [
          { required: true, message: '标注类型不能为空', trigger: 'change' }
        ],
        labelingTemplate: [
          { required: true, message: '标注模板不能为空', trigger: 'change' }
        ],
        sampleLibraryIds: [
          {
            validator: (rule, value, callback) => {
              if (value.length === 0) {
                callback(new Error('至少选择一个样本'));
              } else {
                callback();
              }
            },
            trigger: 'change'
          }
        ],
        selectedDataIds: [
          { required: true, message: '请选择数据', trigger: 'change' }
        ]
      },
      loading: null,
      sampleLibraryList: [],    // 样本库列表
      personLoading: false      // 样本库加载状态
    };
  },
  watch: {
    // 修复：isAdd监听仅处理表单数据，不干扰弹窗状态
    isAdd: {
      handler(newVal) {
        if (newVal === CONSTANT_PARAMS.type && this.rowData.datasetId) {
          this.initFormData();  // 编辑时初始化数据
        } else if (newVal === 'add') {
          this.resetForm();     // 新增时重置表单（重命名方法，避免和弹窗逻辑混淆）
        }
      },
      immediate: true,
    },
    // 核心修复：深度监听父组件visible，确保同步到内部dialogVisible
    visible: {
      handler(newVal) {
        this.dialogVisible = newVal;
        // 弹窗关闭时重置表单（仅清空数据，不干扰显隐）
        if (!newVal) {
          this.resetForm();
        }
      },
      immediate: true, // 初始化时强制同步一次
      deep: true
    },
    // 新增核心：标注类型联动标注模板，硬编码映射你的键值规则
    'form.labelingType': {
      handler(newType) {
        // 1. 清空原有模板选中值，避免残留
        this.form.labelingTemplate = '';
        // 2. 定义你指定的联动规则：标注类型value -> 对应标注模板value数组
        const typeToTemplateMap = {
          "1": ["1", "2"],
          "2": ["3", "4", "5"],
          "3": ["6", "7"],
          "4": ["8", "9"]
        };
        // 3. 根据选中的标注类型，过滤对应的标注模板
        if (newType && typeToTemplateMap[newType]) {
          this.labelingTemplateList = this.dict.type.labeling_template.filter(item => {
            return typeToTemplateMap[newType].includes(item.value);

          });
        } else {
          // 未选择标注类型/无匹配规则，清空模板列表
          this.labelingTemplateList = [];
        }
        // 4. 重置标注模板的表单校验，避免残留报错
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.clearValidate('labelingTemplate');
        }
      },
      immediate: true // 初始化执行，适配编辑回显场景
    }
  },
  created() {
    this.initSampleList() // 初始化样本库列表
  },
  methods: {
    /** 获取样本库列表 */
    async initSampleList() {
      try {
        this.personLoading = true;
        const res = await sampleListAPI({});
        if (res.code === 200) {
          const sampleList = res.rows || [];
          this.sampleLibraryList = sampleList.map(item => ({
            sampleLibraryId: item.sampleLibraryId,
            sampleLibraryName: item.sampleLibraryName,
          }));
        } else {
          this.$modal.msgError('获取样本库列表失败：' + res.msg);
        }
      } catch (error) {
        this.$modal.msgError('获取样本库列表异常：' + error.message);
        console.error('获取样本库列表失败：', error);
      } finally {
        this.personLoading = false;
      }
    },

    /** 编辑时初始化表单数据 */
    async initFormData() {
      try {
        this.personLoading = true;
        const res = await getDatasetDetailAPI({ datasetId: this.rowData.datasetId });
        if (res.code === 200 && res.data) {
          const data = res.data;
          this.form = {
            ...this.form,
            ...data,
            // 兼容后端返回的样本库ID（数组/逗号分隔字符串转数组）
            sampleLibraryIds: data.sampleLibraryId
              ? (Array.isArray(data.sampleLibraryId)
                ? data.sampleLibraryId
                : data.sampleLibraryId.split(','))
              : [],
            selectedDataIds: data.sampleIds || '',
            selectedDataCount: data.sampleIds ? data.sampleIds.split(',').length : 0
          };
          // 新增：编辑回显时，手动触发标注类型联动（确保模板列表加载并选中回显值）
          this.$nextTick(() => {
            this.$watch('form.labelingType').run(this.form.labelingType);
          });
        } else {
          this.$modal.msgError('获取数据集详情失败：' + (res.msg || '无数据'));
        }
      } catch (error) {
        this.$modal.msgError('获取数据集详情异常：' + error.message);
        console.error('获取数据集详情失败：', error);
      } finally {
        this.personLoading = false;
      }
    },

    /** 关闭弹窗，通知父组件 */
    handleClose() {
      this.dialogVisible = false; // 先更新内部变量
      // 优化：延迟触发关闭事件，避免父组件状态更新过快
      this.$nextTick(() => {
        this.$emit("closeDialog");
      });
    },

    /** 重置表单（仅清空数据，不干扰弹窗状态） */
    resetForm() {
      this.form = {
        datasetId: null,
        datasetName: '',
        datasetType: '',
        labelingType: '',
        labelingTemplate: '',
        sampleLibraryIds: [],
        selectedDataIds: '',
        selectedDataCount: 0,
        datasetDesc: ''
      };
      // 先清除校验提示，再重置字段（避免DOM未渲染报错）
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.clearValidate();
        this.$refs.ruleForm.resetFields();
      }
      // 新增：重置时清空联动模板列表
      this.labelingTemplateList = [];
    },

    /** 打开选择数据弹窗 */
    handleSelectData() {
      // 校验是否已选择样本库
      if (this.form.sampleLibraryIds.length === 0) {
        this.$message.warning('请先选择样本名称！');
        return;
      }
      this.dataSelectVisible = true;
    },

    /** 选择数据确认回调 */
    handleDataSelectConfirm({ selectedIds, selectedCount }) {
      this.form.selectedDataIds = selectedIds;
      this.form.selectedDataCount = selectedCount;
      // 触发表单校验更新
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.validateField('selectedDataIds');
      }
    },

    /** 提交成功处理 */
    handleResult(res) {
      this.$modal.msgSuccess(res.msg || '操作成功');
      this.resetForm();
      this.$emit('handleQuery');
      this.handleClose();
    },

    /** 提交表单（核心：处理多选参数+校验+接口调用） */
    submitForm(formName) {
      // 避免refs未定义报错
      if (!this.$refs[formName]) return;

      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loading = this.$loading({
            lock: true,
            text: "数据提交中，请稍候...",
            background: 'rgba(0,0,0,0.5)',
            target: this.$el.querySelector('.el-dialog') || document.body
          });

          try {
            let params = _.cloneDeep(this.form);

            // 核心参数处理：字段映射和格式转换
            params = {
              ...params,
              // 样本库ID：数组转逗号分隔字符串（后端接收格式）
              sampleLibraryId: params.sampleLibraryIds.join(','),
              // 选中数据ID：赋值给sampleIds（后端预期的字段名）
              sampleIds: params.selectedDataIds
            };

            // 删除无用/冗余字段
            delete params.sampleLibraryIds;
            delete params.selectedDataIds;
            delete params.selectedDataCount;

            // 新增/编辑分支：调用对应的接口
            let res;
            if (this.isAdd === 'add') {
              // 新增数据集：移除datasetId（避免传递null）
              delete params.datasetId;
              res = await addDatasetDataAPI(params);
              console.log('新增提交参数：', params);
            } else {
              // 编辑数据集：确保datasetId存在
              params.datasetId = this.form.datasetId || this.rowData.datasetId;
              res = await editDatasetDataAPI(params);
              console.log('编辑提交参数：', params);
            }

            // 接口返回处理
            if (res.code === 200) {
              this.handleResult(res);
            } else {
              this.$modal.msgError(res.msg || '操作失败，请重试');
            }
          } catch (error) {
            this.$modal.msgError(this.errorMsg(error));
            console.error('提交表单失败：', error);
          } finally {
            if (this.loading) {
              this.loading.close();
            }
          }
        }
      });
    },

    /** 错误信息格式化 */
    errorMsg(error) {
      return error.message || '操作失败，请重试';
    }
  }
};
</script>

<style lang="scss" scoped>
// 根容器样式（不影响原有样式）
.dataset-form-wrapper {
  width: 100%;
}

// 弹窗宽度适配
.w700 ::v-deep .el-dialog {
  width: 900px !important;
  font-family: "Source Han Sans CN", sans-serif;
}

.w500 ::v-deep .el-dialog {
  width: 500px !important;
  font-family: "Source Han Sans CN", sans-serif;
}

// 表单容器
.form-container {
  padding: 0 20px;
}

// 数据集表单整体样式
.dataset-form {
  .form-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px 16px; // 增大列间距（左右15px）
  }

  .form-col-50 {
    flex: 0 0 calc(50% - 30px); // 50%宽度 - 左右15px margin
    margin: 0 15px;
  }

  .form-col-100 {
    flex: 0 0 calc(100% - 30px);
    margin: 0 15px;
  }

  // 表单项样式
  .el-form-item {
    margin-bottom: 0;

    .el-form-item__label {
      font-size: 14px;
      color: #333;
      padding: 0 0 8px 0;
      line-height: 1;
      font-weight: normal;

      // 必填星号
      &::before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
      }
    }

    .form-item {
      width: 100%;
      border-radius: 4px;

      // 适配多选下拉框高度
      &.el-select {
        .el-select__tags {
          flex-wrap: wrap;
          height: auto !important;
          min-height: 36px;
        }
      }

      &.el-textarea {
        height: auto;
      }
    }
  }

  // 选择数据容器样式
  .data-select-wrapper {
    display: flex;
    align-items: center;
    height: 36px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0 10px;
    background: #fff;

    .select-data-btn {
      padding: 0;
      color: #1f72ea;
      font-size: 14px;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .selected-count {
      margin-left: 10px;
      font-size: 14px;
      color: #666;
    }
  }
}

// 弹窗头部样式
::v-deep .el-dialog__header {
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;

  .el-dialog__title {
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }

  .el-dialog__headerbtn {
    top: 16px;
    right: 20px;
  }
}

// 弹窗主体样式
::v-deep .el-dialog__body {
  padding: 20px;
  max-height: 600px;
  overflow-y: auto;
}

// 弹窗底部按钮样式
::v-deep .el-dialog__footer {
  padding: 16px 20px;
  border-top: 1px solid #ebeef5;
  text-align: right;
}

// 按钮样式
.confirm-btn {
  width: 98px;
  height: 36px;
  background: #1F72EA !important;
  border-radius: 4px !important;
  color: #fff !important;
  border: none !important;
  font-size: 14px;
  margin-left: 10px;

  &:hover {
    background: #4A8BFF !important;
  }
}

.cancel-btn {
  width: 98px;
  height: 36px;
  background: #fff !important;
  border: 1px solid #dcdfe6 !important;
  border-radius: 4px !important;
  color: #666 !important;
  font-size: 14px;

  &:hover {
    background: #f5f7fa !important;
  }
}

// 适配小屏幕
@media (max-width: 768px) {
  .dataset-form .form-col-50 {
    flex: 0 0 calc(100% - 16px);
    margin: 0 8px;
  }
}
</style>
