<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="KAFKA服务名称">
          <el-input v-model="headerFormData.datasetName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="TOPIC名称">
          <el-input v-model="headerFormData.dataType" 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="kafkaName" label="KAFKA服务名称"></el-table-column>
        <el-table-column prop="sixTopicName" label="TOPIC名称"></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>六统一接入方式为KAFKA,必填此表</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="kafkaName" label="KAFKA服务名称">
          <template slot-scope="scope">
            <div style="display: flex; align-items: center">
              <div>KAFKA服务名称</div>
              <el-input
                style="width: 260px; margin-left: 20px"
                v-model="scope.row.kafkaName"
                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="应用场景" prop="scenario">
                  <el-input v-model="props.row.scenario" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="六统一TOPIC名称">
                  <el-input v-model="props.row.sixTopicName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="交换角色">
                  <el-input v-model="props.row.role" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="接入方IP">
                  <el-input v-model="props.row.accessIp" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="接入方端口号">
                  <el-input v-model="props.row.accessPort" 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.serialization" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="acks">
                  <el-input v-model="props.row.acks" 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.countSize" 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-item label="消费者组">
                  <el-input v-model="props.row.consumerGroup" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="六统一KAFKA授权码">
                  <el-input v-model="props.row.kafkaCode" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="六统一KAFKA授权编码">
                  <el-input v-model="props.row.kafkaApplyCode" placeholder="请输入"></el-input>
                </el-form-item>
              </el-form>
              <div class="title">参数定义</div>
              <div class="table_title">key 参数说明</div>
              <el-table
                ref="rightTable"
                :data="props.row.tabKafkaKeySuns"
                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="deleteKeyRow(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="addKeyTableRow(props.row)"
              ></el-button>

              <div class="table_title">value 参数说明</div>
              <el-table
                ref="rightTable"
                :data="props.row.tabKafkaValueSuns"
                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="deleteValueRow(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="addValueTableRow(props.row)"
              ></el-button>

              <div class="table_title">data子项说明</div>
              <el-table
                ref="rightTable"
                :data="props.row.tabKafkaDataSuns"
                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="addDataTableRow(props.row)"
              ></el-button>

              <el-form
                :model="apiFormData"
                label-width="auto"
                class="textarea-form-block"
                :label-position="right"
              >
                <el-form-item label="数据样例">
                  <el-input
                    v-model="props.row.dataExample"
                    placeholder="请输入"
                    type="textarea"
                    :rows="4"
                  ></el-input>
                </el-form-item>
              </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 {
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      // 表格选中的数据
      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: {
    onSearch () { },
    onReset () {
      this.headerFormData={}
     },
    onPageChange(page) {
      this.pagination.currentPage = page;
    },
    // 右侧列表新增按钮
    addClick() {
      const newRow = {
        id: Date.now(), // 使用当前时间戳生成唯一ID
        kafkaName: "",
        scenario: "",
        sixTopicName: "",
        role: "",
        accessIp: "",
        accessPort: "",
        format: "",
        serialization: "",
        acks: "",
        applyCount: "",
        countNum: "",
        countSize: "",
        num: "",
        steps: "",
        internet: "",
        consumerGroup: "",
        kafkaApplyCode: "",
        kafkaCode: "",
        dataExample: "",
        tabKafkaDataSuns: [],
        tabKafkaKeySuns: [],
        tabKafkaValueSuns: []
      };
      this.rightTableData.push({ ...newRow });
      this.leftTableData = this.rightTableData;
      this.pagination.total = this.leftTableData.length;
    },
    // 处理选择框勾选变化
    handleSelectionChange(val) {
      this.selectedRows = val; // 将勾选的行保存到 selectedRows 中
    },
    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);
      }
    },

    // 新增 key 表格行
    addKeyTableRow(row) {
      const newRow = {
        id: Date.now(),
        name: "",
        englishName: "",
        dataType: "",
        isRequired: "",
        ps: "",
        example: ""
      };
      row.tabKafkaKeySuns.push(newRow);
    },

    // 删除 key 表格行
    deleteKeyRow(row, index,itemRow) {
      if (this.dialogTitle === "新增") {
       row.tabKafkaKeySuns.splice(index, 1)
      }  else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              deleteUrlSun(itemRow.id).then(res => {
              if (+res.code === 200) {
                row.tabKafkaKeySuns.splice(index, 1)

                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }else{
                this.$message.error(res.msg);
              }
            });
 
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
    // 新增 Value 表格行
    addValueTableRow(row) {
      const newRow = {
        id: Date.now(),
        name: "",
        englishName: "",
        dataType: "",
        isRequired: "",
        ps: "",
        example: ""
      };
      row.tabKafkaValueSuns.push(newRow);
    },
    // 删除 Value 表格行
    deleteValueRow(row, index,itemRow) {
      if (this.dialogTitle === "新增") {
         row.tabKafkaValueSuns.splice(index, 1)
      }  else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              deleteUrlSun(itemRow.id).then(res => {
              if (+res.code === 200) {
                row.tabKafkaValueSuns.splice(index, 1)

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

    // 新增 data 表格行
    addDataTableRow(row) {
      const newRow = {
        id: Date.now(),
        name: "",
        englishName: "",
        dataType: "",
        isRequired: "",
        ps: "",
        example: ""
      };
      row.tabKafkaDataSuns.push(newRow);
    },
    // 删除 data 表格行
    deleteDataRow(row, index,itemRow) {
      if (this.dialogTitle === "新增") {
         row.tabKafkaDataSuns.splice(index, 1);
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              deleteUrlSun(itemRow.id).then(res => {
              if (+res.code === 200) {
                row.tabKafkaDataSuns.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;
}

.textarea-form-block {
  margin-top: 20px;
}

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

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

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