<template>
  <div class="content-box">
    <div class="left">
      <span :class="taskTabVisible == true ? 'cameratxt' : 'cameratxt-grey'" @click="tabHandler(1)">任务日志</span>
      <span :class="businessTabVisible == true ? 'cameratxt' : 'cameratxt-grey'" @click="tabHandler(2)">业务日志</span>
      <span :class="debugTabVisible == true ? 'cameratxt' : 'cameratxt-grey'" @click="tabHandler(3)">调试日志</span>
    </div>
    <!-- 任务日志 -->
    <div v-show="taskTabVisible" class="scrollContent">
      <div class="scroll">
        <div class="middle">
          <div class="filter">
            <div class="condition">
              <el-select v-model="mPage.selectTaskValue" clearable class="sel" placeholder="任务名称" style="width: 180px"
                @clear="mPage.searchBtn">
                <el-option v-for="item in mPage.selectTaskOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
              <el-select v-model="mPage.tkLogAutoManualValue" clearable style="width: 120px" class="sel"
                placeholder="执行标识" @clear="mPage.searchBtn">
                <el-option label="自动执行" value="0" />
                <el-option label="手动执行" value="1" />
              </el-select>
              <el-select v-model="mPage.tkLogExeStatusValue" class="sel" style="width: 130px" clearable
                placeholder="执行状态" @clear="mPage.searchBtn">
                <el-option label="执行中" value="1" />
                <el-option label="执行成功" value="2" />
                <el-option label="部分数据异常" value="3" />
                <el-option label="执行中断" value="4" />
                <el-option label="执行跳过" value="5" />
                <el-option label="执行失败" value="6" />
              </el-select>
              <el-select v-model="mPage.selectDsSourceValue" class="sel" clearable placeholder="来源数据源"
                style="width: 180px" @clear="mPage.searchBtn">
                <el-option v-for="item in mPage.selectDsSourceOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
              <el-select v-model="mPage.selectDsDestinationValue" class="sel" clearable placeholder="目的数据源"
                style="width: 180px" @clear="mPage.searchBtn">
                <el-option v-for="item in mPage.selectDsDestinationOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
              <el-select v-model="mPage.tkLogCostTimeValue" class="sel" style="width: 130px" clearable
                placeholder="耗时过滤" @clear="mPage.searchBtn">
                <el-option label="1分钟内" value="1" />
                <el-option label="1-5分钟" value="2" />
                <el-option label="5-10分钟" value="3" />
                <el-option label="10-30分钟" value="4" />
                <el-option label="30分钟以上" value="5" />
              </el-select>
              <div class="sel">
                <el-date-picker v-model="mPage.searchDateTimeVale" type="datetimerange" start-placeholder="开始时间"
                  end-placeholder="结束时间" :shortcuts="mPage.shortcuts" value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 360px; margin-right: 10px" />
              </div>
              <el-button color="rgba(0, 97, 255, 1)" type="primary" class="search sel"
                @click="mPage.searchBtn"><el-icon>
                  <Search />
                </el-icon>
                <span>查询</span></el-button>
            </div>
          </div>
        </div>
        <div class="footer" v-loading="mPage.loading">
          <el-table :row-class-name="mPage.tableRowClassName" :data="mPage.tableData" border style="width: 100%"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '50px',
            }">
            <!-- <el-table-column align="center" type="selection" width="55" /> -->
            <el-table-column width="68" align="center " prop="xuhao" label="序号" />
            <el-table-column align="center" prop="tkLogTaskName" label="任务名称" />
            <!-- <el-table-column align="center" prop="department" label="业务部门" /> -->
            <el-table-column align="center" prop="tkLogDsSourceName" label="来源库" />
            <el-table-column align="center" prop="tkLogDsDestinationName" label="目的库" />
            <el-table-column align="center" prop="tkLogDestTable" label="目的表" width="150" />
            <!-- <el-table-column align="center" prop="interchangerName" label="交换机名称" /> -->
            <el-table-column align="center" prop="tkLogAutoManual" label="执行标识" width="86" />
            <el-table-column align="center" prop="tkLogExeType" label="执行方式" width="86" />
            <el-table-column align="center" prop="tkLogExeStatus" label="执行状态" width="100">
              <template #default="scope">
                <span v-if="scope.row.tkLogExeStatus == '执行成功' ||
                  scope.row.tkLogExeStatus == '执行中'
                " class="normal">{{ scope.row.tkLogExeStatus }}</span>
                <span v-else class="err-text">{{
                  scope.row.tkLogExeStatus
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="tkLogStartTime" label="执行开始时间" width="110" />
            <el-table-column align="center" prop="tkLogEndTime" label="执行结束时间" width="110" />
            <el-table-column align="center" prop="tkLogCostTime" label="耗时" width="90" />
            <el-table-column align="center" prop="tkLogReadRows" label="读取(条)" width="80" />
            <el-table-column align="center" prop="tkLogInsertRows" label="增加(条)" width="80" />
            <el-table-column align="center" prop="tkLogUpdateRows" label="更新(条)" width="80" />
            <el-table-column align="center" prop="tkLogErrRows" label="错误(条)" width="80" />
            <el-table-column align="center" label="查看" width="80">
              <template #default="scope">
                <div class="edit">
                  <div class="look" @click="mPage.editClick(scope.row)">
                    查看
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页组件 -->
        <div class="pageSize" style="display: flex">
          <span></span>
          <el-pagination background :current-page="mPage.currentPage" :page-size="mPage.pageSize"
            layout="total, prev, pager, next, jumper, slot" :total="mPage.tableTotal"
            @update:current-page="mPage.handleCurrentChange" />
        </div>
      </div>

      <!-- 查看按钮 -->
      <el-dialog class="editDialog" v-model="mPage.viewVisible" :close-on-click-modal="false"
        :close-on-press-escape="false" title="日志详情" :show-close="false" align-center width="600">
        <div style="height: 500px; overflow-y: scroll;" v-html="mPage.content"></div>
        <div class="options">
          <el-button @click="mPage.viewVisible = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 业务日志 -->
    <div v-show="businessTabVisible" class="scrollContent">
      <div class="scroll">
        <div class="middle">
          <div class="filter">
            <div class="condition">
              <el-select v-model="bPage.actionNameValue" filterable clearable style="width: 280px" class="sel"
                placeholder="操作名称" @clear="bPage.searchBtn">
                <el-option v-for="item in bPage.actionName" :key="item.value" :label="item.label" :value="item.label" />
              </el-select>
              <el-select v-model="bPage.actionPeopleValue" filterable clearable style="width: 120px" class="sel"
                placeholder="操作人" @clear="bPage.searchBtn">
                <el-option v-for="item in bPage.actionPeople" :key="item.value" :label="item.label"
                  :value="item.label" />
              </el-select>
              <el-select v-model="bPage.actionModuleValue" filterable class="sel" style="width: 350px" clearable
                placeholder="操作模块" @clear="bPage.searchBtn">
                <el-option v-for="item in bPage.actionModule" :key="item.value" :label="item.label"
                  :value="item.label" />
              </el-select>
              <el-select v-model="bPage.actionBusinessValue" filterable class="sel" style="width: 280px" clearable
                placeholder="业务名称" @clear="bPage.searchBtn">
                <el-option v-for="item in bPage.actionBusiness" :key="item.value" :label="item.label"
                  :value="item.label" />
              </el-select>
              <div class="elDatePicker sel">
                <el-date-picker v-model="bPage.searchDateTimeVale" type="datetimerange" start-placeholder="操作开始时间"
                  end-placeholder="操作结束时间" :shortcuts="bPage.shortcuts" value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 360px !important; margin-right: 10px" />
              </div>
              <el-button color="rgba(0, 97, 255, 1)" type="primary" class="search sel"
                @click="bPage.searchBtn"><el-icon>
                  <Search />
                </el-icon>
                <span>查询</span></el-button>
            </div>
          </div>
        </div>
        <div class="footer" v-loading="bPage.loading">
          <el-table :row-class-name="bPage.tableRowClassName" :data="bPage.tableData" border style="width: 100%"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '50px',
            }">
            <el-table-column width="68" align="center " prop="xuhao" label="序号" />
            <el-table-column align="center" prop="logActionName" label="操作名称" width="230" />
            <el-table-column align="center" prop="logActionPeople" label="操作人" width="100" />
            <el-table-column align="center" prop="logActionModule" label="操作模块" />
            <el-table-column align="center" prop="logActionBusiness" label="业务名称" />
            <el-table-column align="center" prop="logActionHost" label="操作主机ip" width="128" />
            <el-table-column align="center" prop="logActionRemote" label="操作人ip" width="128" />
            <el-table-column align="center" prop="logActionClass" label="操作类型" width="128" />
            <el-table-column align="center" prop="logActionCreateTime" label="操作时间" width="120">
              <template #default="{ row }">
                <span>{{
                  dayjs(row.logActionCreateTime).format("YYYY-MM-DD HH:mm:ss")
                  }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页组件 -->
        <div class="pageSize" style="display: flex">
          <span></span>
          <el-pagination background :current-page="bPage.currentPage" :page-size="bPage.pageSize"
            layout="total, prev, pager, next, jumper, slot" :total="bPage.tableTotal"
            @update:current-page="bPage.handleCurrentChange" />
        </div>
      </div>
    </div>
    <!-- 调试日志 -->
    <div v-show="debugTabVisible" class="scrollContent">
      <div class="scroll">
        <div class="middle" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
          <div class="filter">
            <div class="condition">
              <el-select v-model="debugPage.taskIdValue" filterable clearable style="width: 280px" class="sel"
                placeholder="任务名称" @clear="debugPage.searchBtn">
                <el-option v-for="item in debugPage.taskId" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <div class="sel">
                <el-date-picker v-model="debugPage.searchDateTimeVale" type="datetimerange" start-placeholder="开始时间"
                  end-placeholder="结束时间" :shortcuts="debugPage.shortcuts" value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 360px; margin-right: 10px" />
              </div>
              <el-button color="rgba(0, 97, 255, 1)" type="primary" class="search sel"
                @click="debugPage.searchBtn"><el-icon>
                  <Search />
                </el-icon>
                <span>查询</span></el-button>
            </div>
          </div>
          <div class="sel">
            <el-button type="primary" color="rgba(0, 97, 255, 1)" plain @click="debugPage.debugSet">启用调试</el-button>
          </div>
        </div>
        <div style="margin: 0 0 5px 30px;">
          <el-button type="primary" color="rgba(0, 97, 255, 1)" :disabled="debugPage.ids === ''" plain
            @click="debugPage.deleteDebugLog">删除勾选</el-button>
        </div>
        <div class="footer" v-loading="debugPage.loading">
          <el-table :row-class-name="debugPage.tableRowClassName" @selection-change="debugPage.handleSelectionChange"
            :data="debugPage.tableData" border style="width: 100%;"
            :header-cell-style="{ background: 'rgba(240, 243, 247, 1)', height: '50px', }">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column width="68" align="center " prop="xuhao" label="序号" />
            <el-table-column align="center" prop="ETaskName" label="任务名称" width="150" />
            <el-table-column prop="EMsg" label="信息" header-align="center" />
            <el-table-column align="center" prop="ENum" label="次数" width="88" />
            <el-table-column align="center" prop="EDateTime" label="发生时间" width="150" />
            <el-table-column align="center" prop="ECreateTime" label="创建时间" width="150"><template #default="{ row }">
                <span>{{ dayjs(row.ECreateTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页组件 -->
        <div class="pageSize" style="display: flex">
          <span></span>
          <el-pagination background :current-page="debugPage.currentPage" :page-size="debugPage.pageSize"
            layout="total, prev, pager, next, jumper, slot" :total="debugPage.tableTotal"
            @update:current-page="debugPage.handleCurrentChange" />
        </div>
      </div>

      <!-- 调试对话框 -->
      <el-dialog class="editDialog" v-model="debugPage.debugSetVisible" :close-on-click-modal="false"
        :close-on-press-escape="false" title="开启调试" :show-close="false" align-center width="500">
        <div style="height: 540px; over-flow: hidden; scroll: auto">
          <el-table :row-class-name="debugPage.tableRowClassName" :data="debugPage.debugTableData" height="540" border
            style="width: 100%" :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '50px',
            }">
            <el-table-column width="68" align="center " prop="xuhao" label="序号" />
            <el-table-column align="center" prop="tkName" label="任务名称" />
            <el-table-column align="center" prop="tkDebugSql" label="开关" width="150">
              <template #default="scope">
                <el-switch v-model="scope.row.tkDebugSql" :active-value="1" :inactive-value="0"
                  @change="debugPage.handleSwitchChange(scope.row)" style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #ff4949;
                  " />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="options">
          <el-button @click="debugPage.debugSetVisible = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </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 axios from "axios";
import eds from "@/utils/eds.js";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
// const router = useRouter();
const taskTabVisible = ref(false); // 任务面板
const businessTabVisible = ref(true); // 业务面板
const debugTabVisible = ref(false); // 业务面板

const tabHandler = (v) => {
  if (v == 1) {
    taskTabVisible.value = true;
    businessTabVisible.value = false;
    debugTabVisible.value = false;
  } else if (v == 2) {
    taskTabVisible.value = false;
    businessTabVisible.value = true;
    debugTabVisible.value = false;
  } else {
    taskTabVisible.value = false;
    businessTabVisible.value = false;
    debugTabVisible.value = true;
  }
};

const debugPage = reactive({
  loading: ref(false), // 加载状态
  taskIdValue: ref(""), // 任务id值
  shortcuts: ref([
    {
      text: "今天",
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime());
        start.setHours(0, 0, 0, 0);
        return [start, end];
      },
    },
    {
      text: "昨天",
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
        start.setHours(0, 0, 0, 0);
        end.setTime(start.getTime());
        end.setHours(23, 59, 59, 999);
        return [start, end];
      },
    },
    {
      text: "最近一周",
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        start.setHours(0, 0, 0, 0);
        return [start, end];
      },
    },
    {
      text: "最近一个月",
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        start.setHours(0, 0, 0, 0);
        return [start, end];
      },
    },
    {
      text: "最近三个月",
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        start.setHours(0, 0, 0, 0);
        return [start, end];
      },
    },
  ]),
  debugSetVisible: ref(false),
  // 表格数据
  tableData: reactive([]),
  debugTableData: reactive([]),
  taskId: reactive([]), // 任务id列表对象
  startTime: reactive([]), // 开始时间
  currentPage: ref(1), // 当前页
  pageSize: ref(300), // 每页显示条数
  tableTotal: ref(0), // 当前总数
  ids: "",
  // 获取任务列表
  getTaskList: async () => {
    let data = {
      currentPage: 1,
      pageCount: 300,
      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, "业务日志");
    if (res.data.code == 200) {
      debugPage.taskId = reactive([]);
      JSON.parse(eds.decryptDes(res.data.data)).list.forEach((element) => {
        let item = {
          value: element.tkId,
          label: element.tkName,
        };
        debugPage.taskId.push(item);
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 获取列表
  getList: async () => {
    debugPage.loading = true;
    let data = {
      currentPage: debugPage.currentPage,
      pageCount: debugPage.pageSize,
      eTaskId: debugPage.taskIdValue,
      managerId: sessionStorage.getItem("token"),
    };
    if (debugPage.searchDateTimeVale != null) {
      data.startTime = debugPage.searchDateTimeVale[0];
      data.endTime = debugPage.searchDateTimeVale[1];
    }
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartDataTask/queryPageSmartDataTaskDebug",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    // console.log(res, "业务日志");
    if (res.data.code == 200) {
      debugPage.loading = false;
      debugPage.tableData = reactive([]);
      debugPage.tableTotal = JSON.parse(eds.decryptDes(res.data.data)).total || 0;
      let i = 1;
      JSON.parse(eds.decryptDes(res.data.data)).list.forEach((element) => {
        element.xuhao = (debugPage.currentPage - 1) * debugPage.pageSize + i;
        debugPage.tableData.push(element);
        i++;
      });
    } else {
      debugPage.loading = false;
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  debugSet: async () => {
    debugPage.debugSetVisible = true;
    let data = {
      managerId: sessionStorage.getItem("token"),
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartDataTask/queryTaskDebugSql",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(res, "任务调试sql");
    if (res.data.code == 200) {
      debugPage.debugTableData = reactive([]);
      let i = 1;
      JSON.parse(eds.decryptDes(res.data.data)).forEach((element) => {
        element.xuhao = i;
        debugPage.debugTableData.push(element);
        i++;
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  handleSwitchChange: async (row) => {
    // console.log(row);
    let data = {
      tkId: row.tkId,
      tkDebugSql: row.tkDebugSql,
      managerId: sessionStorage.getItem("token"),
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartDataTask/queryTaskSetDebugSql",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data: {
        id: row.id,
        status: row.status,
      },
      params: data,
    });
    // console.log(res, "任务设置调试sql");
    if (res.data.code == 200) {
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 获取需要删除的调试日志ids
  handleSelectionChange: (val) => {
    let strids = '';
    val.forEach((item) => {
      strids += item.EId + ",";
    });
    debugPage.ids = strids.substring(0, strids.length - 1);
  },
  // 删除调试日志
  deleteDebugLog: async () => {
    let data = {
      ids: debugPage.ids,
      managerId: sessionStorage.getItem("token"),
    };
    let res = await axios({
      method: "post",
      url: api.value + "/wanzai/api/smartDataTask/delSmartDataTaskDebugByIds",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data,
    });
    // console.log(res, "删除调试日志");
    if (res.data.code == 200) {
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
      debugPage.getList();
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 表格斑马纹颜色修改
  tableRowClassName: ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
      return "even";
    } else if (rowIndex % 2 !== 0) {
      return "odd";
    }
    return "";
  },
  // 分页
  handleCurrentChange: (value) => {
    // console.log(value);
    debugPage.currentPage = value;
    debugPage.getList();
  },
  // 搜索功能
  searchBtn: lodash.debounce(async () => {
    debugPage.getList();
  }, 300),
});

const bPage = reactive({
  loading: ref(false), // 加载状态
  actionNameValue: ref(""), // 操作名称
  actionPeopleValue: ref(""), // 操作人
  actionModuleValue: ref(""), // 操作模块
  actionBusinessValue: ref(""), // 操作业务
  searchDateTimeVale: ref(""), // 查询时间
  shortcuts: ref([
    {
      text: "今天",
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime());
        start.setHours(0, 0, 0, 0);
        return [start, end];
      },
    },
    {
      text: "昨天",
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
        start.setHours(0, 0, 0, 0);
        end.setTime(start.getTime());
        end.setHours(23, 59, 59, 999);
        return [start, end];
      },
    },
    {
      text: "最近一周",
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        start.setHours(0, 0, 0, 0);
        return [start, end];
      },
    },
    {
      text: "最近一个月",
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        start.setHours(0, 0, 0, 0);
        return [start, end];
      },
    },
    {
      text: "最近三个月",
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        start.setHours(0, 0, 0, 0);
        return [start, end];
      },
    },
  ]),
  selectTaskOptions: reactive([]), // 操作名称
  // 表格数据
  tableData: reactive([]),
  actionName: reactive([]), // 操作名称
  actionPeople: reactive([]), // 操作人
  actionModule: reactive([]), // 操作模块
  actionBusiness: reactive([]), // 操作业务
  startTime: reactive([]), // 开始时间
  currentPage: ref(1), // 当前页
  pageSize: ref(30), // 每页显示条数
  tableTotal: ref(0), // 当前总数
  // 获取操作名称
  getActionName: async () => {
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartDataSourceLog/queryDistinctActionName",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
    });
    // console.log(res, "操作名称");
    if (res.data.code == 200) {
      bPage.actionName = reactive([]);
      let i = 1;
      JSON.parse(eds.decryptDes(res.data.data)).list.forEach((element) => {
        let item = {
          value: i,
          label: element,
        };
        bPage.actionName.push(item);
        i++;
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 获取操作人
  getActionPeople: async () => {
    let res = await axios({
      method: "get",
      url:
        api.value + "/wanzai/api/smartDataSourceLog/queryDistinctActionPeople",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
    });
    // console.log(res, "操作名称");
    if (res.data.code == 200) {
      bPage.actionPeople = reactive([]);
      let i = 1;
      JSON.parse(eds.decryptDes(res.data.data)).list.forEach((element) => {
        let item = {
          value: i,
          label: element,
        };
        bPage.actionPeople.push(item);
        i++;
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 获取操作模块
  getActionModule: async () => {
    let res = await axios({
      method: "get",
      url:
        api.value + "/wanzai/api/smartDataSourceLog/queryDistinctActionModule",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
    });
    // console.log(res, "操作名称");
    if (res.data.code == 200) {
      bPage.actionModule = reactive([]);
      let i = 1;
      JSON.parse(eds.decryptDes(res.data.data)).list.forEach((element) => {
        let item = {
          value: i,
          label: element,
        };
        bPage.actionModule.push(item);
        i++;
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 获取操作业务
  getActionBusiness: async () => {
    let res = await axios({
      method: "get",
      url:
        api.value +
        "/wanzai/api/smartDataSourceLog/queryDistinctActionBusiness",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
    });
    // console.log(res, "操作名称");
    if (res.data.code == 200) {
      bPage.actionBusiness = reactive([]);
      let i = 1;
      JSON.parse(eds.decryptDes(res.data.data)).list.forEach((element) => {
        let item = {
          value: i,
          label: element,
        };
        bPage.actionBusiness.push(item);
        i++;
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 获取列表
  getList: async () => {
    bPage.loading = true;
    let data = {
      currentPage: bPage.currentPage,
      pageCount: bPage.pageSize,
      logActionName: bPage.actionNameValue,
      logActionPeople: bPage.actionPeopleValue,
      logActionModule: bPage.actionModuleValue,
      logActionBusiness: bPage.actionBusinessValue,
      managerId: sessionStorage.getItem("token"),
    };
    if (bPage.searchDateTimeVale != null) {
      data.startTime = bPage.searchDateTimeVale[0];
      data.endTime = bPage.searchDateTimeVale[1];
    }
    let res = await axios({
      method: "get",
      url:
        api.value +
        "/wanzai/api/smartDataSourceLog/queryPageSmartDataSourceLog",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    // console.log(res, "业务日志");
    if (res.data.code == 200) {
      bPage.loading = false;
      bPage.tableData = reactive([]);
      bPage.tableTotal =
        JSON.parse(eds.decryptDes(res.data.data)).totalCount || 0;
      let i = 1;
      JSON.parse(eds.decryptDes(res.data.data)).list.forEach((element) => {
        element.xuhao = (bPage.currentPage - 1) * bPage.pageSize + i;
        bPage.tableData.push(element);
        i++;
      });
    } else {
      bPage.loading = false;
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 表格斑马纹颜色修改
  tableRowClassName: ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
      return "even";
    } else if (rowIndex % 2 !== 0) {
      return "odd";
    }
    return "";
  },
  // 分页
  handleCurrentChange: (value) => {
    // console.log(value);
    bPage.currentPage = value;
    bPage.getList();
  },
  // 搜索功能
  searchBtn: lodash.debounce(async () => {
    bPage.getList();
  }, 300),
});

const mPage = reactive({
  loading: ref(false),
  viewVisible: ref(false),
  tkLogAutoManualValue: ref(""), // 执行标识: 0自动/1手动
  // 执行状态: 1：执行中；2：执行成功；3：部分数据异常；4：执行中断；5：执行跳过；6：执行失败
  tkLogExeStatusValue: ref(""),
  tkLogDsSourceId: ref(""), // 源库id
  tkLogDsDestinationId: ref(""), // 目标库id
  tkLogCostTimeValue: ref(""), // 耗时
  searchDateTimeVale: ref(""), // 查询时间
  shortcuts: ref([
    {
      text: "今天",
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime());
        start.setHours(0, 0, 0, 0);
        return [start, end];
      },
    },
    {
      text: "昨天",
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
        start.setHours(0, 0, 0, 0);
        end.setTime(start.getTime());
        end.setHours(23, 59, 59, 999);
        return [start, end];
      },
    },
    {
      text: "最近一周",
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        start.setHours(0, 0, 0, 0);
        return [start, end];
      },
    },
    {
      text: "最近一个月",
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        start.setHours(0, 0, 0, 0);
        return [start, end];
      },
    },
    {
      text: "最近三个月",
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        start.setHours(0, 0, 0, 0);
        return [start, end];
      },
    },
  ]),
  selectDsSourceValue: ref(""), // 源库下拉框
  selectDsDestinationValue: ref(""), // 目标库下拉框
  selectDsSourceOptions: reactive([]),
  selectDsDestinationOptions: reactive([]),
  selectTaskValue: ref(""), // 当前任务id
  selectTaskOptions: reactive([]), // 任务下拉框
  content: ref(""),
  // 表格数据
  tableData: reactive([]),
  currentPage: ref(1), // 当前页
  pageSize: ref(10), // 每页显示条数
  tableTotal: ref(0), // 当前总数
  // 获取列表
  getList: async () => {
    mPage.loading = true;
    let data = {
      currentPage: mPage.currentPage,
      pageCount: mPage.pageSize,
      eTaskId: mPage.selectTaskValue,
      tkLogAutoManual: mPage.tkLogAutoManualValue,
      tkLogCostTime: mPage.tkLogCostTimeValue,
      tkLogDsSourceId: mPage.selectDsSourceValue,
      tkLogDsDestinationId: mPage.selectDsDestinationValue,
      tkLogExeStatus: mPage.tkLogExeStatusValue,
      managerId: sessionStorage.getItem("token"),
    };
    if (mPage.searchDateTimeVale != null) {
      data.startTime = mPage.searchDateTimeVale[0];
      data.endTime = mPage.searchDateTimeVale[1];
    }
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartDataTask/queryPageSmartDataTaskLog",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    // console.log(res, "任务日志");
    if (res.data.code == 200) {
      mPage.loading = false;
      mPage.tableData = reactive([]);
      mPage.tableTotal = JSON.parse(eds.decryptDes(res.data.data)).total || 0;
      let i = 1;
      JSON.parse(eds.decryptDes(res.data.data)).list.forEach((element) => {
        element.xuhao = (mPage.currentPage - 1) * mPage.pageSize + i;
        mPage.tableData.push(element);
        i++;
      });
      console.log(mPage.tableData);
    } else {
      mPage.loading = false;
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 获取任务
  getTask: async () => {
    let data = {
      currentPage: 1,
      pageCount: 100,
      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,
    });
    if (res.data.code == 200) {
      mPage.selectTaskOptions = reactive([]);
      JSON.parse(eds.decryptDes(res.data.data)).list.forEach((element) => {
        mPage.selectTaskOptions.push({
          value: element.tkId,
          label: element.tkName,
        });
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  // 获取数据源
  getDs: async () => {
    let data = {
      currentPage: 1,
      pageCount: 100,
      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, "获取数据源");
    if (res.data.code == 200) {
      mPage.selectDsSourceOptions = reactive([]);
      mPage.selectDsDestinationOptions = reactive([]);
      JSON.parse(eds.decryptDes(res.data.data)).list.forEach((element) => {
        mPage.selectDsSourceOptions.push({
          value: element.dsId,
          label: element.dsName,
        });
        mPage.selectDsDestinationOptions.push({
          value: element.dsId,
          label: element.dsName,
        });
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  },
  //查看按钮
  editClick: async (row) => {
    mPage.viewVisible = true;
    mPage.content = row.tkLogErrException.replace(/\n/g, "<br/>");
  },
  // 表格斑马纹颜色修改
  tableRowClassName: ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
      return "even";
    } else if (rowIndex % 2 !== 0) {
      return "odd";
    }
    return "";
  },
  // 分页
  handleCurrentChange: (value) => {
    // console.log(value);
    mPage.currentPage = value;
    mPage.getList();
  },
  // 搜索功能
  searchBtn: lodash.debounce(async () => {
    mPage.getList();
  }, 300),
});
watch(
  () => mPage.searchDateTimeVale,
  (newVal, oldVal) => {
    // console.log("监听时间:", newVal);
    if (newVal == null) {
      mPage.searchBtn();
    }
  }
);

watch(
  () => bPage.searchDateTimeVale,
  (newVal, oldVal) => {
    // console.log("监听时间:", newVal);
    if (newVal == null) {
      bPage.searchBtn();
    }
  }
);

watch(
  () => debugPage.searchDateTimeVale,
  (newVal, oldVal) => {
    // console.log("监听时间:", newVal);
    if (newVal == null) {
      debugPage.searchBtn();
    }
  }
);

//导出功能
// 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,
//     });
//   }
// };

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

  bPage.getList();
  bPage.getActionName();
  bPage.getActionPeople();
  bPage.getActionModule();
  bPage.getActionBusiness();

  debugPage.getList();
  debugPage.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);

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

    span {
      display: block;
      height: 40px;
      line-height: 40px;
      padding: 5px 10px;
      margin: 0 1px 0px 1px;
    }

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

  .cameratxt {
    background-color: rgb(6, 88, 240);
    color: #ffffff;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
  }

  .cameratxt-grey {
    background-color: #eee;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
  }

  .cameratxt:hover,
  .cameratxt-grey:hover {
    background-color: rgb(6, 88, 240);
    color: #ffffff;
  }

  .scrollContent {
    height: calc(100% - 70px);
    overflow: auto;
  }

  .scroll {
    height: 100%;
  }

  .middle {
    width: calc(100% - 60px);
    margin: 0 auto;
    color: #000;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;

      align-items: center;
      margin: 0px 0 0 0;

      .search {
        color: #fff;
      }

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

        .sel {
          margin: 0 10px 10px 0;
        }

        :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: calc(100% - 60px);
    height: calc(100% - 170px);
    margin: 0 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: 14 px;

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

      :deep(.el-table__row):nth-child(2n) {
        .el-table-fixed-column--right {
          background-color: rgba(240, 243, 247, 1);
        }
      }

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

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

        .err-text {
          background-color: rgb(193, 8, 8);
          color: #fff;
          padding: 5px;
        }
      }

      .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;
        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;
      }

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

  // 编辑按钮
  :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: 20px 30px 10px 30px;

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

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

  // 指纹弹窗
  :deep(.fingerprint) {
    width: 611px;
    height: 486px;
    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: 0;

      .elbody {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 20px;
        font-size: 18px;
        color: #000;
        border-bottom: 0.5px solid #ccc;

        i {
          cursor: pointer;
        }
      }
    }

    .el-dialog__footer {
      .el-button--primary {
        background: rgba(41, 109, 227, 1);
      }
    }
  }

  // 身份证读取
  :deep(.addIdentityCard) {
    //   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 20px 10px 20px;
      height: 330px;
      font-size: 16px;
      font-weight: 600;
      color: #000;

      .el-steps {
        width: 600px;
        transform: translateX(90px);
        margin: 0 0 40px 0;
      }

      .title {
        text-align: center;
      }

      .icons {
        display: flex;
        justify-content: center;

        img {
          width: 70px;
          margin: 40px 0;
        }

        .loading {
          animation: move 3s linear;
        }

        @keyframes move {
          0% {
            transform: rotate(0);
          }

          100% {
            transform: rotate(360deg);
          }
        }
      }

      .retry {
        text-align: center;

        span {
          color: red;
          padding: 0 8px;
          cursor: pointer;
        }
      }
    }
  }

  .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;
      }
    }
  }
}

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