<template>
  <div class="flex h-full">
    <div id="luckysheet" class="flex-1"></div>

    <el-scrollbar height="100%">
      <div class="w-[420px] h-full bg-white">
        <p class="pl-2 text-lg font-bold leading-[40px] bg-slate-200">标注配置</p>

        <el-form
          ref="settingForm"
          size="small"
          :rules="rules"
          :model="formState"
          label-width="6em"
          class="comment-form pl-2 pr-2 pt-2 pb-2 border-b-2"
        >
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="区域类型" prop="excelAreaType">
                <el-select v-model="formState.excelAreaType" clearable>
                  <template v-for="item in areaTypeSelectOption" :key="item.value">
                    <el-option :label="item.label" :value="item.value"></el-option>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="区域别称" prop="excelAreaNicname">
                <el-input v-model="formState.excelAreaNicname" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-button type="primary" @click="setAreaMark('data')">设置数据区</el-button>
              <el-button type="primary" @click="setAreaMark('head')">设置标题区</el-button>
            </el-col>
          </el-row>
        </el-form>

        <div class="border-b-2 p-2 leading-7 text-sm">
          <p class="font-bold">当前标记数据区域：</p>
          <p class="text-slate-600">
            选择区域：{{
              getRangetxt(
                currentAreaMark.beginRow,
                currentAreaMark.endRow,
                currentAreaMark.beginColum,
                currentAreaMark.endColum
              )
            }}
          </p>
          <p class="text-slate-600">
            区域类型：{{ getAreaTypeText(currentAreaMark.excelAreaType) }}
          </p>
          <p class="text-slate-600">区域别称：{{ currentAreaMark.excelAreaNicname || '--' }}</p>
          <el-checkbox true-label="Y" false-label="N" v-model="currentAreaMark.oneself"
            >是否包含自身</el-checkbox
          >
          <vxe-table
            class="mb-2"
            :row-config="{ isCurrent: true }"
            border
            :data="currentAreaMark.excelAreaTitle"
            size="mini"
            height="200"
            :edit-config="{ trigger: 'click', mode: 'cell' }"
          >
            <vxe-column title="title" field="title" :edit-render="{}">
              <template #edit="{ row }">
                <el-input v-model="row.title" size="small"></el-input>
              </template>
            </vxe-column>
            <vxe-column title="单元格" field="cell" width="90">
              <template #default="{ row }">
                {{ getRangetxt(row.row, row.row, row.colum, row.colum) }}
              </template>
            </vxe-column>
          </vxe-table>
          <el-button type="primary" size="small" @click="saveAreaMark">保存</el-button>
          <el-button
            v-if="currentAreaMark.excelAreaId"
            type="default"
            size="small"
            @click="resetCurrentAreaState(true)"
            >取消修改</el-button
          >
          <el-button type="default" size="small" @click="resetCurrentArea()">重置选区</el-button>
          <el-button type="default" size="small" @click="resetCurrentHeadArea"
            >重置标题区</el-button
          >
        </div>

        <div class="mt-6 pl-2 pr-2 pb-2 text-sm border-b-2">
          <p class="font-bold">标记区域</p>
          <vxe-table
            @cell-click="cellClick"
            :row-config="{ isCurrent: true }"
            border
            :data="areaList"
            size="mini"
            height="200"
          >
            <vxe-column title="sheet" field="sheetNum" width="55"></vxe-column>
            <vxe-column title="别称" field="excelAreaNicname"></vxe-column>
            <vxe-column title="类型" field="excelAreaType_dictText" width="60"></vxe-column>
            <vxe-column title="区域" field="area" width="80">
              <template #default="{ row }">
                {{ getRangetxt(row.beginRow, row.endRow, row.beginColum, row.endColum) }}
              </template>
            </vxe-column>
            <vxe-column title="操作" field="action" width="100">
              <template #default="{ row }">
                <el-link
                  class="mr-1"
                  style="font-size: 12px"
                  type="primary"
                  @click.stop="chooseConnect(row)"
                  >关联</el-link
                >
                <el-link class="mr-1" style="font-size: 12px" type="primary" @click="toModify(row)"
                  >修改</el-link
                >
                <el-link style="font-size: 12px" type="danger" @click="delAreaMark(row)"
                  >删除</el-link
                >
              </template>
            </vxe-column>
          </vxe-table>
        </div>

        <div class="p-2 text-sm">
          <p class="font-bold">区域关联信息</p>
          <vxe-table border :data="connectList" size="mini" height="200">
            <vxe-column title="关联名称" field="excelAreaId_dictText"></vxe-column>
            <vxe-column title="别关联名称" field="excelAreaBeId_dictText"></vxe-column>
            <vxe-column title="操作" field="action" width="80">
              <template #default="{ row, $rowIndex }">
                <!-- <el-link style="font-size: 12px" type="primary" @click="toModifyConnect(row)"
                  >修改</el-link
                > -->
                <el-link style="font-size: 12px" type="danger" @click="delConnect(row, $rowIndex)"
                  >删除</el-link
                >
              </template>
            </vxe-column>
          </vxe-table>
        </div>

        <el-button type="primary" size="small" @click="toRun">执行解析</el-button>
      </div>
    </el-scrollbar>

    <vxe-modal
      width="600"
      @hide="chooseConnectOnHide"
      v-model="chooseVisible"
      title="选择被关联的区域"
      show-footer
    >
      <vxe-table ref="beConnectTable" border size="mini" :data="beConnectData" height="400">
        <vxe-column type="radio" width="40"></vxe-column>
        <vxe-column title="sheet" field="sheetNum" width="60"></vxe-column>
        <vxe-column title="别称" field="excelAreaNicname"></vxe-column>
        <vxe-column title="区域类型" field="excelAreaType_dictText" width="100"></vxe-column>
        <vxe-column title="区域" field="area" width="90">
          <template #default="{ row }">
            {{ getRangetxt(row.beginRow, row.endRow, row.beginColum, row.endColum) }}
          </template>
        </vxe-column>
      </vxe-table>

      <template #footer>
        <el-button type="primary" @click="confirmBeConnect">确认</el-button>
      </template>
    </vxe-modal>

    <vxe-modal v-model="connectVisible" width="700" title="关联信息配置" show-footer>
      <p>关联区域信息：{{ currentConnectInfo.excelAreaNicname }}</p>
      <p>被关联信息：{{ cachCurrentBeConnectInfo.excelAreaNicname }}</p>

      <vxe-table
        class="mt-2"
        size="mini"
        :data="connectConfigData"
        border
        height="400"
        ref="xTableConnect"
      >
        <vxe-column type="checkbox" width="40"></vxe-column>
        <vxe-column title="关联title" field="title"></vxe-column>
        <vxe-column title="被关联title" field="betitle">
          <template #default="{ row }">
            <el-select v-model="row.betitle" size="small" @change="(v) => changeBeConnect(v, row)">
              <template v-for="item in beConnectSelectOptions" :key="item.title">
                <el-option :value="item.title" :label="item.title"></el-option>
              </template>
            </el-select>
          </template>
        </vxe-column>
      </vxe-table>
      <template #footer>
        <el-button type="primary" @click="confirmConnect">确认</el-button>
      </template>
    </vxe-modal>

    <vxe-modal width="1200" title="解析结果" v-model="runResultVisible">
      <el-button @click="exportRunData">导出数据</el-button>
      <vxe-table ref="runDataTable" size="mini" :data="runResultData" border height="600">
        <vxe-column title="行号" field="sortNum" width="120"></vxe-column>
        <template v-for="item in runResultTitle" :key="item">
          <vxe-column :title="item" :field="item" width="120"></vxe-column>
        </template>
      </vxe-table>
    </vxe-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, reactive, unref, computed, watch } from 'vue'
import LuckyExcel from 'luckyexcel'
import {
  areaMarksColor,
  authorityConfig,
  cellRightClickConfig,
  sheetRightClickConfig,
  showsheetbarConfig,
  showstatisticBarConfig
} from '@/constants/excelConfig'
import { flatten, cloneDeep } from 'lodash-es'
import { useCommentExcel } from '@/stores/commentExcel'
import { storeToRefs } from 'pinia'
import { isFunction } from '@/utils/is'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import {
  addExcelArea,
  addExcelAreaConnect,
  editExcelArea,
  excelMarkRun,
  getExcelAreaByFileId,
  getExcelConnectByFileId,
  removeExcelArea,
  removeExcelAreaConnect
} from '@/api/excel'
import type { Recordable } from '@/types/global'
import { getRangetxt } from '@/utils/excel'
import type { VxeTableInstance } from 'vxe-table'
import { apiDictFindById, apiDictList } from '@/api/common'

const settingForm = ref<FormInstance>()
const rules = reactive({
  excelAreaNicname: [{ required: true, message: '请输入区域别称！', trigger: 'change' }],
  excelAreaType: [{ required: true, message: '请选择区域类型！', trigger: 'change' }]
})
const connectVisible = ref(false)
const xTableConnect = ref<VxeTableInstance>()
const beConnectTable = ref<VxeTableInstance>()
const luckysheet = (window as any).luckysheet
const commentExcelStore = useCommentExcel()
const { getFileInfo } = storeToRefs(commentExcelStore)
const connectList = ref<any[]>([])
const chooseVisible = ref(false)
const areaTypeSelectOption = ref<any[]>([])
const currentConnectInfo = reactive<Recordable>({
  excelAreaConnectId: '',
  excelAreaId: '',
  excelAreaBeId: '',
  connectFiled: [],
  beConnectFiled: [],
  fileId: ''
})
const runDataTable = ref<VxeTableInstance>()
const cachCurrentConnectInfo = reactive<Recordable>({})
const cachCurrentBeConnectInfo = reactive<Recordable>({})
const beConnectData = computed(() => {
  /**
   * 如果公共区域 和 附加区域关联 只能关联 数据区域
   *
   * 并且数据区不能关联数据区
   */
  if (cachCurrentConnectInfo.excelAreaType == 'data_area') {
    return areaList.value
      .filter((v) => v.excelAreaType != 'data_area')
      .filter((v: any) => v.excelAreaId != currentConnectInfo.excelAreaId)
  } else {
    return areaList.value
      .filter((v) => v.excelAreaType == 'data_area')
      .filter((v: any) => v.excelAreaId != currentConnectInfo.excelAreaId)
  }
})
const formState = reactive({
  // excelAreaId: '',
  fileId: '',
  sheetNum: 0,
  beginRow: '',
  beginColum: '',
  endRow: '',
  endColum: '',
  excelAreaType: '',
  excelAreaNicname: ''
})

watch(
  () => formState.excelAreaType,
  (val) => {
    formState.excelAreaNicname = val
      ? areaTypeSelectOption.value.find((v) => v.value == val).label +
        (areaList.value.filter((v) => v.excelAreaType == val).length + 1)
      : ''
  }
)
const isSetSheetMark = ref<any>([])
const initIsSetSheetMark = (length: number) => {
  isSetSheetMark.value = Array.from({ length }).fill(false)
}

/**
 * 存储在本地的区域标记
 * locaExcelAreaMarks = {
 *  '0': [formState, formState]
 * }
 */
const locaExcelAreaMarks: Recordable = reactive({})
const areaList = computed(() => flatten(Object.values(locaExcelAreaMarks)))

const initExcelAreaMarksKey = (len: number) => {
  Array.from({ length: len }).forEach((item, index) => {
    Reflect.set(locaExcelAreaMarks, index, [])
  })
}

const exportRunData = () => {
  runDataTable.value?.exportData({ type: 'csv' })
}

const setSheetAuthority = (exportJson: any) => {
  exportJson.sheets.forEach((sheet: any) => {
    // 工作表格权限
    sheet.config.authority = authorityConfig
    // 单元格锁定
    sheet.celldata.forEach((item: any) => {
      item.v.lo = 1
    })
  })
}

const cellClick = ({ row }) => {
  // 判断是否是当前sheet页标记
  const sheet = luckysheet.getSheet()
  if (sheet.order != row.sheetNum) {
    luckysheet.setSheetActive(row.sheetNum)
  }
  luckysheet.scroll({
    targetRow: row.beginRow - 3 < 0 ? 0 : row.beginRow - 3,
    targetColumn: row.beginColum - 3 < 0 ? 0 : row.beginColum - 3
  })
  setTimeout(() => {
    luckysheet.setRangeShow({
      row: [row.beginRow, row.endRow],
      column: [row.beginColum, row.endColum]
    })
  }, 100)
}

const currentAreaMark = reactive<Recordable>({
  oneself: 'N',
  excelAreaTitle: []
})

// const currentHeadAreaData = ref([])

// watch(
//   () => currentAreaMark.excelAreaTitle,
//   (val) => {
//     currentHeadAreaData.value = val || []
//   },
//   {
//     deep: true
//   }
// )
// const currentHeadAreaData = computed(() => currentAreaMark?.excelAreaTitle || [])
const setAreaMark = async (type: 'data' | 'head' = 'data') => {
  if (type === 'data') {
    /**
     * 判断是否有未保存的区域
     * 如果有未保存的标记 -> 提示用户，是否覆盖
     */

    // 验证表单
    await settingForm.value?.validate()

    if (currentAreaMark.beginRow !== '' && currentAreaMark.beginRow !== undefined) {
      await ElMessageBox.confirm('检测到未保存的标记，是否在覆盖当前标记区域？', '提示消息', {
        confirmButtonText: '覆盖',
        cancelButtonText: '取消'
      })
      resetCurrentArea(() => {
        // 设置当前选区
        luckysheet.setRangeShow({
          row: [formState.beginRow, formState.endRow],
          column: [formState.beginColum, formState.endColum]
        })
      })
    }

    Object.assign(currentAreaMark, unref(formState))
    // 设置完成之后重置表单
    settingForm.value?.resetFields(['excelAreaType', 'excelAreaNicname'])
  } else {
    // 判断是否在同一sheet
    if (formState.sheetNum !== currentAreaMark.sheetNum) {
      return ElMessage.error('请在同一sheet页中选择数据！')
    }

    /**
     * 组装数据
     * 判断选择的 head区域 是否在数据区域 内部
     * 判断是否有重复的单元格添加，如有重复无需添加此单元格
     */
    const result = []
    const rangeData = luckysheet.getRangeValue()
    const { beginColum, beginRow, endColum, endRow } = formState as Recordable
    const { beginColum: bc, beginRow: br, endColum: ec, endRow: er } = currentAreaMark
    // 判断所在区域，和位置，选择的单元格，只能在数据区边缘
    if (beginColum == endColum) {
      // 一列
      if (beginRow != br && endRow != er) {
        luckysheet.setRangeShow({
          row: [br, er],
          column: [bc, ec]
        })
        return ElMessage.error('请在当前区域选择标题区！')
      }
    } else if (beginRow == endRow) {
      // 一行
      if (beginColum != bc && endColum != ec) {
        luckysheet.setRangeShow({
          row: [br, er],
          column: [bc, ec]
        })
        return ElMessage.error('请在当前区域选择标题区！')
      }
    }

    for (let i = beginRow, r = 0; i <= endRow; i++) {
      for (let k = beginColum, c = 0; k <= endColum; k++) {
        result.push({
          title: rangeData[r][c].v || rangeData[r][c].ct.s[0].v,
          sheet: formState.sheetNum,
          row: i,
          colum: k
        })
        c++
      }
      r++
    }

    // 合并组装的表头区域数据
    currentAreaMark.excelAreaTitle
      ? currentAreaMark.excelAreaTitle.push(...result)
      : (currentAreaMark.excelAreaTitle = result)
  }

  setTimeout(() => {
    // 设置区域颜色
    luckysheet.setRangeFormat('bg', areaMarksColor[type])
  }, 100)
}
const resetCurrentAreaState = (isedit: boolean = false) => {
  // 重置 其他属性
  const tmp: Recordable = {
    sheetNum: 0,
    beginRow: '',
    beginColum: '',
    endRow: '',
    endColum: '',
    excelAreaType: '',
    excelAreaNicname: '',
    excelAreaTitle: [],
    oneself: 'N'
  }
  isedit && (tmp.excelAreaId = '')
  Object.assign(currentAreaMark, tmp)
}
const resetCurrentArea = (fn?: Function) => {
  // 清除区域颜色
  luckysheet.setRangeShow(
    {
      row: [currentAreaMark.beginRow, currentAreaMark.endRow],
      column: [currentAreaMark.beginColum, currentAreaMark.endColum]
    },
    {
      show: false,
      success: () => {
        luckysheet.setRangeFormat('bg', areaMarksColor['default'])
        resetCurrentAreaState()
        fn && fn()
      }
    }
  )
}
const resetCurrentHeadArea = () => {
  // 清除标题区域颜色 -> 设置成数据区域颜色
  luckysheet.setRangeShow(
    {
      row: [currentAreaMark.beginRow, currentAreaMark.endRow],
      column: [currentAreaMark.beginColum, currentAreaMark.endColum]
    },
    {
      show: false,
      success: () => {
        luckysheet.setRangeFormat('bg', areaMarksColor['data'])
        // 删除 excelAreaTitle 属性
        delete currentAreaMark.excelAreaTitle
      }
    }
  )
}

const saveAreaMark = async () => {
  currentAreaMark.fileId = getFileInfo.value.orderFileId
  // 如果有id 调用修改，否则调用新增
  const isEdit = !!currentAreaMark.excelAreaId
  const { data } = isEdit
    ? await editExcelArea(currentAreaMark)
    : await addExcelArea(currentAreaMark)
  // 接口保存成功之后，保存/更新 locaExcelAreaMarks
  if (isEdit) {
    const idx = locaExcelAreaMarks[cachAreaMark.sheetNum].findIndex(
      (v) => v.excelAreaId == cachAreaMark.excelAreaId
    )
    locaExcelAreaMarks[cachAreaMark.sheetNum].splice(idx, 1, cloneDeep(currentAreaMark))
  } else {
    locaExcelAreaMarks[currentAreaMark.sheetNum].push(data.result)
  }
  ElMessage.success('操作成功！')
  resetCurrentAreaState(true)
}

const cachAreaMark = reactive<Recordable>({})
const cachDelOtherSheetArea = reactive<Recordable>({})
const delAreaMark = async (row: any) => {
  // 判断当前区域是否关联了其他区域
  if (
    connectList.value.find(
      (v) => row.excelAreaId == v.excelAreaId || row.excelAreaId == v.excelAreaBeId
    )
  ) {
    return ElMessage.warning('当前区域绑定与其他区域绑定了关联信息，请先删除关联信息之后再做修改！')
  }
  // 调用接口删除
  await removeExcelArea(row.excelAreaId)
  const sheet = luckysheet.getSheet()
  /**
   * 如果在本sheet那么直接删除，并且改变区域颜色
   * 如果不在当前sheet，保存删除的数据，在切换sheet的hook中删除颜色
   */
  if (row.sheetNum == sheet.order) {
    const range: Recordable = {
      row: [row.beginRow, row.endRow],
      column: [row.beginColum, row.endColum]
    }
    luckysheet.setRangeShow(range)
    setTimeout(() => {
      luckysheet.setRangeFormat('bg', areaMarksColor['default'])
    }, 100)
  } else {
    // 保存本地
    if (!Reflect.has(cachDelOtherSheetArea, row.sheetNum)) {
      cachDelOtherSheetArea[row.sheetNum] = []
    }
    cachDelOtherSheetArea[row.sheetNum].push(row)
  }

  // 删除本地标记 locaExcelAreaMark[row.sheetNum] 对应的区域
  const index = locaExcelAreaMarks[row.sheetNum].findIndex(
    (item: any) => item.excelAreaId == row.excelAreaId
  )
  locaExcelAreaMarks[row.sheetNum].splice(index, 1)
}
const toModify = (row) => {
  // 判断当前区域是否关联了其他区域
  if (
    connectList.value.find(
      (v) => row.excelAreaId == v.excelAreaId || row.excelAreaId == v.excelAreaBeId
    )
  ) {
    return ElMessage.warning('当前区域绑定与其他区域绑定了关联信息，请先删除关联信息之后再做修改！')
  }

  Object.assign(cachAreaMark, cloneDeep(row))
  Object.assign(currentAreaMark, row)
}
const queryArea = async () => {
  const { data } = await getExcelAreaByFileId(getFileInfo.value.orderFileId)
  data.result.forEach((item: any) => locaExcelAreaMarks[item.sheetNum || 0].push(item))
}
const toModifyConnect = (row: any) => {
  Object.assign(currentConnectInfo, row)
  connectVisible.value = true
}
const confirmConnect = () => {
  /**
   * 1. 验证是否选择了要关联的title
   * 2. 验证选择的title是否有被关联的title
   * 3. 添加关联关系
   */

  const list = xTableConnect.value?.getCheckboxRecords()
  if (!list?.length) {
    if (
      cachCurrentConnectInfo.excelAreaType == 'attach_area' ||
      cachCurrentBeConnectInfo.excelAreaType == 'attach_area'
    ) {
      return ElMessage.warning('请选择关联的字段！')
    }
    addConnect([])
    return
  }

  try {
    list.forEach((item) => {
      if (!item.betitle) {
        throw new Error('请选择被关联的title！！')
      }
    })
  } catch (e: any) {
    ElMessage.warning(e.message)
  }

  addConnect(list)
}
const addConnect = async (list: any) => {
  list.forEach((item: any) => {
    currentConnectInfo.connectFiled.push({
      title: item.title,
      sheet: item.sheet,
      row: item.row,
      colum: item.colum
    })

    currentConnectInfo.beConnectFiled.push({
      title: item.betitle,
      sheet: item.besheet,
      row: item.berow,
      colum: item.becolum
    })
  })
  currentConnectInfo.fileId = getFileInfo.value.orderFileId

  const { data } = await addExcelAreaConnect(currentConnectInfo)

  if (!data?.success) {
    ElMessage.error(data?.message || '操作失败！')
    return
  }
  ElMessage.success('添加成功！')
  connectVisible.value = false
  // 添加成功 手动更新页面数据
  connectList.value.push(data.result)
}
const chooseConnect = (row: any) => {
  currentConnectInfo.excelAreaId = row.excelAreaId
  Object.assign(cachCurrentConnectInfo, unref(row))
  chooseVisible.value = true
}

const connectConfigData = ref([])
const beConnectSelectOptions = computed(
  () =>
    areaList.value.find((v: any) => v.excelAreaId == currentConnectInfo.excelAreaBeId)
      ?.excelAreaTitle || []
)
watch(connectVisible, (val) => {
  if (val) {
    const titles = areaList.value.find((v: any) => v.excelAreaId == currentConnectInfo.excelAreaId)
      ?.excelAreaTitle

    connectConfigData.value = titles.map((item: any) => {
      return {
        title: item.title,
        sheet: item.sheet,
        row: item.row,
        colum: item.colum,
        betitle: '',
        berow: '',
        becolum: '',
        besheet: ''
      }
    })
  }
})
const changeBeConnect = (v: string, row: any) => {
  const option = beConnectSelectOptions.value.find((item: any) => item.title == v)
  console.log('option', option)
  row.becolum = option.colum
  row.besheet = option.sheet
  row.berow = option.row
  row.betitle = option.title
}
const confirmBeConnect = () => {
  const data = beConnectTable.value?.getRadioRecord()
  if (!data) {
    return ElMessage.warning('请选择有效数据！')
  }
  Object.assign(cachCurrentBeConnectInfo, unref(data))
  currentConnectInfo.excelAreaBeId = data.excelAreaId

  // 如果是附加区域，那么直接关联
  if (
    cachCurrentConnectInfo.excelAreaType == 'attach_area' ||
    data.excelAreaType == 'attach_area'
  ) {
    return addConnect([]).then(() => {
      chooseVisible.value = false
    })
  }

  // 打开关联弹窗。
  chooseVisible.value = false
  connectVisible.value = true
}
const chooseConnectOnHide = () => {
  Object.assign(currentConnectInfo, {
    // excelAreaConnectId: '',
    // excelAreaId: '',
    // excelAreaBeId: '',
    connectFiled: [],
    beConnectFiled: []
    // fileId: ''
  })
}
const delConnect = async (row: any, index: number) => {
  const { data } = await removeExcelAreaConnect(row.excelAreaConnectId)
  if (data?.success) {
    ElMessage.success('删除成功！')
  }
  // 手动删除
  connectList.value.splice(index, 1)
}
const queryConnectList = async () => {
  const { data } = await getExcelConnectByFileId(getFileInfo.value.orderFileId)
  connectList.value = data.result
}
const loadExcel = () => {
  LuckyExcel.transformExcelToLuckyByUrl(
    '/api/sys/static/' + getFileInfo.value.mergeFilePath,
    new Date().getTime() + '.xlsx',
    async (exportJson: any) => {
      console.log('---exportJson', exportJson)
      initIsSetSheetMark(exportJson.sheets.length)
      initExcelAreaMarksKey(exportJson.sheets.length)

      // 查询区域标记
      await queryArea()

      setSheetAuthority(exportJson)
      isFunction((window as any)?.luckysheet?.destroy) && luckysheet.destroy()
      luckysheet.create({
        container: 'luckysheet', //luckysheet is the container id
        showinfobar: false,
        showtoolbar: false,
        showsheetbar: false,
        showsheetbarConfig,
        cellRightClickConfig,
        sheetRightClickConfig,
        showstatisticBarConfig,
        data: exportJson.sheets,
        title: exportJson.info.name,
        userInfo: exportJson.info.name.creator,
        hook: {
          sheetMouseup: (c: any, p: any, sheet: any, status: any) => {
            console.log('c,p,sheet,status-----', c, p, sheet, status)
            // 选择的区域
            if (sheet.luckysheet_select_save.length === 1) {
              const [selected] = sheet.luckysheet_select_save
              const [beginRow, endRow] = selected.row
              const [beginColum, endColum] = selected.column

              formState.sheetNum = +sheet.order
              formState.beginColum = beginColum
              formState.beginRow = beginRow
              formState.endColum = endColum
              formState.endRow = endRow
            }
          },
          sheetActivate: (index: any) => {
            const sheet = luckysheet.getSheet({ index })
            if (!!isSetSheetMark.value[sheet.order]) {
              return
            }
            isSetSheetMark.value[sheet.order] = true
            console.log(isSetSheetMark, locaExcelAreaMarks)

            if (locaExcelAreaMarks[sheet.order].length) {
              locaExcelAreaMarks[sheet.order].forEach((item: any) => {
                // 设置数据区标记
                setTimeout(() => {
                  luckysheet.menuButton.customUpdateFormat(
                    null,
                    'bg',
                    areaMarksColor['data'],
                    item.beginRow,
                    item.endRow,
                    item.beginColum,
                    item.endColum,
                    false
                  )
                }, 50)
                if (item.excelAreaTitle.length) {
                  item.excelAreaTitle.forEach((cell: any) => {
                    // 设置数据区head标记
                    setTimeout(() => {
                      luckysheet.menuButton.customUpdateFormat(
                        null,
                        'bg',
                        areaMarksColor['head'],
                        cell.row,
                        cell.row,
                        cell.colum,
                        cell.colum,
                        false
                      )
                    }, 50)
                  })
                }
              })
            }
          },
          workbookCreateAfter: () => {
            // 修改当前sheet 已经标记
            isSetSheetMark.value[0] = true

            // 判断本地是否有第一个sheet页的标记
            if (locaExcelAreaMarks[0].length) {
              locaExcelAreaMarks[0].forEach((item: any) => {
                // 设置数据区标记
                luckysheet.menuButton.customUpdateFormat(
                  null,
                  'bg',
                  areaMarksColor['data'],
                  item.beginRow,
                  item.endRow,
                  item.beginColum,
                  item.endColum,
                  false
                )
                if (item.excelAreaTitle.length) {
                  item.excelAreaTitle.forEach((cell: any) => {
                    // 设置数据区head标记
                    // luckysheet.setCellValue()
                    luckysheet.menuButton.customUpdateFormat(
                      null,
                      'bg',
                      areaMarksColor['head'],
                      cell.row,
                      cell.row,
                      cell.colum,
                      cell.colum,
                      false
                    )
                  })
                }
              })
            }
          }
        }
      })
    }
  )
}

const queryDict = async (code: string) => {
  const { data } = await apiDictList({
    dictCodes: code
  })
  areaTypeSelectOption.value = data.result[code]
}
const getAreaTypeText = (value: string) => {
  const item = areaTypeSelectOption.value.find((v) => v.value == value)
  return item?.label || '--'
}

const runResultData = ref([])
const runResultTitle = ref([])
const runResultVisible = ref(false)
const toRun = async () => {
  const { data } = await excelMarkRun(getFileInfo.value.orderFileId)
  if (data?.code != 200) {
    ElMessage.error(data?.message || '操作失败！')
    return
  }
  if (!data.result.length) return
  runResultData.value = data.result
  runResultTitle.value = Object.keys(data.result[0])
  const idx = runResultTitle.value.findIndex((v) => v == 'sortNum')
  runResultTitle.value.splice(idx, 1)
  runResultVisible.value = true
}
onMounted(() => {
  loadExcel()
  queryConnectList()
  queryDict('excel_area_type')
})
onUnmounted(() => {
  isFunction((window as any)?.luckysheet?.destroy) && luckysheet.destroy()
})
</script>
<style lang="scss" scoped>
.comment-form {
  .el-form-item--small {
    margin-bottom: 15px;
  }
}
</style>
