<template>
  <el-row>
    <el-col :span="6" style="border-right: 1px solid #000; padding-right: 20px">
      <!-- 顶部工具栏 -->
      <el-form :model="headerFormData" label-width="auto">
        <el-form-item label="接口服务名称">
          <el-input v-model="headerFormData.apiName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="接口提供方URL地址">
          <el-input v-model="headerFormData.offerUrl" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="default" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 左侧表格 -->

      <el-table
        :data="currentLeftTableData"
        border
        max-height="500"
        style="width: 100%; margin-right: 10px"
      >
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column prop="apiName" label="接口服务名称"></el-table-column>
        <el-table-column prop="offerUrl" label="接口提供方URL地址"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="onEyeClick(scope.row)" icon="el-icon-view"></el-button>
            <el-button type="text" @click="onDeleteClick(scope.row)" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          @current-change="onPageChange"
        ></el-pagination>
      </div>
    </el-col>
    <el-col :span="18" style="padding-left: 20px">
      <div>六统一接入方式为API,必填此表</div>
      <!-- 右侧表格 -->
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: end;
          align-items: center;
        "
      >
        <el-button type="primary" @click="addClick">新增</el-button>
        <el-button type="primary">上传</el-button>
        <el-button type="primary">模版下载</el-button>
      </div>
      <el-table
        ref="rightTable"
        :data="rightTableData"
        border
        style="width: 100%"
        :expand-row-keys="expandedRows"
        row-key="id"
        @expand-change="onExpandChange"
        :show-header="false"
        max-height="800"
        @selection-change="handleSelectionChange"
      >
        <!-- 序号列 -->
        <el-table-column label="序号" type="index" width="50"></el-table-column>

        <!-- 普通列 -->
        <el-table-column prop="name" label="接口服务名称">
          <template slot-scope="scope">
            <div style="display: flex; align-items: center">
              <div>接口服务名称</div>
              <el-input
                style="width: 260px; margin-left: 20px"
                v-model="scope.row.apiName"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="alias" label="表英文名">
          <template slot-scope="scope">
            <div style="display: flex; align-items: center">
              <span>表英文名</span>
              <el-input
                style="width: 260px; margin-left: 20px"
                v-model="scope.row.apiEnglishName"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="urlDetail" label="接口描述">
          <template slot-scope="scope">
            <div style="display: flex; align-items: center">
              <span>接口描述</span>
              <el-input
                style="width: 260px; margin-left: 20px"
                v-model="scope.row.apiDetail"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </template>
        </el-table-column>

        <!-- 展开行 -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <div class="expanded-content">
              <el-form
                :model="apiFormData"
                label-width="auto"
                inline
                class="form-detail-inline"
                :label-position="right"
              >
                <el-form-item label="应用场景">
                  <el-input v-model="props.row.scenario" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="接口提供方">
                  <el-input v-model="props.row.offer" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="接口提供方URL地址">
                  <el-input v-model="props.row.offerUrl" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="支持格式">
                  <el-input v-model="props.row.format" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="接口调用方">
                  <el-input v-model="props.row.access" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="接口接口调用方URL地址">
                  <el-input v-model="props.row.accessUrl" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="请求方式">
                  <el-input v-model="props.row.requestMethod" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="六统一接口地址URL">
                  <el-input v-model="props.row.sixUrl" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="调用方向">
                  <el-input v-model="props.row.direction" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="调试频率">
                  <el-input v-model="props.row.applyCount" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="每频率内的条数">
                  <el-input v-model="props.row.countNum" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="调用间隔说明">
                  <el-input v-model="props.row.countDetail" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="联调的数据量">
                  <el-input v-model="props.row.num" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="联调实施步骤">
                  <el-input v-model="props.row.steps" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="网络策略确认">
                  <el-input v-model="props.row.internet" placeholder="请输入"></el-input>
                </el-form-item>
              </el-form>
              <div class="title">接口定义</div>
              <div class="table_title">Header请求参数</div>
              <el-table
                ref="rightTable"
                :data="props.row.tabEtlHeaderSuns"
                border
                style="width: 100%"
              >
                <!-- 序号列 -->
                <el-table-column label="序号" type="index" width="50"></el-table-column>

                <!-- 普通列 -->
                <el-table-column prop="name" label="中文名称">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="englishName" label="英文名称">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.englishName" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="dataType" label="数据类型">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.dataType" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="isRequired" label="是否必填">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.isRequired" placeholder="请选择">
                      <el-option
                        v-for="item in whetherOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="ps" label="描述">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.ps" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="example" label="示例说明">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.example" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="small"
                      @click="deleteHeaderRow(props.row, scope.$index,scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                type="primary"
                plain
                class="mt-4"
                style="width: 100%"
                icon="el-icon-plus"
                @click="addHeaderRow(props.row)"
              ></el-button>
              <div class="table_title">Body请求参数说明</div>
              <el-table
                ref="rightTable"
                :data="props.row.tabEtlBodySuns"
                border
                style="width: 100%"
              >
                <!-- 序号列 -->
                <el-table-column label="序号" type="index" width="50"></el-table-column>

                <!-- 普通列 -->
                <el-table-column prop="name" label="中文名称">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="englishName" label="英文名称">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.englishName" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="dataType" label="数据类型">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.dataType" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="isRequired" label="是否必填">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.isRequired" placeholder="请选择">
                      <el-option
                        v-for="item in whetherOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="ps" label="描述">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.ps" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="example" label="示例说明">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.example" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="deleteBodyRow(props.row, scope.$index,scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                type="primary"
                plain
                class="mt-4"
                style="width: 100%"
                icon="el-icon-plus"
                @click="addBodyRow(props.row)"
              ></el-button>

              <div class="table_title">Query请求参数说明</div>
              <el-table
                ref="rightTable"
                :data="props.row.tabEtlQuerySuns"
                border
                style="width: 100%"
              >
                <!-- 序号列 -->
                <el-table-column label="序号" type="index" width="50"></el-table-column>

                <!-- 普通列 -->
                <el-table-column prop="name" label="中文名称">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="englishName" label="英文名称">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.englishName" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="dataType" label="数据类型">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.dataType" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="isRequired" label="是否必填">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.isRequired" placeholder="请选择">
                      <el-option
                        v-for="item in whetherOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="ps" label="描述">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.ps" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="example" label="示例说明">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.example" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="small"
                      @click="deleteQueryRow(props.row, scope.$index,scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                type="primary"
                plain
                class="mt-4"
                style="width: 100%"
                icon="el-icon-plus"
                @click="addQueryRow(props.row)"
              ></el-button>

              <div class="table_title">返回参数说明</div>
              <el-table
                ref="rightTable"
                :data="props.row.tabEtlResponseSuns"
                border
                style="width: 100%"
              >
                <!-- 序号列 -->
                <el-table-column label="序号" type="index" width="50"></el-table-column>

                <!-- 普通列 -->
                <el-table-column prop="name" label="中文名称">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="englishName" label="英文名称">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.englishName" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="dataType" label="数据类型">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.dataType" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="isRequired" label="是否必填">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.isRequired" placeholder="请选择">
                      <el-option
                        v-for="item in whetherOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="ps" label="描述">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.ps" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="example" label="示例说明">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.example" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="small"
                      @click="deleteResponseRow(props.row, scope.$index,scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                type="primary"
                plain
                class="mt-4"
                style="width: 100%"
                icon="el-icon-plus"
                @click="addResponseRow(props.row)"
              ></el-button>

              <div class="table_title">data子项说明</div>
              <el-table
                ref="rightTable"
                :data="props.row.tabEtlDataSuns"
                border
                style="width: 100%"
              >
                <!-- 序号列 -->
                <el-table-column label="序号" type="index" width="50"></el-table-column>

                <!-- 普通列 -->
                <el-table-column prop="name" label="中文名称">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="englishName" label="英文名称">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.englishName" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="dataType" label="数据类型">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.dataType" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="isRequired" label="是否必填">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.isRequired" placeholder="请选择">
                      <el-option
                        v-for="item in whetherOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="ps" label="描述">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.ps" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="example" label="示例说明">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.example" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="deleteDataRow(props.row, scope.$index,scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                type="primary"
                plain
                class="mt-4"
                style="width: 100%"
                icon="el-icon-plus"
                @click="addDataRow(props.row)"
              ></el-button>
              <el-form
                :model="apiFormData"
                label-width="auto"
                inline
                class="textarea-form"
                :label-position="right"
              >
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="请求示例">
                      <el-input
                        v-model="props.row.requestExample"
                        placeholder="请输入"
                        type="textarea"
                        :rows="4"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="返回示例">
                      <el-input
                        v-model="props.row.responseExample"
                        placeholder="请输入"
                        type="textarea"
                        :rows="4"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>
<script>
import {
  deleteUrlSun,
  deleteDataSun
} from "@/api/unified-access/access-feedback.js";
import MyForm from "@/components/MyForm";
export default {
  name: "",
  components: {
    MyForm
  },
  props: {
    thirdStep: {
      type: Array,
      default: []
    },
    title: {
      type: String,
      default: "弹窗标题"
    }
  },
  watch: {
    thirdStep: {
      handler(newVal) {
        this.rightTableData = newVal;
        this.leftTableData = this.rightTableData;
        this.pagination.total = this.leftTableData.length;
      },
      deep: true, // 深入监听
      immediate: true
    },
    title: {
      handler(newVal) {
        this.dialogTitle = newVal;
      },
      deep: true, // 深入监听
      immediate: true
    }
  },
  data() {
    return {
      dialogTitle: "",
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 161
      },
      // 表格选中的数据
      selectedRows: [],
      leftTableData: [],
      rightTableData: [],
      headerFormData: {},
      apiFormData: {},
      expandedRows: [],
      whetherOptions: [
        { label: "是", value: 1 },
        { label: "不是", value: 0 }
      ]
    };
  },
  computed: {
    // 计算当前页要显示的数据
    currentLeftTableData() {
      const start =
        (this.pagination.currentPage - 1) * this.pagination.pageSize;
      const end = start + this.pagination.pageSize;
      return this.leftTableData.slice(start, end);
    }
  },
  methods: {
    onEyeClick(row) {
      // // 检查右侧表格是否已存在相同项
      // const existing = this.rightTableData.find(item => item.tableName === row.tableName && item.tableEnglishName === row.tableEnglishName);
      // 获取右侧表格对应的数据并展开
      if (!this.expandedRows.includes()) {
        // this.expandedRows.push(row.tableName); // 将左侧表格对应的行名称加入展开行
        this.expandedRows = [row.id]; // 将左侧表格对应的行名称加入展开行
      }
    },
    // 删除行
    onDeleteClick(row) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
        type: "warning"
      })
        .then(() => {
          deleteDataSun(row.id).then(res => {
            if (+res.code === 200) {
              this.$message({
                message: res.msg,
                type: "success"
              });
              const index = this.leftTableData.findIndex(
                item => item.id === row.id
              );
              if (index > -1) {
                this.leftTableData.splice(index, 1);
              }
              // 同步删除右侧表格的对应项
              this.onDeleteRightClick(row);
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 在右侧表格删除时，删除对应的数据
    onDeleteRightClick(row) {
      const index = this.rightTableData.findIndex(item => item.id === row.id);
      if (index > -1) {
        this.rightTableData.splice(index, 1);
      }
    },

    onPageChange(page) {
      this.pagination.currentPage = page;
    },
    onExpandChange() {},
    onSearch() {},
    onReset() {
      this.headerFormData = {};
    },
    addClick() {
      const newItem = {
        id: Date.now(), // 使用当前时间戳作为唯一 ID
        apiName: "",
        apiEnglishName: "",
        apiDetail: "",
        scenario: "",
        offer: "",
        offerUrl: "",
        format: "",
        access: "",
        accessUrl: "",
        requestMethod: "",
        sixUrl: "",
        direction: "",
        applyCount: "",
        countNum: "",
        countDetail: "",
        num: "",
        steps: "",
        internet: "",
        tabEtlHeaderSuns: [],
        tabEtlBodySuns: [],
        tabEtlDataSuns: [],
        tabEtlQuerySuns: [],
        tabEtlResponseSuns: []
      };
      this.rightTableData.push({ ...newItem });
      this.leftTableData = this.rightTableData;
      this.pagination.total = this.leftTableData.length;
    },
    // 处理选择框勾选变化
    handleSelectionChange(val) {
      this.selectedRows = val; // 将勾选的行保存到 selectedRows 中
    },
    // 删除选中的行
    deleteSelected() {
      if (this.selectedRows.length === 0) {
        this.$message.warning("请先选择要删除的项");
        return;
      }

      this.$confirm("确定删除选中的数据吗?", "警告", {
        type: "warning"
      })
        .then(() => {
          // 获取选中项的 id
          const selectedIds = this.selectedRows.map(row => row.id);

          // 删除右侧表格中选中的行
          this.rightTableData = this.rightTableData.filter(
            row => !selectedIds.includes(row.id)
          );

          // 删除左侧表格中对应的行
          this.leftTableData = this.leftTableData.filter(
            row => !selectedIds.includes(row.id)
          );

          // 清空选中行
          this.selectedRows = [];

          this.$message.success("删除成功");
        })
        .catch(() => {});
    },

    // Header
    addHeaderRow(row) {
      // 新增一项
      const newItem = {
        id: Date.now(), // 使用时间戳作为唯一 ID
        name: "",
        englishName: "",
        dataType: "",
        isRequired: "",
        ps: "",
        example: ""
      };
      row.tabEtlHeaderSuns.push(newItem);
    },
    deleteHeaderRow(row, index, itemRow) {
      if (this.dialogTitle === "新增") {
        row.tabEtlHeaderSuns.splice(index, 1);
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              deleteUrlSun(itemRow.id).then(res => {
              if (+res.code === 200) {
                row.tabEtlHeaderSuns.splice(index, 1);

                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }else{
                this.$message.error(res.msg);
              }
            });
 
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }

    },

    //  Body
    addBodyRow(row) {
      const newItem = {
        id: Date.now(), // 使用时间戳作为唯一 ID
        name: "",
        englishName: "",
        dataType: "",
        isRequired: "",
        ps: "",
        example: ""
      };
      row.tabEtlBodySuns.push(newItem);
    },
    deleteBodyRow(row, index,itemRow) {
      if (this.dialogTitle === "新增") {
        row.tabEtlBodySuns.splice(index, 1);
      } else {
        this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            deleteUrlSun(itemRow.id).then(res => {
              if (+res.code === 200) {
                row.tabEtlBodySuns.splice(index, 1)

                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },

    //  Query
    addQueryRow(row) {
      const newItem = {
        id: Date.now(), // 使用时间戳作为唯一 ID
        name: "",
        englishName: "",
        dataType: "",
        isRequired: "",
        ps: "",
        example: ""
      };
      row.tabEtlQuerySuns.push(newItem);
    },
    deleteQueryRow(row, index,itemRow) {
      if (this.dialogTitle === "新增") {
        row.tabEtlQuerySuns.splice(index, 1);
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              deleteUrlSun(itemRow.id).then(res => {
              if (+res.code === 200) {
                row.tabEtlQuerySuns.splice(index, 1);

                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }else{
                this.$message.error(res.msg);
              }
            });
 
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
    // Response
    addResponseRow(row) {
      const newItem = {
        id: Date.now(), // 使用时间戳作为唯一 ID
        name: "",
        englishName: "",
        dataType: "",
        isRequired: "",
        ps: "",
        example: ""
      };
      row.tabEtlResponseSuns.push(newItem);
    },
    deleteResponseRow(row, index,itemRow) {
      if (this.dialogTitle === "新增") {
         row.tabEtlResponseSuns.splice(index, 1);
      }  else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              deleteUrlSun(itemRow.id).then(res => {
              if (+res.code === 200) {
                row.tabEtlResponseSuns.splice(index, 1);

                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }else{
                this.$message.error(res.msg);
              }
            });
 
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
    // Data
    addDataRow(row) {
      const newItem = {
        id: Date.now(), // 使用时间戳作为唯一 ID
        name: "",
        englishName: "",
        dataType: "",
        isRequired: "",
        ps: "",
        example: ""
      };
      row.tabEtlDataSuns.push(newItem);
    },
    deleteDataRow(row, index,itemRow) {
      if (this.dialogTitle === "新增") {
         row.tabEtlDataSuns.splice(index, 1);
      }  else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              deleteUrlSun(itemRow.id).then(res => {
              if (+res.code === 200) {
                row.tabEtlDataSuns.splice(index, 1);

                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }else{
                this.$message.error(res.msg);
              }
            });
 
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.expanded-content {
  padding: 20px;
  box-sizing: border-box;
}

.title {
  width: 100%;
  text-align: left;
}

.table_title {
  width: 100%;
  text-align: left;
  margin: 10px 0;
}

.textarea-form {
  margin-top: 20px;
}
</style>
