<template>
  <div class="content-box">
    <div class="home" v-if="mPage.homeShow">
      <div class="left">
        <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
        <span class="cameratxt">任务管理</span>
      </div>
      <div class="scroll">
        <div class="middle">
          <div class="filter">
            <div class="condition">
              <el-select v-model="mPage.taskListValue" clearable filterable class="sel" placeholder="任务名称"
                @clear="mPage.searchBtn">
                <el-option v-for="item in mPage.taskList" :key="item.value" :label="item.label" :value="item.label" />
              </el-select>
              <el-select v-model="mPage.destinationTableValue" clearable filterable class="sel" placeholder="目的表名"
                @clear="mPage.searchBtn">
                <el-option v-for="item in mPage.destinationTable" :key="item.value" :label="item.label"
                  :value="item.label" />
              </el-select>
              <el-select v-model="mPage.tkExeTypeValue" clearable class="sel" placeholder="执行方式"
                @clear="mPage.searchBtn">
                <el-option label="间隔执行" value="0" />
                <el-option label="定点执行" value="1" />
                <el-option label="每天" value="2" />
                <el-option label="每周" value="3" />
                <el-option label="每月" value="4" />
                <el-option label="手动执行" value="-1" />
                <el-option label="无定时" value="-2" />
              </el-select>
              <el-select v-model="mPage.tkActivationValue" clearable class="sel" placeholder="任务状态"
                @clear="mPage.searchBtn">
                <el-option label="未启动" value="0" />
                <el-option label="已启动" value="1" />
                <el-option label="暂停中" value="2" />
              </el-select>
              <el-button color="rgba(0, 97, 255, 1)" type="primary" class="search" @click="mPage.searchBtn"><el-icon>
                  <Search />
                </el-icon>
                <span>查询</span>
              </el-button>
            </div>
          </div>
          <!-- 按钮列表 -->
          <div class="gongneng">
            <el-button type="primary" color="rgba(0, 97, 255, 1)" plain @click="mPage.addClick">新增</el-button>
            <!-- <el-button type="primary" color="rgba(0, 97, 255, 1)" plain @click="mPage.batchStart">批量启动</el-button> -->
            <!-- <el-button type="primary" color="rgba(0, 97, 255, 1)" @click="mPage.batchEnd" plain>批量停止</el-button> -->
          </div>
        </div>
        <div class="footer" v-loading="mPage.loading">
          <el-table :row-class-name="tableRowClassName" :data="mPage.tableData"
            @selection-change="handleSelectionChange" style="width: 100%" border :header-cell-style="{
      background: 'rgba(240, 243, 247, 1)',
      height: '50px',
    }">
            <!-- <el-table-column align="center" type="selection" width="45" /> -->
            <el-table-column align="center" prop="xuhao" label="序号" width="55" />
            <el-table-column align="center" prop="tkName" label="任务名称" />
            <el-table-column align="center" prop="tkSql" label="来源数据表">
              <template #default="scope">
                <div v-if="scope.row.tkExchangeType == 0" style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  ">
                  <span style="display: inline-block; margin-right: 5px">SQL语句</span>
                  <el-icon @click="mPage.showSql(scope.row.tkSql)"
                    style="display: inline-block; cursor: pointer; color: #f00">
                    <InfoFilled />
                  </el-icon>
                </div>
                <div v-else style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  ">
                  <span>{{ scope.row.tkSql.split(" ")[3] }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="tkDestTable" label="目标数据表">
              <template #default="scope">
                <div style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  ">
                  <span>{{ mPage.getSubstring(scope.row.tkDestTable) }}</span>
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" prop="department" label="业务部门" /> -->
            <!-- <el-table-column align="center" prop="interchangerName" show-overflow-tooltip label="交换机名称" /> -->
            <el-table-column align="center" prop="tkExeType" label="执行方式" width="100">
              <template #default="scope">
                <span v-if="scope.row.tkManualOrAuto === 1">手动执行</span>
                <span v-else>
                  <span v-if="scope.row.tkExeType === 0">间隔执行</span>
                  <span v-else-if="scope.row.tkExeType === 1">定点执行</span>
                  <span v-else-if="scope.row.tkExeType === 2">每天</span>
                  <span v-else-if="scope.row.tkExeType === 3">每周</span>
                  <span v-else-if="scope.row.tkExeType === 4">每月</span>
                  <span v-else-if="scope.row.tkExeType === null"
                    style="color: rgba(255, 0, 0, 0.8); font-weight: 500">无定时</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="tkActivation" label="任务状态" width="100">
              <template #default="scope">
                <span v-if="scope.row.tkActivation === 0"
                  style="color: rgba(255, 0, 0, 0.8); font-weight: 500">未启动</span>
                <span v-else style="
                    background-color: rgb(59, 121, 9);
                    color: #fff;
                    font-weight: 500;
                    padding: 0 10px;
                  ">已启动</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="tkNextExeTime" label="下次执行时间" width="160" />
            <el-table-column align="center" label="操作" width="200">
              <template #default="scope">
                <div class="edit">
                  <el-button link type="primary" @click="mPage.lookClick(scope.row)">查看</el-button>
                  <el-button link type="primary" @click="mPage.editClick(scope.row)">编辑</el-button>
                  <el-button :disabled="scope.row.tkActivation == 1" link type="primary"
                    @click="mPage.taskAction(scope.row, 'start')">启动</el-button>
                  <el-button :disabled="scope.row.tkActivation == 0" link type="primary"
                    @click="mPage.taskAction(scope.row, 'stop')">停止</el-button>
                  <el-button link type="primary" v-if="scope.row.tkManualOrAuto === 0" @click="mPage.taskAction(scope.row, 'runonce')">执行一次</el-button>
                  <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" icon-color="#f89626"
                    title="是否删除此任务?" @confirm="mPage.delClick(scope.row)">
                    <template #reference>
                      <div class="del">删除</div>
                    </template>
                  </el-popconfirm>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页组件 -->
        <div class="pageSize">
          <span></span>
          <el-pagination background :current-page="mPage.currentPage" :page-size="mPage.pageSize"
            layout="total, prev, pager, next, jumper, slot" :total="mPage.total"
            @update:current-page="mPage.handleCurrentChange" />
        </div>
      </div>
    </div>
    <!-- 新增/编辑 -->
    <div class="taskEdit" v-if="mPage.editShow">
      <div class="left">
        <img src="@/assets/images/close.png" alt="" @click="mPage.cancelEdit" />
        <span class="add">{{ mPage.titleDialog }}</span>
      </div>
      <div class="content">
        <el-steps :active="mPage.stepInd" finish-status="success" simple>
          <el-step title="任务基本信息" />
          <el-step title="字段配置" />
          <el-step title="定时信息" />
        </el-steps>
        <div class="form" v-if="mPage.stepInd == 1">
          <el-form ref="editOneRef" :model="mPage.editRuleForm" :rules="mPage.editRules" label-width="180px"
            class="demo-ruleForm" label-position="left" status-icon>
            <div class="block">
              <div class="title">任务属性</div>
              <el-form-item label="交换任务名称 :" prop="tkName">
                <el-input v-model="mPage.editRuleForm.tkName" placeholder="请输入交换任务名称" maxlength="32" clearable
                  style="width: 500px" />
              </el-form-item>
              <!-- <el-form-item label="业务部门 :" prop="department">
                <el-select v-model="mPage.editRuleForm.department" placeholder="请选择业务部门" style="width: 500px">
                  <el-option label="部门通用" value="1" />
                  <el-option label="未知" value="2" />
                </el-select>
              </el-form-item> -->
              <el-form-item label="同步策略 :" prop="tkSyncPolicy">
                <el-select v-model="mPage.editRuleForm.tkSyncPolicy" placeholder="请选择同步策略" style="width: 500px">
                  <el-option label="插入更新" value="0" />
                  <el-option label="更新标记" disabled value="1" />
                  <el-option label="清空插入" disabled value="2" />
                </el-select>
              </el-form-item>
            </div>
            <div class="block">
              <div class="title">来源库设置</div>
              <el-form-item label="来源数据源 :" prop="tkDsIdSource">
                <el-select v-model="mPage.editRuleForm.tkDsIdSource" placeholder="请选择来源数据源" style="width: 500px">
                  <el-option v-for="item in mPage.dsSourceData" :label="item.label" :value="item.value"
                    :key="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="交换方式 :" prop="tkExchangeType">
                <el-select v-model="mPage.editRuleForm.tkExchangeType" placeholder="请选择交换方式" style="width: 500px">
                  <el-option label="自定义SQL语句" value="0" />
                  <el-option label="数据库视图" value="1" />
                  <el-option label="数据表" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="自定义SQL语句 :" v-if="mPage.editRuleForm.tkExchangeType == 0" prop="tkSql">
                <div style="display: flex; flex-direction: column">
                  <textarea style="
                      resize: none;
                      outline: none;
                      border: 1px solid #ccc;
                      width: 500px;
                    " rows="5" v-model="mPage.editRuleForm.tkSql"></textarea>
                  <el-button color="rgba(41, 109, 227, 1)" style="width: 80px; margin-top: 5px" type="primary"
                    @click="mPage.testSql()">测试SQL</el-button>
                </div>
              </el-form-item>
              <el-form-item label="数据库视图 :" v-if="mPage.editRuleForm.tkExchangeType == 1" prop="tkView">
                <span class="text" v-if="mPage.editRuleForm.tkView == ''">[]</span>
                <span class="text" v-else>{{ mPage.editRuleForm.tkView }}</span>
                <el-button color="rgba(41, 109, 227, 1)" type="primary" @click="mPage.getViews">选取</el-button>
              </el-form-item>
              <el-form-item label="来源数据表 :" v-if="mPage.editRuleForm.tkExchangeType == 2" prop="tkTable">
                <span class="text" v-if="mPage.editRuleForm.tkTable == ''">[]</span>
                <span class="text" v-else>{{
      mPage.editRuleForm.tkTable
    }}</span>
                <el-button color="rgba(41, 109, 227, 1)" type="primary" @click="mPage.getSourceTables">选取</el-button>
              </el-form-item>
            </div>
            <div class="block">
              <div class="title">目的库设置</div>
              <el-form-item label="目的数据源 :" prop="tkDsIdDestination">
                <el-select v-model="mPage.editRuleForm.tkDsIdDestination" placeholder="请选择目标数据源" style="width: 500px">
                  <el-option v-for="item in mPage.dsDestinationData" :label="item.label" :value="item.value"
                    :key="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="目的数据表 :" prop="tkDestTable">
                <span class="text" v-if="mPage.editRuleForm.tkDestTable == ''">[]</span>
                <span class="text" v-else>{{
      mPage.editRuleForm.tkDestTable
    }}</span>
                <el-button color="rgba(41, 109, 227, 1)" type="primary"
                  @click="mPage.getDestinationTables">选取</el-button>
              </el-form-item>
            </div>
            <div class="block collapse">
              <el-collapse>
                <el-collapse-item name="1">
                  <template #title>
                    <span class="title">高级设置</span>
                  </template>
                  <el-form-item label="交换服务器 :" prop="tkExchangeServer">
                    <el-radio-group v-model="mPage.editRuleForm.tkExchangeServer">
                      <el-radio label="0">智能选择</el-radio>
                      <el-radio label="1" disabled style="opacity: 0">手动选择</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="运行参数配置 :" prop="tkOptCfgAutoManual">
                    <el-radio-group v-model="mPage.editRuleForm.tkOptCfgAutoManual">
                      <el-radio label="0">智能选择</el-radio>
                      <el-radio label="1">手动选择</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <div v-if="mPage.editRuleForm.tkOptCfgAutoManual == 1">
                    <el-form-item label="提交记录数量 :" prop="tkOptCfgRsNum">
                      <el-input-number v-model="mPage.editRuleForm.tkOptCfgRsNum" :min="1" :max="100" step="5" />
                    </el-form-item>
                    <el-form-item label="线程数 :" prop="tkOptCfgThreadsNum">
                      <el-select v-model="mPage.editRuleForm.tkOptCfgThreadsNum" placeholder="请选择来源数据源字符集"
                        style="width: 500px">
                        <el-option label="1" value="1" />
                        <el-option label="2" value="2" />
                        <el-option label="3" value="3" />
                        <el-option label="4" value="4" />
                        <el-option label="5" value="5" />
                        <el-option label="6" value="6" />
                        <el-option label="7" value="7" />
                        <el-option label="8" value="8" />
                        <el-option label="9" value="9" />
                        <el-option label="10" value="10" />
                      </el-select>
                    </el-form-item>
                  </div>
                  <el-form-item label="是否记录错误数据 :" prop="tkRsIncorrectData">
                    <el-radio-group v-model="mPage.editRuleForm.tkRsIncorrectData">
                      <el-radio label="0">是</el-radio>
                      <el-radio label="1">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="来源数据源字符集 :" prop="tkDsSourceCharset">
                    <el-select v-model="mPage.editRuleForm.tkDsSourceCharset" placeholder="请选择来源数据源字符集"
                      style="width: 500px">
                      <el-option label="UTF8" value="UTF8" />
                      <el-option label="GBK" value="GBK" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="目的数据源字符集 :" prop="tkDsDestinationCharset">
                    <el-select v-model="mPage.editRuleForm.tkDsDestinationCharset" placeholder="请选择目的数据源字符"
                      style="width: 500px">
                      <el-option label="UTF8" value="UTF8" />
                      <el-option label="GBK" value="GBK" />
                    </el-select>
                  </el-form-item>
                </el-collapse-item>
              </el-collapse>
            </div>
            <el-form-item class="options">
              <el-button color="rgba(41, 109, 227, 1)" class="queding" type="primary"
                @click="mPage.nextOneEdit(editOneRef)">
                下一步
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="form" v-if="mPage.stepInd == 2">
          <el-table :row-class-name="tableRowClassName" :data="mPage.dsDestinationMetaData"
            @selection-change="handleSelectionChange" style="width: 100%" border :header-cell-style="{
      background: 'rgba(240, 243, 247, 1)',
      height: '50px',
    }">
            <el-table-column align="center" label="目标数据表">
              <el-table-column align="center" label="序号" type="index" width="52" />
              <el-table-column align="center" prop="COLUMN_NAME" label="字段" width="120">
              </el-table-column>
              <el-table-column align="center" prop="COLUMN_TYPE" label="类型" width="150" />
              <el-table-column align="center" prop="COLUMN_SIZE" label="长度" width="60" />
              <el-table-column align="center" prop="COLUMN_COMMENT" label="备注" width="250" />
              <el-table-column align="center" prop="IS_NULLABLE" label="是否非空" width="80" />
            </el-table-column>
            <el-table-column align="center" label="来源数据表">
              <el-table-column align="center" prop="city" label="字段" width="200">
                <template #default="scope">
                  <el-select v-model="scope.row.COLUMN_NAME_SOURCE" clearable
                    @change="mPage.fieldCorrespondence(scope.row)" placeholder="请选择源表字段" style="width: 100%">
                    <el-option v-for="item in mPage.dsSourceMetaDataOptions" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align="center" label="类型" width="150">
                <template #default="scope">
                  <span>{{ scope.row.typeCheck }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="长度" width="60">
                <template #default="scope">
                  <span>{{ scope.row.lengthCheck }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="智能转换" width="158">
                <template #default="scope">
                  <span>{{ scope.row.convertCheck }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="操作" width="200">
              <el-table-column align="center" prop="city" label="更新主键" width="80">
                <template #default="scope">
                  <div class="edit">
                    <el-checkbox :disabled="scope.row.disabled" v-model="scope.row.isUpdatePrimaryKey"
                      @change="mPage.checkChange(scope.row)"></el-checkbox>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="是否交换" width="80">
                <template #default="scope">
                  <div class="edit">
                    <el-checkbox :disabled="scope.row.disabled" v-model="scope.row.isExchange"
                      @change="mPage.checkChange(scope.row)"></el-checkbox>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="是否更新" width="80">
                <template #default="scope">
                  <div class="edit">
                    <el-checkbox :disabled="scope.row.disabled" v-model="scope.row.isUpdate"
                      @change="mPage.checkChange(scope.row)"></el-checkbox>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="增量标记" width="80">
                <template #default="scope">
                  <div class="edit">
                    <el-checkbox disabled v-model="scope.row.isMarkIncrement"
                      @change="mPage.checkChange(scope.row)"></el-checkbox>
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
          <div class="options">
            <el-button class="queding" @click="mPage.lastOneEdit">
              上一步
            </el-button>
            <el-button color="rgba(41, 109, 227, 1)" class="queding" type="primary" @click="mPage.nextTwoEdit">
              下一步
            </el-button>
          </div>
        </div>
        
        <div class="form" v-if="mPage.stepInd == 3">
          <el-form ref="editThreeRef" :model="mPage.editThreeRuleForm" :rules="mPage.editThreeRules" label-width="180px"
            class="demo-ruleForm" label-position="left" status-icon>
            <el-form-item label="是否定时 :" prop="tkManualOrAuto">
              <el-radio-group v-model="mPage.editThreeRuleForm.tkManualOrAuto">
                <el-radio label="1" disabled>手动执行</el-radio>
                <el-radio label="0">定时执行</el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-if="mPage.editThreeRuleForm.tkManualOrAuto == 0">
              <el-form-item label="执行方式 :" prop="tkExeType">
                <!-- 执行方式：0间隔执行，1定点执行，2每天，3每周，4每月 -->
                <el-select v-model="mPage.editThreeRuleForm.tkExeType" placeholder="请选择执行方式" style="width: 500px">
                  <el-option label="间隔执行" value="0" />
                  <el-option label="定点执行" value="1" />
                  <el-option label="每天" value="2" />
                  <el-option label="每周" value="3" />
                  <el-option label="每月" value="4" />
                </el-select>
              </el-form-item>
              <el-form-item label="间隔周期 :" v-if="mPage.editThreeRuleForm.tkExeType == 0" prop="num">
                <el-input-number v-model="mPage.editThreeRuleForm.num" :min="1" :max="8888" controls-position="right"
                  @change="mPage.selectChange" style="width: 240px; margin-right: 20px" />
                <el-select v-model="mPage.editThreeRuleForm.period" @change="mPage.selectChange" placeholder="请选择周期"
                  style="width: 240px">
                  <el-option label="天" value="天" />
                  <el-option label="小时" value="小时" />
                  <el-option label="分钟" value="分钟" />
                </el-select>
              </el-form-item>
              <el-form-item label="开始执行时间 :" v-if="mPage.editThreeRuleForm.tkExeType == 1" prop="everydatatime">
                <el-date-picker v-model="mPage.editThreeRuleForm.everydatatime" type="datetime" style="width: 350px"
                  placeholder="请选择日期时间" value-format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"
                  @change="mPage.selectChange" />
              </el-form-item>
              <el-form-item label="重复时间 :" v-if="mPage.editThreeRuleForm.tkExeType == 2" prop="everyday">
                <el-select v-model="mPage.editThreeRuleForm.everyday" style="width: 240px; margin-right: 20px">
                  <el-option label="每天" value="每天" />
                </el-select>
              </el-form-item>
              <el-form-item label="重复时间 :" v-if="mPage.editThreeRuleForm.tkExeType == 2" prop="everydayTime">
                <el-time-picker v-model="mPage.editThreeRuleForm.everydayTime" format="HH:mm" value-format:="HH:mm" arrow-control
                  @change="mPage.selectChange" placeholder="请选择重复时间" />
              </el-form-item>
              <el-form-item label="周几 :" v-if="mPage.editThreeRuleForm.tkExeType == 3" prop="everyWeek">
                <el-select v-model="mPage.editThreeRuleForm.everyWeek" placeholder="请选择周几" @change="mPage.selectChange"
                  style="width: 240px; margin-right: 20px">
                  <el-option label="周一" value="周一" />
                  <el-option label="周二" value="周二" />
                  <el-option label="周三" value="周三" />
                  <el-option label="周四" value="周四" />
                  <el-option label="周五" value="周五" />
                  <el-option label="周六" value="周六" />
                  <el-option label="周日" value="周日" />
                </el-select>
              </el-form-item>
              <el-form-item label="重复时间 :" v-if="mPage.editThreeRuleForm.tkExeType == 3" prop="everyWeekTime">
                <el-time-picker v-model="mPage.editThreeRuleForm.everyWeekTime" prop="everyWeekTime" format="HH:mm"
                  value-format:="HH:mm" @change="mPage.selectChange" placeholder="请选择重复时间" />
              </el-form-item>
              <el-form-item label="重复日期 :" v-if="mPage.editThreeRuleForm.tkExeType == 4" prop="everyMonth">
                <el-select v-model="mPage.editThreeRuleForm.everyMonth" placeholder="请选择日期" @change="mPage.selectChange"
                  style="width: 240px; margin-right: 20px">
                  <el-option v-for="i in 30" :key="i" :label="i" :value="i" />
                </el-select>
              </el-form-item>
              <el-form-item label="重复时间 :" v-if="mPage.editThreeRuleForm.tkExeType == 4" prop="everyMonthTime">
                <el-time-picker v-model="mPage.editThreeRuleForm.everyMonthTime" @change="mPage.selectChange"
                  format="HH:mm" value-format:="HH:mm" placeholder="请选择重复时间" />
              </el-form-item>
            </div>
          </el-form>
          <div class="options">
            <el-button class="queding" @click="mPage.lastTwoEdit">
              上一步
            </el-button>
            <el-button color="rgba(41, 109, 227, 1)" class="queding" type="primary"
              @click="mPage.confirmEdit(editThreeRef)">保存</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 查看对话框 -->
    <el-dialog class="lookDialog" v-model="mPage.lookVisible" :close-on-click-modal="false"
      :close-on-press-escape="false" title="交换任务详情" align-center width="600" :before-close="mPage.cancelLook">
      <ul>
        <li>
          交换任务名称 : <span>{{ mPage.lookDialogData.tkName }}</span>
        </li>
        <li>
          来源数据源 : <span>{{ mPage.lookDialogData.tkDsSourceName }}</span>
        </li>
        <li>
          交换方式 : <span>{{ mPage.lookDialogData.tkExchangeType }}</span>
        </li>
        <li>
          {{ mPage.lookDialogData.tkSqlLabel }} :
          <span>{{ mPage.lookDialogData.tkSql }}</span>
        </li>
        <li>
          来源数据源字符集 :
          <span>{{ mPage.lookDialogData.tkDsSourceCharset }}</span>
        </li>
        <li>
          目标数据源 :
          <span>{{ mPage.lookDialogData.tkDsDestinationName }}</span>
        </li>
        <li>
          目的数据源字符集 :
          <span>{{ mPage.lookDialogData.tkDsDestinationCharset }}</span>
        </li>
        <li>
          执行方式 : <span>{{ mPage.lookDialogData.tkExeType }}</span>
        </li>
        <li v-if="mPage.lookDialogData.tkExeTypeLabelVisible">
          间隔周期 : <span>{{ mPage.lookDialogData.tkRepeatTime }}</span>
        </li>
      </ul>
      <div class="options">
        <el-button @click="mPage.cancelLook">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 显示sql语句 -->
    <el-dialog class="closeAccount" v-model="mPage.showSqlVisible" :close-on-click-modal="false"
      :close-on-press-escape="false" title="SQL语句" align-center width="600" :show-close="false">
      <div style="padding: 20px 5px 0 5px">
        <textarea style="
            width: 100%;
            resize: none;
            outline: none;
            border: 1px solid #ccc;
          " rows="10" readonly>{{ mPage.sql }}</textarea>
      </div>
      <div class="option">
        <el-button @click="mPage.showSqlVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 显示测试sql语句错误信息 -->
    <el-dialog class="closeAccount" v-model="mPage.showSqlErrorVisible" :close-on-click-modal="false"
      :close-on-press-escape="false" title="测试SQL语句错误信息" align-center width="600" :show-close="false">
      <div style="padding: 20px 5px 0 5px">
        <textarea style="
            width: 100%;
            resize: none;
            outline: none;
            color: #f00;
            border: 1px solid #ccc;
          " rows="10" readonly>{{ mPage.sqlError }}</textarea>
      </div>
      <div class="option">
        <el-button @click="mPage.showSqlErrorVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 显示来源表信息 -->
    <el-dialog class="closeAccount" v-model="mPage.showSourceTablesVisible" :close-on-click-modal="false"
      :close-on-press-escape="false" title="数据源-表" align-center width="800" :show-close="false">
      <div style="padding: 20px 5px 0 5px">
        <el-radio-group v-model="mPage.editRuleForm.tkTable">
          <el-radio v-for="item in mPage.sourceTables" :label="item.label">{{
      item.label
    }}</el-radio>
        </el-radio-group>
      </div>
      <div class="option">
        <el-button @click="mPage.showSourceTablesVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 显示来源视图信息 -->
    <el-dialog class="closeAccount" v-model="mPage.showSourceViewsVisible" :close-on-click-modal="false"
      :close-on-press-escape="false" title="数据源-视图" align-center width="800" :show-close="false">
      <div style="padding: 20px 5px 0 5px">
        <el-radio-group v-model="mPage.editRuleForm.tkView">
          <el-radio v-for="item in mPage.sourceViews" :label="item.label">{{
      item.label
    }}</el-radio>
        </el-radio-group>
      </div>
      <div class="option">
        <el-button @click="mPage.showSourceViewsVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 显示目的表信息 -->
    <el-dialog class="closeAccount" v-model="mPage.showDestinationTablesVisible" :close-on-click-modal="false"
      :close-on-press-escape="false" title="数据源-表" align-center width="800" :show-close="false">
      <div style="padding: 20px 5px 0 5px">
        <el-radio-group v-model="mPage.editRuleForm.tkDestTable">
          <el-radio v-for="item in mPage.destinationTables" :label="item.label">{{ item.label }}</el-radio>
        </el-radio-group>
      </div>
      <div class="option">
        <el-button @click="mPage.showDestinationTablesVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  // watch,
  // nextTick,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
// import { Calendar } from "@element-plus/icons-vue";
// import vidiconsApi from "@/api/vidicons.js";
// import { dayjs } from "element-plus";
import lodash from "lodash";
import eds from "@/utils/eds.js";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();

const api = ref("");
// const router = useRouter();
const editOneRef = ref();
const editThreeRef = ref();

// 主页面对象
const mPage = reactive({
  loading: ref(false),
  tableData: reactive([]),
  taskList: reactive([]), // 任务列表数据
  destinationTable: reactive([]), // 目的表名
  taskListValue: ref(""), // 选择列表中选择任务名称
  destinationTableValue: ref(""), // 选择列表中选择目的表名
  tkExeTypeValue: ref(""), // 选择列表中选择执行方式
  tkActivationValue: ref(""), // 选择列表中选择任务状态
  currentPage: ref(1), // 当前页
  pageCount: ref(10), // 每页显示条数
  total: ref(0), // 当前总数
  selectData: reactive([]), // 表格勾选的数据
  showSqlVisible: ref(false), // 查看sql弹窗显示隐藏
  showSqlErrorVisible: ref(false), // 查看sql错误弹窗显示隐藏
  sql: ref(""), // sql语句
  sqlError: ref(""), // sql语句错误信息
  homeShow: ref(true), // 主页面默认显示
  // 查看功能
  lookVisible: ref(false),
  // 编辑功能
  titleDialog: ref(""),
  editShow: ref(false), // 编辑页面
  stepInd: ref(1),
  // 查看对话框数据
  lookDialogData: reactive({
    tkName: "", // 交换任务名称
    tkDsIdSource: "", // 来源数据源
    tkDsSourceName: "", // 来源数据源
    tkExchangeType: "", // 交换方式
    tkSqlLabel: "", // 来源label
    tkSql: "", // 来源sql
    tkDsSourceCharset: "", // 来源数据源字符集
    tkDsIdDestination: "", // 目标数据源
    tkDsDestinationName: "", // 目标数据源名称
    tkDsDestinationTable: "", // 目标数据表名
    tkDsDestinationCharset: "", // 目标数据源字符集
    tkExeType: "", // 执行方式
    tkExeTypeLabelVisible: "", // 执行方式下的周期是否显示
  }),
  editRuleForm: reactive({
    tkName: "", // 交换任务名称
    tkDtId: "1", // 业务部门
    tkSyncPolicy: "", // 同步策略
    tkDsIdSource: "", // 来源数据源
    tkExchangeType: "2", // 交换方式
    tkSql: "", // 来源sql
    tkView: "", // 来源数据视图
    tkTable: "", // 来源数据表
    tkDsIdDestination: "", // 目标数据源
    tkDestTable: "", // 目标数据表
    tkExchangeServer: "0", // 交换服务器
    tkOptCfgAutoManual: "0", // 运行参数配置
    tkOptCfgRsNum: "10", // 运行参数记录数
    tkOptCfgThreadsNum: "1", // 运行参数线程数
    tkRsIncorrectData: "0", // 是否记录错误数据
    tkDsSourceCharset: "UTF8", // 来源数据源字符集
    tkDsDestinationCharset: "UTF8", // 目的数据源字符集
    id: "",
  }),
  dsSourceData: reactive([]), // 来源数据源下拉列表
  dsDestinationData: reactive([]), // 目的数据源下拉列表
  showSourceTablesVisible: ref(false), // 选择数据表的对话框显示隐藏
  showSourceViewsVisible: ref(false), // 选择数据视图的对话框显示隐藏
  showDestinationTablesVisible: ref(false), // 选择数据表的对话框显示隐藏
  sourceTables: reactive([]), // 来源数据源下的所有表
  sourceViews: reactive([]), // 来源数据源下的所有视图
  destinationTables: reactive([]), // 目的数据源下的表
  dsDestinationMetaData: reactive([]), // 目的数据表
  dsSourceMetaData: reactive([]), // 来源数据表
  tkId: ref(""), // 任务id
  // 第二步
  colRelationship: reactive([]), // 保存对应关系
  // 第三步
  editThreeRuleForm: reactive({
    tkManualOrAuto: "1", // 手动或者定时执行
    tkExeType: "0", // 执行方式
    tkRepeatTime: "1天", // 重复时间
    num: 1, // 初始值
    period: "天", // 周期
    everydatatime: "", // 日期时间
    everyday: "每天", // 每天
    everydayTime: "", // 每天时间点
    everyWeek: "周一", // 默认周一
    everyWeekTime: "", // 每周时间点
    everyMonth: "1", // 每月
    everyMonthTime: "", // 每月时间点
  }),
  modifyThreeData: reactive({}), // 编辑时保存第三步数据
  editThreeRules: reactive({
    tkManualOrAuto: [
      { required: true, message: "定时不能为空", trigger: "blur" },
    ],
    tkExeType: [
      { required: true, message: "执行方式不能为空", trigger: "blur" },
    ],
    everydatatime: [
      { required: true, message: "重复的日期时间不能为空", trigger: "blur" },
    ],
    everyday: [{ required: true, message: "每天不能为空", trigger: "blur" }],
    everydayTime: [
      { required: true, message: "重复时间不能为空", trigger: "blur" },
    ],
    everyWeek: [{ required: true, message: "周几不能为空", trigger: "blur" }],
    everyWeekTime: [
      { required: true, message: "重复时间不能为空", trigger: "blur" },
    ],
    everyMonth: [{ required: true, message: "月份不能为空", trigger: "blur" }],
    everyMonthTime: [
      { required: true, message: "重复时间不能为空", trigger: "blur" },
    ],
  }),
  // 表单验证
  editRules: reactive({
    tkName: [
      { required: true, message: "交换任务名称不能为空", trigger: "blur" },
    ],
    // department: [
    //   { required: true, message: "业务部门不能为空", trigger: "blur", },
    // ],
    tkSyncPolicy: [
      { required: true, message: "同步策略不能为空", trigger: "blur" },
    ],
    tkDsIdSource: [
      { required: true, message: "来源数据源不能为空", trigger: "blur" },
    ],
    tkExchangeType: [
      { required: true, message: "交换方式不能为空", trigger: "blur" },
    ],
    tkSql: [
      { required: true, message: "来源数据SQL不能为空", trigger: "blur" },
    ],
    tkView: [
      { required: true, message: "来源数据视图不能为空", trigger: "blur" },
    ],
    tkTable: [
      { required: true, message: "来源数据表不能为空", trigger: "blur" },
    ],
    tkDsIdDestination: [
      { required: true, message: "目标数据源不能为空", trigger: "blur" },
    ],
    tkDestTable: [
      { required: true, message: "目标数据表不能为空", trigger: "blur" },
    ],
    tkExchangeServer: [
      { required: true, message: "交换服务器不能为空", trigger: "blur" },
    ],
    tkOptCfgAutoManual: [
      { required: true, message: "运行参数配置不能为空", trigger: "blur" },
    ],
    tkRsIncorrectData: [
      { required: true, message: "记录错误数据不能为空", trigger: "blur" },
    ],
    tkDsSourceCharset: [
      { required: true, message: "来源数据源字符集不能为空", trigger: "blur" },
    ],
    tkDsDestinationCharset: [
      { required: true, message: "目的数据源字符集不能为空", trigger: "blur" },
    ],
  }),
  // 添加按钮
  addClick: async () => {
    mPage.titleDialog = "新增任务";
    mPage.homeShow = false;
    mPage.editShow = true;
    mPage.stepInd = 1;
    mPage.resetFields();
    // 初始化一下数据源列表参数
    mPage.getDsList();
  },
  // 数据源列表
  getDsList: async () => {
    let data = {
      currentPage: 1,
      pageCount: 300,
      managerId: sessionStorage.getItem("token"),
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartDataClass/queryPageSmartDataSource",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "数据源");
    if (res.data.code == 200) {
      mPage.dsSourceData = reactive([]);
      mPage.dsDestinationData = reactive([]);
      JSON.parse(eds.decryptDes(res.data.data)).list.forEach((element) => {
        let item = {
          value: element.dsId,
          label: element.dsName,
        };
        mPage.dsSourceData.push(item);
        mPage.dsDestinationData.push(item);
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 获取来源数据源数据表
  getSourceTables: async () => {
    if (mPage.editRuleForm.tkDsIdSource == "") {
      ElMessage({
        type: "error",
        showClose: true,
        message: "请选择来源数据源",
        center: true,
      });
      return;
    }

    mPage.showSourceTablesVisible = true; // 显示选择数据表的对话框
    mPage.sourceTables = reactive([]); // 清空存表的数组
    // mPage.editRuleForm.tkTable = '';

    let data = {
      dsIdSource: mPage.editRuleForm.tkDsIdSource,
      managerId: sessionStorage.getItem("token"),
    };
    let res = await axios({
      method: "post",
      url: api.value + "/wanzai/api/smartDataTask/getTables",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data,
    });
    if (res.data.code == 200) {
      JSON.parse(eds.decryptDes(res.data.data)).forEach((element) => {
        let item = {
          label: element,
        };
        mPage.sourceTables.push(item);
      });
      // 如果是编辑任务
      if (mPage.titleDialog == "编辑任务") {
        mPage.sourceTables.forEach((element) => {
          if (mPage.editRuleForm.tkTable == element.label.split(" ")[0]) {
            mPage.editRuleForm.tkTable = element.label;
          }
        });
      }
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 获取目的数据源数据表
  getDestinationTables: async () => {
    if (mPage.editRuleForm.tkDsIdDestination == "") {
      ElMessage({
        type: "error",
        showClose: true,
        message: "请选择目的数据源",
        center: true,
      });
      return;
    }

    mPage.showDestinationTablesVisible = true; // 显示选择数据表的对话框
    mPage.destinationTables = reactive([]); // 清空存表的数组
    // mPage.editRuleForm.tkDestTable = '';

    let data = {
      dsIdSource: mPage.editRuleForm.tkDsIdDestination,
      managerId: sessionStorage.getItem("token"),
    };
    let res = await axios({
      method: "post",
      url: api.value + "/wanzai/api/smartDataTask/getTables",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data,
    });
    if (res.data.code == 200) {
      JSON.parse(eds.decryptDes(res.data.data)).forEach((element) => {
        let item = {
          label: element,
        };
        mPage.destinationTables.push(item);
      });
      // 如果是编辑任务
      // if (mPage.titleDialog == "编辑任务") {
      //   mPage.destinationTables.forEach(element => {
      //     if (mPage.editRuleForm.tkDestTable == element.label) {
      //       mPage.editRuleForm.tkDestTable = element.label;
      //     }
      //   });
      // }
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 获取视图
  getViews: async () => {
    if (mPage.editRuleForm.tkDsIdSource == "") {
      ElMessage({
        type: "error",
        showClose: true,
        message: "请选择来源数据源",
        center: true,
      });
      return;
    }

    mPage.showSourceViewsVisible = true; // 显示选择数据表的对话框
    mPage.sourceViews = reactive([]); // 清空存视图的数组
    mPage.editRuleForm.tkView = "";

    let data = {
      dsIdSource: mPage.editRuleForm.tkDsIdSource,
      managerId: sessionStorage.getItem("token"),
    };
    let res = await axios({
      method: "post",
      url: api.value + "/wanzai/api/smartDataTask/getViews",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data,
    });
    if (res.data.code == 200) {
      JSON.parse(eds.decryptDes(res.data.data)).forEach((element) => {
        let item = {
          label: element,
        };
        mPage.sourceViews.push(item);
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 测试SQL
  testSql: async () => {
    let data = {
      dsIdSource: mPage.editRuleForm.tkDsIdSource,
      exchangeType: mPage.editRuleForm.tkExchangeType,
      sql: mPage.editRuleForm.tkSql,
      managerId: sessionStorage.getItem("token"),
    };
    let res = await axios({
      method: "post",
      url: api.value + "/wanzai/api/smartDataTask/testSql",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data,
    });
    // console.log(res, "测试SQL");
    if (res.data.code == 200) {
      ElMessage({
        type: "success",
        showClose: true,
        message: JSON.parse(eds.decryptDes(res.data.data)),
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
      mPage.showSqlErrorVisible = true;
      mPage.sqlError = res.data.message;
    }
  },
  // 编辑按钮
  editClick: async (row) => {
    mPage.titleDialog = "编辑任务";
    mPage.homeShow = false;
    mPage.editShow = true;
    mPage.stepInd = 1;
    // 初始化一下数据源列表参数
    mPage.getDsList();
    // 设置绑定变量
    mPage.editRuleForm.tkName = row.tkName;
    mPage.editRuleForm.tkDtId = row.tkDtId;
    mPage.editRuleForm.tkSyncPolicy = row.tkSyncPolicy.toString();
    mPage.editRuleForm.tkDsIdSource = row.tkDsIdSource;
    mPage.editRuleForm.tkExchangeType = row.tkExchangeType.toString();
    if (row.tkExchangeType == 0) {
      mPage.editRuleForm.tkSql = row.tkSql;
    } else if (row.tkExchangeType == 1) {
      mPage.editRuleForm.tkView = row.tkSql.split(" ")[3];
    } else if (row.tkExchangeType == 2) {
      mPage.editRuleForm.tkTable = row.tkSql.split(" ")[3];
    }
    mPage.editRuleForm.tkDsIdDestination = row.tkDsIdDestination;
    mPage.editRuleForm.tkDestTable = row.tkDestTable;
    mPage.editRuleForm.tkOptCfgAutoManual = row.tkOptCfgAutoManual.toString();
    // tkExchangeServer: "0", // 交换服务器
    if (row.tkOptCfgAutoManual == 1) {
      mPage.editRuleForm.tkOptCfgRsNum = row.tkOptCfgRsNum;
      mPage.editRuleForm.tkOptCfgThreadsNum = row.tkOptCfgThreadsNum;
    }
    mPage.editRuleForm.tkRsIncorrectData = row.tkRsIncorrectData.toString();
    mPage.editRuleForm.tkDsSourceCharset = row.tkDsSourceCharset;
    mPage.editRuleForm.tkDsDestinationCharset = row.tkDsDestinationCharset;

    mPage.tkId = row.tkId; // 任务id
    // 第二步的数据
    mPage.colRelationship = JSON.parse(row.tkColRelationship); // 保存对应关系
    // 第三步的数据
    if (row.tkManualOrAuto != null) {
      mPage.modifyThreeData = row;
    } else {
      mPage.modifyThreeData = mPage.editThreeRuleForm;
    }
  },
  // 取消编辑
  cancelEdit: () => {
    mPage.homeShow = true;
    mPage.editShow = false;
    // mPage.editRef.resetFields();
  },
  // 第一步
  nextOneEdit: (formEl) => {
    if (!formEl) return;
    formEl.validate(async (valid, fields) => {
      if (valid) {
        let data = {
          tkName: mPage.editRuleForm.tkName, // 任务名称（唯一）
          tkDtId: mPage.editRuleForm.tkDtId, // 部门id
          tkSyncPolicy: mPage.editRuleForm.tkSyncPolicy, // 同步策略：0插入更新，1更新标记，2清空插入
          tkDsIdSource: mPage.editRuleForm.tkDsIdSource, // 来源数据源id
          tkExchangeType: mPage.editRuleForm.tkExchangeType, // 交换方式：0自定义SQL语句，1数据视图，2数据表，如果是1或2，tkSql传视图或表格名称即可
          tkDsIdDestination: mPage.editRuleForm.tkDsIdDestination, // 目标数据源id
          tkDestTable: mPage.editRuleForm.tkDestTable, // 目标数据表
          tkExchangeServer: mPage.editRuleForm.tkExchangeServer, // 交换服务器：0自动，1手动，如果是1，则启用下面1行参数
          //"tkExchangeServerId": 1, // 交换服务器id
          tkOptCfgAutoManual: mPage.editRuleForm.tkOptCfgAutoManual, // 运行参数配置：0自动，1手动，如果是1，则启用下面2行参数
          //"tkOptCfgRsNum": 100, // 运行参数配置：记录数
          //"tkOptCfgThreadsNum": 10, // 运行参数配置：线程数
          tkRsIncorrectData: mPage.editRuleForm.tkRsIncorrectData, // 是否记录错误数据：0是，1否
          tkDsSourceCharset: mPage.editRuleForm.tkDsSourceCharset, // 来源数据源字符集：UTF8 或 GBK，就两个值，需要接口获取，前端固定就好
          tkDsDestinationCharset: mPage.editRuleForm.tkDsDestinationCharset, // 目的数据源字符集：UTF8 或 GBK，就两个值，需要接口获取，前端固定就好
          managerId: sessionStorage.getItem("token"),
        };
        // 根据交换方式，获取不同的值
        if (mPage.editRuleForm.tkExchangeType == 0) {
          data.tkSql = mPage.editRuleForm.tkSql;
        } else if (mPage.editRuleForm.tkExchangeType == 1) {
          data.tkSql = mPage.editRuleForm.tkView;
        } else if (mPage.editRuleForm.tkExchangeType == 2) {
          data.tkSql = mPage.editRuleForm.tkTable;
        }
        // 根据运行参数配置，获取记录数和线程数
        if (mPage.editRuleForm.tkOptCfgAutoManual == 1) {
          data.tkOptCfgRsNum = mPage.editRuleForm.tkOptCfgRsNum;
          data.tkOptCfgThreadsNum = mPage.editRuleForm.tkOptCfgThreadsNum;
        }
        let url = "/wanzai/api/smartDataTask/";
        if (mPage.titleDialog == "新增任务") {
          url += "insertSmartDataTask1";
        } else {
          data.tkId = mPage.tkId;
          url += "updateSmartDataTaskById1";
        }
        let res = await axios({
          method: "post",
          url: api.value + url,
          headers: {
            "Content-Type": "application/json",
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: JSON.stringify(data),
        });
        console.log(res, "11111");

        if (res.data.code == 200) {
          ElMessage({
            type: "success",
            showClose: true,
            message: JSON.parse(eds.decryptDes(res.data.data)).msg,
            center: true,
          });
          mPage.dsDestinationMetaData = reactive([]);
          // 保存成功后返回任务id
          if (mPage.titleDialog == "新增任务") {
            mPage.tkId = JSON.parse(eds.decryptDes(res.data.data)).tkId;
          }
          JSON.parse(
            eds.decryptDes(res.data.data)
          ).dsDestinationMetaData.forEach((element) => {
            element.disabled = false;
            mPage.dsDestinationMetaData.push(element);
          });
          mPage.dsSourceMetaData = JSON.parse(
            eds.decryptDes(res.data.data)
          ).dsSourceMetaData;
          mPage.dsSourceMetaDataOptions = reactive([]);
          mPage.dsSourceMetaData.forEach((element) => {
            let item = {
              label: element.COLUMN_NAME + " [" + element.COLUMN_COMMENT + "]",
              value: element.COLUMN_NAME,
            };
            mPage.dsSourceMetaDataOptions.push(item);
          });
          // 保存成功后跳到第2步
          mPage.stepInd = 2;
          if (mPage.titleDialog == "编辑任务") {
            mPage.dsDestinationMetaData.forEach((element) => {
              // console.log(element)
              if (mPage.colRelationship != null) {
                mPage.colRelationship.forEach((el) => {
                  if (el.colDestination == element.COLUMN_NAME) {
                    // console.log(el)
                    element.COLUMN_NAME_SOURCE = el.colSource;
                    element.typeCheck = el.colSourceType;
                    element.lengthCheck = el.colSourceSize;
                    element.isUpdatePrimaryKey =
                      el.isUpdatePrimaryKey == 1 ? true : false;
                    element.isExchange = el.isExchange == 1 ? true : false;
                    element.isUpdate = el.isUpdate == 1 ? true : false;
                    element.isMarkIncrement =
                      el.isMarkIncrement == 1 ? true : false;
                  }
                });
              }
            });
          }
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
          if (mPage.titleDialog == "编辑任务") {
            // 即使未修改数据也可以跳到第2步
            mPage.dsDestinationMetaData = reactive([]);
            JSON.parse(
              eds.decryptDes(res.data.data)
            ).dsDestinationMetaData.forEach((element) => {
              element.disabled = false;
              mPage.dsDestinationMetaData.push(element);
            });
            mPage.dsSourceMetaData = JSON.parse(
              eds.decryptDes(res.data.data)
            ).dsSourceMetaData;
            mPage.dsSourceMetaDataOptions = reactive([]);
            mPage.dsSourceMetaData.forEach((element) => {
              let item = {
                label:
                  element.COLUMN_NAME + " [" + element.COLUMN_COMMENT + "]",
                value: element.COLUMN_NAME,
              };
              mPage.dsSourceMetaDataOptions.push(item);
            });
            // 保存成功后跳到第2步
            mPage.stepInd = 2;
            mPage.dsDestinationMetaData.forEach((element) => {
              // console.log(element)
              mPage.colRelationship.forEach((el) => {
                if (el.colDestination == element.COLUMN_NAME) {
                  console.log(el);
                  element.COLUMN_NAME_SOURCE = el.colSource;
                  element.typeCheck = el.colSourceType;
                  element.lengthCheck = el.colSourceSize;
                  element.isUpdatePrimaryKey =
                    el.isUpdatePrimaryKey == 1 ? true : false;
                  element.isExchange = el.isExchange == 1 ? true : false;
                  element.isUpdate = el.isUpdate == 1 ? true : false;
                  element.isMarkIncrement =
                    el.isMarkIncrement == 1 ? true : false;
                }
              });
            });
          }
        }
      }
    });
  },
  // 字段一致性检查
  fieldCorrespondence: (row) => {
    if (row.COLUMN_NAME_SOURCE == "") {
      row.disabled = true;
      row.isExchange = false;
      row.isUpdate = false;
      row.isUpdatePrimaryKey = false;
      row.typeCheck = "";
      row.lengthCheck = "";
      row.convertCheck = "";
    } else {
      row.disabled = false;
      row.isExchange = true;
      row.isUpdate = true;
      row.typeCheck = "";
      row.lengthCheck = "";
      // 存储列的对应关系的数组
      mPage.colRelationship = reactive([]);
      // 查找对应的列名称其他属性
      mPage.dsDestinationMetaData.forEach((element) => {
        if (element.COLUMN_NAME_SOURCE !== undefined) {
          console.log(element.COLUMN_NAME_SOURCE);
          // 组合参数
          let it = {
            colDestination: element.COLUMN_NAME, // 目标列
            colDestinationType: element.COLUMN_TYPE, // 目标列数据类型
            colDestinationSize: element.COLUMN_SIZE, // 目标列数据长度
            isUpdatePrimaryKey: element.isUpdatePrimaryKey == true ? 1 : 0, // 是否是更新主键
            isExchange: element.isExchange == true ? 1 : 0, // 是否交换
            isUpdate: element.isUpdate == true ? 1 : 0, // 是否更新
            isMarkIncrement: element.isMarkIncrement == true ? 1 : 0, // 是否增量标记
          };
          mPage.dsSourceMetaData.forEach((ele) => {
            if (ele.COLUMN_NAME == element.COLUMN_NAME_SOURCE) {
              it.colSource = ele.COLUMN_NAME; // 来源列
              it.colSourceType = ele.COLUMN_TYPE; // 来源列数据类型
              it.colSourceSize = ele.COLUMN_SIZE; // 来源列数据长度
              if (row.COLUMN_NAME_SOURCE == ele.COLUMN_NAME) {
                row.typeCheck = ele.COLUMN_TYPE;
                row.lengthCheck = ele.COLUMN_SIZE;
                // 检查类型是否一致
                if (row.COLUMN_TYPE != ele.COLUMN_TYPE) {
                  row.convertCheck = "字段类型不一致";
                } else {
                  row.convertCheck = "";
                }
              }
            }
          });
          // 列的对应关系存入数组
          mPage.colRelationship.push(it);
        }
      });
    }
    // console.log(mPage.colRelationship);
  },
  // 第二步
  lastOneEdit: () => {
    mPage.stepInd = 1;
  },
  // 检测是否勾选更新等等
  checkChange: (row) => {
    mPage.colRelationship.forEach((element) => {
      if (element.colSource == row.COLUMN_NAME) {
        element.isUpdatePrimaryKey = row.isUpdatePrimaryKey == true ? 1 : 0;
        element.isExchange = row.isExchange == true ? 1 : 0;
        element.isUpdate = row.isUpdate == true ? 1 : 0;
        element.isMarkIncrement = row.isMarkIncrement == true ? 1 : 0;
      }
    });
  },
  nextTwoEdit: async () => {
    if (mPage.colRelationship.length > 0) {
      // 检测是否勾选主键
      let isSetParymaryKey = 0;
      mPage.colRelationship.forEach((element) => {
        if (element.isUpdatePrimaryKey == true) {
          isSetParymaryKey += 1;
        }
      });

      if (isSetParymaryKey == 0) {
        ElMessage({
          type: "error",
          showClose: true,
          message: "请勾选主键",
          center: true,
        });
        return;
      }

      let data = {
        tkId: mPage.tkId,
        colRelationship: mPage.colRelationship,
        managerId: sessionStorage.getItem("token"),
      };
      let url = "/wanzai/api/smartDataTask/";
      if (mPage.titleDialog == "新增任务") {
        url += "insertSmartDataTask2";
      } else {
        data.tkId = mPage.tkId;
        url += "updateSmartDataTaskById2";
      }
      let res = await axios({
        method: "post",
        url: api.value + url,
        headers: {
          "Content-Type": "application/json",
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("userhead"),
        },
        data: JSON.stringify(data),
      });
      console.log(res, "222222222222");

      if (res.data.code == 200) {
        ElMessage({
          type: "success",
          showClose: true,
          message: JSON.parse(eds.decryptDes(res.data.data)),
          center: true,
        });
        // 保存成功后跳到第3步
        mPage.stepInd = 3;
        if (mPage.titleDialog == "编辑任务") {
          mPage.editThreeRuleForm.tkManualOrAuto = mPage.modifyThreeData.tkManualOrAuto.toString(); // 手动或者定时执行
          mPage.editThreeRuleForm.tkExeType = mPage.modifyThreeData.tkExeType.toString(); // 执行方式
          var date = new Date();  // 获取当前时间
          if (mPage.editThreeRuleForm.tkExeType == 0) {
            let regex = /[0-9]+/g;
            const numbers = mPage.modifyThreeData.tkRepeatTime.match(regex);
            mPage.editThreeRuleForm.num = numbers[0];
            regex = /[\u4e00-\u9fa5]+/g;
            const chineseChars = mPage.modifyThreeData.tkRepeatTime.match(regex);
            mPage.editThreeRuleForm.period = chineseChars[0];
            mPage.editThreeRuleForm.tkRepeatTime = mPage.editThreeRuleForm.num + mPage.editThreeRuleForm.period;
          } else if (mPage.editThreeRuleForm.tkExeType == 1) {
            mPage.editThreeRuleForm.everydatatime = mPage.modifyThreeData.tkRepeatTime;
            mPage.editThreeRuleForm.tkRepeatTime = mPage.modifyThreeData.tkRepeatTime;
          } else if (mPage.editThreeRuleForm.tkExeType == 2) {
            var d = mPage.modifyThreeData.tkRepeatTime.split(":");
            date.setHours(d[0]);  // 设置小时
            date.setMinutes(d[1]);  // 设置分钟
            mPage.editThreeRuleForm.everydayTime = date;
            mPage.editThreeRuleForm.tkRepeatTime = mPage.modifyThreeData.tkRepeatTime;
          } else if (mPage.editThreeRuleForm.tkExeType == 3) {
            mPage.editThreeRuleForm.everyWeek = mPage.modifyThreeData.tkRepeatTime.split(" ")[0];
            var d = mPage.modifyThreeData.tkRepeatTime.split(" ")[1].split(":");
            date.setHours(d[0]);  // 设置小时
            date.setMinutes(d[1]);  // 设置分钟
            mPage.editThreeRuleForm.everyWeekTime = date;
            mPage.editThreeRuleForm.tkRepeatTime = mPage.editThreeRuleForm.everyWeek + " " + mPage.convertHHmm(mPage.editThreeRuleForm.everyWeekTime);
          } else if (mPage.editThreeRuleForm.tkExeType == 4) {
            mPage.editThreeRuleForm.everyMonth = mPage.modifyThreeData.tkRepeatTime.split(" ")[0];
            var d = mPage.modifyThreeData.tkRepeatTime.split(" ")[1].split(":");
            date.setHours(d[0]);  // 设置小时
            date.setMinutes(d[1]);  // 设置分钟
            mPage.editThreeRuleForm.everyMonthTime = date;
            mPage.editThreeRuleForm.tkRepeatTime = mPage.editThreeRuleForm.everyMonth + " " + mPage.convertHHmm(mPage.editThreeRuleForm.everyMonthTime);
          }
        }
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: "请选择字段对应关系",
        center: true,
      });
    }
  },
  // 第三步
  lastTwoEdit: () => {
    mPage.stepInd = 2;
  },
  selectChange: () => {
    if (mPage.editThreeRuleForm.tkExeType == 0) {
      mPage.editThreeRuleForm.tkRepeatTime = mPage.editThreeRuleForm.num + mPage.editThreeRuleForm.period;
    } else if (mPage.editThreeRuleForm.tkExeType == 1) {
      mPage.editThreeRuleForm.tkRepeatTime = mPage.editThreeRuleForm.everydatatime;
    } else if (mPage.editThreeRuleForm.tkExeType == 2) {
      mPage.editThreeRuleForm.tkRepeatTime = mPage.convertHHmm(mPage.editThreeRuleForm.everydayTime);
    } else if (mPage.editThreeRuleForm.tkExeType == 3) {
      mPage.editThreeRuleForm.tkRepeatTime = mPage.editThreeRuleForm.everyWeek + " " + mPage.convertHHmm(mPage.editThreeRuleForm.everyWeekTime);
    } else if (mPage.editThreeRuleForm.tkExeType == 4) {
      mPage.editThreeRuleForm.tkRepeatTime = mPage.editThreeRuleForm.everyMonth + " " + mPage.convertHHmm(mPage.editThreeRuleForm.everyMonthTime);
    }
  },
  convertHHmm: (timePickerValue) => {
    // 将时间字符串转换为时间对象
    const date = new Date(timePickerValue);
    // 获取小时和分钟
    let hours = date.getHours();
    let minutes = date.getMinutes();
    hours = hours < 9 ? "0" + hours : hours;
    minutes = minutes < 9 ? "0" + minutes : minutes;
    // 将小时和分钟转换为字符串
    const formattedTime = `${hours}:${minutes}`;
    return formattedTime;
  },
  // 确定保存
  confirmEdit: (formEl) => {
    if (!formEl) return;
    formEl.validate(async (valid, fields) => {
      if (valid) {
        let data = {
          tkId: mPage.tkId,
          managerId: sessionStorage.getItem("token"),
        };
        if (mPage.editThreeRuleForm.tkManualOrAuto == 0) {
          data.tkManualOrAuto = mPage.editThreeRuleForm.tkManualOrAuto;
          data.tkExeType = mPage.editThreeRuleForm.tkExeType;
          data.tkRepeatTime = mPage.editThreeRuleForm.tkRepeatTime;
        } else {
          data.tkManualOrAuto = mPage.editThreeRuleForm.tkManualOrAuto;
          data.tkExeType = 0;
          data.tkRepeatTime = "";
        }
        let url = "/wanzai/api/smartDataTask/";
        if (mPage.titleDialog == "新增任务") {
          url += "insertSmartDataTask3";
        } else {
          data.tkId = mPage.tkId;
          url += "updateSmartDataTaskById3";
        }
        let res = await axios({
          method: "post",
          url: api.value + url,
          headers: {
            "Content-Type": "application/json",
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: JSON.stringify(data),
        });
        console.log(res, 333333333);

        if (res.data.code == 200) {
          ElMessage({
            type: "success",
            showClose: true,
            message: JSON.parse(eds.decryptDes(res.data.data)),
            center: true,
          });
          // 保存成功后关闭
          mPage.editShow = false;
          mPage.homeShow = true;
          mPage.getList();
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: "请选择字段对应关系",
          center: true,
        });
      }
    });
  },
  // 重置变量
  resetFields: () => {
    mPage.editRuleForm = reactive({
      tkName: "", // 交换任务名称
      tkDtId: "1", // 业务部门
      tkSyncPolicy: "", // 同步策略
      tkDsIdSource: "", // 来源数据源
      tkExchangeType: "2", // 交换方式
      tkSql: "", // 来源sql
      tkView: "", // 来源数据视图
      tkTable: "", // 来源数据表
      tkDsIdDestination: "", // 目标数据源
      tkDestTable: "", // 目标数据表
      tkExchangeServer: "0", // 交换服务器
      tkOptCfgAutoManual: "0", // 运行参数配置
      tkOptCfgRsNum: "10", // 运行参数记录数
      tkOptCfgThreadsNum: "1", // 运行参数线程数
      tkRsIncorrectData: "0", // 是否记录错误数据
      tkDsSourceCharset: "UTF8", // 来源数据源字符集
      tkDsDestinationCharset: "UTF8", // 目的数据源字符集
      id: "",
    });

    mPage.tkId = ref(""); // 任务id
    // 第二步
    mPage.colRelationship = reactive([]); // 保存对应关系
    // 第三步
    mPage.editThreeRuleForm = reactive({
      tkManualOrAuto: "1", // 手动或者定时执行
      tkExeType: "0", // 执行方式
      tkRepeatTime: "1天", // 重复时间
      num: 1, // 初始值
      period: "天", // 周期
      everydatatime: "", // 日期时间
      everyday: "每天", // 每天
      everydayTime: "", // 每天时间点
      everyWeek: "周一", // 默认周一
      everyWeekTime: "", // 每周时间点
      everyMonth: "1", // 每月
      everyMonthTime: "", // 每月时间点
    });
  },
  // 是否包含“[”，是则取到“[”前面的字符串
  getSubstring(str) {
    const index = str.indexOf("[");
    if (index !== -1) {
      return str.split("[")[0];
    } else {
      return str;
    }
  },
  // 显示SQL语句
  showSql: (sql) => {
    mPage.showSqlVisible = true;
    mPage.sql = sql;
  },
  // 任务列表数据
  getList: async () => {
    mPage.loading = true;
    let data = {
      currentPage: mPage.currentPage,
      pageCount: mPage.pageCount,
      tkName: mPage.taskListValue,
      tkDestTable: mPage.destinationTableValue,
      tkExeType: mPage.tkExeTypeValue,
      tkActivation: mPage.tkActivationValue,
      managerId: sessionStorage.getItem("token"),
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartDataTask/queryPageSmartDataTask",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "任务列表数据");
    if (res.data.code == 200) {
      mPage.loading = false;
      mPage.total = JSON.parse(eds.decryptDes(res.data.data)).totalCount;
      mPage.tableData = ref([]);
      let i = 1;
      JSON.parse(eds.decryptDes(res.data.data)).list.forEach((element) => {
        element.xuhao = (mPage.currentPage - 1) * mPage.pageCount + i;
        mPage.tableData.push(element);
        i++;
      });
    } else {
      mPage.loading = false;
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 获取任务名称列表
  getTaskList: async () => {
    let data = {
      managerId: sessionStorage.getItem("token"),
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartDataTask/queryAllTask",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    // console.log(res, "任务名称列表");
    if (res.data.code == 200) {
      mPage.taskList = ref([]);
      mPage.destinationTable = ref([]);
      JSON.parse(eds.decryptDes(res.data.data)).forEach((element) => {
        let itemTask = {
          value: element.tkId,
          label: element.tkName,
        };
        let itemTable = {
          value: element.tkId,
          label: element.tkDestTable.substring(
            0,
            element.tkDestTable.indexOf("[")
          ),
        };
        mPage.taskList.push(itemTask);
        mPage.destinationTable.push(itemTable);
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 分页
  handleCurrentChange: (page) => {
    // console.log(page);
    mPage.currentPage = page;
    mPage.getList();
  },
  // 搜索功能
  searchBtn: lodash.debounce(async () => {
    mPage.getList();
  }, 300),
  // 查看功能
  lookClick: (row) => {
    mPage.lookVisible = true;
    mPage.lookDialogData.tkName = row.tkName;
    // 0自定义SQL语句，1数据视图，2数据表
    if (row.tkExchangeType == 0) {
      mPage.lookDialogData.tkSqlLabel = "自定义SQL语句";
      mPage.lookDialogData.tkExchangeType = "自定义SQL语句";
    } else if (row.tkExchangeType == 1) {
      mPage.lookDialogData.tkSqlLabel = "数据视图";
      mPage.lookDialogData.tkExchangeType = "数据视图";
      mPage.lookDialogData.tkSql = row.tkSql.split(" ")[3];
    } else if (row.tkExchangeType == 2) {
      mPage.lookDialogData.tkSqlLabel = "数据表";
      mPage.lookDialogData.tkExchangeType = "数据表";
      mPage.lookDialogData.tkSql = row.tkSql.split(" ")[3];
    }
    mPage.querySmartDataSourceById(row.tkDsIdSource, "from");
    mPage.querySmartDataSourceById(row.tkDsIdDestination, "to");
    mPage.lookDialogData.tkDsSourceCharset = row.tkDsSourceCharset;
    mPage.lookDialogData.tkDsDestinationCharset = row.tkDsDestinationCharset;
    // 0定时执行，1手动执行
    if (row.tkManualOrAuto == 0) {
      // 0间隔执行，1定点执行，2每天，3每周，4每月
      if (row.tkExeType == 0) {
        mPage.lookDialogData.tkExeType = "间隔执行";
        mPage.lookDialogData.tkExeTypeLabelVisible = true;
      } else if (row.tkExeType == 1) {
        mPage.lookDialogData.tkExeType = "定点执行";
        mPage.lookDialogData.tkExeTypeLabelVisible = true;
      } else if (row.tkExeType == 2) {
        mPage.lookDialogData.tkExeType = "每天";
        mPage.lookDialogData.tkExeTypeLabelVisible = true;
      } else if (row.tkExeType == 3) {
        mPage.lookDialogData.tkExeType = "每周";
        mPage.lookDialogData.tkExeTypeLabelVisible = true;
      } else if (row.tkExeType == 4) {
        mPage.lookDialogData.tkExeType = "每月";
        mPage.lookDialogData.tkExeTypeLabelVisible = true;
      }
    } else if (row.tkManualOrAuto == 1) {
      mPage.lookDialogData.tkExeType = "手动执行";
      mPage.lookDialogData.tkExeTypeLabelVisible = false;
    } else {
      mPage.lookDialogData.tkExeType = "无定时";
      mPage.lookDialogData.tkExeTypeLabelVisible = false;
    }
    mPage.lookDialogData.tkRepeatTime = row.tkRepeatTime;
  },
  querySmartDataSourceById: async (id, diraction) => {
    let data = {
      id: id,
      managerId: sessionStorage.getItem("token"),
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartDataClass/querySmartDataSourceById",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    if (res.data.code == 200) {
      if (diraction == "from")
        mPage.lookDialogData.tkDsSourceName = JSON.parse(
          eds.decryptDes(res.data.data)
        ).dsName;
      else
        mPage.lookDialogData.tkDsDestinationName = JSON.parse(
          eds.decryptDes(res.data.data)
        ).dsName;
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 取消查看
  cancelLook: () => {
    mPage.lookVisible = false;
  },
  // 删除按钮
  delClick: async (row) => {
    let data = {
      id: row.tkId,
      delMethod: 9, // 删除方式：0逻辑删除，1恢复逻辑删除，9物理删除
      managerId: sessionStorage.getItem("token"),
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartDataTask/deleteSmartDataTaskById",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    if (res.data.code == 200) {
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
      mPage.getList();
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  taskAction: async (row, action) => {
    let data = {
      tkName: row.tkName,
      managerId: sessionStorage.getItem("token"),
    };
    let actionUrl = "";
    if (action == "start") {
      actionUrl = "createJob";
    } else if (action == "stop") {
      actionUrl = "deleteJob";
    } else if (action == "runonce") {
      actionUrl = "runOnceJob";
    }
    let res = await axios({
      method: "post",
      url: api.value + "/wanzai/api/smartDataTask/" + actionUrl,
      headers: {
        "Content-Type": "application/json",
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data: JSON.stringify(data),
    });
    console.log(res, "任务启动");
    if (res.data.code == 200) {
      ElMessage({
        type: "success",
        showClose: true,
        message: JSON.parse(eds.decryptDes(res.data.data)),
        center: true,
      });
      mPage.getList();
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
});

// 多选框功能
const handleSelectionChange = (val) => {
  // console.log(val);
  selectData.list = val;
};

//导出功能
// const importExcel = async () => {
//   if (searchInput.createTime == null) {
//     searchInput.createTime = "";
//   }
//   let data = new FormData();
//   data.set("car_number", searchInput.carnumber);
//   data.set("create_time", searchInput.createTime);
//   let res = await axios({
//     method: "post",
//     url: api.value + "/carBook/cinfotoExcel.action",
//     headers: {
//   token: sessionStorage.getItem("token"),
//   user_head: sessionStorage.getItem("userhead"),
// },
//     data: data,
//   });
//   // console.log(res, "导出账号");
//   if (res.data.code == 200) {
//     // const elt = document.createElement("a");
//     // elt.setAttribute(
//     //   "href",
//     //   "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl
//     // );
//     // elt.setAttribute("download", "file.png");
//     // elt.style.display = "none";
//     // document.body.appendChild(elt);
//     // elt.click();
//     var downloadPath = "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl;
//     console.log("获得地址数据:", downloadPath);
//     var downloadLink = document.createElement("a");
//     downloadLink.style.display = "none"; // 使其隐藏
//     downloadLink.href = downloadPath;
//     downloadLink.download = "";
//     downloadLink.click();
//     document.body.appendChild(downloadLink);
//     document.body.removeChild(downloadLink);
//     ElMessage({
//       type: "success",
//       showClose: true,
//       message: res.data.message,
//       center: true,
//     });
//   } else {
//     ElMessage({
//       type: "error",
//       showClose: true,
//       message: res.data.message,
//       center: true,
//     });
//   }
// };

// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};

// 挂载前
onBeforeMount(async () => {
  api.value = store.state.user.api;
  mPage.getList();
  mPage.getTaskList();
});

onUnmounted(() => {
  // document.removeEventListener("keyup", Enters);
});
</script>

<style scoped lang="scss">
.content-box {
  min-width: 1000px;
  width: calc(100vw - 260px);
  height: calc(100vh - 105px);
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

  // 主页面
  .home {
    height: 100%;

    .left {
      // width: calc(100wh - 40px);
      display: flex;
      align-items: center;
      height: 60px;
      margin: 0 30px;
      border-bottom: 1px solid #ccc;
      color: rgb(0, 0, 0);
      font-size: 18px;
      font-weight: 600;

      span {
        height: 60px;
        line-height: 60px;
        margin-right: 20px;
      }

      .is_active {
        color: rgba(111, 182, 184, 1);
      }
    }

    .scroll {
      height: calc(100% - 61px);
      overflow: auto;
    }

    .middle {
      width: 96%;
      margin: 0 auto;

      color: #000;

      // border-bottom: 1px solid rgb(231, 231, 231);
      .filter {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 10px 0 0 0;

        .search {
          color: #fff;
        }

        .condition {
          display: flex;
          align-items: center;
          margin: 10px 30px 10px 0;

          .sel {
            margin-right: 10px;
            width: 130px;
          }

          :deep(.el-input .el-input__inner) {
            font-size: 14px;
          }
        }
      }

      .gongneng {
        margin: 10px 0 20px 0;

        span {
          color: #fff;
        }

        .el-button {
          margin-right: 10px;
        }
      }

      :deep(.cont) {
        width: 60%;
        margin: 20px auto;
      }

      :deep(.download) {
        display: flex;
        align-items: center;
        margin: 10px;
      }

      :deep(.download span) {
        font-size: 16px;
        margin-left: 20px;
      }

      :deep(.cont .el-button) {
        margin-left: 60px;
        margin-bottom: 30px;
      }

      :deep(.cont .accomplish) {
        width: 100%;
        display: flex;
        justify-content: center;
      }

      :deep(.cont .accomplish .el-button) {
        width: 50%;
        margin: 0;
      }
    }

    .footer {
      width: 96%;
      height: calc(100% - 200px);
      margin: 10px auto 20px;

      .el-table--fit {
        height: 100%;

        :deep(.el-table__header-wrapper) {
          background-color: #000;
          font-size: 14px;

          tr {
            // color: #000;
          }
        }

        :deep(.el-table__row) {
          height: 50px;
          font-size: 14px;
          // color: #000;

          &:hover {
            td {
              background-color: rgba(223, 236, 254, 1);
            }
          }
        }

        :deep(.el-table__row td) {
          padding: 0;

          // border: 0;
          .normal {
            background-color: rgba(139, 195, 74, 1);
            color: #fff;
            padding: 4px;
          }
        }

        .el-button--primary {
          margin-left: 5px;
        }

        :deep(.el-table__body .even) {
          background-color: #fff;
        }

        :deep(.el-table__body .odd) {
          background-color: rgba(240, 243, 247, 1);
        }

        :deep(.edit) {
          display: flex;
          align-items: center;
          // justify-content: center;
          flex-wrap: wrap;
          color: rgba(111, 182, 184, 1);

          .is-disabled {
            color: #ccc;
          }
        }

        :deep(.look) {
          padding: 0 10px;
          cursor: pointer;
          color: rgba(30, 125, 251, 1);
        }

        .del {
          padding: 0 10px;
          color: rgba(212, 48, 48, 1);
          cursor: pointer;
        }

        // :deep(.look):hover {
        //   color: red;
        // }
        // :deep(.del):hover {
        //   color: red;
        // }
      }
    }

    .pageSize {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 30px;

      span {
        color: #000;
      }

      .el-pagination {

        // width: 1600px;
        :deep(.el-pagination__total) {
          color: #000;
        }

        :deep(.el-pagination__goto) {
          color: #000;
        }

        :deep(.el-pagination__classifier) {
          color: #000;
        }

        :deep(.el-input__wrapper) {
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          box-shadow: none;
        }

        :deep(.el-pager li) {
          margin: 0 5px;
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          background-color: transparent;
        }

        :deep(.el-pager li.is-active) {
          // background-color: rgba(0, 97, 255, 0.8);
          border: 1px solid rgba(0, 97, 255, 1);
          color: rgba(0, 97, 255, 1);
        }

        :deep(.btn-prev) {
          margin-right: 5px;
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          background-color: transparent;
        }

        :deep(.btn-next) {
          margin-left: 5px;
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          background-color: transparent;
        }
      }
    }
  }

  // 编辑页面
  .taskEdit {
    width: 100%;
    height: 100%;

    .left {
      // width: calc(100wh - 40px);
      display: flex;
      align-items: center;
      height: 60px;
      padding: 0 30px;
      border-bottom: 1px solid #ccc;
      color: rgb(0, 0, 0);
      font-size: 20px;
      font-weight: 600;

      img {
        width: 18px;
        height: 18px;
        cursor: pointer;
      }

      .add {
        margin-left: 20px !important;
        font-size: 20px !important;
        color: rgba(0, 0, 0, 1) !important;
      }
    }

    .content {
      padding: 0 30px;
      height: calc(100% - 71px);

      .el-steps {
        height: 40px;
        margin-bottom: 20px;
        background: transparent;
        border-bottom: 1px solid #e3e3e3;

        :deep(.el-step__title) {
          font-size: 20px;
        }
      }

      .form {
        height: calc(100% - 87px);
        overflow: auto;

        .block {
          margin: 18px 0 0 0;
          border-bottom: 1px solid #e3e3e3;

          .title {
            font-size: 18px;
            color: #2b425b;
            font-weight: 600;
            margin: 0 0 10px 0;
          }
        }

        .collapse {
          margin: 10px 0 18px 0;
          border-bottom: none;

          .el-collapse {
            border: none;

            .title {
              font-size: 18px;
              color: #2b425b;
              font-weight: 600;
              margin: 0;
            }

            :deep(.el-collapse-item) {
              .el-collapse-item__header {
                width: 180px;
                border: none;
              }

              .el-collapse-item__wrap {
                border: none !important;
              }
            }
          }
        }

        .text {
          color: #f69721;
        }

        .options {
          margin-top: 15px;

          :deep(.el-form-item__content) {
            margin-left: 0 !important;
          }
        }

        .el-table--fit {
          height: 580px;

          :deep(.el-table__header-wrapper) {
            background-color: #000;
            font-size: 14px;

            tr {
              // color: #000;
            }
          }

          :deep(.el-table__row) {
            height: 45px;
            font-size: 14px;
            // color: #000;

            &:hover {
              td {
                background-color: rgba(223, 236, 254, 1);
              }
            }
          }

          :deep(.el-table__row td) {
            padding: 0;

            // border: 0;
            .normal {
              background-color: rgba(139, 195, 74, 1);
              color: #fff;
              padding: 4px;
            }

            .el-input {
              height: 40px;
            }
          }

          .el-button--primary {
            margin-left: 5px;
          }

          :deep(.edit) {
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(111, 182, 184, 1);
          }

          :deep(.look) {
            padding: 0 10px;
            cursor: pointer;
            color: rgba(30, 125, 251, 1);
          }

          .del {
            padding: 0 10px;
            color: rgba(212, 48, 48, 1);
            cursor: pointer;
          }
        }
      }

      // 整个滚动条
      .form::-webkit-scrollbar-track {
        background-color: #daeeff;
      }

      // 滚动条的滚动区域（轨道）
      .form::-webkit-scrollbar {
        background-color: #0888f8;
        height: 3px;
        width: 4px;
      }

      // 滚动条的可拖拽部分（滑块）
      // .form::-webkit-scrollbar-thumb {
      //   background: #57b2ff;
      //   border-radius: 4px;
      //   height: 3px;
      //   width: 4px;
      // }
    }
  }

  // 编辑按钮
  :deep(.editDialog) {
    //   height: 420px;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 30px 30px 10px 30px;

      .el-form-item__content {
        width: 200px;

        .el-input-group__append {
          background-color: rgba(222, 234, 252, 1);
          color: rgba(0, 97, 255, 1);
          cursor: pointer;
          user-select: none;
        }
      }

      .el-form {
        .typeTitle {
          display: block;
          color: red;
          margin: 0 0 6px 100px;
        }

        .account {
          display: flex;
          justify-content: space-between;

          .el-form-item {
            .el-form-item__content {
              width: 300px;
            }

            .el-input {
              width: 300px;
            }
          }
        }
      }

      .options {
        margin: 50px 20px 20px 0;
        width: 100%;

        .el-form-item__content {
          display: flex;
          flex-direction: row-reverse;
        }

        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }

  // 查看按钮
  :deep(.lookDialog) {
    //   height: 420px;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 20px 30px;

      ul {
        margin: 0;
        padding: 0;

        li {
          list-style: none;
          // color: #000;
          // font-weight: 600;
          font-size: 14px;
          margin-bottom: 10px;

          span {
            color: #f69721;
            // font-weight: 600;
          }
        }
      }

      .options {
        margin: 30px 20px 20px 0;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;

        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }

  // 删除数据库
  :deep(.closeAccount) {
    // height: 600px;
    overflow: hidden;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(245, 249, 255, 1);
      font-weight: 600;
      height: 60px;
      padding: 0 20px;
      line-height: 60px;
      margin: 0;
      border-bottom: 1px solid rgba(230, 230, 230, 1);

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 0px 20px 20px 20px;

      // display: flex;
      // flex-direction: column-reverse;
      .content {
        height: 80px;
        font-size: 16px;
        padding: 20px 30px;
        display: flex;

        img {
          width: 25px;
          height: 25px;
          margin: 0 8px 0 0;
        }
      }

      .option {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin: 10px 0;

        .queding {
          margin-left: 20px;
        }
      }
    }
  }
}

.el-input {
  width: 192px;
}
</style>

<style>
#el-collapse-head-84 {
  outline: none;
}
</style>
