<!-- Dialog.vue -->
<template>
  <el-dialog :visible.sync="visible" @update:visible="handleUpdateVisible" :title="isAddOperation == 'add'
    ? '新增数据目录'
    : isAddOperation == 'edit'
      ? '编辑数据目录'
      : '查看数据目录'
    " :width="width" :before-close="beforeClose">
    <div>
      <el-steps :active="activeValue" align-center>
        <el-step title="填写基本信息"></el-step>
        <el-step title="选择数据源"></el-step>
        <el-step title="完善数据项"></el-step>
        <el-step title="确认归属模型"></el-step>
      </el-steps>
    </div>
    <div v-if="activeValue == 1" class="container">
      <div class="t-b">目录信息</div>
      <el-form inline :model="libraryData" label-width :label-position="'right'" ref="firstRef"
        :disabled="isAddOperation == 'view'" class="form-detail-inline" :rules="firstFormRules">
        <el-form-item label="数据目录代码" prop="catalogCode">
          <el-input v-model="libraryData.catalogCode" placeholder="提交后自动生成" disabled />
        </el-form-item>
        <el-form-item label="目录名称" prop="catalogName">
          <el-input v-model="libraryData.catalogName" placeholder="请输入目录名称" />
        </el-form-item>
        <el-form-item label="目录英文名称" prop="catalogNameEn">
          <el-input v-model="libraryData.catalogNameEn" placeholder="请输入目录英文名称" />
        </el-form-item>
        <el-form-item label="提供单位" prop="provideUnit">
          <el-cascader @change="changeProvidedUnit" v-model="libraryData.provideUnit" :options="provideUnitArr"
            :props="{ value: 'id', label: 'directoryName', children: 'list' }" placeholder="请选择提供单位" />
        </el-form-item>
        <el-form-item label="所属信息系统" prop="informationSystem">
          <el-select v-model="libraryData.informationSystem" placeholder="请选择所属信息系统">
            <el-option v-for="item in informationSystemArr" :key="item.misProjectName" :label="item.misProjectName"
              :value="item.misProjectName" />
          </el-select>
        </el-form-item>

        <el-form-item label="目录类型" prop="catalogType">
          <el-input v-model="libraryData.catalogType" placeholder="请输入目录类型" disabled />
        </el-form-item>

        <el-form-item label="更新频率及增量描述" prop="updateSeq">
          <el-input v-model="libraryData.updateSeq" placeholder="请输入更新频率及增量描述" />
        </el-form-item>

        <el-form-item label="是否为空间资源" prop="isSpace">
          <el-radio-group v-model="libraryData.isSpace" class="ml-4">
            <el-radio :label="item.value" :value="item.value" v-for="item in isRadio" :key="item.label">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="源坐标系" v-if="libraryData.isSpace === 1" prop="coordinate">
          <el-input v-model="libraryData.coordinate" placeholder="请输入源坐标系" />
        </el-form-item>

        <el-form-item label="安全等级" prop="safetyLevel">
          <el-select v-model="libraryData.safetyLevel" placeholder="请选择安全等级">
            <el-option v-for="item in safetyLevelArr" :key="item.id" :label="item.levelName" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="目录描述" class="textarea-row">
          <el-input v-model="libraryData.catalogDes" placeholder="请输入" :rows="4" type="textarea" />
        </el-form-item>
        <div class="t-b">共享管理</div>
        <el-form-item label="共享方式" prop="shareMethod">
          <el-select v-model="libraryData.shareMethod" placeholder="请选择共享方式">
            <el-option v-for="item in dict.type.share_method" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="共享范围" prop="shareRange">
          <el-select v-model="libraryData.shareRange" placeholder="请选择共享范围">
            <el-option v-for="item in dict.type.shared_scope" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="共享类型" prop="shareType">
          <el-select v-model="libraryData.shareType" placeholder="请选择共享类型">
            <el-option v-for="item in shared_type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="共享条件" prop="shareCondition" v-if="libraryData.shareType === '有条件共享'">
          <el-input v-model="libraryData.shareCondition" placeholder="请输入共享条件" />
        </el-form-item>
        <el-form-item label="开放属性" prop="isOpen">
          <el-radio-group v-model="libraryData.isOpen" class="ml-4">
            <el-radio :label="item.value" :value="item.value" v-for="item in isOpen" :key="item.label">{{ item.label }}</el-radio>
          </el-radio-group> 
        </el-form-item>-->
        <el-form-item label="开放条件" v-if="libraryData.isOpen === 1" prop="openCondition">
          <el-input v-model="libraryData.openCondition" placeholder="请输入开放条件" />
        </el-form-item>
        <div class="t-b">分类信息</div>
        <el-form-item label="主题分类" prop="mainClassName">
          <div class="flex-box">
            <el-input v-model="libraryData.mainClassName" placeholder="请选择主题分类" disabled></el-input>
            <el-button type="primary" @click="handelMainClassId" :disabled="isAddOperation == 'view'"
              class="flex-box-btn">选择</el-button>
          </div>
        </el-form-item>
        <el-form-item label="目录分类" prop="departmentClassId">
          <el-select class="select-txt" v-model="libraryData.departmentClassId" placeholder="请选择目录分类"
            :disabled="!libraryData.mainClassName">
            <el-option v-for="item in departmentClassIdTypeArr" :key="item.id" :label="item.directoryName"
              :value="item.id" />
            <template #footer>
              <el-button v-if="!isAdding" size="small" @click="onAddOption" type="primary" plain>新增</el-button>
              <template v-else>
                <el-input v-model="optionName" class="option-input" placeholder="请输入分类名称" size="small" />
                <el-button type="primary" size="small" @click="onConfirm">确认</el-button>
                <el-button size="small" @click="clear">取消</el-button>
              </template>
            </template>
          </el-select>
        </el-form-item>
        <div class="t-b">扩展信息</div>
        <el-form-item label="接入归集方式" prop="inputationMethod">
          <el-select v-model="libraryData.inputationMethod" placeholder="请选择接入归集方式" disabled>
            <el-option v-for="item in dict.type.access_collection_method" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="存储层" prop="dataLayer">
          <el-select v-model="libraryData.dataLayer" placeholder="请选择存储层">
            <el-option v-for="item in dict.type.datalayer_type" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否创建ODS表" prop="isCreateTable" v-if="libraryData.dataLayer === '1'">
          <el-radio-group v-model="libraryData.isCreateTable" class="ml-4">
            <el-radio :label="item.value" :value="item.value" v-for="item in isRadio" :key="item.label">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数据归集频率" prop="inputationSequence">
          <el-select v-model="libraryData.inputationSequence" placeholder="请选择数据归集频率">
            <el-option v-for="item in dict.type.data_collection_frequency" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="目录摘要" prop="catalogAbstract">
          <el-input v-model="libraryData.catalogAbstract" placeholder="请输入目录摘要" />
        </el-form-item>

        <el-form-item label="标签" prop="inputationLabel">
          <div class="flex-box">
            <el-input v-model="libraryData.inputationLabel" placeholder="请选择标签" disabled></el-input>
            <el-button type="primary" @click="handelSelectTag" :disabled="isAddOperation == 'view'"
              class="flex-box-btn">选择</el-button>
          </div>
        </el-form-item>
        <el-form-item label="底座类型" prop="baseType">
          <el-select v-model="libraryData.baseType" placeholder="请选择底座类型">
            <el-option v-for="item in dict.type.base_type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="数据更新方式" prop="updateType">
          <el-select v-model="libraryData.updateType" placeholder="请选择数据更新方式">
            <el-option v-for="item in dict.type.data_update_type" :key="item.value" :label="item.label"
              :value="+item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="接入归集周期" prop="inputationCron">
          <el-input v-model="libraryData.inputationCron" placeholder="请输入接入归集周期" />
        </el-form-item>
        <el-form-item label="接入归集口径" prop="inputationCalibre">
          <el-select v-model="libraryData.inputationCalibre" placeholder="请选择接入归集口径">
            <el-option v-for="item in dict.type.access_collection_caliber" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="归集增量标识字段" prop="identificationField">
          <el-input v-model="libraryData.identificationField" placeholder="请输入归集增量标识字段" />
        </el-form-item>
        <el-form-item label="归集数据量" prop="dataSize">
          <el-input v-model="libraryData.dataSize" placeholder="请输入归集数据量" @blur="valiNumber" />
        </el-form-item>
        <el-form-item label="数据起始时间" prop="date">
          <el-date-picker v-model="libraryData.date" type="datetimerange" start-placeholder="开始时间"
            end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
            :disabled="isAddOperation == 'view'" />
        </el-form-item>

        <div class="t-b">上链信息</div>
        <el-row class="rowForm">
          <el-form-item label="关联本机构职责目录" class="textarea-row" prop="dutyId">
            <div class="flex-box textarea-row">
              <el-select v-model="libraryData.dutyId" placeholder="请选择关联本机构职责目录" disabled>
                <el-option v-for="item in dutyIdTypeArr" :key="item.id" :label="item.agenciesPrsponsibility"
                  :value="item.id" />
              </el-select>
              <el-button type="primary" @click="handelSelectDuty" class="flex-box-btn">选择职责目录</el-button>
            </div>
          </el-form-item>
        </el-row>
        <div class="t-b" v-if="isAddOperation === 'change' || libraryData.changeReason">
          变更原因
        </div>
        <el-form-item label=" " class="textarea-row" v-if="isAddOperation === 'change' || libraryData.changeReason">
          <el-input v-model="libraryData.changeReason" type="textarea" :rows="4"></el-input>
        </el-form-item>
      </el-form>
      <SelectTagDialog v-model="isSelectTagDialog" @saveHandle="inputationLabelSelected"></SelectTagDialog>
      <SelectDutyDialog v-model="isSelectDutyDialog" @saveHandle="dutyIdSelected" :selectDutyId="selectDutyId">
      </SelectDutyDialog>
      <MainClassDialog v-model="isMainClassDialog" @saveHandle="MainClassSaveHandle" :mainClassId="mainClassId">
      </MainClassDialog>
    </div>
    <div v-if="activeValue == 2" class="container">
      <el-row style="display: flex; justify-content: space-around">
        <el-col :span="10" class="border-color">
          <span class="header-title">请选择</span>

          <el-form :model="libraryData" label-width="100px" :label-position="'right'" ref="secondRef" :disabled="isEdit"
            :rules="secondFormRules" class="form-detail">
            <el-form-item label="数据来源" prop="datasourceId">
              <el-select v-model="libraryData.datasourceId" @focus="getDatabaseList" @change="searchEtlTableList"
                placeholder="请选择数据来源">
                <el-option v-for="item in datasourceList" :key="item.dbId" :label="item.name" :value="item.dbId" />
              </el-select>
            </el-form-item>
            <el-form-item label="模式名" prop="schemeName">
              <el-select v-model="libraryData.schemeName" placeholder="请选择模式名" @change="selectChild">
                <el-option v-for="item in parentArr" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-form>

          <!-- <el-col :span="24">
              <el-form-item label="表名">
                <el-select v-model="libraryData.tableName" placeholder="请选择" @change="queryEtlTableFields">
                  <el-option v-for="item in childArr" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
          </el-col>-->
          <el-table :data="data1" border ref="leftTable" @current-change="checkAll" highlight-current-row
            style="width: 100%" height="400px">
            <el-table-column type="index" width="50" align="center" />
            <el-table-column prop="label" label="表名"></el-table-column>
            <el-table-column prop label="表描述"></el-table-column>
            <el-table-column prop="parentLabel" label="schame"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="2" style="display: flex; flex-direction: column; justify-content: center">
          <el-button :disabled="nowSelectData.length ? false : true" size="mini" type="primary" @click="handelSelect"
            icon="el-icon-arrow-right">
          </el-button>
          <el-button :disabled="nowSelectRightData.length ? false : true" size="mini" type="primary"
            @click="handleRemoveSelect" style="margin-top: 10px; margin-left: 0px" icon="el-icon-arrow-left">
          </el-button>
        </el-col>
        <el-col :span="10" style="min-height: 460px" class="border-color">
          <span class="header-title">已选择</span>
          <el-table :data="selectArr" border ref="rightTable" @selection-change="checkRightAll" style="width: 100%"
            height="500px">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column prop="name" label="字段名"></el-table-column>
            <el-table-column prop label="字段英文名称"></el-table-column>
            <el-table-column prop="comments" label="字段描述"></el-table-column>
            <el-table-column prop="originalColumnTypeName" label="字段类型"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <div v-if="activeValue == 3" class="container">
      <div class="t-b">数据项信息</div>
      <p>编辑数据信息项</p>
      <el-form class="form-detail-inline-two box" label-width="" inline :model="libraryData" label-position="left"
        ref="thirdRef" :disabled="isEdit">
        <el-form-item label="表名">
          <el-input v-model="libraryData.tableName" placeholder="请输入数据目录代码" disabled />
        </el-form-item>
        <el-form-item label="表英文名">
          <el-input v-model="libraryData.tableNameEn" placeholder="请输入数据目录代码" />
        </el-form-item>
      </el-form>

      <vxe-table border show-overflow :data="tableData" min-height="360" :column-config="{ resizable: true }"
        :edit-config="{ trigger: 'click', mode: 'cell' }">
        <vxe-column field="fieldName" title="数据项名称" :edit-render="{ autofocus: '.vxe-input--inner' }" width="100">
          <template #edit="{ row }">
            <vxe-input v-model="row.fieldName" :disabled="isEdit" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="fieldNameEn" title="英文名称" :edit-render="{}" width="100">
          <template #edit="{ row }">
            <vxe-input v-model="row.fieldNameEn" :disabled="isEdit" type="text" placeholder="请输入昵称"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="fieldType" title="数据类型" :edit-render="{}" width="100">
          <template #edit="{ row }">
            <vxe-input v-model="row.sex" :disabled="isEdit" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="length" title="数据长度" :edit-render="{}" width="100">
          <template #edit="{ row }">
            <vxe-input v-model="row.length" :disabled="isEdit" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="precision" title="标度" :edit-render="{}" width="100">
          <template #edit="{ row }">
            <vxe-input v-model="row.precision" :disabled="isEdit" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="fieldDes" title="字段描述" :edit-render="{}" min-width="100">
          <template #edit="{ row }">
            <vxe-input v-model="row.fieldDes" :disabled="isEdit" type="text" placeholder="请输入昵称"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="ruleId" title="数据标准" :edit-render="{}" min-width="100">
          <template #edit="{ row }">
            <vxe-select v-model="row.ruleId" :disabled="isEdit" @change="selectRuleName(row)">
              <vxe-option v-for="item in dataNormList" :key="item.id" :value="item.id"
                :label="item.ruleName"></vxe-option>
            </vxe-select>
          </template>
          <template #default="{ row }">
            {{ row.ruleName }}
          </template>
        </vxe-column>
        <vxe-column v-if="false" field="ruleName" title="数据标准" :edit-render="{}" min-width="100">
          <template #edit="{ row }">
            <vxe-input v-model="row.ruleName" :disabled="isEdit" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="isKey" title="是否主键" :edit-render="{}" min-width="100">
          <template #edit="{ row }">
            <vxe-select v-model="row.isKey" :disabled="isEdit">
              <vxe-option v-for="item in list" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
            </vxe-select>
          </template>
          <template #default="{ row }">
            {{ row.isKey === 1 ? "是" : "否" }}
          </template>
        </vxe-column>
        <vxe-column field="isNull" title="允许为空" :edit-render="{}" min-width="100">
          <template #edit="{ row }">
            <vxe-select v-model="row.isNull" :disabled="isEdit">
              <vxe-option v-for="item in list" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
            </vxe-select>
          </template>
          <template #default="{ row }">
            {{ row.isNull === 1 ? "是" : "否" }}
          </template>
        </vxe-column>
        <vxe-column field="isTimestamp" title="是否业务时间戳" :edit-render="{}" min-width="120">
          <template #edit="{ row }">
            <vxe-select v-model="row.isTimestamp" :disabled="isEdit">
              <vxe-option v-for="item in list" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
            </vxe-select>
          </template>
          <template #default="{ row }">
            {{ row.isTimestamp === 1 ? "是" : "否" }}
          </template>
        </vxe-column>
        <vxe-column field="isDelete" title="是否删除标志" :edit-render="{}" min-width="120">
          <template #edit="{ row }">
            <vxe-select v-model="row.isDelete" transfer :disabled="isEdit">
              <vxe-option v-for="item in list" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
            </vxe-select>
          </template>
          <template #default="{ row }">
            {{ row.isDelete === 1 ? "是" : "否" }}
          </template>
        </vxe-column>
        <vxe-column field="isWarehouse" title="是否入库使时间" :edit-render="{}" min-width="120">
          <template #edit="{ row }">
            <vxe-select v-model="row.isWarehouse" transfer :disabled="isEdit">
              <vxe-option v-for="item in list" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
            </vxe-select>
          </template>
          <template #default="{ row }">
            {{ row.isWarehouse === 1 ? "是" : "否" }}
          </template>
        </vxe-column>
        <vxe-column field="safetyLevel" title="安全等级" :edit-render="{}" min-width="120">
          <template #edit="{ row }">
            <vxe-input v-model="row.safetyLevel" :disabled="isEdit" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="isOpen" title="是否向社会开放" :edit-render="{}" min-width="120">
          <template #edit="{ row }">
            <vxe-select v-model="row.isOpen" transfer :disabled="isEdit">
              <vxe-option v-for="item in list" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
            </vxe-select>
          </template>
          <template #default="{ row }">
            {{ row.isOpen === 1 ? "是" : "否" }}
          </template>
        </vxe-column>
        <vxe-column field="shareType" title="共享类型" :edit-render="{}" min-width="120">
          <template #edit="{ row }">
            <vxe-input v-model="row.shareType" :disabled="isEdit" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-if="libraryData.isSpace == '1'" field="isPosi" title="空间数据类型" :edit-render="{}" min-width="120">
          <template #edit="{ row }">
            <vxe-select v-model="row.isPosi" transfer :disabled="isEdit">
              <vxe-option v-for="item in posiType" :key="item.value" :value="item.value"
                :label="item.label"></vxe-option>
            </vxe-select>
          </template>
          <template #default="{ row }">
            {{
              row.isPosi === 1
                ? "非空间数据"
                : row.isPosi === 2
                  ? "x坐标"
                  : "y坐标"
            }}
          </template>
        </vxe-column>
        <vxe-column field="isSensitive" title="是否为敏感数据信息项" :edit-render="{}" min-width="120">
          <template #edit="{ row }">
            <vxe-select v-model="row.isSensitive" transfer :disabled="isEdit">
              <vxe-option v-for="item in list" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
            </vxe-select>
          </template>
          <template #default="{ row }">
            {{ row.isSensitive === 1 ? "是" : "否" }}
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div v-if="activeValue == 4" class="container">
      <div class="t-b">归集信息</div>
      <div class="box">
        <el-form inline class="form-detail-inline" :model="libraryData" label-width label-position="right" ref="lastRef"
          :disabled="isEdit">
          <el-form-item label="接入归集方式" prop="inputationMethod">
            <el-input v-model="libraryData.inputationMethod" placeholder="请输入数据目录代码" disabled />
          </el-form-item>

          <el-form-item label="数据归集频率" prop="inputationSequence">
            <el-input v-model="libraryData.inputationSequence" placeholder="请输入数据目录代码" />
          </el-form-item>

          <el-form-item label="接入归集周期" prop="inputationCron">
            <el-input v-model="libraryData.inputationCron" placeholder="请输入数据目录代码" />
          </el-form-item>
          <el-form-item label="接入归集口径" prop="inputationCalibre">
            <el-input v-model="libraryData.inputationCalibre" placeholder="请输入数据目录代码" />
          </el-form-item>
        </el-form>
      </div>
      <div class="t-b">数据信息</div>

      <div class="list">
        <div class="table1">
          <el-table style="width: 100%" border cellspacing="1" :data="selectArr">
            <el-table-column prop="name" label="字段名"></el-table-column>
          </el-table>
        </div>
        <div class="table1">
          <el-table style="width: 100%" border cellspacing="1" :data="dataList">
            <el-table-column prop="name" label="字段名"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSave('save')"
        v-if="isAddOperation !== 'change' && activeValue != 2 && !isEdit">暂存</el-button>
      <el-button type="primary" v-if="activeValue == 4 && !isEdit" @click="handleSubmitSave">保存</el-button>
      <el-button type="primary" v-if="activeValue != 1" @click="changeActiveVal('up')">上一步</el-button>
      <el-button type="primary" v-if="activeValue != 4" @click="changeActiveVal('next')">下一步</el-button>
      <el-button @click="handleCancel">取消</el-button>
      <!-- <el-button type="primary" @click="handleConfirm">确 定</el-button> -->
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from "vuex";
import {
  queryMisList,
  getDirectoryAllLevel,
  queryDirectoryList,
  queryDatabase,
  getEtlTableFields,
  getEtlTableList,
} from "@/api/unified-resources/information-system/index.js";
import { queryGovernanceRuleByName, saveCatalog, getCatalogDetail, updateCatalog } from "@/api/unified-resources/data-directory/index.js";
import { getResponsibilityList } from "@/api/unified-resources/job-directory/index.js";
import MainClassDialog from "../comp/MainClassDialog.vue";
import SelectTagDialog from "../comp/SelectTagDialog.vue";
import SelectDutyDialog from "../comp/SelectDutyDialog.vue";

export default {
  name: "libraryTable",
  dicts: [
    "share_method",
    "shared_scope",
    "shared_type",
    "access_collection_method",
    "data_collection_frequency",
    "base_type",
    "data_update_type",
    "access_collection_caliber",
    "datalayer_type",
  ],
  components: {
    MainClassDialog,
    SelectTagDialog,
    SelectDutyDialog,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "弹窗标题",
    },
    currentOpObj: {
      type: Object,
      default: {},
    },
    width: {
      type: String,
      default: "85%",
    },
    isAddOperation: {},
  },
  data() {
    return {
      visible: this.value,
      dialogTitle: "",
      itemView: {},
      // 这是传递给表单组件的数据
      activeValue: 1,
      libraryData: {
        env: "",
        isSpace: 2,
        isOpen: 2,
        catalogType: "数据库",
        departmentClassId: null,
        informationSystem: "",
        schemeName: "",
        mainClassName: "",
      },
      provideUnitArr: [],
      informationSystemArr: [],
      departmentClassIdTypeArr: [],
      isRadio: [
        { label: "是", value: 1 },
        { label: "否", value: 2 },
      ],
      safetyLevelArr: [
        { id: 1, levelName: "安全等级一级" },
        { id: 2, levelName: "安全等级二级" },
        { id: 3, levelName: "安全等级三级" },
      ],
      mainClassId: "",
      isMainClassDialog: false,
      isSelectTagDialog: false,
      dutyIdTypeArr: [],
      isSelectDutyDialog: false,
      selectDutyId: "",
      isAdding: false,
      optionName: "",
      isEdit: false,
      dataList: [],
      datasourceList: [],
      data1: [],
      parentArr: [],
      childArr: [],
      selectArr: [],
      nowSelectData: [],
      nowSelectRightData: [],
      tableData: [],
      dbId: '',
      list: [
        { label: '是', value: '' },
        { label: '否', value: '1' }
      ],
      firstFormRules: {
        catalogCode: [
          { required: true, message: "请输入数据目录代码", trigger: "blur" },
        ],
        catalogName: [
          { required: true, message: "请输入目录名称", trigger: "blur" },
        ],
        catalogNameEn: [
          { required: true, message: "请输入目录英文名称", trigger: "blur" },
        ],
        provideUnit: [
          { required: true, message: "请选择提供单位", trigger: "change" },
        ],
        informationSystem: [
          { required: true, message: "请选择所属信息系统", trigger: "change" },
        ],
        catalogType: [
          { required: true, message: "请输入目录类型", trigger: "blur" },
        ],
        updateSeq: [
          {
            required: true,
            message: "请输入更新频率及增量描述",
            trigger: "blur",
          },
        ],
        isSpace: [
          {
            required: true,
            message: "请选择是否为空间资源",
            trigger: "change",
          },
        ],
        coordinate: [
          { required: true, message: "请输入源坐标系", trigger: "blur" },
        ],
        safetyLevel: [
          { required: true, message: "请选择安全等级", trigger: "change" },
        ],
        shareMethod: [
          { required: true, message: "请选择共享方式", trigger: "change" },
        ],
        shareRange: [
          { required: true, message: "请选择共享范围", trigger: "change" },
        ],
        // shareType: [{ required: true, message: '请选择共享类型', trigger: 'change' }],
        // shareCondition: [{ required: true, message: '请输入共享条件', trigger: 'blur' }],
        // isOpen: [{ required: true, message: '请选择开放属性', trigger: 'change' }],
        openCondition: [
          { required: true, message: "请输入开放条件", trigger: "blur" },
        ],
        isOpen: [{ required: true, message: "请选择", trigger: "change" }],
        mainClassName: [
          { required: true, message: "请选择主题分类", trigger: "change" },
        ],
        departmentClassId: [
          { required: true, message: "请选择目录分类", trigger: "change" },
        ],
        inputationMethod: [
          { required: true, message: "请选择接入归集方式", trigger: "change" },
        ],
        dataLayer: [
          { required: true, message: "请选择存储层", trigger: "change" },
        ],
        baseType: [
          { required: true, message: "请选择底座类型", trigger: "change" },
        ],
        updateType: [
          { required: true, message: "请选择数据更新方式", trigger: "change" },
        ],
        inputationCron: [
          { required: true, message: "请输入接入归集周期", trigger: "blur" },
        ],
        inputationCalibre: [
          { required: true, message: "请选择接入归集口径", trigger: "change" },
        ],
        identificationField: [
          {
            required: true,
            message: "请输入归集增量标识字段",
            trigger: "blur",
          },
        ],
        dutyId: [
          {
            required: true,
            message: "请选择关联本机构职责目录",
            trigger: "change",
          },
        ],
      },
      secondFormRules: {
        datasourceId: [
          { required: true, message: "请选择数据来源", trigger: "change" },
        ],
        schemeName: [
          { required: true, message: "请选择模式名", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    value(newVal) {
      this.visible = newVal;
    },
    visible(newVal) {
      this.$emit("input", newVal);
    },
    title: {
      handler(newVal) {
        this.dialogTitle = newVal;
      },
      deep: true, // 深入监听
      immediate: true,
    },
    currentOpObj: {
      handler(newVal) {
        this.itemView = newVal;
      },
      deep: true, // 深入监听
      immediate: true,
    },
  },
  computed: {
    ...mapState('projectManage', ['catalogId']), // 映射 Vuex 状态
  },
  mounted() {
    if (
      this.isAddOperation === "add" &&
      JSON.parse(sessionStorage.getItem("kb-form"))
    ) {
      this.libraryData = JSON.parse(sessionStorage.getItem("kb-form"));
    }
    this.libraryData.inputationMethod = "库表";
    this.getTrees();
    this.getList();
    this.getSystemListData();
    // getSafetyLevelList()
    this.getGovernanceRuleByName();

    this.getOrganizationalList();
    if (this.isAddOperation !== "add") {
      if (this.historyId) {
        // this.getDirectoryList()
        // this.getVerHistory()
      } else {
        this.getDirectoryList();
        this.getDetail();
      }

      if (this.isAddOperation === "view") {
        this.isEdit = true;
      } else {
        this.isEdit = false;
      }
    }
  },

  methods: {
    getOrganizationalList() {
      getDirectoryAllLevel({ type: "组织机构" }).then((res) => {
        if (+res.code === 200) {
          if (res.data === null) {
            this.provideUnitArr = [];
          } else {
            this.removeListForLevel4(res.data[0].list);
            this.provideUnitArr = res.data[0].list;
          }
        }
      });
    },

    removeListForLevel4(data) {
      data.forEach((item) => {
        // 如果是 level 4 的项，删除 list 属性
        if (item.level === "4") {
          delete item.list;
        }
        // 如果当前项有子项（list），递归调用该函数
        if (item.list && item.list.length > 0) {
          this.removeListForLevel4(item.list);
        }
      });
    },

    getSystemListData() {
      queryMisList({
        pageNumber: 1,
        pageSize: 9999,
      }).then((res) => {
        if (+res.code === 200) {
          this.informationSystemArr = res.data;
        }
      });
    },
    changeProvidedUnit(value) {
      this.libraryData.informationSystem = "";
    },
    getDirectoryList(val) {
      queryDirectoryList({
        pageNumber: 1,
        pageSize: 99999,
        directoryTwoId: val,
      }).then((res) => {
        if (+res.code === 200) {
          this.departmentClassIdTypeArr = res.data;
        }
      });
    },
    handelMainClassId() {
      this.mainClassId = this.libraryData.mainClassId;
      this.isMainClassDialog = true;
    },
    handelSelectTag() {
      // useProjectStore.selectTagList = this.libraryData.column1
      console.log(this.libraryData.column1, 'this.libraryData.column1');

      this.$store.dispatch(
        "projectManage/setSelectTagList",
        this.libraryData.column1
      );
      this.isSelectTagDialog = true;
    },
    handelSelect() {
      this.queryEtlTableFields(this.nowSelectData);
      this.selectArr = this.handleConcatArr(this.selectArr, this.nowSelectData);
      // console.log(selectArr.value)
      this.nowSelectData = [];
    },
    valiNumber() {
      if (this.libraryData.dataSize) {
        const reg = /^-?\d+(\.\d+)?$/;
        let regRes = reg.test(this.libraryData.dataSize);
        if (!regRes) {
          this.libraryData.dataSize = "";
          this.$message.error("归集数据量只能为纯数字");
        }
      }
    },
    getTrees() {
      getDirectoryAllLevel({
        type: "目录",
      }).then((res) => {
        if (+res.code === 200) {
          this.mainClassIdOptions = res.data;
        }
      });
    },
    getList() {
      getResponsibilityList({
        pageNumber: 1,
        pageSize: 9999,
      }).then((res) => {
        if (+res.code === 200) {
          this.dutyIdTypeArr = res.data;
        }
      });
    },
    getGovernanceRuleByName() {
      queryGovernanceRuleByName({
        pageNumber: 1,
        pageSize: 9999,
      }).then((res) => {
        if (+res.code === 200) {
          this.dataNormList = res.data;
        }
      });
    },
    handelSelectDuty() {
      this.$store.dispatch(
        "projectManage/setsSelectDutyId",
        this.libraryData.dutyId
      );
      this.isSelectDutyDialog = true;
    },
    getDetail() {
      console.log(this.catalogId, 'this.catalogId');

      getCatalogDetail({ catalogId: this.catalogId }).then((res) => {
        let catalog = res.data.catalog;
        let catalogDuty = res.data.catalogDuty;
        let catalogExtend = res.data.catalogExtend;
        let catalogDatabase = res.data.catalogDatabase;
        let schemeName = catalogDatabase.schemeName;
        let datasourceId = catalogDatabase.datasourceId;
        let tableName = catalogDatabase.tableName;
        let newObj = {
          ...catalog,
          ...catalogDuty,
          ...catalogExtend,
          ...catalogDatabase,
        };
        this.dbId = catalogDatabase.datasourceId;
        console.log(
          catalogDatabase.datasourceId,
          "catalogDatabase.datasourceId"
        );
        this.libraryData = newObj;

        this.$store.dispatch(
          "projectManage/setCatalogId",
          catalog.catalogId
        );
        this.libraryData.date = [
          catalogExtend.startTime,
          catalogExtend.endTime,
        ];
        this.libraryData.catalogType = "数据库";
        this.libraryData.safetyLevel = +this.libraryData.safetyLevel; //安全等级
        this.libraryData.provideUnit = this.libraryData.provideUnit.split(",");

        if (this.libraryData.column1) {
          this.libraryData.column1 = JSON.parse(this.libraryData.column1);
        }
        if (catalog?.catalogChange?.changeReason) {
          this.libraryData.changeReason = catalog.catalogChange.changeReason;
        }

        this.tableData = res.data.dataFields;
        res.data.dataFields.forEach((ak) => {
          let newObj = {
            name: ak.fieldName,
            comments: ak.fieldDes,
            originalColumnTypeName: ak.fieldType,
          };
          // selectArr.value.push(newObj)
          this.dataList.push(newObj);
          // queryEtlTableFields()
        });
        this.getDatabaseList();

        if (this.dbId && tableName) {
          getEtlTableFields({
            dbId: this.dbId,
            tableName: tableName,
          }).then((res) => {
            if (+res.code === 200 && +res.data.code === 200) {
              this.selectArr = res.data.data;
            }
          });

          queryDatabase({
            pageNumber: 1,
            pageSize: 999,
          }).then((res) => {
            if (+res.code === 200) {
              this.libraryData.datasourceId = datasourceId;
              getEtlTableList({
                dbId: datasourceId,
                tableName: tableName,
              }).then((res) => {
                let nameArr = [];
                if (res.data.data.tableList.length !== 0) {
                  res.data.data.tableList.forEach((item) => {
                    let info = item.split(".");
                    nameArr.push(info[0]);
                  });
                  nameArr = [...new Set(nameArr)];
                  nameArr.forEach((it) => {
                    let nameObj = {
                      label: it,
                      value: it,
                      child: [],
                    };
                    res.data.data.tableList.forEach((i) => {
                      let cf = i.split(".");
                      if (cf[0] === it) {
                        nameObj.child.push({
                          label: cf[1],
                          value: cf[1],
                          parentLabel: cf[0],
                        });
                      }
                    });
                    this.parentArr.push(nameObj);
                  });

                  this.parentArr.find((info) => {
                    if (info.value === schemeName) {
                      this.data1 = info.child;
                    }
                  });
                }
              });
            }
          });
        }
      });
    },
    getDatabaseList() {
      queryDatabase({
        pageNumber: 1,
        pageSize: 999,
      }).then((res) => {
        this.datasourceList = res.data;
      });
    },

    inputationLabelSelected(obj) {
      console.log(obj, 'onj');

      this.libraryData.inputationLabel = obj.dynamicTags
        ?.map((i) => i.directoryName)
        .join(",");
      this.libraryData.column1 = obj.dynamicTags;
    },
    dutyIdSelected(obj) {
      this.libraryData.dutyId = obj.id;
      this.$store.dispatch(
        "projectManage/setsSelectDutyId",
        this.libraryData.dutyId
      );
      this.isSelectDutyDialog=false

    },
    MainClassSaveHandle(value) {
      this.clear();
      this.libraryData.mainClassId = value.levelDirectory;
      this.libraryData.mainClassName = value.levelDirectoryName;
      this.libraryData.departmentClassId = "";
      this.getDirectoryList(value.levelDirectory);
    },
    clear() {
      this.optionName = "";
      this.isAdding = false;
    },

    async changeActiveVal(type) {
      if (type == "up") {
        this.activeValue -= 1;
      } else {
        let res1;

        if (this.activeValue === 1) {
          this.libraryData.catalogCode = this.createRandomId();
          await this.$refs.firstRef.validate((valid, fields) => {
            if (valid) {
              res1 = valid;
              this.activeValue += 1;

              queryDatabase({ pageNumber: 1, pageSize: 999 }).then((res) => { });
            } else {
              this.$message.error("请完整输入表单项");
              return;
            }
            return res1;
          });
        } else if (this.activeValue === 2) {
          await this.$refs.secondRef.validate((valid, fields) => {
            if (valid) {
              res1 = valid;
              this.activeValue += 1;
            } else {
              this.$message.error("请完整输入表单项");
              return;
            }
            return res1;
          });
        } else if (this.activeValue === 3) {
          this.activeValue += 1;
        }
      }
    },
    searchEtlTableList(value) {
      this.libraryData.schemeName = "";
      this.libraryData.tableName = "";
      this.data1 = [];
      this.parentArr = [];
      this.childArr = [];
      this.selectArr = [];
      getEtlTableList({
        dbId: this.libraryData.datasourceId,
        tableName: "",
      }).then((res) => {
        let nameArr = [];
        if (res.data.data.tableList.length !== 0) {
          res.data.data.tableList.forEach((item) => {
            let info = item.split(".");
            nameArr.push(info[0]);
          });
          nameArr = [...new Set(nameArr)];
          nameArr.forEach((it) => {
            let nameObj = {
              label: it,
              value: it,
              child: [],
            };
            res.data.data.tableList.forEach((i) => {
              let cf = i.split(".");
              if (cf[0] === it) {
                nameObj.child.push({
                  label: cf[1],
                  value: cf[1],
                  parentLabel: cf[0],
                });
              }
            });
            this.parentArr.push(nameObj);
          });
        }
      });
      this.libraryData.datasourceId = value;
      console.log(
        this.libraryData.datasourceId,
        "this.libraryData.datasourceId====change"
      );
    },
    selectChild(value) {
      this.data1 = [];
      this.selectArr = [];
      let schemeName = this.libraryData.schemeName;
      this.parentArr.find((item) => {
        if (item.label === schemeName) {
          this.data1 = item.child;
        }
      });
    },
    checkAll(val) {
      if (this.isEdit) return;
      console.log(val);
      this.data1 = [];
      this.selectArr = [];
      this.selectChild();
      this.nowSelectData = [val];
      this.libraryData.tableName = val.parentLabel + "." + val.value;
    },
    checkRightAll(val) {
      (this.libraryData.databaseName = ""), //数据库名称
        // this.libraryData.schemeName = '', //模式名
        // this.libraryData.tableName = '', //表名
        (this.libraryData.tableDes = ""); //表描述
      this.tableData = [];
      this.dataList = val;
      val.forEach((item) => {
        console.log(item);
        let tableRow = {
          fieldName: item.name, //字段名称
          fieldNameEn: "", //字段英文名称
          fieldDes: item.comments, //字段描述
          fieldType: item.originalColumnTypeName, //数据类型
          length: item.length, //数据长度
          precision: item.precision, //标度
          spaceInfo: "", //空间信息项 1x 2y 3z 4非空间
          isKey: "", //是否主键 1是 2否
          isNull: "", //是否允许为空 1是 2否
          isTimestamp: "", //是否业务时间戳 1是 2否
          isDelete: "", //是否删除标志 1是 2否
          isWarehouse: "", //是否入库时间 1是 2否
          safetyLevel: "", //安全等级
          isOpen: "", //是否开放 1是 2否
          shareType: "", //共享类型
          isSensitive: "", //是否为敏感数据 1是 2否
        };

        this.tableData.push(tableRow);
      });
      this.nowSelectRightData = val;
    },
    handleRemoveSelect() {
      this.data1 = this.handleConcatArr(this.data1, this.nowSelectRightData);
      handleRemoveTabList(this.nowSelectRightData, this.selectArr);
      this.nowSelectRightData = [];
    },
    queryEtlTableFields(val) {
      let params = {
        dbId: this.libraryData.datasourceId,
        tableName: val[0].parentLabel + "." + val[0].value,
      };
      params.dbId = this.libraryData.datasourceId;
      console.log("我执行了", params);
      // if (props.isAddOperation !== 'add') {
      //   params.dbId = dbId
      // }
      getEtlTableFields({ ...params }).then((res) => {
        if (+res.code === 200 && +res.data.code === 200) {
          this.selectArr = res.data.data;
        }
      });
    },
    handleConcatArr(selectArr, nowSelectData) {
      let arr = [];
      arr = arr.concat(selectArr, nowSelectData);

      return arr;
    },
    selectRuleName(row) {
      this.dataNormList.forEach((item) => {
        if (item.id === row.ruleId) {
          row.ruleName = item.ruleName;
        }
      });
    },

    handleSubmitSave() {
      this.handleSave('submit')
    },

    handleUpdateVisible(val) {
      this.visible = val;
    },
    beforeClose(done) {
      if (this.isAddOperation === "add") {
        if (Object.values(this.libraryData).filter(value => value !== null && value !== '').length > 4) {
          this.$confirm("表单尚未提交，是否暂存已修改的内容？", "提示", {
            confirmButtonText: "暂存",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              sessionStorage.setItem(
                "kb-form",
                JSON.stringify(this.libraryData)
              );
              this.$message({
                type: "success",
                message: "暂存成功"
              });
              this.visible = false;
              this.$emit("before-close", done);
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消成功"
              });
              this.libraryData = {};
              sessionStorage.removeItem("kb-form");
              this.visible = false;
              this.$emit("before-close", done);
            });
        } else {
          this.visible = false;
          this.$emit("before-close", done);
        }
      } else {
        this.visible = false;
        this.$emit("before-close", done);
      }
    },
    // 取消按钮处理方法
    handleCancel() {
      // console.log(this.libraryData,'this.libraryData');
      if (this.isAddOperation === "add") {
         // 统计既不为 null 也不为空字符串的属性数量
        if (Object.values(this.libraryData).filter(value => value ).length > 5) {
          this.$confirm("表单尚未提交，是否暂存已修改的内容？", "提示", {
            confirmButtonText: "暂存",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              sessionStorage.setItem(
                "kb-form",
                JSON.stringify(this.libraryData)
              );
              this.$message({
                type: "success",
                message: "暂存成功"
              });
              this.visible = false;
              this.$emit("cancel"); // 可以在父组件监听 'cancel' 事件
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消成功"
              });
              this.libraryData = {};
              sessionStorage.removeItem("kb-form");
              this.visible = false;
              this.$emit("cancel"); // 可以在父组件监听 'cancel' 事件
            });
        } else {
          this.visible = false;
          this.$emit("cancel"); // 可以在父组件监听 'cancel' 事件
        }
      } else {
        this.visible = false;
        this.$emit("cancel"); // 可以在父组件监听 'cancel' 事件
      }

    },
    handleSave(type) {
      this.libraryData.column1 = JSON.stringify(this.libraryData.column1, null, '')
      let params = {}
      params = {
        catalog: {
          catalogCode: this.libraryData.catalogCode, //数据目录代码
          catalogName: this.libraryData.catalogName, //目录名称
          catalogNameEn: this.libraryData.catalogNameEn, //目录英文名称
          provideUnit: this.libraryData.provideUnit.join(','), //提供单位
          informationSystem: this.libraryData.informationSystem, //所属信息系统
          catalogType: 1, //目录类型 1数据库 2服务 3文件 4 实时
          updateSeq: this.libraryData.updateSeq, //更新频率
          isSpace: this.libraryData.isSpace, //是否空间资源  1是 2否
          coordinate: this.libraryData.coordinate, //坐标系
          shareMethod: this.libraryData.shareMethod, //共享方式
          shareRange: this.libraryData.shareRange, //共享范围
          // shareType: this.libraryData.shareType, //共享类型
          // shareCondition: this.libraryData.shareCondition, //共享条件
          // isOpen: this.libraryData.isOpen, //是否开放 1开放 2非开放
          openCondition: this.libraryData.openCondition, //开放条件
          mainClassId: this.libraryData.mainClassId, //主题分类ID
          mainClassName: this.libraryData.mainClassName, //主题分类名称
          departmentClassId: this.libraryData.departmentClassId, //部门分类ID
          catalogStatus: this.libraryData.catalogStatus, //目录状态 1暂存 2已提交
          safetyLevel: this.libraryData.safetyLevel, //安全等级
          catalogDes: this.libraryData.catalogDes //目录描述
        },
        catalogExtend: {
          inputationMethod: this.libraryData.inputationMethod, //归集方式
          dataLayer: this.libraryData.dataLayer, //存储层
          isCreateTable: this.libraryData.isCreateTable, // 是否创建ODS表
          inputationSequence: this.libraryData.inputationSequence, //归集频率
          catalogAbstract: this.libraryData.catalogAbstract, //目录摘要
          inputationLabel: this.libraryData.inputationLabel, //标签
          column1: this.libraryData.column1, //标签
          baseType: this.libraryData.baseType, //底座类型
          updateType: this.libraryData.updateType, //数据更新方式 1增量 2全量
          inputationCron: this.libraryData.inputationCron, //归集周期cron表达式
          inputationCalibre: this.libraryData.inputationCalibre, //归集口径
          identificationField: this.libraryData.identificationField, //增量标识字段
          dataSize: this.libraryData.dataSize, //归集数据量
          startTime: this.libraryData.date?.at(0), //起始时间
          endTime: this.libraryData.date?.at(1) //结束时间
        },
        catalogDuty: {
          dutyId: this.libraryData.dutyId //职责id
        },
        catalogDatabase: {
          datasourceId: this.libraryData.datasourceId, //数据源id
          // databaseName: this.libraryData.databaseName, //数据库名称
          schemeName: this.libraryData.schemeName, //模式名
          tableName: this.libraryData.tableName, //表名
          tableNameEn: this.libraryData.tableNameEn, //表英文名
          tableDes: this.libraryData.tableDes //表描述
        },
        catalogChange: {
          changeReason: this.libraryData.changeReason
        },
        dataFields: this.tableData
      }
      console.log(params)
      if (type === 'save') {
        params.catalog.catalogStatus = 1
      } else {
        params.catalog.catalogStatus = 2
      }
      console.log(params, 'params')
      if (this.isAddOperation === 'change') {
        // 资产目录 变更
        params.catalog.catalogId = this.catalogId
        params.catalogExtend.catalogId = this.catalogId
        params.catalogDuty.catalogId = this.catalogId
        params.catalogDatabase.catalogId = this.catalogId
        changeFeedbackList({ catalogDTO: params, queryType: 1, registerFlag: true, assertId: this.catalogId }).then(res => {
          console.log(res)
          if (+res.code === 200) {
            // emit('update:dialogVisible', false)
            // emit('saveHandle')
            this.$message.success("更新成功");
            this.handleCancel()
            // proxy.$bus.emit('libraryTable', params)
            sessionStorage.removeItem('kb-form')
          }
        })
      } else {
        // 数据资源目录编辑
        if (this.catalogId) {
          params.catalog.catalogId = this.catalogId
          params.catalogExtend.catalogId = this.catalogId
          params.catalogDuty.catalogId = this.catalogId
          params.catalogDatabase.catalogId = this.catalogId
          updateCatalog(params).then(res => {
            console.log(res)
            if (+res.code === 200) {
              this.$message.success("更新成功");
              this.handleCancel()
              sessionStorage.removeItem('kb-form')
            }
          })
        } else {
          saveCatalog(params).then(res => {
            console.log(res)
            if (+res.code === 200) {
              this.$message.success("新增成功");
              this.handleCancel()
              sessionStorage.removeItem('kb-form')
            }
          })
        }
      }
    },


    // 确定按钮处理方法
    async handleConfirm() {
      if (this.title === "新增") {
        this.formData.code = this.createRandomId();
      }
      // this.$refs.myFormComponent.validateForm();
      await this.$refs.ruleFormRef.validate((valid, fields) => {
        if (valid) {
          // 校验通过，进行后续操作
          console.log("表单校验通过，进行后续操作");
          this.handleSave();
        } else {
          this.$message.error("请完整填写表单");
          console.log("表单校验失败");
        }
      });
    },


    createRandomId() {
      let min = Math.pow(10, 14);
      let max = Math.pow(10, 15) - 1;
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
  },
};
</script>

<style scoped lang="scss">
.op-btn {
  text-align: center;
  margin-top: 15px;
}

.other-form {
  .el-form-item {
    width: 27%;
  }
}

.two-form {
  .el-form-item {
    width: 43%;
  }
}

.container {
  min-height: 60vh;
}

.rowForm {
  // justify-content: center;
}

.w100 {
  width: 100% !important;
}

.t-b {
  font-size: 18px;
  margin-bottom: 20px;
}

.box {
  margin-left: 50px;
}

.list {
  display: flex;
  justify-content: center;
  margin-top: 20px;

  .table1 {
    width: 30%;
    margin: 20px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #606266;

    td,
    thead {
      padding: 0 10px;
      width: 177px;
      height: 34px;
      line-height: 34px;
      border: 1px solid #e4e4e4;
      box-sizing: border-box;
    }

    thead {
      text-align: center;
    }

    .one-td {
      border-top: none;
    }
  }

  .arrowList {
    td {
      border: 0 !important;
      text-align: center;
    }

    tbody {
      border: 0 !important;
    }
  }
}

.flex-box {
  display: flex;
  width: 100%;

  .el-input {
    width: 100%;
  }
}

.flex-box-btn {
  background-color: #3f8ffe !important;
  color: #fff !important;
  height: 38px !important;
}

.header-title {
  display: block;
  font-size: 16px;
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 10px;
}

.border-color {
  border: 1px solid #ebeef5;
}

.option-input {
  width: 100%;
  margin-bottom: 8px;
}

.select-txt {
  font-size: 30px !important;
}
</style>
