<template>
  <el-card class="box-card">
    <el-table
      :data="tableData"
      v-loading="loading"
      element-loading-text="数据加载中..."
      :span-method="objectSpanMethod"
      :border="true"
      max-height="400px"
    >
      <el-table-column label="评价类型" prop="evaluationType" width="100" />
      <el-table-column label="类型分值" prop="evaluationTypeScore" width="60" />
      <el-table-column label="评价内容" prop="evaluationContent" width="100" />
      <el-table-column label="分项分值" prop="evaluationContentScore" width="60" />
      <el-table-column label="评价规则" prop="evaluationRule" />
      <el-table-column label="细项分值" prop="evaluationRuleScore" width="60"/>
      <el-table-column label="评估结果" prop="operateList" width="180">
        <template #default="{ row }">
          <el-radio-group
            v-model="row.operateInfo.status"
            :disabled="true"
          >
            <el-radio
              v-for="item in row.operateInfo.list"
              :label="item.value"
              :key="item.value"
            >
            {{ item.label }}
            </el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column label="细项得分" prop="fineScore" fixed="right" width="60"/>
      <el-table-column label="分项得分" prop="itemizedScore" fixed="right" width="60"/>
      <el-table-column label="类型得分" prop="typeScore" fixed="right" width="60"/>
      <el-table-column label="佐证材料" align="center" fixed="right" width="200">
        <template #default="{ row }">
          <div class="file-list">
            <div
              class="file"
              v-for="file in row.fileSaveRequestList"
            >
              <span
                class="ellipsis"
                :title="file.name"
                @click="handlePreview(file)"
              >{{ file.name }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import useTable from './mixins'
const { proxy } = getCurrentInstance();
const {
  treeData,
  loading,
  tableData,
  setMergeData,
  handlePreview,
} = useTable(proxy, 'evaluationRule')

const getDetail = (data) => {
  if(!data) return
  setFields(data, '0')
  setSort(data)
  setMergeData(data)
  treeData.value = data
}

const setFields = (data, level) => {
  for (const item of data) {
    item.level = level
    if(!item.fileSaveRequestList){
      item.fileSaveRequestList = []
    }
    switch (level) {
      case '0':
        item.sort = item.evaluationTypeRank
        break;
      case '1':
        item.sort = item.evaluationContentRank
        break;
      case '2':
        item.sort = item.evaluationRuleRank
        item.operateInfo = JSON.parse(item.operateJson)
        break;
      default:
        break;
    }
    if(item.children) {
      setFields(item.children, level * 1 + 1 + '')
    }
  }
}

const setSort = (data) => {
  data.sort((a, b) => {
    return b.sort - a.sort
  })
  for (const item of data) {
    if(item.children) {
      setSort(item.children)
    }
  }
}

// 表数据合并
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if([0, 1, 9].includes(columnIndex)){
    const rowspan = row.length1 - rowIndex === row.sum1 ? row.sum1 : 0
    return  {
      rowspan,
      colspan: 1
    }
  } else if([2, 3, 8].includes(columnIndex)) {
    const rowspan = row.length2 - rowIndex === row.sum2 ? row.sum2 : 0
    return  {
      rowspan,
      colspan: 1
    }
  }
}

defineExpose({
  getDetail
})
</script>

<style lang="scss" scoped>
.pointer {
  cursor: pointer;
}
.disabled {
  cursor: not-allowed !important;
}
.file-list {
  .file {
    display: flex;
    align-items: center;
  }
  .del {
    flex-shrink: 0;
    color: #f56c6c;
    cursor: pointer;
    margin-left: 10px;
  }
  .disabled {
    cursor: not-allowed !important;
  }
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
</style>