<script setup>
const props = defineProps({
  columnData: [],
  data: [],
  merge: [],
})
// const mergeData = ref(["a", "b", "c"]);
// const columnData = ref([
//   {
//     name: '考试计划',
//     key: 'a',
//   },
//   {
//     name: '考试名称',
//     key: 'b',
//   },
//   {
//     name: '时间',
//     key: 'c',
//     width: "200"
//   },
//   {
//     name: '总难度题占比',
//     key: 'd',
//   },
//   {
//     name: '标准差',
//     key: 'e',
//   },
//   {
//     name: '试题总分',
//     key: 'f',
//   },
//   {
//     name: '及格分',
//     key: 'g',
//   },
//   {
//     name: '试题总量',
//     key: 'h',
//     width: "200"
//   },
//   {
//     name: '试题类型',
//     key: 'stlx',
//   }
// ])
// let a = {
//   a: "考试计划",
//   b: "考试名称",
//   c: "2022-11-23~2022-11-24",
//   d: "30%",
//   e: "23",
//   f: "146",
//   g: "90",
//   h: "146",
// }
// const tableData1 = ref([
//   {
//     id: 1,
//     a: "考试计划1",
//     b: "考试名称",
//     c: "2022-11-23~2022-11-24",
//     d: "30%",
//     e: "23",
//     f: "146",
//     g: "90",
//     h: "146",
//     stlx: "主观题"
//   },
//   {
//     id: 2,
//     a: "考试计划2",
//     b: "考试名称",
//     c: "2022-11-23~2022-11-24",
//     d: "30%",
//     e: "23",
//     f: "146",
//     g: "90",
//     h: "146",
//     stlx: "主观题"
//   },
//   {
//     id: 2,
//     a: "考试计划2",
//     b: "考试名称",
//     c: "2022-11-23~2022-11-24",
//     d: "30%",
//     e: "23",
//     f: "146",
//     g: "90",
//     h: "146",
//     stlx: "选择题"
//   },
//   {
//     id: 1,
//     a: "考试计划1",
//     b: "考试名称",
//     c: "2022-11-23~2022-11-24",
//     d: "30%",
//     e: "23",
//     f: "146",
//     g: "90",
//     h: "146",
//     stlx: "客观题"
//   },
//   {
//     id: 2,
//     a: "考试计划2",
//     b: "考试名称",
//     c: "2022-11-23~2022-11-24",
//     d: "30%",
//     e: "23",
//     f: "146",
//     g: "90",
//     h: "146",
//     stlx: "客观题"
//   }
// ]);

const tableData1 = ref([])
const mergeData = ref(props.merge)
const tableData = ref([])

watch(
  () => [props.data, props.merge],
  (newVal, oldVal) => {
    if (newVal[0] && newVal[1]) {
      tableData1.value = newVal[0]
      mergeData.value = newVal[1]
      initData()
    }
  },
  { immediate: true },
)

function initData() {
  const arr = []
  tableData1.value.map((item) => {
    if (!arr.includes(item.id)) {
      item.merge = true
      item.rowspan = 1
      arr.push(item.id)
    }
    else {
      const index = tableData1.value.findIndex(v => v.id == item.id)
      tableData1.value[index].rowspan++
    }
  })

  // 排序，同一个id的放一起
  arr.map((item) => {
    const data = tableData1.value.filter(val => item == val.id)
    tableData.value = tableData.value.concat(data)
  })
}

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  if (mergeData.value.includes(column.property)) {
    if (row.merge) {
      return {
        rowspan: row.rowspan,
        colspan: 1,
      }
    }
    else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}

const dialogVisible = ref(false)
const detailColumnData = ref([
  {
    name: '题号/统计名称',
    key: 'a',
  },
  {
    name: '1.1',
    key: 'b',
  },
  {
    name: '1.2',
    key: 'c',
  },
  {
    name: '1.3',
    key: 'c',
  },
  {
    name: '1.4',
    key: 'c',
  },
  {
    name: '1.5',
    key: 'c',
  },
  {
    name: '2.1',
    key: 'c',
  },
  {
    name: '2.2',
    key: 'c',
  },
  {
    name: '2.3',
    key: 'c',
  },
])
const detailTableData = ref([
  {
    a: '正确人数',
    b: '123',
    c: '123',
  },
  {
    a: 'A选项人数',
    b: '123',
    c: '123',
  },
  {
    a: 'B选项人数',
    b: '123',
    c: '123',
  },
  {
    a: 'C选项人数',
    b: '123',
    c: '123',
  },
  {
    a: 'D选项人数',
    b: '123',
    c: '123',
  },
])

const handleClick = (row) => {
  dialogVisible.value = true

  detailColumnData.value = [...row.detailColumnData]
  detailTableData.value = [...row.detailTableData]
}
</script>

<template>
  <div class="sjfxDiv p-5">
    <el-table :data="tableData" :span-method="objectSpanMethod" size="large" height="100%" style="width: 100%">
      <el-table-column v-for="(item, index) in columnData" :key="index" :prop="item.key" :label="item.name" :width="item.width" show-overflow-tooltip />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button link type="primary" text size="small" @click="handleClick(row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" class="_ kgtqktjDialog" width="80%">
      <div style="background: rgba(2,2,2,0.40);">
        <div class="mx-4 mb-4 pt-5" style="font-size: 1.25rem;">
          客观题情况统计
        </div>
        <div>
          <el-table :data="detailTableData" size="large" height="400px" style="width: 100%">
            <el-table-column v-for="(item, index) in detailColumnData" :key="index" :fixed="index == 0 ? true : false" :prop="item.key" :label="item.name" :width="item.width" show-overflow-tooltip />
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
@use "~/styles/dsj-table.scss";
:deep() {
  .kgtqktjDialog {
    background: #011521;
    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
    .el-dialog__body {
      color: #fff;
      padding: 20px 40px 40px;
      .el-table__header tr {
        height: 2.125rem;
        background: #143d43 !important;
      }
      .el-table__body tr {
        height: 3.125rem;
        font-size: 0.875rem;
      }
      .el-table-fixed-column--left {
        background: #143d43 !important;
      }
    }
  }
}
</style>
