<template>
  <el-dialog
    :visible.sync="visible"
    @update:visible="handleUpdateVisible"
    :title="title + '接入反馈表'"
    :width="width"
    :before-close="beforeClose"
  >
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="01/4 数据准备基本表" :name="1">
        <el-form
          :label-position="'top'"
          :model="firstStep"
          label-width="auto"
          style="width: 100%"
          class="form-detail-inline"
          inline
          :disabled="isDisabled"
        >
          <el-form-item label="序号/标识符" prop="code">
            <el-input v-model="firstStep.code" placeholder="请输入序号/标识符" />
          </el-form-item>
          <el-form-item label="交换需求联系人" prop="persion">
            <el-input v-model="firstStep.persion" placeholder="请输入交换需求联系人"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model="firstStep.phone" placeholder="请输入联系方式"></el-input>
          </el-form-item>
        </el-form>
        <!-- 数据提供方所属单位部门 -->
        <el-table :data="firstStep.offers" style="width: 100%" max-height="250">
          <el-table-column prop="id" label="数据提供方所属单位部门" width>
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.accessId"
                placeholder="请选择数据提供方所属单位部门"
                @change="
    deptChange(scope.$index, scope.row.accessId, scope.$index)
    "
              >
                <el-option
                  v-for="item in offersOptions"
                  :key="item.id"
                  :label="item.dept"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="system" label="数据提供方系统名称" width>
            <template slot-scope="scope">
              <el-input disabled v-model="scope.row.system" placeholder="请输入数据提供方系统名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="readyIp" label="数据提供方IP" width>
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.readyIp"
                placeholder="请选择IP"
                @change="iPChange(scope.$index, scope.row.readyIp, scope.row)"
              >
                <el-option
                  v-for="item in scope.row.ipOptions"
                  :key="item.ip"
                  :label="item.ip"
                  :value="item.ip"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="readyPort" label="数据提供方端口" width>
            <template slot-scope="scope">
              <el-select v-model="scope.row.readyPort" placeholder="请选择端口">
                <el-option
                  v-for="item in scope.row.portOptions"
                  :key="item.port"
                  :label="item.port"
                  :value="item.port"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                @click.prevent="deleteRow(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="onAddOffersItem"
        ></el-button>

        <!-- 数据接收方所属单位部门 -->
        <el-table :data="firstStep.access" style="width: 100%" max-height="250">
          <el-table-column prop="name" label="数据接收方所属单位部门" width>
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.accessId"
                @change="
    accessDeptChange(
      scope.$index,
      scope.row.accessId,
      scope.$index
    )
    "
                placeholder="请选择数据接收方所属单位部门"
              >
                <el-option
                  v-for="item in offersOptions"
                  :key="item.id"
                  :label="item.dept"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="system" label="数据接收方系统名称" width>
            <template slot-scope="scope">
              <el-input v-model="scope.row.system" disabled placeholder="请输入数据接收方系统名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="readyIp" label="数据接收方IP" width>
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.readyIp"
                placeholder="请选择IP"
                @change="
    accessIPChange(scope.$index, scope.row.readyIp, scope.row)
    "
              >
                <el-option
                  v-for="item in scope.row.accessIpOptions"
                  :key="item.ip"
                  :label="item.ip"
                  :value="item.ip"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="readyPort" label="数据接收方端口" width>
            <template slot-scope="scope">
              <el-select v-model="scope.row.readyPort" placeholder="请选择端口">
                <el-option
                  v-for="item in scope.row.accessPortOptions"
                  :key="item.port"
                  :label="item.port"
                  :value="item.port"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                @click.prevent="deleteAccessRow(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="onAccessAddItem"
        ></el-button>

        <div class="titel">统一接入方式</div>
        <el-form :label-position="'left'" :model="firstStep" label-width="auto" style="width: 100%">
          <el-form-item label="数据提供方式" class="textarea-row" prop="dataOfferType">
            <div style="display: flex; align-items: center">
              <el-radio-group v-model="firstStep.dataOfferType">
                <!-- <el-radio :label="1">库表接口工具</el-radio>
                <el-radio :label="2">六统一API</el-radio>
                <el-radio :label="3">六统一KAFKA</el-radio>
                <el-radio :label="4">六统一SFTP</el-radio>
                <el-radio :label="5">六统一ETL(DI)</el-radio>
                <el-radio :label="6">其它</el-radio>-->
                <el-radio
                  v-for="dict in dict.type.access_method"
                  :key="dict.value"
                  :label="dict.value"
                >
                  {{ dict.label
                  }}
                </el-radio>
              </el-radio-group>
              <el-input
                v-model="firstStep.offerOther"
                placeholder="请输入"
                style="width: 220px; margin-left: 30px"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="数据接收方式" prop="dataAccessType">
            <div style="display: flex; align-items: center">
              <el-radio-group v-model="firstStep.dataAccessType">
                <!-- <el-radio :label="1">库表接口工具</el-radio>
                <el-radio :label="2">六统一API</el-radio>
                <el-radio :label="3">六统一KAFKA</el-radio>
                <el-radio :label="4">六统一SFTP</el-radio>
                <el-radio :label="5">其它</el-radio>-->
                <el-radio
                  v-for="dict in dict.type.access_method"
                  :key="dict.value"
                  :label="dict.value"
                >
                  {{ dict.label
                  }}
                </el-radio>
              </el-radio-group>
              <el-input
                v-model="firstStep.accessOther"
                placeholder="请输入"
                style="width: 220px; margin-left: 30px"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="审核意见" prop="auditDetail">
            <el-input
              type="textarea"
              :rows="4"
              v-model="firstStep.auditDetail"
              placeholder="请输入审核意见"
            ></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="审核人" prop="auditName">
                <el-input v-model="firstStep.auditName" placeholder="请输入审核人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核时间" prop="auditTime">
                <el-date-picker
                  style="width: 100%"
                  v-model="firstStep.auditTime"
                  type="datetime"
                  placeholder="请选择日期时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="02/4 数据基本表" :name="2">
        <el-table :data="secondStep" border style="width: 100%">
          <!-- 基本属性 -->
          <el-table-column label="基本属性" align="center">
            <el-table-column prop="check" label align="center">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.check"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="序号/标识符" align="center" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.code" disabled placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="dataMane" label="数据资源名称" align="center" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.dataMane" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="publishDate" label="发布日期" align="center" min-width="220">
              <template slot-scope="scope">
                <el-date-picker v-model="scope.row.publishDate" type="date" placeholder="选择日期"></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column prop="formatType" label="格式类型" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.formatType" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="resourceSource" label="资源来源" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.resourceSource" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="resourceAbstract" label="数据资源摘要" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.resourceAbstract" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="updateMode" label="更新模式数据量" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.updateMode" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="batch" label="批次号频率" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.batch" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
          </el-table-column>

          <!-- 数据源 -->
          <el-table-column label="数据源(数据提供方) 属性" align="center">
            <el-table-column prop="accessName" label="数据源上传方名称" align="center" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.accessName" disabled placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="accessCode" label="上传方代码" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.accessCode" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="accessAddress" label="上传方地址" align="center" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.accessAddress" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="accessTimeConfig" label="频率、统一接入时间配置" align="center" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.accessTimeConfig" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="accessSystemCode" label="所属系统编号" align="center" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.accessSystemCode" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="accessSystemName" label="所属系统名称" align="center" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.accessSystemName" disabled placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
          </el-table-column>

          <!-- 数据接收 -->
          <el-table-column label="数据接收(输出) 属性" align="center">
            <el-table-column prop="offerName" label="输出方名称" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.offerName" disabled placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="offerCode" label="输出方代码" align="center" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.offerCode" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="offerTimeConfig"
              label="输出精度、统一接入时间配置"
              align="center"
              width="120"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.offerTimeConfig" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="offerType" label="输出方式" align="center" width="200">
              <template slot-scope="scope">
                <el-select v-model="scope.row.offerType" placeholder="请选择">
                  <el-option
                    v-for="item in dict.type.access_method"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="offerOther" label="其它" align="center" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.offerOther" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="offerSysytemCode" label="所属系统编号" align="center" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.offerSysytemCode" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="offerSystemName" label="所属系统名称" align="center" width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.offerSystemName" disabled placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
          </el-table-column>

          <!-- 操作 -->
          <el-table-column label="操作" align="center" fixed="right" width="120">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="handleSecondStepDelete(scope.$index, scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="03/4 数据项信息" :name="3" :disabled="+firstStep.dataOfferType === 6">
        <!-- 库表工具  -->
        <TableToolsPage
          ref="tableRef"
          v-if="+firstStep.dataOfferType === 1
    "
          :thirdStep="thirdStep"
        ></TableToolsPage>

        <!-- API -->
        <ApiPage ref="apiRef" v-if="+firstStep.dataOfferType === 2" :thirdStep="thirdStep"></ApiPage>
        <!-- KAFKA -->
        <KafkaPage ref="kafkaRef" v-if="+firstStep.dataOfferType === 3" :thirdStep="thirdStep"></KafkaPage>
        <!-- ETL -->
        <ETLPage ref="etlRef" v-if="+firstStep.dataOfferType === 4
    " :thirdStep="thirdStep"></ETLPage>
        <!-- SFTP  -->
        <SFTPPage ref="sftpRef" v-if="+firstStep.dataOfferType === 5" :thirdStep="thirdStep"></SFTPPage>
      </el-tab-pane>
      <el-tab-pane label="04/4 附件" :name="4">
        <el-form
          :model="searchFormData"
          ref="searchForm"
          label-width="auto"
          label-position="left"
          class="header-form"
        >
          <el-form-item label="附件名称" prop="fileName">
            <el-input v-model="searchFormData.fileName" placeholder="请输入附件名称"></el-input>
          </el-form-item>
          <div class="btn-box">
            <el-button type="primary" size="mini" @click="handleSubmit">查询</el-button>
            <el-button size="mini" @click="handleReset">重置</el-button>
          </div>
        </el-form>
        <div style="width: 100%; text-align: end">
          <el-button size="mini" @click="handleUpload" type="primary">上传</el-button>
        </div>
        <MyTable :tableData="fileTableData" :formData="fileFormData" :minWidth="80">
          <!-- 自定义操作按钮，传递 row 和 index -->
          <template #operation="{ row }">
            <el-button size="mini" @click="handleDownloadFile(row)" type="primary">下载</el-button>

            <el-button size="mini" @click="handleDeleteFile(row)" type="primary">删除</el-button>
          </template>
        </MyTable>
        <div class="pagination-container">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="fileUploadPagination.currentPage"
            :page-size="fileUploadPagination.pageSize"
            :total="fileUploadPagination.total"
            @current-change="onPageChange"
          ></el-pagination>
        </div>
        <!-- 上传 -->
        <div v-if="fileUploadShowDialog">
          <FileUploadDialog
            v-model="fileUploadShowDialog"
            :uploadUrl="uploadUrl"
            @confirm="FileUploadConfirm"
            :accessOnlyId="accessOnlyId"
          ></FileUploadDialog>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleBackStep" v-if="activeName > 1">上一步</el-button>
      <el-button type="primary" @click="handleNextStep" v-if="activeName < 4">下一步</el-button>

      <el-button @click="beforeClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm(1)">暂 存</el-button>
      <el-button type="primary" @click="handleConfirm(2)" v-if="activeName === 4">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getTabFileInfoList,
  updateTabFileInfoById,
  uploadTabFileInfoById,
  downloadTabFileInfoById,
  delTabFileInfoById,
  previewFileTabFileInfoById
} from "@/api/unified-access/access-standard";
import {
  // 第一步
  addFirstStepTabAccessReady,
  delFirstStepTabAccessReady,
  // 第一步详情
  getFirstStepTabAccessReadyById,
  updateFirstStepTabAccessReadyById,
  // 第二步详情
  getSecondStepTabAccessReadyById,
  // 第二步
  delSecondStepTabAccessReady,
  addSecondStepTabAccessReady,
  updateSecondStepTabAccessFeedbackById,

  // 第三步
  addThirdStepTabAccessReady,
  updateThirdStepDataSun,
  // 第三步详情
  getThirdStepTabAccessReadyById,

  // 取消
  deleteTabAccessFeedbackById,
  //
  saveStepTabAccessReadyById
} from "@/api/unified-access/access-feedback.js";
import { getTabAccessList } from "@/api/unified-access/access-party-maintenance.js";
import MyTable from "@/components/MyTable";
import MyForm from "@/components/MyForm";
import TableToolsPage from "./TableToolsPage.vue";
import ETLPage from "./ETLPage.vue";
import ApiPage from "./ApiPage.vue";
import KafkaPage from "./KafkaPage.vue";
import SFTPPage from "./SFTPPage.vue";
import FileUploadDialog from "./FileUploadDialog.vue";
export default {
  name: "StandardDialog",
  components: {
    MyForm,
    MyTable,
    TableToolsPage,
    ETLPage,
    ApiPage,
    KafkaPage,
    SFTPPage,
    FileUploadDialog
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "弹窗标题"
    },
    width: {
      type: String,
      default: "90%"
    },
    rowObj: {
      type: Object,
      default: {}
    }
  },
  dicts: ["access_method"],
  data() {
    return {
      dialogTitle: "",
      isDisabled: false,
      itemView: {},
      fileUploadPagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      uploadUrl: process.env.VUE_APP_BASE_API + "/web/tab-file-info/upload",
      fileUploadShowDialog: false, // 上传弹窗
      accessOnlyId: "",
      accessPortOptions: [],
      accessIpOptions: [],
      firstStep: {
        code: "", //标识符
        persion: "", //交换需求联系人
        phone: "", //联系方式
        offers: [], // 数据提供方
        access: [], //数据接收方
        auditDetail: "", //审核意见
        auditName: "", //审核人
        auditTime: "" //审核时间
      },
      secondStep: [],
      thirdStep: [],
      fourthStep: [],
      offersOptions: [],
      ipOptions: [],
      portOptions: [],
      basicDataTable: [], //数据基本表
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      leftTableData: [],
      rightTableData: [],
      headerFormData: {},
      activeName: 1,
      visible: this.value,
      // 这是传递给表单组件的数据
      formData: {},
      searchFormData: {},
      isDisabled: false,
      fileTableData: [],
      fileFormData: [
        {
          label: "附件名称",
          fieldName: "fileName",
          type: "input",
          showInTable: true,
          value: "",
          width: ""
        },
        {
          label: "上传人",
          fieldName: "createBy",
          type: "input",
          showInTable: true,
          value: "",
          width: ""
        },
        {
          label: "上传时间",
          fieldName: "createTime",
          type: "input",
          showInTable: true,
          value: "",
          width: ""
        }
      ],
      tableData: [
        {
          identifier: false,
          name: "资源1",
          publishDate: "2023-01-01",
          formatType: "格式A",
          dataSource: "来源1",
          sourceName: "上传方1",
          sourceCode: "代码01",
          address: "地址01",
          property: true,
          outputCode: "输出01",
          outputFormat: "格式A",
          outputType: "自动",
          receiverName: "系统1"
        }
      ]
    };
  },
  watch: {
    value(newVal) {
      this.visible = newVal;
    },
    visible(newVal) {
      this.$emit("input", newVal);
    },
    title: {
      handler(newVal) {
        this.dialogTitle = newVal;
      },
      deep: true, // 深入监听
      immediate: true
    },
    rowObj: {
      handler(newVal) {
        this.itemView = newVal;
      },
      deep: true, // 深入监听
      immediate: true
    }
  },
  mounted() {
    this.getList();
    if (this.dialogTitle === "查看") {
      this.isDisabled = true;
    } else {
      this.isDisabled = false;
    }
    if (this.dialogTitle !== "新增") {
      this.accessOnlyId = this.itemView.id;
      this.getView(this.itemView.id);
    }
  },
  methods: {
    getView(id) {
      // this.formData = {}
      getFirstStepTabAccessReadyById(id).then(res => {
        if (+res.code === 200) {
          this.firstStep = res.data;
        }
      });
      getSecondStepTabAccessReadyById(id).then(res => {
        if (+res.code === 200) {
          console.log(res, "res99");
          this.secondStep = res.data;
        }
      });
      getThirdStepTabAccessReadyById(id).then(res => {
        if (+res.code === 200) {
          console.log(res, "res99==");
          if (+this.firstStep.dataOfferType === 1) {
            // 库表
            this.thirdStep = res.data.kb;
          } else if (+this.firstStep.dataOfferType === 2) {
            // api
            this.thirdStep = res.data.url;
            console.log( this.thirdStep,' this.thirdStep');
            
          } else if (+this.firstStep.dataOfferType === 3) {
            // kafka
            this.thirdStep = res.data.kafka;
          } else if (+this.firstStep.dataOfferType === 4) {
            // ETL
            this.thirdStep = res.data.etl;
          } else if (+this.firstStep.dataOfferType === 5) {
            // sftp
            this.thirdStep = res.data.sftp;
          }
        }
      });

      this.getfileUploadList();
    },
    // 第四步
    onPageChange(page) {
      this.fileUploadPagination.currentPage = page;
      this.getfileUploadList();
    },
    handleSubmit() {},
    handleReset() {
      this.searchFormData = {};
    },
    handleUpload() {
      this.fileUploadShowDialog = true;
    },
    FileUploadConfirm() {
      this.fileUploadShowDialog = false;
      this.getfileUploadList();
    },
    getfileUploadList() {
      getTabFileInfoList({
        pageNum: this.fileUploadPagination.currentPage,
        pageSize: this.fileUploadPagination.pageSize,
        systemType: "接入反馈表",
        outsideId: this.accessOnlyId
      }).then(res => {
        if (+res.code === 200) {
          this.fileTableData = res.rows;
          this.fileUploadPagination.total = +res.total;
        }
      });
    },
    handleDownloadFile(row) {
      const filePath = row.filePath;
      // 获取文件扩展名
      const ext = filePath
        .split(".")
        .pop()
        .toLowerCase();
      this.download(
        `/web/tab-file-info/download/${row.fileId}`,
        {},
        `接入反馈表附件_${new Date().getTime()}.${ext}`
      );
    },
    handleDeleteFile(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
        type: "warning"
      })
        .then(() => {
          delTabFileInfoById(row.fileId).then(res => {
            if (+res.code === 200) {
              this.$message({
                message: res.msg,
                type: "success"
              });
              this.getfileUploadList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 第二步
    handleSecondStepDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
        type: "warning"
      })
        .then(() => {
          this.secondStep.splice(index, 1);
          delSecondStepTabAccessReady(row.id).then(res => {
            if (+res.code === 200) {
              this.$message({
                message: res.msg,
                type: "success"
              });
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    // 第一步
    deleteAccessRow(index, row) {
      if (row.accessId) {
        this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          center: true,
          type: "warning"
        })
          .then(() => {
            this.firstStep.access.splice(index, 1);
            delFirstStepTabAccessReady(row.id).then(res => {
              if (+res.code === 200) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
              } else {
                this.$message.error(res.msg);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        this.firstStep.access.splice(index, 1);
      }
    },
    deleteRow(index, row) {
      if (row.accessId) {
        this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          center: true,
          type: "warning"
        })
          .then(() => {
            this.firstStep.offers.splice(index, 1);
            delFirstStepTabAccessReady(row.id).then(res => {
              if (+res.code === 200) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
              } else {
                this.$message.error(res.msg);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        this.firstStep.offers.splice(index, 1);
      }
    },
    onAddOffersItem() {
      const newItem = {
        accessId: "",
        system: "",
        readyIp: "",
        readyPort: "",
        ipOptions: [],
        portOptions: [],
        accessType: 1
      };
      this.firstStep.offers.push(newItem);
      // this.firstStep.offers.push({});
    },
    deptChange(index, id, row) {
      this.ipOptions = [];
      this.offersOptions.forEach(item => {
        if (item.id === id) {
          this.ipOptions = item.ip.map((item, index) => {
            return {
              id: index,
              ip: item.ip
            };
          });

          this.ipOptions = this.ipOptions.filter(
            (value, index, self) =>
              index === self.findIndex(t => t.ip === value.ip)
          );

          this.firstStep.offers[index].system = item.name;
          this.firstStep.offers[index].dept = item.dept;
        }
      });
      this.firstStep.offers[index].ipOptions = [...this.ipOptions];

      this.firstStep.offers[index].readyIp = "";
      this.firstStep.offers[index].readyPort = "";
    },
    iPChange(index, ip, row) {
      this.portOptions = [];
      this.offersOptions.forEach(item => {
        if (item.id === row.accessId) {
          this.portOptions = item.ip
            .filter(item => item.ip === row.readyIp)
            .map((item, index) => {
              return {
                id: index,
                port: item.port
              };
            });
        }
      });
      this.firstStep.offers[index].portOptions = this.portOptions;
      this.firstStep.offers[index].readyPort = "";
    },
    onAccessAddItem() {
      const newItem = {
        accessId: "",
        system: "",
        readyIp: "",
        readyPort: "",
        ipOptions: [],
        portOptions: [],
        accessType: 0
      };
      this.firstStep.access.push(newItem);
    },
    accessDeptChange(index, id, row) {
      this.ipOptions = [];
      this.offersOptions.forEach(item => {
        if (item.id === id) {
          this.ipOptions = item.ip.map((item, index) => {
            return {
              id: index,
              ip: item.ip
            };
          });
          this.ipOptions = this.ipOptions.filter(
            (value, index, self) =>
              index === self.findIndex(t => t.ip === value.ip)
          );

          this.firstStep.access[index].system = item.name;
          this.firstStep.access[index].dept = item.dept;
        }
      });
      this.firstStep.access[index].accessIpOptions = [...this.ipOptions];
      this.firstStep.access[index].readyIp = "";
      this.firstStep.access[index].readyPort = "";
    },
    accessIPChange(index, ip, row) {
      this.portOptions = [];
      this.offersOptions.forEach(item => {
        if (item.id === row.accessId) {
          this.portOptions = item.ip
            .filter(item => item.ip === row.readyIp)
            .map((item, index) => {
              return {
                id: index,
                port: item.port
              };
            });
        }
      });
      this.firstStep.access[index].accessPortOptions = this.portOptions;
      this.firstStep.access[index].readyPort = "";
    },
    // 数据接入放管理列表
    getList() {
      getTabAccessList({}).then(res => {
        if (+res.code === 200) {
          res.rows.forEach(item => {
            item.ip = JSON.parse(item.ip);
          });
          this.offersOptions = res.rows;
        }
      });
    },

    onAddItem() {},
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleNextStep() {
      if (this.title === "新增") {
        if (this.activeName === 1) {
          addFirstStepTabAccessReady({ ...this.firstStep }).then(res => {
            if (+res.code === 200) {
              this.secondStep = res.data;
              this.accessOnlyId = res.data[0].accessOnlyId;
              this.activeName++;
            }
          });
        } else if (this.activeName === 2) {
          addSecondStepTabAccessReady([...this.secondStep]).then(res => {
            if (+res.code === 200) {
              if (+this.firstStep.dataOfferType === 6) {
                this.activeName = 4;
              } else {
                this.activeName++;
              }
            }
          });
        } else if (this.activeName === 3) {
          let pForm = {};
          pForm.accessFeedbackId = this.accessOnlyId;
          if (+this.firstStep.dataOfferType === 1) {
            // 库表
            this.$refs.tableRef.rightTableData.forEach(item => {
              item.accessFeedbackId = this.accessOnlyId;
            });
            pForm.kb = this.$refs.tableRef.rightTableData;
          } else if (+this.firstStep.dataOfferType === 2) {
            // api
            this.$refs.apiRef.rightTableData.forEach(item => {
              item.accessFeedbackId = this.accessOnlyId;
            });
            pForm.url = this.$refs.apiRef.rightTableData;
          } else if (+this.firstStep.dataOfferType === 3) {
            // kafka
            this.$refs.kafkaRef.rightTableData.forEach(item => {
              item.accessFeedbackId = this.accessOnlyId;
            });
            pForm.kafka = this.$refs.kafkaRef.rightTableData;
          } else if (+this.firstStep.dataOfferType === 4) {
            // ETL
            this.$refs.etlRef.rightTableData.forEach(item => {
              item.accessFeedbackId = this.accessOnlyId;
            });
            pForm.etl = this.$refs.etlRef.rightTableData;
          } else if (+this.firstStep.dataOfferType === 5) {
            // sftp
            this.$refs.sftpRef.rightTableData.forEach(item => {
              item.accessFeedbackId = this.accessOnlyId;
            });
            pForm.sftp = this.$refs.sftpRef.rightTableData;
          }
          addThirdStepTabAccessReady(pForm).then(res => {
            if (+res.code === 200) {
              if (+this.firstStep.dataOfferType === 6) {
                this.activeName = 4;
              } else {
                this.activeName++;
              }
            }
          });
        }
      } else if (this.title === "编辑" ||this.title === "查看") {
        this.activeName++;

      }
    },
    handleBackStep() {
      if (this.activeName === 4) {
        if (+this.firstStep.dataOfferType === 6) {
          this.activeName = 2;
        } else {
          this.activeName--;
        }
      } else {
        this.activeName--;
      }
    },
    handleUpdateVisible(val) {
      this.visible = val;
    },
    // beforeClose (done) {
    //   this.visible = false;
    //   this.$emit("before-close", done);
    // },
    // 取消按钮处理方法
    beforeClose() {
      this.visible = false;
      this.$emit("cancel"); // 可以在父组件监听 'cancel' 事件
      this.firstStep = {
        code: "", //标识符
        persion: "", //交换需求联系人
        phone: "", //联系方式
        offers: [], // 数据提供方
        access: [], //数据接收方
        auditDetail: "", //审核意见
        auditName: "", //审核人
        auditTime: "" //审核时间
      };
    },

    // 确定按钮处理方法
    handleConfirm(type) {
      // this.$refs.myFormComponent.validateForm();
      if (this.title === "新增") {
        if (this.activeName === 1) {
          addFirstStepTabAccessReady({ ...this.firstStep }).then(res => {
            if (+res.code === 200) {
              this.secondStep = res.data;
              this.accessOnlyId = res.data[0].accessOnlyId;
              this.activeName++;
            }
          });
        } else if (this.activeName === 2) {
          addSecondStepTabAccessReady([...this.secondStep]).then(res => {
            if (+res.code === 200) {
              if (+this.firstStep.dataOfferType === 6) {
                this.activeName = 4;
              } else {
                this.activeName++;
              }
            }
          });
        } else if (this.activeName === 3) {
          let pForm = {};
          pForm.accessFeedbackId = this.accessOnlyId;
          if (+this.firstStep.dataOfferType === 1) {
            // 库表
            this.$refs.tableRef.rightTableData.forEach(item => {
              item.accessFeedbackId = this.accessOnlyId;
            });
            pForm.kb = this.$refs.tableRef.rightTableData;
          } else if (+this.firstStep.dataOfferType === 2) {
            // api
            this.$refs.apiRef.rightTableData.forEach(item => {
              item.accessFeedbackId = this.accessOnlyId;
            });
            pForm.kafka = this.$refs.apiRef.rightTableData;
          } else if (+this.firstStep.dataOfferType === 3) {
            // kafka
            this.$refs.kafkaRef.rightTableData.forEach(item => {
              item.accessFeedbackId = this.accessOnlyId;
            });
            pForm.kafka = this.$refs.kafkaRef.rightTableData;
          } else if (+this.firstStep.dataOfferType === 4) {
            // ETL
            this.$refs.etlRef.rightTableData.forEach(item => {
              item.accessFeedbackId = this.accessOnlyId;
            });
            pForm.etl = this.$refs.etlRef.rightTableData;
          } else if (+this.firstStep.dataOfferType === 5) {
            // sftp
            this.$refs.sftpRef.rightTableData.forEach(item => {
              item.accessFeedbackId = this.accessOnlyId;
            });
            pForm.etl = this.$refs.sftpRef.rightTableData;
          }
          addThirdStepTabAccessReady(pForm).then(res => {
            if (+res.code === 200) {
              if (+this.firstStep.dataOfferType === 6) {
                this.activeName = 4;
              } else {
                this.activeName++;
              }
            }
          });
        }
      } else if (this.title === "编辑") {
        updateFirstStepTabAccessReadyById({ ...this.firstStep }).then(res => {
          if (+res.code === 200) {
            this.secondStep = res.data;
            this.accessOnlyId = res.data[0].accessOnlyId;
            this.activeName++;
          }
        });
        updateSecondStepTabAccessFeedbackById([...this.secondStep]).then(res => {
          if (+res.code === 200) {
            if (+this.firstStep.dataOfferType === 6) {
              this.activeName = 4;
            } else {
              this.activeName++;
            }
          }
        });

        let pForm = {};
        pForm.accessFeedbackId = this.accessOnlyId;
        if (+this.firstStep.dataOfferType === 1) {
          // 库表
          this.$refs.tableRef.rightTableData.forEach(item => {
            item.accessFeedbackId = this.accessOnlyId;
          });
          pForm.kb = this.$refs.tableRef.rightTableData;
        } else if (+this.firstStep.dataOfferType === 2) {
          // api
          this.$refs.apiRef.rightTableData.forEach(item => {
            item.accessFeedbackId = this.accessOnlyId;
          });
          pForm.kafka = this.$refs.apiRef.rightTableData;
        } else if (+this.firstStep.dataOfferType === 3) {
          // kafka
          this.$refs.kafkaRef.rightTableData.forEach(item => {
            item.accessFeedbackId = this.accessOnlyId;
          });
          pForm.kafka = this.$refs.kafkaRef.rightTableData;
        } else if (+this.firstStep.dataOfferType === 4) {
          // ETL
          this.$refs.etlRef.rightTableData.forEach(item => {
            item.accessFeedbackId = this.accessOnlyId;
          });
          pForm.etl = this.$refs.etlRef.rightTableData;
        } else if (+this.firstStep.dataOfferType === 5) {
          // sftp
          this.$refs.sftpRef.rightTableData.forEach(item => {
            item.accessFeedbackId = this.accessOnlyId;
          });
          pForm.etl = this.$refs.sftpRef.rightTableData;
        }
        updateThirdStepDataSun(pForm).then(res => {
          if (+res.code === 200) {
            if (+this.firstStep.dataOfferType === 6) {
              this.activeName = 4;
            } else {
              this.activeName++;
            }
          }
        });
      }

      saveStepTabAccessReadyById({ status: type, id: this.accessOnlyId }).then(
        res => {
          if (+res.code === 200) {
            this.visible = false;
            this.$emit("confirm"); // 可以在父组件监听 'confirm' 事件
          }
        }
      );
    }
  }
};
</script>

<style scoped lang="scss">
/* 你可以根据需要为弹窗添加样式 */

.titel {
  font-size: 18px;
  margin: 20px 0;
}

.btn-box {
  margin-left: 20px;
}

.table-container {
  width: 10%;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}

.mt-4 {
  margin: 10px 0;
}
</style>
