<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogOpen"
    width="900px"
    :close-on-click-modal="false"
    append-to-body
    @opened="initData"
    @close="handleCancel"
  >
    <div>
      <!-- 步骤导航 -->
      <el-steps align-center :active="activeStep">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step
          title="步骤 3"
          description="这是一段很长很长很长的描述性文字"
          class="step-description"
        ></el-step>
      </el-steps>

      <!-- 表单区域 -->
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        label-width="100px"
      >
        <!-- 步骤1内容 -->
        <div v-if="activeStep === 1">
          <el-form-item label="任务名称">
            <el-input
              type="text"
              v-model="formData.name"
              placeholder="请输入任务名称"
            ></el-input>
          </el-form-item>

          <el-form-item label="物理模型">
            <el-select
              v-model="formData.modelId"
              placeholder="请选择数据生成模型"
              @change="onModelChange"
            >
              <el-option
                v-for="item in faultPhysicalOptions"
                :key="item.modelId"
                :label="item.modelName"
                :value="item.modelId"
              />
            </el-select>
          </el-form-item>

          <!-- 模型参数区域（类型1） -->
          <el-form-item
            v-if="formData.modelType === '1'"
            label="模型参数"
          >
            <el-input
              v-model="formData.bizParams"
              type="textarea"
              placeholder="请输入模型参数（JSON格式）"
            />
          </el-form-item>

          <!-- 参数组管理（类型1） -->
          <el-form-item
            v-if="formData.modelType === '1'"
            label="模型参数"
          >
            <el-row :gutter="10">
              <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1" :offset="22">
                <el-button
                  icon="el-icon-plus"
                  @click="addModelDataParams"
                  size="mini"
                  circle
                  title="添加参数组"
                />
              </el-col>
            </el-row>

            <el-collapse
              :gutter="20"
              v-for="(paramGroup, groupIndex) in modelDataParams"
              :key="groupIndex"
            >
              <el-collapse-item
                :title="'参数组' + (groupIndex + 1)"
                :name="groupIndex"
              >
                <el-row
                  :xl="4"
                  v-for="(value, key) in paramGroup"
                  :key="key"
                  :gutter="20"
                >
                  <el-col>
                    <el-form-item
                      :label="key"
                      :prop="`modelDataParams.${groupIndex}.${key}`"
                    >
                      <el-input
                        v-model="paramGroup[key]"
                        :placeholder="'请输入' + key + '的值'"
                        style="width: 200px;"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-collapse-item>
            </el-collapse>
          </el-form-item>

          <!-- 文件来源选择（类型2） -->
          <el-form-item
            v-if="formData.modelType === '2'"
            label="文件来源"
            prop="dataGenName"
          >
            <el-select
              v-model="formData.dataSource"
              placeholder="请选择文件来源"
              @change="onDataSourceChange"
            >
              <el-option key="1" label="文件上传" value="1"></el-option>
              <el-option key="2" label="文件管理" value="2"></el-option>
            </el-select>
          </el-form-item>

          <!-- 文件显示（类型2） -->
          <el-form-item
            v-if="formData.modelType === '2'"
            label="选择文件"
            prop="dataGenName"
          >
            <span>{{ rowData.fileName }}</span>
          </el-form-item>

          <!-- 文件上传组件（数据源1） -->
          <el-form-item
            v-if="formData.dataSource === '1'"
            label="文件上传"
            prop="filePath"
          >
            <file-upload
              :fileType="uploadFileType"
              @child-event="handleChildData"
            />
          </el-form-item>

          <div class="text-right">
            <el-button type="primary" @click="nextStep">下一步</el-button>
          </div>
        </div>

        <!-- 步骤2内容 -->
        <div v-if="activeStep === 2">
          <el-form-item label="诊断模型">
            <el-select
              v-model="formData.diagModelId"
              placeholder="请选择诊断模型"
              @change="onModeldiagChange"
            >
              <el-option
                v-for="item in faultOptions"
                :key="item.modelId"
                :label="item.modelName"
                :value="item.modelId"
              />
            </el-select>
          </el-form-item>

          <div class="text-right">
            <el-button @click="prevStep">上一步</el-button>
            <el-button type="primary" @click="nextStep">下一步</el-button>
          </div>
        </div>

        <!-- 步骤3内容 -->
        <div v-if="activeStep === 3">
          <el-form-item label="步骤 3 表单字段">
            <el-input
              v-model="formData.step3Field"
              placeholder="请输入步骤 3 的内容"
            />
          </el-form-item>

          <div class="text-right">
            <el-button @click="prevStep">上一步</el-button>
          </div>
        </div>
      </el-form>
    </div>

    <!-- 对话框底部操作 -->
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="handleSubmit"
        :disabled="activeStep!== 3"
      >确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>

    <!-- 文件管理子组件 -->
    <file-table
      v-model="fileManagementDialogVisible"
      @callback="handleRowData"
    />
  </el-dialog>
</template>

<script>
import {
  addWorkflow,
  updateWorkflow
} from "@/api/workflow/workflow";
import FileTable from './fileTable.vue';
import { getDataOptions } from '@/api/data/data'
import { getFaultPhysicalOptions } from '@/api/model/faultPhysical' // 修正组件命名

export default {
  components: { FileTable }, // 注册组件列表
  props: {
    value: {
      type: Boolean,
      default: false,
      description: '控制对话框显示的双向绑定属性'
    },
    dataInfo: {
      type: Object,
      default: null,
      description: '编辑时传入的原始数据信息'
    },
    options: {
      type: String,
      default: 'add',
      description: '操作类型（add/edit）'
    }
  },

  dicts: ['sys_job_status', 'data_type'], // 字典数据标识
  data() {
    return {
      uploadFileType: ["csv", "xls", "xlsx"], // 允许的上传文件类型
      modelDataParams: [], // 参数组数据（类型1）
      dataOptions: [], // 数据选项（预留扩展）
      faultPhysicalOptions: [], // 物理模型选项
      faultOptions: [], // 诊断模型选项
      formData: {
        // 基础信息
        outputPath: null,
        newFileName: null,
        name: null,
        modelId: null,
        modelType: null,
        dataId: null,
        startTime: null,
        endTime: null,
        remark: null,
        diagModelId:null,
        // 扩展信息
        modelDataParams: [],
        modelPath: null,
        modelName: null,
        step2Field: null,
        step3Field: null,
        dataSource: null // 文件来源（类型2）
      },
      rules: {
        name: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
        modelId: [{ required: true, message: "请选择数据生成模型", trigger: "blur" }]
      },
      dialogOpen: false, // 对话框显示状态
      workflowNodeList: [], // 工作流节点列表
      checkedWorkflowNode: [], // 选中的工作流节点
      activeStep: 1, // 当前步骤
      fileManagementDialogVisible: false, // 文件管理对话框状态
      rowData: {} // 选中的文件行数据
    };
  },
  model: {
    prop: 'value', // 双向绑定属性名
    event: 'callback' // 触发更新的事件名
  },
  watch: {
    // 监听父组件值变化同步对话框状态
    value(newVal) {
      this.dialogOpen = newVal;
    }
  },
  computed: {
    // 根据操作类型生成标题
    title() {
      return this.options === 'add' ? '添加流程任务' : '修改流程任务';
    }
  },
  methods: {
    // 文件管理组件回调 - 接收选中的文件数据
    handleRowData(row) {
      console.log('接收到文件管理的行数据:', row);
      this.rowData = row;
      this.fileManagementDialogVisible = false;
    },

    // 文件上传组件回调 - 接收上传文件信息
    handleChildData(datas) {
      console.log('文件上传的内容',datas)
      this.formData.filePath = datas.filelocalPath;
      this.formData.fileName = datas.fileName;
      this.formData.fileSize = datas.fileSize;
      this.formData.fileSizeBytes = datas.fileSizeBytes;
      this.formData.fileSuffix = datas.fileSuffix;
      this.formData.url = datas.url;
    },

    // 诊断模型选择变化处理（预留扩展）
    onModeldiagChange() {
      const selectedModel = this.faultPhysicalOptions.find(
        item => item.modelId === this.formData.diagModelId
      );
      console.log('诊断模型数据', selectedModel)
    },

    // 物理模型选择变化处理
    onModelChange() {
      const selectedModel = this.faultPhysicalOptions.find(
        item => item.modelId === this.formData.modelId

      );
      console.log('物理模型数据', selectedModel)
      if (!selectedModel) return;

      // 同步模型基础信息
      this.formData.modelType = selectedModel.modelType;
      this.formData.modelPath = selectedModel.modelPath;

      // 根据模型类型初始化参数数据
      if (selectedModel.modelType === "2") {
        this.formData.bizParams = selectedModel.modelDataParams || "";
        this.modelDataParams = []; // 类型2不使用参数组
      } else {
        // 解析并初始化参数组（类型1）
        const exampleParams = this.parseParams(selectedModel.modelDataParams || "[]");
        this.modelDataParams = exampleParams.length ? exampleParams : [{}];
      }
    },

    // 加载基础数据选项
    loadOptions() {
      // 数据选项（示例）
      getDataOptions().then(resp => {
        this.dataOptions = resp.data || [];
      });
      // 物理模型选项（类型0）
      getFaultPhysicalOptions(0).then(resp => {
        this.faultPhysicalOptions = resp.data || [];
      });
      // 诊断模型选项（类型1）
      getFaultPhysicalOptions(1).then(resp => {
        this.faultOptions = resp.data || [];
      });
    },

    // 对话框打开时初始化数据
    initData() {
      this.loadOptions(); // 加载基础数据

      // 编辑模式初始化
      if (this.options!== 'add' && this.dataInfo) {
        this.formData = { ...this.dataInfo }; // 浅拷贝原始数据
        this.workflowNodeList = this.dataInfo.workflowNodeList; // 初始化节点列表
      }

      this.activeStep = 1; // 重置步骤
    },

    // 表单提交处理
    handleSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 处理参数组数据（类型1）
          if (this.formData.modelType!== "2") {
            this.formData.modelDataParams = JSON.stringify(this.modelDataParams);
            this.formData.bizParams = this.formData.modelDataParams; // 同步参数
          }

          this.formData.workflowNodeList = this.workflowNodeList; // 绑定节点数据

          // 调用接口
          const api = this.options === 'add' ? addWorkflow : updateWorkflow;
          api(this.formData).then(response => {
            this.$message.success(`${this.options === 'add' ? '新增' : '修改'}成功`);
            this.dialogOpen = false;
            this.$emit('callback', false); // 通知父组件更新
          });
        }
      });
    },

    // 取消操作处理
    handleCancel() {
      this.dialogOpen = false;
      this.$emit('callback', false); // 关闭对话框
      this.reset(); // 重置表单数据
    },

    // 表单数据重置
    reset() {
      this.formData = {
        // 重置基础字段
        outputPath: null,
        newFileName: null,
        name: null,
        modelId: null,
        modelType: null,
        dataId: null,
        startTime: null,
        endTime: null,
        remark: null,
        // 重置扩展字段
        modelDataParams: [],
        modelPath: null,
        modelName: null,
        step2Field: null,
        step3Field: null,
        dataSource: null
      };

      // 重置关联数据
      this.modelDataParams = [];
      this.workflowNodeList = [];
      this.checkedWorkflowNode = [];
      this.resetForm("form"); // 重置表单验证状态
      this.activeStep = 1; // 回到第一步
    },

    // 步骤导航 - 下一步
    nextStep() {
      if (this.activeStep < 3) {
        this.activeStep++;
      }
    },

    // 步骤导航 - 上一步
    prevStep() {
      if (this.activeStep > 1) {
        this.activeStep--;
      }
    },

    // 添加参数组（类型1）
    addModelDataParams() {
      // 基于最后一组参数创建新组（保留字段结构）
      const lastGroup = this.modelDataParams[this.modelDataParams.length - 1] || {};
      const newGroup = Object.fromEntries(
        Object.keys(lastGroup).map(key => [key, ""])
      );
      this.modelDataParams.push(newGroup);
    },

    // 参数解析工具方法
    parseParams(params) {
      try {
        const parsed = JSON.parse(params);
        return Array.isArray(parsed) ? parsed : [parsed]; // 确保返回数组
      } catch (e) {
        console.error("参数解析错误", e);
        return []; // 解析失败返回空数组
      }
    },

    // 文件来源变化处理
    onDataSourceChange(value) {
      if (value === '2') {
        this.fileManagementDialogVisible = true; // 打开文件管理对话框
      }
    }
  }
};
</script>

<style scoped>
.el-step__title .is-process{
  color: #FFFFFF;
}
.text-right {
  text-align: right;
  margin-top: 10px;
}
/* 步骤描述文字样式优化 */
.step-description {
  white-space: pre-line; /* 保留换行符 */
  text-align: center;
  padding-top: 8px;
}
</style>
