<template>
  <div class="bank-report-table" style="height: 80vh;" @click="closeTooltip">
    <!-- 加载遮罩层 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner">
        <div class="spinner"></div>
        <div class="loading-text">加载中...</div>
      </div>
    </div>

    <vxe-toolbar>
      <template #buttons>
        <div class="toolbar-info">
          <span class="info-label">填报任务：{{ queryParam?.taskName }}</span>
          <span class="info-label">表格：{{ queryParam?.tplCode }} {{ queryParam?.tplName }}</span>
        </div>
      </template>
      <template #tools>
        <vxe-button status="primary" icon="vxe-icon-edit" @click="handleOpenHistoryDrawer()" :disabled="loading">近5年数据填报</vxe-button>
        <vxe-button status="primary" icon="vxe-icon-save" @click="checkData()">校验</vxe-button>
        <vxe-button status="primary" icon="vxe-icon-save" @click="saveBatch">保存</vxe-button>
      </template>
    </vxe-toolbar>

    <!-- 校验结果抽屉 -->
    <vxe-drawer
      v-model="drawerVisible"
      placement="right"
      @show="handleValidationDrawerShow"
      title="校验结果"
      width="40%"
      :footer="{ show: true }"
    >
      <template #default>
        <div class="validation-results">
          <div class="result-summary">
            <div class="summary-item">
              <span class="summary-label">校验字段数：</span>
              <span class="summary-value">{{ validationResultsList.length }}</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">通过：</span>
              <span class="summary-value success">{{ validationResultsList.filter(item => item.isValid).length }}</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">失败：</span>
              <span class="summary-value error">{{ validationResultsList.filter(item => !item.isValid).length }}</span>
            </div>
          </div>
          <div class="results-list">
            <div
              v-for="(result, index) in validationResultsList"
              :key="index"
              class="result-item"
              :class="{ success: result.isValid, error: !result.isValid }"
              @click="handleValidationResultClick(result)"
            >
              <div class="result-field">{{ result.field }}</div>
              <div class="result-desc">{{ result.description }}</div>
              <div class="result-value">值：{{ result.fieldValue || '空' }}</div>
              <div v-if="!result.isValid" class="result-error">失败原因：{{ result.description }}</div>
            </div>
          </div>
        </div>
      </template>
    </vxe-drawer>

    <vxe-table
      border
      ref="tableRef"
      show-header-overflow
      :data="tableFormData"
      :column-config="{ resizable: true }"
      :row-config="{ resizable: true }"
      height="auto"
      class="custom-table"
    >
      <vxe-column field="serialNumber" title="序号" width="80"></vxe-column>
      <vxe-column field="project" title="项目" width="100">
        <template #default="{ row }">
          <span class="project-title">{{ row.project }}</span>
        </template>
      </vxe-column>
      <vxe-column field="content" title="内容" row-resize>
        <template #default="{ row }">
          <div class="content-cell">
            <template v-if="row.type === 'MultiColumnTable'">
              <MultiColumnTable
                :title="row.project"
                :columnsPerRow="1"
                :records="[]"
                :fields="row.content"
                :ref="(el) => setMultiColumnTableRef(el, row.code)"
                class="embedded-table"
              />
            </template>
            <template v-else>
              <template v-for="(item, index) in row.content" :key="index">
                <span v-if="item.type === 'text'">
                  {{item.value}}：
                </span>
                <span v-else-if="item.type === 'br'"><br></span>
                
                <span v-else-if="item.type === 'radio-group-extraFields'" class="radio-group">
                  <vxe-radio-group v-model="formData[getFieldKey(row.code, item.field)]">
                    <vxe-radio 
                      v-for="(opt, optIndex) in item.options" 
                      :key="`opt-${optIndex}`" 
                      :label="opt.label" 
                      class="radio-option"
                    >
                      <div class="option-content">
                        <div class="main-label">{{ opt.label }}</div>
                        <template v-if="shouldShowExtraFields(opt, row.code, item.field)">
  
                          <template v-if="opt.extraField">
                            <span >
                              <span >{{ opt.extraLabel }}</span>
                              <component  style="margin:10px;padding:0px;width: 300px;"
                                :is="getExtraFieldComponent(opt.extraFormType)"
                                v-model="formData[getFieldKey(row.code, opt.extraField)]"
                                :options="opt.extraOptions"
                                
                              />
                              <span v-if="opt.extraUnit" class="unit">{{ opt.extraUnit }}</span>
                            </span>
                          </template>
                          
                        </template>
                      </div>
                    </vxe-radio>
                  </vxe-radio-group>
                </span>
                <template v-else>
                  <vxe-input
                    :type="item.type"
                    v-model="formData[getFieldKey(row.code, item.field)]"
                    size="mini"
                    class="table-input"
                    :style="{width:item.width}"
                    :disabled="!item.hasRight"
                    :data-field="getFieldKey(row.code, item.field)"
                  ></vxe-input>
                  <!-- 帮助图标 -->
                  <span
                    v-if="item.hasValidFormula"
                    class="validation-help-icon"
                    @mouseenter="(event) => showValidationHelp(item, event)"
                    @mouseleave="closeTooltip"
                    @click="(event) => showValidationHelp(item, event)"
                  >
                    ？
                  </span>
                </template>
                <span v-if="item.unit" class="unit">{{ item.unit }}</span>
              </template>
            </template>
          </div>
        </template>
      </vxe-column>
    </vxe-table>

    <!-- 历史填报检查组件 -->
    <HistoryFillCheck ref="historyFillCheckRef" v-model="historyDrawerVisible" @closeDrawer="closeHistoryDrawer"/>

    <!-- 验证公式帮助提示 -->
    <div
      v-if="validationTooltipVisible"
      class="validation-tooltip"
      :style="{ left: validationTooltipPosition.left + 'px', top: validationTooltipPosition.top + 'px' }"
    >
      <pre class="tooltip-content">{{ validationTooltipContent }}</pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
import MultiColumnTable from '../tableComponents/MultiColumnTable.vue'
import HistoryFillCheck from './check/historyFillCheck.vue'

import { tableFormData } from '../../data/tb2.data'
import { ref, reactive, nextTick, onMounted } from 'vue'
import { VxeUI } from 'vxe-table'
import { batchSaveOrUpdateBeforeDelete, queryRecord } from '../../record/BaosongTaskRecord.api'
import { queryAllTplItemForUser, findUserRightForTplItem } from '../../alloc/BaosongTaskAlloc.api'
import { allTplItems } from '../../tpl/BaosongTplItem.api'
import { getTblvalidFormula } from '../../tpl/BaosongDataValid.api'
import { useRoute } from 'vue-router'


interface FormData {
  id: number | null
  taskid: number
  tplid: number
  itemid?: number
  itempid?: number
  content: string
  tplcode: string
  rind: number
}

const route = useRoute()
const tableRef = ref()
const tplItemMap = ref<Record<string, any>>({})
const loading = ref(false)
const formData = reactive<Record<string, any>>({})
const formValues = ref<FormData[]>([])
const childMultiTableRefs = ref<Record<string, any>>({})

// 权限相关状态
const userAllocItems = ref<string[]>([])
const validFormula = ref<any[]>([])
const validationResultsList = ref<any[]>([])
const drawerVisible = ref(false)
const historyDrawerVisible = ref(false)
const historyFillCheckRef = ref<any>(null)
const validationTooltipVisible = ref(false)
const validationTooltipPosition = ref({ left: 0, top: 0 })
const validationTooltipContent = ref('')

const queryParam = ref({
  taskId: -1,
  taskName: '',
  tplId: -1,
  tplName: '',
  tplCode: ''
})

onMounted(async () => {
  if (route.query.taskId) {
    queryParam.value.taskId = Number(route.query.taskId)
  }
  if (route.query.taskName) {
    queryParam.value.taskName = String(route.query.taskName)
  }
  if (route.query.tplId) {
    queryParam.value.tplId = Number(route.query.tplId)
  }
  if (route.query.tplName) {
    queryParam.value.tplName = String(route.query.tplName)
  }
  if (route.query.tplCode) {
    queryParam.value.tplCode = String(route.query.tplCode)
  }

  // 获取权限和验证公式
  try {
    userAllocItems.value = await findUserRightForTplItem({
      tplid: queryParam.value.tplId,
      taskid: queryParam.value.taskId
    })

    validFormula.value = await getTblvalidFormula({
      tplid: queryParam.value.tplId,
    })
  } catch (error) {
    console.error('获取权限或验证公式失败:', error)
  }

  await setTplItemMap()
  setFormItemRight()
  await setData()
})

const getFieldKey = (pcode: string | undefined, field: string): string => {
  return pcode ? `${pcode}_${field}` : field
}

const saveBatch = async () => {
  try {
    formValues.value = []
    loading.value = true
    await nextTick()
    for (const strKey in formData) {
      const valData = formData[strKey]
      if (valData) {
        const [pcode, code] = strKey.split('_')
        await setFormValues(pcode, code, valData, 1)
      }
    }
   
    await getAllMultiTableFormData()

    if (formValues.value.length > 0) {
      await batchSaveOrUpdateBeforeDelete(formValues.value)
      VxeUI.modal.message({ content: '保存成功', status: 'success' })
    } else {
      VxeUI.modal.message({ content: '没有需要保存的数据', status: 'warning' })
    }
  } catch (error) {
    console.error('保存失败:', error)
    VxeUI.modal.message({ content: `保存失败: ${error instanceof Error ? error.message : String(error)}`, status: 'error' })
  } finally {
    loading.value = false
  }
}

const setMultiColumnTableRef = (el: any, code: string) => {
  if (el) {
    childMultiTableRefs.value[code] = el
  }
}
const getAllMultiTableFormData = async () => {
  for (const pcode in childMultiTableRefs.value) {
    const child = childMultiTableRefs.value[pcode]
    if (child) {
      const datas = child.getFormData()
      let rind = 0
      for (const obj of datas) {
        rind++
        Object.keys(obj).forEach(code => {
          setFormValues(pcode, code, obj[code], rind)
        })
      }
    }
  }
}


const setFormValues = async (pcode: string, code: string, valData: any, rind: number) => {
  if (!valData) return

  if(Array.isArray(valData)&& valData.length==0) return
    
  const vals = Array.isArray(valData) ? valData.join(',') : valData
  const strKey = `${pcode}_${code}`
  const item = tplItemMap.value[strKey]
  const { pid, itemid } = item ?? {}

  const tempForm: FormData = {
    id: null,
    rind: rind,
    taskid: queryParam.value.taskId,
    tplid: queryParam.value.tplId,
    tplcode: code,
    itemid: itemid,
    itempid: pid,
    content: vals
  }

  formValues.value.push(tempForm)
}

async function setData() {
  try {
    loading.value = true;
    const taskId = queryParam.value.taskId;
    const tplid = queryParam.value.tplId;
    
    Object.keys(formData).forEach(key => delete formData[key]);
    
    await setTplItemMap();
    const recordData = await queryRecord({ taskid: taskId, tplid: tplid });
    const valueObj = {};
    for (const data of recordData) {
      const key = `${data.itempid}_${data.itemid}_${data.rind}`;
      valueObj[key] = data.content;
    }
    for (const row of tableFormData) {
      if(!row.type&&row.content) {
        for (const cdata of row.content) {
          if(cdata.field&&cdata.field.length>0) {
            const strKey = `${row.code}_${cdata.field}`;           
            const item = tplItemMap.value[strKey];
            if (!item) continue;
            const { pid, itemid, formTp } = item;
            const dataVal = valueObj[`${pid}_${itemid}_1`];
            if (!dataVal) continue;
            if (formTp === 'checkbox') {
              formData[strKey] = dataVal?.split(",") || [];
            } else {
              formData[strKey] = dataVal || "";
            }
          }
        }
      } else if(row.type=="MultiColumnTable"&& row.content) {
          const curMultiTable = childMultiTableRefs.value[row.code];
          const rowsMap = {};
          for (const cdata of row.content) {
            if(cdata.field&&cdata.field.length>0) {
              const strKey = `${row.code}_${cdata.field}`;    
              const tmpData = tplItemMap.value[strKey];
              if (!tmpData) continue;
              const { pid, itemid, code } = tmpData;
              const valKeys = Object.keys(valueObj).filter(k => 
                k.startsWith(`${pid}_${itemid}_`)
              );

              for (const valKey of valKeys) {
                const parts = valKey.split('_');
                const rind = parts[2];
                if (!rowsMap[rind]) {
                  rowsMap[rind] = {};
                }
                rowsMap[rind][code] = valueObj[valKey];
              }
            }
          }
          
          const tableDatas = Object.values(rowsMap);
          curMultiTable.setFormData(tableDatas);
        } 
    }
  } catch (error) {
    console.log(error)
    VxeUI.modal.message({ 
      content: `加载数据失败:`, 
      status: 'error' 
    });
  } finally {
    loading.value = false;
  }

}

async function setTplItemMap() {
  try {
    const tplid = queryParam.value.tplId
    const tplItem = await allTplItems({
      tplid: tplid
    })

    tplItemMap.value = tplItem.reduce((acc, item) => {
      const strKey = `${item.pcode}_${item.xmlcode}`
      acc[strKey] = {
        pid: item.pid,
        itemid: item.id,
        formTp: item.formTp,
        code: item.xmlcode
      }
      return acc
    }, {} as Record<string, any>)
  } catch (error) {
    console.error('加载数据失败:', error)
    VxeUI.modal.message({ content: `加载数据失败: ${error instanceof Error ? error.message : String(error)}`, status: 'error' })
  }
}

// 设置表单项权限标识
const setFormItemRight = () => {
  tableFormData.forEach(row => {
    if (row.content && Array.isArray(row.content)) {
      row.content.forEach(item => {
        if (item.field) {
          let tmpKey = `${row.code}_${item.field}`;
          item["hasRight"] = userAllocItems.value.indexOf(tmpKey) > -1
          item["hasValidFormula"] = validFormula.value?.length > 0 && 
            validFormula.value.some((f: any) => {
              const formulaText = (f.formula || '').toString()
              return formulaText.includes(item.field)
            })
        }
      });
    }
  });
}

// 校验数据
const checkData = () => {
  drawerVisible.value = true
}

// 校验结果抽屉显示时触发
const handleValidationDrawerShow = () => {
  performValidation()
}

// 执行校验
const performValidation = () => {
  validationResultsList.value = []
  const process: string[] = []
  process.push('开始校验')
  process.push(`找到 ${validFormula.value.length} 个验证公式`)

  validFormula.value.forEach((formulaItem: any) => {
    process.push(`开始校验公式: ${formulaItem.des}`)
    const result = evaluateFormula(formulaItem.formula, formulaItem.des, process)
    if (result) {
      validationResultsList.value.push(result)
    }
  })
  process.push('校验完成')
}

// 解析和执行验证公式
const evaluateFormula = (formula: string, description: string, process: string[]): any => {
  try {
    const fieldMatch = formula.match(/\[(\w+)\]/)
    if (!fieldMatch) {
      process.push(`跳过: 无法解析公式字段 ${formula}`)
      return null
    }

    const fieldName = fieldMatch[1]
    const row = tableFormData.find(r => r.content?.some((c: any) => c.field === fieldName))
    if (!row) {
      process.push(`跳过: 未找到字段 ${fieldName}`)
      return null
    }

    const fieldItem = row.content.find((c: any) => c.field === fieldName)
    if (!fieldItem) {
      process.push(`跳过: 未找到字段 ${fieldName}`)
      return null
    }

    const strKey = `${row.code}_${fieldName}`
    const fieldValue = formData[strKey]

    // 检查是否有空字段规则
    const emptyFieldRule = validFormula.value.find((f: any) => 
      f.formula.includes(fieldName) && f.des.includes('空字段')
    )

    if (emptyFieldRule && (!fieldValue || fieldValue === '')) {
      process.push(`跳过: 字段 ${fieldName} 为空，跳过空字段规则`)
      return null
    }

    const expression = formula.replace(/\[(\w+)\]/g, (_, field) => {
      const value = formData[`${row.code}_${field}`]
      return value !== undefined ? `Number(${value})` : '0'
    })

    process.push(`执行公式: ${expression}`)
    const isValid = eval(expression)

    return {
      field: fieldName,
      description: description,
      formula: formula,
      isValid: isValid,
      fieldValue: fieldValue,
      rowCode: row.code
    }
  } catch (error) {
    process.push(`公式执行错误: ${error instanceof Error ? error.message : String(error)}`)
    return null
  }
}

// 处理校验结果点击，定位到表格
const handleValidationResultClick = (result: any) => {
  const row = tableFormData.find(r => r.code === result.rowCode)
  if (row) {
    const fieldItem = row.content.find((c: any) => c.field === result.field)
    if (fieldItem) {
      const strKey = `${row.code}_${result.field}`
      const inputElement = document.querySelector(`[data-field="${strKey}"]`) as HTMLElement
      if (inputElement) {
        inputElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
        inputElement.focus()
        inputElement.style.border = '2px solid #ff4d4f'
        setTimeout(() => {
          inputElement.style.border = ''
        }, 2000)
      }
    }
  }
}

// 显示验证公式帮助
const showValidationHelp = (formulaItem: any, event: MouseEvent) => {
  const rect = (event.target as HTMLElement).getBoundingClientRect()
  validationTooltipPosition.value = {
    left: rect.left + rect.width / 2,
    top: rect.top - 10
  }
  validationTooltipContent.value = `验证公式: ${formulaItem.formula}\n说明: ${formulaItem.des}`
  validationTooltipVisible.value = true
}

// 关闭验证公式帮助
const closeTooltip = () => {
  validationTooltipVisible.value = false
}

// 打开历史填报抽屉
const handleOpenHistoryDrawer = () => {
  historyDrawerVisible.value = true
}

// 关闭历史填报抽屉
const closeHistoryDrawer = () => {
  historyDrawerVisible.value = false
}


 function shouldShowExtraFields(opt, rowCode, itemField) {
    return formData[getFieldKey(rowCode, itemField)] === opt.label && 
          (opt.extraField || opt.extraFields)
  }
  

  function getExtraFieldComponent(type) {
    switch(type) {
      case 'radio': return 'vxe-radio-group'
      case 'checkbox': return 'vxe-checkbox-group'
      case 'date': return 'vxe-input'
      case 'number': return 'vxe-input'
      default: return 'vxe-input'
    }
  }


</script>

<style lang="less" scoped>
.bank-report-table {
  font-family: "SimSun", "宋体", serif;
  font-size: 12px;
  color: #000;
  margin: 5px auto;
  width: 90%;
}

.toolbar-info {
  margin: 10px;
  
  .info-label {
    font-weight: bold;
    margin-left: 20px;
    
    &:first-child {
      margin-left: 0;
    }
  }
}

.custom-table {
  width: 100%;
  border: 1px solid #000;
  border-collapse: collapse;
  
  :deep(.vxe-header--column),
  :deep(.vxe-body--column) {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px;
  }
}

.content-cell {
  line-height: 1.8;
  padding: 5px;
}

.project-title {
  font-weight: bold;
  font-size: 14px;
}

.table-input,
.vxe-input {
  height: 24px;
  line-height: 24px;
  min-width: 150px;
  margin: 0 2px;
  padding: 0 5px;
  border: none;
  border-bottom: 1px solid #333;
  background: transparent;
  text-align: left;
}

.extra-input {
  width: 100%;
  margin-left: 5px;
}

.extra-fields-container {
  margin-left: 0px;
  margin-top: 5px;
}

.vxe-radio-group,
.vxe-checkbox-group {
  display: inline-block;
  margin-right: 5px;
  max-width: 99%;
}

.radio-group,
.checkbox-group {
  display: inline-block;
  max-width: 99%;
}

.vxe-radio,
.vxe-checkbox {
  margin: 10px;
  white-space: nowrap;
}

.unit {
  margin-left: 3px;
  color: #666;
}

.embedded-table {
  margin: 0;
  padding: 0;
  border: none;
}

.radio-option {
  display: block;
  margin-bottom: 1px;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.radio-option:hover {
  background-color: #f5f5f5;
}

/* 选项内容布局 */
.option-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.main-label {
  font-weight: 500;
}

/* 额外字段样式 */
.extra-field {
  display: flex;
  align-items: left;
  gap: 8px;
  margin-left: 4px;
  padding: 4px 0;
}

.extra-label {
  color: #666;
  min-width: 80px;
}

.extra-input {
  width: 300px;
}

.unit {
  color: #999;
  margin-left: 4px;
}

/* 单选组内部间距 */
.vxe-radio-group {
  flex-direction: column;
  gap: 8px;
}

/* 加载遮罩层 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-spinner {
  text-align: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 14px;
  color: #666;
}

/* 校验结果 */
.validation-results {
  padding: 20px;
}

.result-summary {
  display: flex;
  gap: 40px;
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 4px;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.summary-label {
  font-weight: 500;
  color: #666;
}

.summary-value {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.summary-value.success {
  color: #52c41a;
}

.summary-value.error {
  color: #ff4d4f;
}

.results-list {
  max-height: 500px;
  overflow-y: auto;
}

.result-item {
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.result-item:hover {
  transform: translateX(5px);
}

.result-item.success {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

.result-item.error {
  background: #fff2f0;
  border: 1px solid #ffccc7;
}

.result-field {
  font-weight: bold;
  margin-bottom: 4px;
}

.result-desc {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.result-value {
  font-size: 12px;
  color: #888;
}

.result-error {
  font-size: 12px;
  color: #ff4d4f;
  margin-top: 4px;
}

/* 验证公式帮助图标 */
.validation-help-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  background: #1890ff;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  margin-left: 4px;
  cursor: pointer;
  vertical-align: middle;
}

/* 验证公式帮助提示 */
.validation-tooltip {
  position: fixed;
  background: #333;
  color: white;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 9999;
  transform: translateX(-50%);
  white-space: pre-wrap;
  max-width: 300px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tooltip-content {
  margin: 0;
}

</style>
