<template>
  <mx-table ref="table" :prop-defines="resolvedTable.columns" :rows="resolvedTable.rows" border>
    <template #elective-cell="{value, label, prop, key}">
      <el-tooltip :disabled="(value&&value.disabled)||!!!prop.queryCode" effect="light">
        <div slot="content">
          查看名单
        </div>
        <div v-if="value" class="pointer" :style="getCellStyles(value)" @click="goDetails(value, label, $event)">
          <template v-if="!useUnderOverBadge(key)">
            <span v-if="value.star">*</span>
            <span>{{ value && value.value }}</span>
          </template>
          <over-under-badge v-else :value="value.value" exchange></over-under-badge>
        </div>
      </el-tooltip>
    </template>
  </mx-table>
</template>

<script>
import MxTransferMixin from '@/components/mx-transfer-mixin'
import ElectiveColorMap from './elective-color-map-mixins'
import OverUnderBadge from '@/views/elective/publish/components/steps/fauclty/over-under-badge'

export default {
  components: { OverUnderBadge },
  mixins: [MxTransferMixin, ElectiveColorMap],
  name: 'elective-generation-table',
  props: ['chartBinding'],
  computed: {
    resolvedTable() {
      // setting data
      const columns = { groupName: { label: '组合', fixed: true }, expectedCount: { label: '设置人数', fixed: true } }
      const rows = this.deepClone(this.chartBinding.generation.roundGroups) // TODO: need clone?
      // generation data
      const mergedColumns = []
      this.chartBinding.tableData.forEach(item => {
        if (this.chartBinding.generation.hiddenGenerations.includes(item.generation)) return
        const isPreference = item.categories.every(item => Array.isArray(item))
        const generationQueryableCategories = []
        const generationQueryableIgnoreGroupCategories = []
        const ext = {
          roundId: item.roundId,
          generation: item.generation,
          queryableCategories: generationQueryableCategories, // 本代支持查询的列
          ignoreGroupCategories: generationQueryableIgnoreGroupCategories // 本代支持查询，且与组合无关的列
        }

        const subColumns = {}
        const mergedHeaderKey = 'generation_' + item.generation
        const options = Object.values(this.chartBinding.generation.options)
        const mergedHeaderOpt = options.find(opt => opt.value == item.generation)
        const mergedHeaderDefine = { label: mergedHeaderOpt.title, children: subColumns }
        if (isPreference) {
          const cnIndexer = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
          item.categories.forEach((subItem, idx) => {
            const cnIndex = idx < cnIndexer.length ? cnIndexer[idx] : (idx + 1)
            const innerHeaderKey = mergedHeaderKey + '_' + idx
            const innerHeaderDefine = item.categories.length > 1
              ? { label: `${cnIndex}志愿`, children: {} }
              : mergedHeaderDefine
            const overrideQueryName = item.categories.length > 1 ? innerHeaderDefine.label : ''
            subItem.forEach(data => this.resolveTableGeneration(ext, data, innerHeaderDefine.children, rows, mergedColumns, innerHeaderKey, false, overrideQueryName))
            columns[innerHeaderKey] = innerHeaderDefine
          })
        } else {
          item.categories.forEach(data => this.resolveTableGeneration(ext, data, subColumns, rows, mergedColumns))
          columns[mergedHeaderKey] = mergedHeaderDefine
        }
      })
      // accumulate data
      if (this.chartBinding.generation.active > this.chartBinding.generation.options.primaryDM.value
        && this.chartBinding.chartData?.accumulates?.length) {
        const prefix = 'accumulate_'
        const ext = {
          roundId: this.chartBinding.generation.status.roundId,
          generation: -1, // for detail page special display,
          queryableCategories: [], // 本代支持查询的列
          ignoreGroupCategories: [], // 本代支持查询，且与组合无关的列
          isAccumulate: true
        }
        this.chartBinding.chartData.accumulates.forEach(acc => this.resolveTableGeneration(ext, acc, columns, rows, mergedColumns, prefix, true))
      }
      // completed
      this.$refs.table?.scrollToRight()
      return {
        mergedColumns,
        columns,
        rows
      }
    }
  },
  mounted() {
    window.tableVue = this
  },
  provide() {
    return {
      mergeTable: this.mergeTable
    }
  },
  methods: {
    useUnderOverBadge(label) {
      return ['indicateCount'].some(prop => label.includes(prop))
    },
    resolveTableGeneration(ext, data, columnsRef, rowsRef, mergedColumnsRef, prefix = '', fixed = false, overrideQueryName = '') {
      // resolve core
      const prop = prefix + ext.generation + '_' + data.category
      const name = data.displayName
      const shouldMerge = data.values.length != rowsRef.length || data.values.some(v => v.groupId == 0)
      if (data.queryCode) {
        let nextName = data.displayName
        if (overrideQueryName) nextName = overrideQueryName + '/' + nextName
        ext.queryableCategories.push({ id: data.queryCode, name: nextName, detailName: data.detailName })
        if (shouldMerge) ext.ignoreGroupCategories.push(data.queryCode)
      }

      columnsRef[prop] = { label: name, slot: 'elective-cell', fixed: fixed, queryCode: data.queryCode }
      if (!shouldMerge) {
        data.values.forEach(val => {
          const row = rowsRef.find(row => row.groupId == val.groupId)
          if (row) {
            row[prop] = { ...ext, ...val, queryCode: data.queryCode }
          }
        })
      } else {
        // mark for table rows merge
        mergedColumnsRef.push(prop)

        // keep value in display row
        const val = data.values.first()
        const row = rowsRef.first()
        row[prop] = { ...ext, ...val, queryCode: data.queryCode }
      }
    },
    mergeTable({ row, column, rowIndex }) {
      if (this.resolvedTable.mergedColumns.includes(column.property)) {
        return rowIndex === 0 ? [this.resolvedTable.rows.length, 1] : [0, 0]
      }
    },
    getCellStyles(option) {
      const styles = {}
      if (option.color) {
        styles.color = this.matchElectiveColor(option.color)
      }
      return styles
    },
    goDetails(option, label, e) {
      // jump logic
      const path = '/elective/generation/detail'
      const nextData = {
        year: this.chartBinding.generation.status.year,
        roundId: this.chartBinding.generation.status.roundId,
        roundName: this.chartBinding.generation.status.roundName,
        activeGeneration: this.chartBinding.generation.active,
        isAccumulate: option.isAccumulate || false,
        queryGeneration: option.generation,
        queryGroupId: option.groupId,
        queryCode: option.queryCode,
        queryableCategories: option.queryableCategories,
        ignoreGroupCategories: option.ignoreGroupCategories,
        groups: this.chartBinding.generation.roundGroups.map(rg => ({ groupId: rg.groupId, groupName: rg.groupName }))
      }
      this.transferTo(path, nextData)
    },
    simulateGoDetails() {
      if (this.resolvedTable.rows.length == 0) {
        this.msgInfo('没有数据')
        return
      }
      const current = this.chartBinding.generation.current
      for (const column of Object.values(this.resolvedTable.columns)) {
        if (column.children) {
          for (const subColProp of Object.keys(column.children)) {
            for (const row of this.resolvedTable.rows) {
              const val = row[subColProp]
              if (val?.generation == current) {
                this.goDetails(val)
                return
              }
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
