front/src/views/elective/test/components/test-report-mixin.js

import config from '@/common/mx-config'
import philosophyMixin from './test-report-philosophy'
import occupationMixin from './test-report-occupation'
import knowledgeMixin from './test-report-knowledge'

export default {
  mixins: [philosophyMixin, occupationMixin, knowledgeMixin],
  props: {
    category: {
      type: Number | String,
      default: ''
    },
    source: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      // local data
      defaultActives: [],
      // api data
      dataList: [],
      // config
      reportConfig: {
        categoryDescription: '',
        matchedKeys: [],
        selectMajorLimit: 7,
        chartBarRotate: false, // false:柱状 / true:条状
        chartSubtext: '红色为系统推荐类型',
        resolveKeys: [],
        tableDefines: {},
        resolveConfig: {}
      }
    }
  },
  computed: {
    dynamicTableData() {
      const result = []
      const keys = Object.keys(this.reportConfig.tableDefines)
      keys.forEach(key => {
        const row = []
        row.push(this.reportConfig.tableDefines[key].label)
        this.dataList.forEach(i => row.push(i[key]))
        result.push(row)
      })
      return {
        columns: result[0],
        rows: result.slice(1, result.length)
      }
    },
    chartHeight() {
      const height = (this.dynamicTableData.rows.length + 1) * 44 + 'px'
      return height
    },
    mergedData() {
      const result = {}
      this.reportConfig.resolveKeys.forEach(key => {
        result[key] = this.dataList.sum(item => item[key] || 0)
      })
      return result
    },
    sortedMergedData() {
      const result = this.reportConfig.resolveKeys.map(key => ({ key: key, value: this.mergedData[key] }))
      result.sort((left, right) => {
        const lWeight = this.reportConfig.matchedKeys.includes(left.key) ? 100 : 1
        const rWeight = this.reportConfig.matchedKeys.includes(right.key) ? 100 : 1
        return right.value * rWeight - left.value * lWeight
      })
      return result
    },
    topOfMergedData() {
      const topThree = this.sortedMergedData.filter(i => this.reportConfig.matchedKeys.includes(i.key))
      this.defaultActives = this.readonly ? this.sortedMergedData.map(i => i.key) : topThree.map(i => i.key)
      return topThree
    },
    chartOptions() {
      const filterProps = this.reportConfig.resolveKeys
      const propNames = filterProps.map(key => this.reportConfig.tableDefines[key].label)
      const myTop = this.topOfMergedData
      const propSumColored = Object.keys(this.mergedData).map(key => myTop.some(i => i.key == key) ? {
        value: this.mergedData[key],
        itemStyle: { color: config.color.error }
      } : this.mergedData[key])
      const rotateConfig = this.reportConfig.chartBarRotate ? {
        yAxis: { type: 'category', data: propNames },
        xAxis: { type: 'value' }
      } : {
        xAxis: { type: 'category', data: propNames },
        yAxis: { type: 'value' }
      }
      return {
        title: {
          text: '测验汇总',
          subtext: this.reportConfig.chartSubtext,
          left: 'center'
        },
        ...rotateConfig,
        tooltip: {
          trigger: 'item'
        },
        series: [{
          data: propSumColored,
          type: 'bar',
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
    }
  },
  watch: {
    source: {
      immediate: true,
      handler: function(val) {
        if (!val?.datas?.length) return
        this.$nextTick(() => {
          const resolver = this[this.category + 'Resolver']
          if (typeof resolver === 'function') resolver()
        })
      }
    }
  },
  methods: {}
}