<template>
  <div class="bank-report-table" style="height: 80vh;">
   
    <vxe-toolbar>
      <template #button>
        <div style="margin:10px">
          <span style="font-weight: bold"> 填报任务：{{ queryParam?.taskName }} </span>
          <span style="font-weight: bold;margin-left:20px"> 表格：{{ 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 }"
      class="custom-table"
      height="auto"
      :merge-cells="mergeCells"
    >
      <vxe-column field="serialNumber" title="序号" width="80"></vxe-column>
      <vxe-column field="project" title="项目" width="200">
        <template #default="{ row }">
          <span style="font-weight: bold;size:20px">{{ 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 === 'AttachTable'">
              <AttachTable
                :title="row.project"
                :records="row.datas"
                :fields="row.content"
                :pcode="row.code"
                :ref="(el) => setAttachTableRef(el, row.code)"
                style="margin:0px;padding:0px"
              />
            </template>
            <template v-else>
              <template v-for="(item, index) in row.content" :key="index">
                <span v-if="item.type === 'text'" v-html="item.value"></span>
                <span v-else-if="item.type === 'br'"><br></span>
                <span v-else-if="item.type === 'brspace'">
                  <br>
                  <template v-for="i in item.value||1" :key="i">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  </template>
                </span>

    
                <template v-else-if="item.type === 'yesno'">
                  <vxe-radio-group v-model="formData[row.code +'_'+ item.field]">
                    <vxe-radio label="是"  content="是">  
                    </vxe-radio>
                    <vxe-radio label="否" content="否"></vxe-radio>
                  </vxe-radio-group>
                  <template v-if="item.extraField||item.extraFields">
                    <div v-if="formData[row.code +'_'+ item.field]=='是'" style="margin-left:40px">
                      如是，
                      <template v-if="item.extraField">
                        {{item.extraLabel }}：
                        <vxe-input v-model="formData[row.code + '_'+ item.extraField]"  style="width: 300px;"></vxe-input>
                        <span class="unit"> {{ item.unit }}</span>
                      </template>
                      <template v-else-if="item.extraFields">
                        <template v-for="(ccopt,ccind) in item.extraFields" :key="ccind">
                          <span>{{ ccopt.label }}: </span>
                          <template v-if="ccopt.formType=='input'">
                            <vxe-input v-model="formData[row.code + '_'+ ccopt.field]" style="width:250px"></vxe-input>
                          </template>
                          <template v-else-if="ccopt.formType=='number'">
                            <vxe-input v-model="formData[row.code + '_'+ ccopt.field]" type="number" style="width:250px"></vxe-input>
                            <span class="unit"> {{ ccopt.unit }}</span>
                          </template>
                          <template v-else-if="ccopt.formType=='checkbox'">
                            <vxe-checkbox-group v-model="formData[row.code + '_'+ ccopt.field]">
                              <vxe-checkbox v-for="(opt, optIndex) in ccopt.options" :key="optIndex" :label="opt" :content="opt">
                               </vxe-checkbox>
                            </vxe-checkbox-group>
                          </template>
                          <template v-else-if="ccopt.formType=='radio'">
                            <vxe-radio-group v-model="formData[row.code + '_'+ ccopt.field]" :options="ccopt.options">
                              <vxe-radio v-for="(opt, optIndex) in ccopt.options" :key="optIndex" :label="opt" :content="opt">
                              </vxe-radio>
                            </vxe-radio-group>
                          </template>
                          <template v-else>
                            <vxe-input v-model="formData[row.code + '_'+ ccopt.field]" :type="ccopt.formType" style="width:100px"></vxe-input>
                          </template>
                          <br>
                          <template v-if="ccopt.otherOption">
                            其他：<vxe-input v-model="formData[row.code + '_'+ ccopt.otherField]"  style="width: 300px;"></vxe-input>
                          </template>
                          <br>
                        </template>
                      </template>
                    </div>
                    </template>
                </template>
                <span v-else-if="item.type === 'radio-group'" class="radio-group">
                  <vxe-radio-group v-model="formData[row.code +'_'+ item.field]">
                    <vxe-radio v-for="(opt, optIndex) in item.options" :key="optIndex" :label="opt">{{ opt }}</vxe-radio>
                  </vxe-radio-group>
                </span>
                <span v-else-if="item.type === 'radio-group-extraFields'" class="radio-group" style="width:100%">
                  <vxe-radio-group v-model="formData[row.code +'_'+ item.field]">
                    <vxe-radio v-for="(opt, optIndex) in item.options" :key="optIndex" :label="opt.label">
                      {{ opt.label }}
                      <template v-if="opt.extraField&&formData[row.code +'_'+ item.field]==opt.label">
                        <span>{{ opt.extraField }}</span>
                        <vxe-input v-model="formData[row.code + '_'+ opt.otereField]"  style="width: 200px;"></vxe-input>  
                      </template>
                      <template v-if="opt.extraFields&&formData[row.code +'_'+ item.field]==opt.label">
                        <template v-for="(ccopt,ccind) in opt.extraFields" :key="ccind">
                        <span>{{ ccopt.label }}: </span>
                        <vxe-input v-model="formData[row.code + '_'+ ccopt.field]"  style="width: 200px;"></vxe-input>  
                        </template>
                      </template>
                    </vxe-radio>
                  </vxe-radio-group>
                </span>
                <div v-else-if="item.type === 'checkbox-group'" class="checkbox-group">
                  <span class="checkbox-group">
                        <vxe-checkbox-group v-model="formData[row.code+'_'+item.field]">
                          <vxe-checkbox v-for="(opt, optIndex) in item.options" :key="optIndex" :label="opt">
                            {{ opt }}
                          </vxe-checkbox>
                          <template  v-if="item.otherField">
                            <vxe-checkbox label="其他">
                              其他：
                              <vxe-input v-model="formData[row.code + '_'+ item.otherField]"  
                                    :disabled="!(formData[row.code+'_'+item.field]?.indexOf('其他')>-1)"
                              style="width: 200px;">
                                    </vxe-input>
                            </vxe-checkbox>
                         
                          </template>
                        </vxe-checkbox-group>
                      </span> 
                </div>   
                <template v-else-if="item.type=='textarea'">
                  <vxe-textarea v-model="formData[row.code +'_'+ item.field]" :rows="item.rows" :style="{width:item.width}">
                  </vxe-textarea>
                </template> 
                <template v-else>
                  <vxe-input :type="item.type" v-model="formData[row.code +'_'+ item.field]"  size="mini" class="table-input">
                  </vxe-input>
                </template>
                <span v-if="item.unit" class="unit"> {{ item.unit }}</span>
              </template>
            </template>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="remarks" title="备注" width="200">
        <template #default="{ row }"> 
            <vxe-textarea :rows="row.remarks.rows" v-model="formData[row.code+'_'+row.remarks.field]">
            </vxe-textarea>
        </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 AttachTable from '../tableComponents/AttachTable.vue'
import HistoryFillCheck from './check/historyFillCheck.vue'

import { tableFormData } from '../../data/tb7.data';
import { ref, reactive,nextTick,onMounted,toRaw } from 'vue'
import { VxeUI,VxeToolbarInstance,VxeTablePropTypes } from 'vxe-table'
import { batchSaveOrUpdate, queryRecord,batchSaveOrUpdateBeforeDelete } 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';

const route = useRoute();
const tableRef = ref();
const tplItemMap = ref({});
const historyFillCheckRef = ref<any>(null);
const queryParam = ref({
  taskId:-1,
  taskName:'',
  tplId:-1,
  tplName:'',
  tplCode:''
})

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

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

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()
  await setData();
})


const loading = ref(false)
const formData = reactive({});

const formValues = ref<FormData[]>([])


const saveBatch = async () => {
  try {

    formValues.value = []

    for (const strKey in formData) {
      const valData = formData[strKey]
      if (valData) {
        let tmpAry = strKey.split("_")
        await setFormValues(tmpAry[0],tmpAry[1],valData,1)    
      }
    }

    await getAttachTableFormData();

    if (formValues.value.length > 0) {
      await batchSaveOrUpdateBeforeDelete(formValues.value)
      VxeUI.modal.message({ content: '保存成功', status: 'success' })
      //await setData()
    } else {
      VxeUI.modal.message({ content: '没有需要保存的数据', status: 'warning' })
    }

    
  } catch (error) {
    VxeUI.modal.message({ content: `保存失败: ${error.message}`, status: 'error' })
  } finally {
    loading.value = false
  }
}


const childAttachTableRefs = ref({})
const setAttachTableRef = (el: any, index: string) => {
  if (el) {
    childAttachTableRefs.value[index] = el; // 保存子组件实例
  }
};

const getAttachTableFormData  = async () => {
  for (const pcode in childAttachTableRefs.value) {
      const child = childAttachTableRefs.value[pcode];
      if (child) {
          const datas = child.getFormData()

          for(const code in datas) {
            await setFormValues(pcode,code,datas[code],1)
          }
      }
  }
};

const setFormValues = async (pcode,code,valData,rind) => {
  if(!valData) return;
  let vals = Array.isArray(valData) ? valData.join(',') : valData 
  let strKey = pcode+"_"+code
  const item = tplItemMap.value[strKey];  
  const { pid, itemid } = item ?? {}; 
  
  let 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})
    let valueObj = {}
    for(let data of recordData) {
      valueObj[data.itempid+"_" + data.itemid+"_"+ data.rind] = data["content"]
    }

    Object.keys(tplItemMap.value).forEach(strKey => {  
      const item = tplItemMap.value[strKey];  
      const { pid, itemid,formTp } = item ?? {}; 
      const dataVal =  valueObj[pid+"_"+itemid+"_1" ]
      if(formTp == 'checkbox') {
        formData[strKey] = dataVal?.split(",")
      } else {
        formData[strKey] = dataVal
      }
    });

    Object.keys(childAttachTableRefs.value).forEach(pcode => { 
      const child = childAttachTableRefs.value[pcode];
      const matchingKeys = Object.keys(tplItemMap.value).filter(key => key.startsWith(pcode + '_'));  
      const matchingObjects = matchingKeys.map(key => tplItemMap.value[key]);  
      let attachTableData = {}
      for(let tmpData of matchingObjects) {
        const { pid, itemid,formTp,code } = tmpData ?? {}; 
        if(formTp == 'checkbox') {
          attachTableData[code] =  valueObj[pid+"_"+itemid+"_1"]?.split(",")
        } else {
          attachTableData[code] =  valueObj[pid+"_"+itemid+"_1"]
        }
      }
      child.setFormData(attachTableData)
    })

  } catch (error) {
    VxeUI.modal.message({ content: `加载数据失败: ${error.message}`, status: 'error' })
  } finally {
    loading.value = false
  }
}


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

    tplItem.forEach(item => {
      let strKey = item.pcode + "_" + item.xmlcode;
      tplItemMap.value[strKey] = {pid:item.pid,itemid:item.id,formTp:item.formTp,code:item.xmlcode};
    })

  } catch (error) {
    VxeUI.modal.message({ content: `加载数据失败: ${error.message}`, status: 'error' })
  } finally {
   
  }

}

// 校验数据
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: any) => 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: any) => 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
}

const mergeCells = ref<VxeTablePropTypes.MergeCells>([
  { row: 7, col: 2, rowspan: 1, colspan: 2 },
])

</script>
<style lang="less" scoped>  
/* 基础字体和排版 */  
.bank-report-table {  
  font-family: "SimSun", "宋体", serif;  
  font-size: 12px;  
  color: #000;  
  margin: 5px auto;  
  width: 90%; /* 统一使用一个宽度 */  
}  

/* 表格样式 */  
.custom-table, .attachment-table {  
  width: 100%;  
  border: 1px solid #000;
  border-collapse: collapse; /* 统一边框处理 */
}

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

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

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

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

/* 校验结果样式 */
.validation-results {
  padding: 20px;
  height: 600px;
  overflow-y: auto;
}

.result-summary {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.summary-item {
  display: flex;
  flex-direction: column;
}

.summary-label {
  font-size: 12px;
  color: #666;
}

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

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

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

.results-list {
  margin-top: 10px;
}

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

.result-item:hover {
  background-color: #f5f5f5;
}

.result-item.success {
  background-color: #f6ffed;
  border-left: 4px solid #52c41a;
}

.result-item.error {
  background-color: #fff2f0;
  border-left: 4px solid #ff4d4f;
}

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

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

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

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

/* 验证公式帮助提示样式 */
.validation-tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tooltip-content {
  margin: 0;
  white-space: pre-wrap;
}

/* 表格单元格样式 */
.custom-table .vxe-header--column,  
.custom-table .vxe-body--column,  
.attachment-table .vxe-header--column,  
.attachment-table .vxe-body--column {  
  border-right: 1px solid #000;  
  border-bottom: 1px solid #000;  
  padding: 5px;  
}  

/* 内容单元格 */  
.content-cell {  
  line-height: 1.8;  
}  

/* 输入框样式 */  
.table-input,  
.vxe-input {  
  height: 24px;  
  line-height: 30px;  
  min-width: 150px;  
  margin: 0 2px;  
  padding: 0 5px;  
  border: none; /* 去掉多余的边框，只留底部边框 */  
  border-bottom: 1px solid #333;  
  background: transparent;  
  text-align: center;  
}  

/* 表单元素的标签和图标 */  
.vxe-radio--label,  
.vxe-checkbox--label {  
  font-size: 12px;  
}  

.vxe-radio--icon,  
.vxe-checkbox--icon {  
  font-size: 12px;  
}  

/* 单选框组和复选框组布局 */  
.vxe-radio-group,  
.vxe-checkbox-group {  
  display: inline-block;  
  margin-right: 5px;  
  max-width: 99%;
}  

/* 其他辅助样式 */  
.radio-group,
.checkbox-group {  
  display: inline-block;  
  margin-right: 5px;  
  max-width: 99%;
}  

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

/* 附件部分样式 */  
.attachments {  
  margin-top: 20px;  
  width: 100%;  
}  

.attachments h4 {  
  font-size: 14px;  
  font-weight: bold;  
  margin-bottom: 10px;  
}  

.attachment-table {  
  width: 100%;  
  border: 1px solid #000;  
  border-collapse: collapse; /* 统一边框处理 */  
}  

/* 无用或重复定义已优化移除 */  

/* 其他特殊块 */  
blockquote {  
  padding: 0 5px;  
  color: black;  
  cursor: pointer;  
}  

</style>  