<script setup>
const props = defineProps({
  columnData: [],
  tableData: [],
})

let allSchoolData = $ref([])
let allClassData = $ref([])

watch(
  () => [props.columnData, props.tableData],
  (newVal, oldVal) => {
    if (newVal[1])
      initFilterData(newVal[1])

    if (newVal[0]) {
      newVal[0].map((item) => {
        if (item.key == 'a')
          item.filterData = allSchoolData
        else if (item.key == 'b')
          item.filterData = allClassData
      })
    }
  },
  { immediate: true },
)

function initFilterData(arr) {
  allSchoolData = []
  allClassData = []
  arr.map((item) => {
    const index = allSchoolData.findIndex(val => item.a == val.text)
    if (index == -1 && item.a != '') {
      allSchoolData.push({
        text: item.a,
        value: item.a,
      })
    }

    const index1 = allClassData.findIndex(val => item.b == val.text)
    if (index1 == -1 && item.b != '') {
      allClassData.push({
        text: item.b,
        value: item.b,
      })
    }
  })
}

const filterHandler = (
  value,
  row,
  column,
) => {
  const property = column.property
  return row[property] === value
}
// const columnData = ref([
//   {
//     name: '所属学校',
//     key: 'a',
//   },
//   {
//     name: '班级名称',
//     key: 'b',
//   },
//   {
//     name: '姓名',
//     key: 'c',
//   },
//   {
//     name: '考号',
//     key: 'd',
//   },
//   {
//     name: '班级排名',
//     key: 'e',
//   },
//   {
//     name: '考试计划',
//     key: 'f',
//   },
//   {
//     name: '考试名称',
//     key: 'g',
//   },
//   {
//     name: '时间',
//     key: 'h',
//     width: "200"
//   },
//   {
//     name: '客观题得分',
//     key: 'i',
//   }
// ])
// let a = {
//   a: "山东小学",
//   b: "三年级一班",
//   c: "张三",
//   d: "123456",
//   e: "23",
//   f: "考试计划",
//   g: "考试名称",
//   h: "2022-11-23~2022-11-24",
//   i: "23",
// }
// const tableData = ref([
//   a, a, a, a, a, a, a, a
// ]);
</script>

<template>
  <div class="cjfxDiv p-5">
    <el-table :data="tableData" size="large" height="100%" style="width: 100%">
      <template v-for="(item, index) in columnData" :key="index">
        <el-table-column v-if="item.filterData" :prop="item.key" :label="item.name" :filters="item.filterData" :filter-method="filterHandler" :width="item.width" show-overflow-tooltip />
        <el-table-column v-else :prop="item.key" :label="item.name" :width="item.width" show-overflow-tooltip />
      </template>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
@use "~/styles/dsj-table.scss";
</style>
