<template>
  <div class="w-full h-full bg-white p-4">
    <p class="font-bold text-lg leading-10 border-b-2">解析列表</p>
    <el-form class="pt-4" :inline="true" :model="queryParams">
      <!-- <el-form-item label="文件名称">
        <el-input v-model="queryParams.excelOrderId" placeholder="" clearable />
      </el-form-item> -->
      <el-form-item label="订单状态">
        <el-select v-model="queryParams.status" placeholder="" clearable>
          <template v-for="item in statusOptions">
            <el-option :value="item.value" :label="item.label"></el-option>
          </template>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="default" @click="onReset">重置</el-button>
        <el-button type="primary" @click="onQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <div class="">
      <vxe-toolbar>
        <template #buttons>
          <el-button type="danger" @click="removeRows">删除</el-button>
        </template>
      </vxe-toolbar>
      <vxe-table
        ref="xTable"
        size="small"
        min-height="460"
        show-overflow="tooltip"
        border
        :loading="loading"
        :data="tableData"
      >
        <vxe-column type="checkbox" width="50"></vxe-column>
        <vxe-column field="fileId_dictText" title="文件名称">
          <template #default="{ row }">
            <el-link target="_blank" :href="'/preview-excel?fileId=' + row.fileId">{{
              row.fileId_dictText
            }}</el-link>
          </template>
        </vxe-column>
        <vxe-column field="status_dictText" title="订单状态" width="120"></vxe-column>
        <vxe-column field="createTime" title="创建时间" width="180"></vxe-column>
        <vxe-column field="action" title="操作" width="120">
          <template #default="{ row }">
            <el-link style="font-size: 12px" type="primary" @click="toDetail(row)">查看</el-link>
            <el-link
              class="ml-1"
              style="font-size: 12px"
              type="primary"
              v-if="row.status == 'un_convert'"
              @click="confirmChange(row)"
              >转换</el-link
            >
            <el-link
              class="ml-1"
              style="font-size: 12px"
              v-if="row.status == 'un_confirm' || row.status == 'converted'"
              type="primary"
              @click="confirmOrderStatus(row)"
              >确认</el-link
            >
          </template>
        </vxe-column>
      </vxe-table>

      <vxe-pager
        size="small"
        background
        v-model:current-page="queryParams.currentPage"
        v-model:page-size="queryParams.pageSize"
        :total="queryParams.total"
        @page-change="onQuery"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump', 'Total']"
      >
      </vxe-pager>
    </div>
  </div>

  <vxe-modal v-model="detailVisible" title="解析详情" width="80%" show-footer>
    <vxe-table
      border
      size="mini"
      height="500"
      show-overflow="tooltip"
      show-header-overflow="tooltip"
      :data="detailTable"
    >
      <vxe-column title="行号" width="120">
        <template #default="{ row }">{{ row.sortNum }}</template>
      </vxe-column>
      <vxe-column title="数据区" width="120">
        <template #default="{ row }">{{ row['数据区'] }}</template>
      </vxe-column>

      <!-- 查看状态下直接显示 -->
      <template v-if="currentRow.status == 'un_confirm'">
        <vxe-column
          v-for="item in tableTitle"
          :key="item"
          :title="item"
          :field="item"
          width="200"
        />
      </template>

      <!-- 转换下使用 -->
      <template v-else>
        <vxe-colgroup v-for="item in tableTitle" :key="item" :title="item">
          <vxe-column :title="item" :field="item" width="200">
            <template #header>
              <div class="header-cell" @click="(e) => showPopover(e, item)">
                <span>{{ allMapConfigs[item]?.orderFiled.fliedTitle || '' }}</span>
                <el-icon v-if="currentRow.status == 'un_convert'"><Setting /></el-icon>
              </div>
            </template>
          </vxe-column>
        </vxe-colgroup>
      </template>
    </vxe-table>

    <el-popover
      ref="popoverRef"
      placement="bottom"
      :virtual-ref="buttonRef"
      trigger="click"
      :title="currentConfigTitle"
      :visible="popoverVisible"
      virtual-triggering
      width="360"
      transition=""
    >
      <el-form size="small" label-width="7em" inline :model="currentConfigColumn">
        <el-row>
          <el-col :span="24">
            <el-form-item label="对应字段" prop="mapField">
              <el-select
                v-model="currentConfigColumn.mapField"
                style="width: 220px"
                filterable
                placeholder="请选择"
                :teleported="false"
                clearable
              >
                <el-option-group v-for="group in allFields" :key="group.label" :label="group.label">
                  <el-option
                    v-for="item in group.options"
                    :key="item.filedName"
                    :label="item.fliedTitle"
                    :value="item.filedName"
                    :disabled="!!item.disabled"
                  />
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="currentConfigColumn.mapField">
            <el-form-item label="脚本">
              <el-select
                style="width: 220px"
                v-model="currentConfigColumn.scriptName"
                :teleported="false"
                clearable
              >
                <el-option
                  v-for="item in scriptList"
                  :key="item.srciptName"
                  :value="item.srciptName"
                  :label="item.srciptName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <template v-for="params in currentScriptParamsList" :key="params.fliedTitle">
            <el-col :span="24">
              <el-form-item :label="params.fliedTitle">
                <el-input v-model="scriptPs[params.filedName]" style="width: 220px" />
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="24" v-if="currentConfigColumn.scriptName && !!currentConfigColumn.content">
            <el-form-item label="脚本语句">
              <el-input
                style="width: 220px"
                rows="3"
                disabled
                type="textarea"
                v-model.trim="currentConfigColumn.content"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="confirmConfig">确认</el-button>
          <el-button type="primary" @click="popoverVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-popover>

    <template #footer>
      <!-- <el-button @click="confirmChange" v-if="currentRow.status == 'un_convert'">确认转换</el-button> -->
      <el-button @click="saveOrderField" v-if="currentRow.status == 'un_convert'" type="primary"
        >保存</el-button
      >
    </template>
  </vxe-modal>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { Setting } from '@element-plus/icons-vue'
import { cloneDeep } from 'lodash-es'
import {
  confirmExcelFileOrderById,
  convertExcelFileOrder,
  deleteExcelFileOrderById,
  getExcelFileOrderPage,
  unconvertExcelFileOrder,
  getConfByExcelOrderId,
  saveConfExcelFileOrderPage
} from '@/api/order'
import { ElMessage, ElMessageBox, ClickOutside as vClickOutside } from 'element-plus'
import type { VxeTableInstance } from 'vxe-table'
import type { Recordable } from '@/types/global'
import { filterRunData } from '@/utils/excel'
import { apiGetOrderField, apiGetScript, getVariableField } from '@/api/excel'
import { apiDictList } from '@/api/common'

const loading = ref(false)
/**查询参数 */
const queryParams = reactive({
  status: '',
  currentPage: 1,
  pageSize: 10,
  total: 0,
  column: 'createTime',
  order: 'desc'
})

/**所有列映射配置 */
const allMapConfigs = ref<Recordable>({})
const effectConfigs = computed(() => {
  return Object.values(allMapConfigs.value).filter((item) => item.title != '')
})
/**当前表单映射字段配置 */
const currentConfigColumn = reactive({
  title: '',
  content: '',
  mapField: '',
  scriptName: '',
  groupTitle: '',
  templateFileId: '',
  excelOrderFiledConfId: '',
  params: {},
  orderFiled: {}
})
const currentConfigTitle = ref('')

const scriptPs = ref<Recordable>({})
/**所有脚本 */
const scriptList = ref<Recordable[]>([])
/**所有映射字段 */
const orderFieldList = ref<Recordable[]>([])
const variableField = ref([])

const xTable = ref<VxeTableInstance>()
const tableData = ref([])
/**当前选择行 */
const currentRow = reactive<Recordable>({})
/**弹窗显示 */
const detailVisible = ref(false)
/**详情表格数据 */
const detailTable = ref<Recordable[]>([])
/**表格title */
const tableTitle = ref<string[]>([])

const statusOptions = ref([])

const queryDict = async (code: string) => {
  const { data } = await apiDictList({
    dictCodes: code
  })
  statusOptions.value = data.result[code]
}

const popoverRef = ref()
const buttonRef = ref()
const popoverVisible = ref(false)
const showPopover = (e: any, title: string, groupTitle: string = '') => {
  if (currentRow.status != 'un_convert') {
    return
  }
  buttonRef.value = e.target
  const t = groupTitle ? `${groupTitle}-${title}` : title
  // 设置标题
  currentConfigTitle.value = t

  Object.assign(currentConfigColumn, { ...allMapConfigs.value[t], title, groupTitle })
  // 打开popover
  popoverVisible.value = true
}

/**监听popover和modal显示状态。重置表单信息 */
watch([detailVisible, popoverVisible], (val) => {
  // 关闭弹窗或者关闭popover
  if (val.includes(false)) {
    // 解决关闭弹窗之后，popover未关闭情况
    popoverVisible.value = false
    // 重置表单
    resetConfigForm()
  }
})

/**监听currentConfigColumn.mapField字段，重置/设置 orderFiled */
watch(
  () => currentConfigColumn.mapField,
  (val) => {
    // 如果有值设置 currentConfigColumn.orderFiled字段
    if (val) {
      let item = orderFieldList.value.find((v) => v.filedName == val)
      if (!item) {
        item = variableField.value.find((v) => v.filedName == val)
      }
      Reflect.set(currentConfigColumn, 'orderFiled', item)
    } else {
      Reflect.set(currentConfigColumn, 'orderFiled', {})
      Reflect.set(currentConfigColumn, 'scriptName', '')
      Reflect.set(currentConfigColumn, 'content', '')
    }
  }
)

const allFields = computed(() => {
  return [
    {
      label: '普通字段',
      options: orderFieldList.value.map((item) => {
        return {
          ...item,
          disabled: effectConfigs.value.some((v) => v.mapField == item.filedName)
        }
      })
    },
    {
      label: '变量字段',
      options: variableField.value.map((item) => {
        return {
          ...item,
          disabled: effectConfigs.value.some((v) => v.mapField == item.filedName)
        }
      })
    }
  ]
})

/**重置popover配置表单 */
const resetConfigForm = () => {
  Object.assign(currentConfigColumn, {
    title: '',
    content: '',
    mapField: '',
    scriptName: '',
    groupTitle: '',
    templateFileId: '',
    excelOrderFiledConfId: ''
  })
}

/** 脚本参数List */
const currentScriptParamsList = computed(() => {
  const item: any = scriptList.value.find((v) => v.srciptName == currentConfigColumn.scriptName)
  Reflect.set(currentConfigColumn, 'content', item?.scriptContent || '')
  // 生成脚本参数表单
  gScriptPs(item?.paramsName)
  return item?.paramsName != null ? item.paramsName : []
})

/**通过选中的脚本生成脚本配置表单 */
const gScriptPs = (scriptNames: null | Recordable[] | undefined) => {
  // 如果没有配置参数，清空脚本表单
  if (scriptNames == null && scriptNames == undefined) {
    scriptPs.value = {}
  } else {
    // 查询是否有已经设置过的值
    const { title, groupTitle } = currentConfigColumn
    const t = groupTitle ? `${groupTitle}__${title}` : title
    const params = allMapConfigs.value[t].params
    scriptNames.forEach((item) => {
      Reflect.set(scriptPs.value, item.filedName, params[item.filedName] || '')
    })
  }
}

/** 保存字段映射及脚本的配置 */
const confirmConfig = () => {
  // 合并脚本参数
  Reflect.set(currentConfigColumn, 'params', scriptPs.value)
  Reflect.set(currentConfigColumn, 'templateFileId', currentRow.templateFileId)
  // 处理标题
  const { title, groupTitle } = currentConfigColumn

  // 保存本地配置
  title && Reflect.set(allMapConfigs.value, title, cloneDeep(currentConfigColumn))

  // 关闭popover
  popoverVisible.value = false
  console.log('allMapConfigs.value', allMapConfigs.value)
}

const getScriptList = async () => {
  const { data } = await apiGetScript()
  scriptList.value = data.result
}
const getOrderFields = async () => {
  const { data } = await apiGetOrderField()
  orderFieldList.value = data.result
}

const getOrderVariableField = async () => {
  const { data } = await getVariableField(currentRow.excelOrderId)
  if (data.code != 200) {
    ElMessage.warning(data.message)
  }
  variableField.value = data.result || []
}

/**确认解析/转换的订单的状态 */
const confirmOrderStatus = async (row: any) => {
  if (row.status === 'un_confirm') {
    await ElMessageBox.confirm('是否确认解析后的订单？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
    const { data } = await unconvertExcelFileOrder(row.excelOrderId)
    if (data.code == 200) {
      ElMessage.success(data.message || '操作成功！')
    } else {
      ElMessage.error(data.message || '操作失败')
    }
  } else if (row.status == 'converted') {
    await ElMessageBox.confirm('是否确认转换后的订单？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })

    const { data } = await confirmExcelFileOrderById(row.excelOrderId)
    if (data.code == 200) {
      ElMessage.success(data.message || '操作成功！')
    } else {
      ElMessage.error(data.message || '操作失败！')
    }
  }

  onQuery()
}

/**保存订单字段 */
const saveOrderField = async () => {
  const params = {
    templateFileId: currentRow.templateFileId,
    confs: Object.values(allMapConfigs.value).filter((v) => {
      if (v.title !== '') {
        v.templateFileId = currentRow.templateFileId
        return true
      }
      return false
    })
  }

  saveConfExcelFileOrderPage(params).then(({ data }) => {
    if (data.code == 200) {
      ElMessage.success(data.message || '保存成功！')
    } else {
      ElMessage.error(data.message || '保存失败！')
    }
  })
}

/** 确认订单转换 */
const confirmChange = async (row) => {
  await ElMessageBox.confirm('是否确认订单转换？', '提示', {
    confirmButtonText: '转换',
    cancelButtonText: '取消',
    type: 'warning'
  })
  const { data } = await convertExcelFileOrder(row.excelOrderId)
  if (data.code == 200) {
    ElMessage.success(data.message || '转换成功！')
    detailVisible.value = false
    onQuery()
    return
  }
  ElMessage.error(data.message || '转换失败！')
}

const toDetail = async (row: any) => {
  allMapConfigs.value = {}
  Object.assign(currentRow, row)

  const { res, titles, configs } = filterRunData(row.orders, true)
  await getOrderVariableField()
  const { data } = await getConfByExcelOrderId(row.excelOrderId)
  if (data.result.length) {
    const tmp = {
      title: '',
      content: '',
      mapField: '',
      scriptName: '',
      groupTitle: '',
      templateFileId: '',
      excelOrderFiledConfId: '',
      params: {},
      orderFiled: {}
    }
    data.result.forEach((item: any) => {
      item.params == null && (item.params = {})
      item.orderFiled == null && (item.orderFiled = {})
      configs[item.title] = Object.assign({}, tmp, item)
    })
  }
  // 排除通过循环不显示的column
  const excludeTitles = ['sortNum', '数据区', 'expendData']
  detailTable.value = res
  tableTitle.value = titles.filter((v) => !excludeTitles.includes(v))
  detailVisible.value = true

  excludeTitles.forEach((key) => {
    Reflect.deleteProperty(configs, key)
  })

  Object.assign(allMapConfigs.value, configs)

  console.log('allMapConfigs.value', allMapConfigs.value)
}

const filterObjKeys = (data: any) => {
  return Object.keys(data).filter((v) => v !== '_X_ROW_KEY')
}

/**批量删除行 */
const removeRows = async () => {
  const list = xTable.value?.getCheckboxRecords()
  if (list?.length) {
    const ids = list.map((v) => v.excelOrderId).join(',')
    await deleteExcelFileOrderById(ids)
    ElMessage.success('删除成功')
    onQuery()
  }
}

const onReset = () => {
  queryParams.status = ''
}
const onQuery = async () => {
  loading.value = true
  try {
    const { data } = await getExcelFileOrderPage(queryParams)
    tableData.value = data.result.records
    queryParams.total = +data.result.total
  } catch {}
  loading.value = false
}

onMounted(() => {
  onQuery()
  getOrderFields()
  getScriptList()
  queryDict('excel_order_status')
})
</script>
<style lang="scss" scoped>
.header-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 178px;
}
.expandTableHeader {
  background: #e8eaec;
}
</style>
