// ==UserScript==
// @name         稽核脚本1022
// @version      3.2.6
// @description  该脚本辅助三费系统进行稽核异常操作
// @match        http://10.217.240.219:8090/NCMS/welcome
// @require      http://192.168.100.150:31628/sevenfeeProvince/pluginCDN/vue.js
// @require      http://192.168.100.150:31628/sevenfeeProvince/pluginCDN/eleJs.js
// @require      http://192.168.100.150:31628/sevenfeeProvince/pluginCDN/qs.js
// @require      http://192.168.100.150:31628/sevenfeeProvince/pluginCDN/jsencrypt.js
// @grant        GM_xmlhttpRequest
// @connect      192.168.100.150
// ==/UserScript==
;(function () {
  'use strict'
  console.log('稽核脚本执行')
  const linkElem = document.createElement('link')
  linkElem.rel = 'stylesheet'
  linkElem.href = 'http://192.168.100.150:31628/sevenfeeProvince/pluginCDN/eleCss.css'
  document.head.appendChild(linkElem)

  // html骨架
  const html = `
        <div id="TMapp">
            <el-card v-if="viewShow" class="TMbox-card">
                <div slot="header" class="clearfix">
                    <span  style="font-weight: bold;">稽核插件</span>
                    <el-button @click="startAudit(true)" style="float: right;" type="primary" size="mini">
                        检测稽核异常
                    </el-button>
                    <el-button @click="logOut" size="mini">退出插件</el-button>
                    <el-button @click="toggleView" size="mini">最小化</el-button> 
                </div>
                <!-- 插件内容 -->
                <div>
                    <!-- 查询界面 -->
                    <div v-if="isSearchPageShow">
                        <div v-if="isAbnormalNewsShow">
                            <el-card shadow="always" :body-style="{ padding: '10px' }">
                                <div slot="header">
                                    <span>异常提示</span>
                                </div>
                                <el-table :data="tableData" @selection-change="selectionChange" border stripe style="width: 100%; height:100% ">
                                    <el-table-column v-if="isAuditpage" type="selection" width="40"></el-table-column>
                                    <el-table-column v-for="col in tableHeads" :formatter="col.formatter" :prop="col.prop" :key="col.label" :label="col.label" width="110"></el-table-column>
                                </el-table>
                            </el-card>
                        </div>
                    </div>

                    <!-- 审核界面 -->
                    <div v-if="isAuditpage">
                        <div v-if="isAuditButtonAndTextareaShow" style="margin: 0 0 5px 0;">
                           <div style="margin: 5px 0 5px 0;">关闭异常的原因：</div> <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="abnormalTextarea"></el-input>
                        </div>
                        <div v-if="isAuditButtonAndTextareaShow">
                            <el-button type="primary" size="mini" :disabled="!loginState" @click="closeAbnormal">关闭异常</el-button>
                            <el-button v-if="!loginState" size="mini" @click="isLoginShow = true; isAuditButtonAndTextareaShow = false">打开登录</el-button>
                            <span style="float: right;"> 登录状态: <span style="font-weight: bold;">{{ loginState ? '已登录':'未登录' }}</span></span>

                        </div>
                        <div v-if="isLoginShow" style="margin: 5px 0 0 0;">
                            <el-form ref="form" :model="loginForm" label-width="60px">
                                <el-form-item label="用户名">
                                    <el-input v-model="loginForm.username"></el-input>
                                </el-form-item>
                                <el-form-item label="密码">
                                    <el-input type="password" show-password v-model="loginForm.password"></el-input>
                                </el-form-item>
                            <el-button type="primary" size="mini" @click="login">登录</el-button>
                            <el-button size="mini" @click="isLoginShow = false; isAuditButtonAndTextareaShow = true">取消登录</el-button>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-card>
            <div v-else>
                <el-button type="text" @click="toggleView">稽核插件</el-button>
            </div>
        </div>
  `

  // 创建容器元素 + 将容器添加到页面的 body 元素中
  const containerEl = document.createElement('div')
  containerEl.className = 'TMContainer'
  containerEl.setAttribute('id', 'TMContainer')

  document.body.appendChild(containerEl)
  containerEl.innerHTML = html

  // ============== 插件拖拽 ===============
  containerEl.onmousedown = function (event) {
    containerEl.style.cursor = 'move'
    // 获取元素的初始位置
    let startX = containerEl.offsetLeft
    let startY = containerEl.offsetTop
    // 获取鼠标按下的位置
    const mouseX = event.pageX
    const mouseY = event.pageY
    // 监听鼠标移动 事件
    window.onmousemove = function (event) {
      // 计算鼠标移动距离
      let disX = event.pageX - mouseX
      let disY = event.pageY - mouseY

      containerEl.style.left = startX + disX + 'px'
      containerEl.style.top = startY + disY + 'px'
    }
    // 监听鼠标 松开
    containerEl.onmouseup = function () {
      // 移除鼠标移动事件
      window.onmousemove = null
      containerEl.style.cursor = ''
    }
  }

  /*
    业务类别（0：电费、1：租费、2：铁塔 ）
    缴费类型 1 报账点 2 缴费单
  */
  let feeType_G = 0
  let paymentType_G = 1
  let nowPageName_G = '' // 当前激活的 nav 的名字
  let collectEncodeType_G = '' // 查询时 需要收集页面上的编码， 一般为 报账点编码/缴费单编码  但是租费不一样需要特殊处理
  let currentPageNum_G = 1 // 当前的分页器所在的页数
  let activeNavIndex_G = 0 // 当前ifream在第几页, "首页"从1开始
  let abnormalTableIndexList_G = [] // 存储: 账单异常的表格行的下标,  从0开始
  let checkTableIndexList_G = []

  let isLatestVersion_G = false // 检测当前插件是否是最新版本

  // 属性 type = 0: 查询界面 , 1: 审核界面
  //      encodeType : 需要收集table中的参数
  let matchNavList_G = [
    { type: 0, navName: '电费报账点查询', feeType: 0, paymentType: 1, encodeType: '报账点编码' },
    { type: 0, navName: '报账点电费查询', feeType: 0, paymentType: 2, encodeType: '缴费单编码' },
    {
      type: 0,
      navName: '租费报账点信息查询',
      feeType: 1,
      paymentType: 1,
      encodeType: '报账点编码',
    },
    { type: 0, navName: '报账点租费查询', feeType: 1, paymentType: 2, encodeType: '缴费单编码' },
    { type: 0, navName: '费用汇总', feeType: 2, paymentType: 5, encodeType: '汇总单号' },
    {
      type: 0,
      navName: '批量起租表',
      feeType: 2,
      paymentType: 2,
      encodeType: ['站址编码', '业务确认单号', '需求单号', '起租表账期'],
    },
    { type: 1, navName: '报账点电费审核', feeType: 0, paymentType: 2, encodeType: '缴费单编码' },
    { type: 1, navName: '报账点租费审核', feeType: 0, paymentType: 1, encodeType: '报账点编码' },
    { type: 1, navName: '费用审核', feeType: 2, paymentType: 5, encodeType: '汇总单号' },
  ]

  // 插件接口汇总
  const baseURL_G = 'http://192.168.100.150:31628'
  const urlList_G = [
    { name: '登录插件', type: 0, url: '/uaa/authentication/jwt' },
    { name: '退出插件', type: 1, url: '/uaa/logout' },
    { name: '手动关闭异常', type: 2, url: '/cpa/pluginUpdate/updateAuditState' },
    { name: '查询异常详细', type: 3, url: '/cpa/plugin/queryAuditErrorList' },
    { name: '批量查询是否异常', type: 4, url: '/cpa/plugin/queryPaymentState' },
    { name: '获取登录加密密钥', type: 5, url: '/uaa/config' },
  ]

  // 用户信息
  const userInfoObj_G = {
    oldFeeSystemName: '',
    browserName: '',
    plugVersion: 'V3.2.6',
  }

  /**
   * 检测当前插件版本是否是最新
   */
  async function checkVersion() {
    const versionId = userInfoObj_G.plugVersion
    const QS = Qs
    GM_xmlhttpRequest({
      url: `${baseURL_G}/cpa/plugin/checkCatVersion`,
      method: 'post',
      anonymous: true,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      data: QS.stringify({ versionId }),
      onload: (res) => {
        console.log('res==>', JSON.parse(res.response))
        const { isUpdate, url } = JSON.parse(res.response).data
        if (isUpdate) {
          isLatestVersion_G = false
          window.open(url) // 打开更新的链接
          ELEMENT.Message.warning('当前插件版本不是最新版本，请更新或者 刷新浏览器')
        } else {
          isLatestVersion_G = true
          console.log('当前版本是最新')
        }
      },
      onerror: (e) => reject(e),
    })
  }
  checkVersion()

  /**
   * 获取当前客户端信息
   */
  function getUserInfo() {
    // 获取当前账户名
    userInfoObj_G.oldFeeSystemName = document.querySelector(
      '.layout-header .header-bar #userName'
    ).textContent
    // 获取当前浏览器信息( 浏览器版本/名称 ), 由后台解析。
    userInfoObj_G.browserName = navigator.userAgent
  }
  getUserInfo()

  /**
   * 获取当前的 业务类别 和 缴费类型 , 以及当前页面
   */
  function setFeeTypeAndPayMentType() {
    const aEls = document.querySelectorAll('.layout-main-tab .tab-nav .tab-nav-content a')
    const activeAElements = Array.from(aEls).find((aEl) => {
      return aEl.classList.contains('active')
    })
    const nowNavName = activeAElements.textContent.replace(/[^\u4e00-\u9fa5]/gi, '')
    //console.log('nowNavName==>', nowNavName);

    // 请求前匹配 参数使用的 业务类别:feeType_G 和 缴费类型:paymentType_G
    let temp = false
    matchNavList_G.forEach((item) => {
      if (item.navName === nowNavName) {
        temp = true
        feeType_G = item.feeType
        paymentType_G = item.paymentType
        collectEncodeType_G = item.encodeType
        nowPageName_G = item.navName
      }
    })
    // 当temp为false时, 则说明未匹配到稽核页面, 执行下面, 获取当前所在页
    if (!temp) {
      nowPageName_G = nowNavName
    }
  }

  /**
   * 封装请求函数
   */
  function A_X(url, data) {
    setFeeTypeAndPayMentType()
    // 确定操作类型
    const operationType = urlList_G.find((item) => item.url === url)?.type
    const headers = {
      'Content-Type': 'application/x-www-form-urlencoded',
    }
    if (operationType === 3 || operationType === 4) {
      headers['Content-Type'] = 'application/json'
    } else if (operationType === 0 || operationType === 5) {
      headers['X-Requested-With'] = 'XMLHttpRequest'
    }
    // 后台人员要求: 每一次请求前都要请求一下日志接口
    async function setLog() {
      let setLogURL = '/cpa/plugin/setLog'
      // 收集关闭异常单据的参数: 异常数据编码, 关闭的异常编码, 关闭原因
      let documentsCode = ''
      let documentsCodeClosed = ''
      let closeReason = ''

      // 当前操作类型调用的日志接口 需要携带token
      if (operationType === 0 || operationType === 1 || operationType === 2) {
        setLogURL = '/cpa/pluginUpdate/setLog'
      }

      // 手动关闭异常
      if (operationType === 2) {
        const auditToken = localStorage.getItem('auditToken')
        headers['Authorization'] = `${auditToken}`

        const QS = Qs
        const updateAuditParams = QS.parse(data)
        console.log('updateAuditParams==>', updateAuditParams)
        documentsCode = updateAuditParams.documentsCode
        documentsCodeClosed = updateAuditParams.id
        closeReason = updateAuditParams.describe
      }

      // 查询异常详细
      if (operationType === 3) {
        documentsCode = JSON.parse(data).paymentCode
      }
      const setLogParams = {
        ...userInfoObj_G,
        logType: operationType,
        documentsCode,
        documentsCodeClosed,
        closeReason,
      }

      await GM_xmlhttpRequest({
        url: `${baseURL_G}${setLogURL}`,
        method: 'post',
        anonymous: true,
        headers: {
          'Content-Type': 'application/json',
          Authorization: `${localStorage.getItem('auditToken')}`,
        },
        data: JSON.stringify(setLogParams),
      })
    }
    setLog()

    console.log('headers==>', headers)
    console.log('url==>', url)

    return new Promise((resolve, reject) => {
      GM_xmlhttpRequest({
        url: `${baseURL_G}${url}`,
        method: 'post',
        data,
        headers,
        anonymous: true,
        onload: (res) => {
          console.log('res==>', res)
          if (res.status === 200) {
            if (operationType === 0) {
              console.log('url==>', url)
              // 使用正则表达式匹配
              const tokenRegex = /authorization:\s*(.*)/
              const match = res.responseHeaders.match(tokenRegex)
              const token = match ? match[1] : null
              localStorage.setItem('auditToken', token)
              // 登录之后得到token, 再次调用一下日志接口.
              setLog()
              return resolve(res)
            }
            return resolve(JSON.parse(res.response))
          } else if (res.status === 302) {
            ELEMENT.Message.error('登录信息过期')
            return resolve(res.status)
          } else {
            if (!res.finalUrl.includes('logout')) {
              ELEMENT.Message.error(JSON.parse(res.responseText).msg)
              resolve(res.status)
            }
            // 退出接口, 删除token
            localStorage.removeItem('auditToken')
          }
        },
        onerror: (e) => reject(e),
      })
    })
  }

  var TMApp = new Vue({
    el: '#TMapp',
    data() {
      return {
        loginForm: {
          username: 'admin',
          password: '1qaz2WSX3edc',
        },
        tableHeads: [
          // { label: '异常编码', prop: 'account' },
          { label: '稽核规则名称', prop: 'auditRuleCn' },
          { label: '异常产生时间', prop: 'lastModifyTime' }, // 后台加 最后更新时间
          { label: '异常描述', prop: 'actualValue' },
          {
            label: '是否强制稽核',
            prop: 'isMandatoryAudit',
            formatter: (row) => ['否', '是'][row.isMandatoryAudit],
          },
          { label: '责任人', prop: 'responsible' },
          { label: '异常状态', prop: 'isDelete' },
        ],
        stateList: [],
        tableData: [],

        // 收集审核界面 和 查询界面的 nameList, 用于后续判断
        queryPageNameList: matchNavList_G
          .filter(({ type }) => type === 0)
          .map(({ navName }) => navName),
        auditPageNameList: matchNavList_G
          .filter(({ type }) => type === 1)
          .map(({ navName }) => navName),

        abnormalCode: '', // 点击查看具有异常的单号
        checkedParams: { state: 0 }, // 消除异常参数 1关闭异常， 0不关闭
        abnormalTextarea: '',

        isLoginShow: false, // 登录界面是否展示
        loginState: false, // 是否已经登录

        isSearchPageShow: true, // 插件界面功能区切换
        isAuditpage: false, // 当前是否是审核界面
        isAbnormalNewsShow: false, // 异常提示的表格是否显示

        isAuditButtonAndTextareaShow: false,

        publicKey: '', // 登录加密公钥
        jsEncrypt: '', // 加密

        viewShow: true, // 界面的总开关
        isDisAbledSaveBtn: null, // 是否禁用审核二级界面的保存按钮,

        monitorLoadingList: [], // 存储监听的loading的 observe 对象
      }
    },

    created() {
      this.monitorTabNav()
    },

    methods: {
      /**
       * 判断稽核状态
       */
      async startAudit(first) {
        // 判断当前插件是否登录
        this.loginState = localStorage.getItem('auditToken') ? true : false

        // 确实使用的是最新版本
        if (!isLatestVersion_G) {
          this.$message({ message: '请升级到最新版本', type: 'warning' })
          return
        }

        // 判断当前被激活的导航index
        activeNavIndex_G = this.findActiveTabIndex()

        // 在发出查询状态的接口前, 需要判断当前要收集的数据
        setFeeTypeAndPayMentType()

        // 稽核之前要判断当前是否是 可以稽核的界面
        const navNameList = matchNavList_G.map((item) => item.navName)
        if (!navNameList.includes(nowPageName_G)) {
          this.$message({
            message: '当前不是可以稽核的界面',
            type: 'warning',
          })
          return
        }

        // 获取当前所在页数
        currentPageNum_G = this.getcurrentPageNum()

        // 当处于审核界面时, 开启checkbox 的监听
        if (this.auditPageNameList.includes(nowPageName_G)) {
          this.monitorCheckboxClick()
        }

        // 当前已经存在'异常状态' 这个表头, 则清除重新生成
        if (this.isHasAbnormalStateHeader()) {
          console.log('当前存在异常状态表头, 清除重新生成')
          this.clearTableHeader('异常状态')
        }

        //  开启监听 "loading", 当处于查询界面 , 换页/查询后 自动进行稽核
        if (first && this.queryPageNameList.includes(nowPageName_G)) {
          if (!this.monitorLoadingList[activeNavIndex_G]) {
            // 使用list+当前激活的nav 的下标来区分当前界面是否存在 observe
            this.monitorLoadingList[activeNavIndex_G] = this.monitorLoading()
          }
        }

        // 审核界面是否可以通过 审核
        if (this.auditPageNameList.includes(nowPageName_G)) {
          console.log('当前是可以审核的界面')
          this.monitorAuditSelect()
        } else {
          console.log('当前不是可以审核的界面')
        }

        let encodeList = []
        // 如果是服务费则要传递的参数
        if (feeType_G === 2 && paymentType_G === 2) {
          const addressEncodeList = this.getEncodeList('站址编码')
          const businessOddList = this.getEncodeList('业务确认单号')
          const needOddList = this.getEncodeList('需求单号')
          const startTimeList = this.getEncodeList('起租表账期')
          const ListLength = startTimeList.length

          for (let i = 0; i < ListLength; i++) {
            const temp =
              addressEncodeList[i] +
              '_' +
              businessOddList[i] +
              '_' +
              needOddList[i] +
              '_' +
              startTimeList[i]
            encodeList.push(temp)
          }
          //console.log('encodeList==>', encodeList)
        } else {
          //console.log('collectEncodeType_G==>', collectEncodeType_G)
          encodeList = this.getEncodeList(collectEncodeType_G)
          //console.log('encodeList==>', encodeList)
        }
        if (!encodeList?.length) {
          this.$message.warning('当前界面不存在数据')
          return
        }
        const params = {
          businessCategory: feeType_G,
          paymentCode: 'string',
          paymentCodeList: encodeList,
          paymentType: paymentType_G,
        }
        // console.log('params==>', params)
        const res = await A_X('/cpa/plugin/queryPaymentState', JSON.stringify(params))
        console.log('res==>', res)
        // res.data.list[0].state = '异常'

        this.stateList = res.data.list
        abnormalTableIndexList_G = []
        checkTableIndexList_G = []
        // 重新检测稽核异常后, 关闭清空表格数据并关闭异常的展示
        this.tableData = []
        this.isAbnormalNewsShow = false
        this.isAuditButtonAndTextareaShow = false
        this.isAuditpage = false

        // 收集当前异常列表中的的 index
        res.data.list.forEach((item, index) => {
          if (item.state !== '正常') {
            abnormalTableIndexList_G.push(index)
          }
        })
        //console.log('abnormalTableIndexList_G==>', abnormalTableIndexList_G)

        // 将稽核状态插入表格中, 此时 active 在第几个 a 标签上, 就选中第几个 ifream
        const thead_tr_Els = window.frames[activeNavIndex_G].document.querySelectorAll(
          '.fixed-table-body #tb thead tr'
        )
        const tbody_tr_Els = window.frames[activeNavIndex_G].document.querySelectorAll(
          '.fixed-table-body #tb tbody tr'
        )

        // 当前已经存在'异常状态' 这个表头, 则清除重新生成
        if (this.isHasAbnormalStateHeader()) {
          console.log('当前存在异常状态表头, 清除重新生成')
          this.clearTableHeader('异常状态')
        }

        thead_tr_Els.forEach((trElement) => {
          const thEl = document.createElement('th')
          thEl.textContent = '异常状态' // 设置表头
          const towChildElement = trElement.children[1]
          trElement.insertBefore(thEl, towChildElement)
        })

        // 根据返回的状态, 去渲染异常的按钮
        tbody_tr_Els.forEach((trElement, index) => {
          const tdEl = document.createElement('td')
          if (this.stateList[index].state === '正常') {
            const spanElement = document.createElement('span')
            spanElement.textContent = '稽核正常'
            tdEl.appendChild(spanElement)
          } else if (this.stateList[index].state === '暂未同步') {
            const spanElement = document.createElement('span')
            spanElement.textContent = '暂未同步'
            tdEl.appendChild(spanElement)
          } else {
            const buttonElement = document.createElement('button')
            buttonElement.addEventListener('click', this.handleAbnormal)
            buttonElement.textContent = '稽核异常'
            tdEl.appendChild(buttonElement)
          }
          const towChildElement = trElement.children[1]
          trElement.insertBefore(tdEl, towChildElement)
        })
      },

      /**
       *  点击: 查看异常, 请求接口传递编码 id , 打开异常提示界面
       */
      async handleAbnormal(event) {
        // 判断当前插件是否登录
        this.loginState = localStorage.getItem('auditToken') ? true : false

        // 每次点击按钮之前 都要调用一下这两个函数， 防止页面数据出乱
        setFeeTypeAndPayMentType()
        activeNavIndex_G = this.findActiveTabIndex()

        // 如果是审核界面, 则显示勾选框
        if (['报账点电费审核', '报账点租费审核', '费用审核'].includes(nowPageName_G)) {
          this.isAuditpage = true
        } else {
          this.isAuditpage = false
        }
        this.isLoginShow = false

        const td = event.target.parentElement
        const tr = td.parentElement
        const cells = tr.getElementsByTagName('td') // 获取当前行中的所有单元格（td）

        // 获取当前 collectEncodeType_G 所在的下标,  服务费的情况为数组
        const nowRowEncodeIndex = this.getNowRowEncodeIndex()

        // 点击处理异常, 获取当前的编码 collectEncodeType_G , 发起请求
        let encodeParams = []
        if (Array.isArray(nowRowEncodeIndex)) {
          nowRowEncodeIndex.forEach((item) => {
            encodeParams.push(cells[item].textContent)
          })
          encodeParams = encodeParams.join('_')
        } else {
          encodeParams = cells[nowRowEncodeIndex].textContent
        }
        console.log('处理异常的编码encodeParams==>', encodeParams)
        this.abnormalCode = encodeParams // 存储异常单号
        const params = {
          businessCategory: feeType_G,
          paymentCode: encodeParams,
          paymentCodeList: [],
          paymentType: paymentType_G,
        }
        const res = await A_X('/cpa/plugin/queryAuditErrorList', JSON.stringify(params))
        this.tableData = res.data
        this.isAbnormalNewsShow = true
      },

      /**
       * 获取 当前行的 collectEncodeType_G 对应的 所在头部的下标, 用来去获取查询异常情况的参数。
       * 一般来说，返回一个数字 ,当是服务费时, 返回数组
       */
      getNowRowEncodeIndex() {
        const table =
          window.frames[activeNavIndex_G].document.querySelector('.fixed-table-body #tb')
        const headerRow = table.querySelector('thead tr')
        let codeCellIndex = []
        //console.log('collectEncodeType_G==>', collectEncodeType_G)
        if (feeType_G === 2) {
          // 此时返回一个数组，
          collectEncodeType_G.forEach((item) => {
            Array.from(headerRow.cells).forEach((cell, indexCell) => {
              if (cell.textContent === item) {
                codeCellIndex.push(indexCell)
              }
            })
          })
        } else {
          Array.from(headerRow.cells).forEach((cell, indexCell) => {
            if (cell.textContent === collectEncodeType_G) {
              codeCellIndex = indexCell
            }
          })
        }
        return codeCellIndex
      },

      /**
       * @param {String} headName 想要收集的数据列的表头
       * @return {Array} 数据组成的数组
       */
      getEncodeList(headName) {
        const table =
          window.frames[activeNavIndex_G].document.querySelector('.fixed-table-body #tb')

        // 获取表头中"headName"所在的列索引
        const headerRow = table.rows[0]
        let columnIndex = -1
        for (let i = 0; i < headerRow.cells.length; i++) {
          if (headerRow.cells[i].textContent === headName) {
            columnIndex = i
            break
          }
        }
        // 获取headName列下的所有数据
        const dataList = []
        try {
          if (columnIndex !== -1) {
            const bodyRows = table.tBodies[0].rows
            for (let j = 0; j < bodyRows.length; j++) {
              const cell = bodyRows[j].cells[columnIndex]
              dataList.push(cell.textContent)
            }
          }
          return dataList
        } catch (error) {
          // this.$message.error(error)
        }
      },

      /**
       * 获取加密公钥
       */
      async getPublicKey() {
        const url = '/uaa/config'
        const params = ''
        const res = await A_X(url, params)
        this.publicKey = res.data.publicKey
        this.jsEncrypt = new JSEncrypt()
        this.jsEncrypt.setPublicKey(this.publicKey)
        console.log('getPublicKey res==>', res)
      },

      /**
       * 登录， 成功之后关闭登录，打开
       */
      async login() {
        // 先去获取公钥, 然后再发送登录请求
        await this.getPublicKey()

        // 如果登录成功 , 1. 关闭登陆界面  2. 设置登陆状态已登录   3. 展示审核按钮和输入框
        const params = {
          ...this.loginForm,
          password: this.jsEncrypt.encrypt(this.loginForm.password),
        }
        try {
          const QS = Qs
          const res = await A_X('/uaa/authentication/jwt', QS.stringify(params))
          this.isLoginShow = false
          this.loginState = true
          this.isAuditButtonAndTextareaShow = true
        } catch {
          this.$message({
            message: '用户名或密码错误',
            type: 'warning',
          })
        }
      },

      /**
       * 开始审核,修改异常.
       */
      async closeAbnormal() {
        //console.log('this.checkedParams==>', this.checkedParams)
        if (!this.checkedParams.id) {
          this.$message({
            message: '请至少选择一个异常',
            type: 'warning',
          })
          return
        }
        if (!localStorage.getItem('auditToken')) {
          // 未登录则打开登陆界面, 关闭审核界面, 节省插件空间
          this.$message({
            message: '审核前, 请先登录',
            type: 'warning',
          })
          this.isLoginShow = true
          this.isAuditButtonAndTextareaShow = false
          return
        }
        this.checkedParams.describe = this.abnormalTextarea
        this.checkedParams.documentsCode = this.abnormalCode
        console.log('this.checkedParams==>', this.checkedParams)
        const QS = Qs
        const status = await A_X(
          '/cpa/pluginUpdate/updateAuditState',
          QS.stringify(this.checkedParams)
        )
        if (status === 302) {
          this.isLoginShow = true
          this.isAuditButtonAndTextareaShow = false
          return
        }
        this.startAudit()
      },

      /**
       * 收集勾选的参数
       */
      selectionChange(selection) {
        const ids = selection.map((item) => item.id).join(',')
        this.checkedParams.id = ids
        this.isAuditButtonAndTextareaShow = this.checkedParams.id ? true : false
      },

      /**
       * 监听当前的 checkbox 的点击事件, 来禁用审核按钮
       * 这个东西可以放在 '检测稽核异常' 按钮里面
       */
      monitorCheckboxClick() {
        console.log('开始监听', activeNavIndex_G)
        const checkboxes = window.frames[activeNavIndex_G].document.querySelectorAll(
          '.fixed-table-body #tb input[name="btSelectItem"]'
        )
        const that = this
        // 监听所有 btSelectItem 复选框的点击事件
        checkboxes.forEach((checkbox) => {
          checkbox.addEventListener('change', function (event) {
            // 获取勾选的数组, 去和 abnormalTableIndexList_G 比较是否有交集, 有则是存在异常
            const nowRowIndex = Number(event.target.getAttribute('data-index'))
            console.log('abnormalTableIndexList_G==>', abnormalTableIndexList_G)

            const index = checkTableIndexList_G.indexOf(nowRowIndex)
            if (index !== -1) {
              checkTableIndexList_G.splice(index, 1) // 如果存在则删除
            } else {
              checkTableIndexList_G.push(nowRowIndex) // 如果不存在则添加
            }
            console.log('checkTableIndexList_G==>', checkTableIndexList_G)

            // 是否禁用审核通过按钮
            function isBanFn(arr1, arr2) {
              console.log('that.stateList==>', that.stateList)
              const isForceLock = that.stateList[checkTableIndexList_G[0]].isForceLock || 1
              console.log('isForceLock==>', isForceLock)
              return Number(isForceLock) ? true : false
            }
            const isBan = isBanFn(checkTableIndexList_G, abnormalTableIndexList_G)
            that.isDisAbledSaveBtn = isBan
            console.log('that.isDisAbledSaveBtn==>', that.isDisAbledSaveBtn)
          })
        })
      },

      /**
       * 判断当前 导航栏 哪一个被激活了, 返回当前激活的导航栏的下标
       */
      findActiveTabIndex() {
        const tabNavContent = document.querySelector('.tab-nav-content')
        const links = tabNavContent.getElementsByTagName('a')
        for (let i = 0; i < links.length; i++) {
          if (links[i].classList.contains('active')) {
            return i + 1 // 返回索引加一，因为索引是从 0 开始的
          }
        }
        return -1
      },

      /**
       * 获取当前分页器所在的页数 currentPageNum_G
       * 并和之前的进行比较,, 判断是否发生变化, 若发生变化则去除"异常状态" 这一个表头
       */
      getcurrentPageNum() {
        // 获取具有 "active" 类名的 <li> 标签
        // 注意: 即便只有一页, 界面中分页器未展示,但还是有分页器的
        console.log('activeNavIndex_G==>', activeNavIndex_G)
        const activeListItem = window.frames[activeNavIndex_G].document.querySelector(
          '.pull-right.pagination .page-number.active'
        )
        console.log('activeListItem==>', activeListItem)
        // 获取 <a> 标签的文本内容
        const activeContent =
          activeListItem.querySelector('a')?.textContent ||
          activeListItem.querySelector('span')?.textContent

        if (activeContent !== currentPageNum_G) {
          this.clearOnlyTableHeader('异常状态')
        }
        return activeContent
      },

      /**
       * 清除插件添加的 '异常状态' 这一列数据
       */
      clearTableHeader(colName) {
        const table =
          window.frames[activeNavIndex_G].document.querySelector('.fixed-table-body #tb')
        const headerRow = table.querySelector('thead tr')

        // 查找表头中对应列的索引
        let columnIndex = -1
        Array.from(headerRow.children).forEach((th, index) => {
          if (th.textContent.trim() === colName) {
            columnIndex = index
          }
        })
        if (columnIndex !== -1) {
          // 删除表头中的对应列
          headerRow.deleteCell(columnIndex)

          // 删除每个数据行中的对应列
          const dataRows = table.querySelectorAll('tbody tr')
          dataRows.forEach((row) => {
            row.deleteCell(columnIndex)
          })
        } else {
          console.log('列名未找到')
        }
      },

      /**
       * 删除'异常状态'表头, 用于点击下一页时, 系统会自动清除数据去重新加载, 所以说此时只要删除表头即可
       */
      clearOnlyTableHeader(colName) {
        const table =
          window.frames[activeNavIndex_G].document.querySelector('.fixed-table-body #tb')
        const headerRow = table.querySelector('thead tr')

        // 查找表头中对应列的索引
        let columnIndex = -1
        Array.from(headerRow.children).forEach((th, index) => {
          if (th.textContent.trim() === colName) {
            columnIndex = index
          }
        })
        if (columnIndex !== -1) {
          // 删除表头中的对应列
          headerRow.deleteCell(columnIndex)
        } else {
          console.log('列名未找到')
        }
      },

      /**
       * 查询当前界面是否含有 '异常状态' 表头
       */
      isHasAbnormalStateHeader() {
        const table =
          window.frames[activeNavIndex_G].document.querySelector('.fixed-table-body #tb')
        const headerRow = table.querySelector('thead tr')
        const hasAbnormalHeader = Array.from(headerRow.children).some(
          (cell) => cell.innerText.trim() === '异常状态'
        )
        return hasAbnormalHeader
      },

      /**
       * 退出插件登录
       */
      async logOut() {
        if (!localStorage.getItem('auditToken')) {
          this.$message.warning('当前已经退出成功')
          return
        }
        this.$message.success('退出登录成功')

        // 界面恢复成初始的样子
        this.tableData = []
        this.isAbnormalNewsShow = false
        this.isAuditButtonAndTextareaShow = false
        this.isAuditpage = false
        // 接口报500报错, 但是无所谓了, 退出的功能和日志记录已经实现
        await A_X(urlList_G[1].url, '')
      },

      /**
       * 放大 和 缩小 界面
       */
      expandAndShrinkView() {
        const card = document.querySelector('.el-card.TMbox-card')
        if (card.classList.contains('is-zoomed')) {
          card.classList.remove('is-zoomed')
        } else {
          card.classList.add('is-zoomed')
        }
      },

      /**
       * 展开和关闭界面
       */
      toggleView() {
        this.viewShow = !this.viewShow
      },

      /**
       * 检测当前表格是否有数据
       * @returns {boolean}
       */
      checkTableData() {
        const noTrEl = window.frames[activeNavIndex_G].document.querySelector(
          '.fixed-table-body #tb tbody .no-records-found'
        )
        const trEls = window.frames[activeNavIndex_G].document.querySelectorAll(
          '.fixed-table-body #tb tbody tr'
        )
        console.log('noTrEl==>', noTrEl)
        console.log('trEls==>', trEls)

        if ((trEls.length === 1 && noTrEl) || !trEls) {
          return false
        }
        return true
      },

      /**
       * 监听 "正在加载", 达到换页后自动稽核的效果
       */
      monitorLoading() {
        console.log('生成一个 observe 对象')

        // 1. 先获取当前的ifream 中的 "ui_loading_progressBar"
        activeNavIndex_G = this.findActiveTabIndex()

        //  获取要监听的目标元素
        const loadingEl =
          window.frames[activeNavIndex_G].document.querySelector('#ui_loading_progressBar') ||
          window.frames[activeNavIndex_G].document.querySelector('.fixed-table-loading')
        console.log('loadingEl==>', loadingEl)

        // 2. 开始监听: 创建一个 MutationObserver 实例
        const observer = new MutationObserver((mutationsList) => {
          for (const mutation of mutationsList) {
            if (mutation.type === 'attributes') {
              const styleValueList = [
                'left: 50%; top: 50%; display: none;',
                'top: 42px; display: none;',
              ]
              if (styleValueList.includes(loadingEl.getAttribute(mutation.attributeName))) {
                setTimeout(() => {
                  this.startAudit()
                  console.log(`检测到style变为:${loadingEl.getAttribute(mutation.attributeName)}`)
                }, 800)
              }
            }
          }
        })
        // 配置观察选项
        const config = { attributes: true, attributeOldValue: true }

        // 开始观察目标节点
        observer.observe(loadingEl, config)
        return observer
      },

      /**
       * 判断只有当是审核界面的时候, 且点击 审核按钮后, 开始监听 select
       */
      monitorAuditSelect() {
        const auditBtnEl = window.frames[activeNavIndex_G].document.querySelector(
          '.btn-toolbar .btn.btn-primary'
        ) // # id="saveSet"

        const that = this
        function handleAuditBtnClick() {
          console.log('监听点击了审批按钮')
          // 点击审批后, 给界面一点加载的时间, 防止查询不到 标签
          // TODO : 请求加载完成之后加载. 方案: 通过使用定时执行器, 当所需dom未加载出来时, 一直循环

          // const timer = setInterval(() => {
          //   if('el元素不存在'){
          //     return
          //   }
          //   clearInterval(timer)
          // }, 1000)

          setTimeout(() => {
            const auditSelectEl =
              window.frames[activeNavIndex_G].document.querySelector(
                '.list-group.addReburseStyle .col-md-4 #checkState'
              ) ||
              window.frames[activeNavIndex_G].document.querySelector(
                '.list-group .col-md-4 #auditState'
              )
            const saveBtnEl =
              window.frames[activeNavIndex_G].document.querySelector('.btn-toolbar #saveSet') ||
              window.frames[activeNavIndex_G].document.querySelector('.btn-toolbar .btn-primary')

            console.log('saveBtnEl==>', saveBtnEl)
            console.log('auditSelectEl==>', auditSelectEl)

            // 一开始直接选择的就是 "通过", 一开始选择的通过也得禁止
            if (that.isDisAbledSaveBtn) {
              let index = auditSelectEl.selectedIndex
              let value = auditSelectEl.options[index].value
              saveBtnEl.disabled = value === '0' ? true : false
              console.log('saveBtnEl.disabled==>', saveBtnEl.disabled)
            }

            function handleSelectChange() {
              console.log('开启监听 审核界面的 select')
              let index = auditSelectEl.selectedIndex
              let value = auditSelectEl.options[index].value
              console.log('value==>', value)
              saveBtnEl.disabled = value === '0' ? true : false
              // 当 select 选中 "通过" 时候, 禁用当前界面的 保存按钮
              console.log('saveBtnEl===>', saveBtnEl)
            }
            // 当勾选到了具有异常的单据,也就是 isDisAbledSaveBtn = ture 时，则开启监听 select
            console.log('that.isDisAbledSaveBtn===>', that.isDisAbledSaveBtn)

            if (that.isDisAbledSaveBtn) {
              auditSelectEl.addEventListener('change', handleSelectChange)
            }

            // 当点击 "取消" 后,回来再次触发自动稽核
            const cancelBtnEl = window.frames[activeNavIndex_G].document.querySelector(
              '.btn-toolbar .btn.btn-default'
            )
            console.log('cancelBtnEl==>', cancelBtnEl)

            function monitorCancelBtn() {
              console.log('点击了取消按钮')
              const timer = setInterval(() => {
                const trEls = window.frames[activeNavIndex_G].document.querySelectorAll(
                  '.fixed-table-body #tb tbody tr'
                )
                console.log('trEls==>', trEls)
                if (trEls.length >= 1) {
                  that.startAudit(true)
                  console.log('关闭定时器')
                  clearInterval(timer)
                }
              }, 1000)
            }
            cancelBtnEl.addEventListener('click', monitorCancelBtn)
          }, 2000)
        }
        auditBtnEl.addEventListener('click', handleAuditBtnClick)
      },

      /**
       * 监听 nav-tab 中的 active 所在的 nav-tab 是否时可以稽核的界面
       */
      monitorTabNav() {
        const that = this
        // 获取要监听的元素
        const navTabEl = document.querySelector('.layout-main-tab .tab-nav .tab-nav-content')

        // 观察器的配置
        const config = { attributes: true, childList: true, subtree: true }
        // 当观察到变动时执行的回调函数
        const callback = function (mutationsList, observer) {
          // 遍历每一个变动
          for (var mutation of mutationsList) {
            // 如果是子节点的 class 变化
            if (mutation.type === 'childList') {
              // 遍历每一个子节点
              mutation.addedNodes.forEach(function (node) {
                // 检查类名是否发生变化
                if (node.classList.contains('active')) {
                  // 获取当前界面()
                  setFeeTypeAndPayMentType()
                  if (matchNavList_G.map((item) => item.navName).includes(nowPageName_G)) {
                    let count = 0
                    const timer = setInterval(async function () {
                      count++
                      // 当是 报账点电费查询 界面时 查询速度较慢, 则定为 15s
                      let timing = nowPageName_G === '报账点电费查询' ? 15 : 5
                      if (count >= timing) {
                        // 当5/15秒后数据还未加载出来, 则判断未为无数据, 关闭定时器
                        clearInterval(timer)
                        console.log('定时器已关闭')
                        that.$message.warning('数据超时,请手动点击稽核按钮.')
                      }
                      const isHaveTableData = that.checkTableData()
                      console.log('isHaveTableData==>', isHaveTableData)
                      // 审核界面无数据时
                      if (!isHaveTableData && that.auditPageNameList.includes(nowPageName_G)) {
                        that.$message.warning('当前界面无数据')
                        console.log('无数据')
                        clearInterval(timer)
                      }
                      console.log('执行 startAudit')
                      await that.startAudit(true)
                      console.log('关闭定时器')
                      clearInterval(timer)
                    }, 1000)
                  }
                }
              })
            }
          }
        }

        // 创建一个观察器实例并传入回调函数
        const observer = new MutationObserver(callback)

        // 以上述配置开始观察目标节点
        observer.observe(navTabEl, config)
      },
    },
  })

  /**
   * 样式: 防止类名可能冲突, 前面加上TM
   */

  // 注入样式
  let style = document.createElement('style')
  style.innerText = `
    .TMContainer{
      position: fixed;
      top: 25%;
      left: 70px;
      background-color: aliceblue;
      border-radius: 10px;
      padding: 15px;
      z-index: 99999;
      padding: 7px;
      border: 2px solid gray;
    }
    .TMbox-card {
      width: 500px;
    }
    .el-card__body{
      padding: 5px !important;
    }
    .el-card__header{
        padding:5px !important;
    }
    .is-zoomed{
        width: 100px;
        height: 100px;
    }
    .el-table .el-table__cell{
        padding: 3px 0 !important;
    }
    .el-table__header .has-gutter{
        font-size:12px;
    }
    .el-table__body-wrapper .el-table__body tbody{
        font-size:12px;
    }
  `
  document.head.appendChild(style)

  // Your code here...
})()