<template>
  <div class="mb-3">
    <chart-template
      ref="panel"
      :table="table"
      :title="title"
      :option="option"
      :rotate="30"
      :drilling-title="drTitle"
      :custom-refresh-inside=true
      @refresh="$emit('refresh')"
      @drilling="handleClick"
      @drillingRefresh="handleEmitYears"
    >
      <template v-if="table" #table>
        <slot name="tableTools"></slot>
        <show-table :header-code="headerCode" :query="queryParam" :otherParam="otherParam" :type="typeValue" />
      </template>
      <template #tools>
        <div class="d-flex justify-space-between align-center">
          <div>
            <v-btn
              v-for="(data, index) in yearsData"
              :key="data.name"
              class="ma-2 pointer"
              outlined
              color="indigo"
              @click="handleClickYears(index)"
            >
              {{ data.name }}
            </v-btn>
          </div>
        </div>
      </template>
      <template #titleTools>
        <slot name="titleTools"></slot>
      </template>
      <template v-if="$scopedSlots.subtitle" #subtitle>
        <slot name="subtitle"></slot>
      </template>
    </chart-template>
    <m-dialog :visible.sync="showDialog" :title="dialogTitle" :footer="false" widthType="1">
      <div class="list">
          <show-table v-if="showDialog" ref="showTable" :header-code="headerCode" :query="queryParam" :otherParam="otherParam" :type="typeValue" />
        </div>
    </m-dialog>
  </div>
</template>

<script>
import MDialog from '@/components/Dialog'
import ShowTable from './showTable'
import ChartTemplate from '@/components/ChartTemplate'
import cloneDeep from 'lodash/cloneDeep'
export default {
  name: 'human-resources',
  components: { ChartTemplate, MDialog, ShowTable },
  props: {
    // 是否是表格
    table: {
      type: Boolean,
      default: false
    },
    // 钻取的表格的筛选的自定义key
    typeValueKey: {
      type: String,
      default: 'seriesName'
    },
    typeValueKeyEn: {
      type: String,
      default: ''
    },
    // 卡片标题
    title: {
      type: String,
      default: ''
    },
    // 图例对象
    option: {
      type: [Object, Array],
      default: () => {}
    },
    // 历年参数[{ name: '历年名字', param: {图表参数} }]
    yearsData: {
      type: Array,
      default: () => []
    },
    // 表格钻取 读取自定义配置
    headerCode: {
      type: String,
      default: ''
    },
    // 自定义query参数
    queryCallback: {
      type: Function,
      default: function () {
        return []
      }
    },
    otherParam: {
      type: Object,
      default: () => {}
    },
    // 点击钻取读取的字段名字 层级用逗号隔开 传空字符串回调原数据
    clickName: {
      type: String,
      default: 'name'
      // default: 'data,value'
    },
    // 点击钻取显示的标题名字 层级用逗号隔开, &符号隔开就是选择多个参数
    titleName: {
      type: String,
      default: 'name'
    },
    // 钻取查询参数
    query: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      typeValue: '',
      dialogTitle: '',
      showDialog: false,
      // 动态配置表格钻取
      // params: {},
      yearsIndex: 0,
      queryParam: this.query
    }
  },
  computed: {
    drTitle () {
      if (!this.yearsData.length) return ''
      return this.yearsData[this.yearsIndex].name ?? ''
    }
  },
  methods: {
    showParam (res, arr) {
      while (arr.length > 0) {
        const first = arr.shift()
        res = res[first]
      }
      return res
    },
    // 钻取表格数据
    async handleClick ({ params }) {
      if (params[0].componentType === 'markPoint') return
      if (!this.headerCode) return
      this.typeValue = this.typeValueKeyEn ? this.typeValueKeyEn : params[0][this.typeValueKey]
      let value = null
      if (this.clickName) {
        const list = this.clickName.split(',')
        value = list.length === 1 ? params[0][this.clickName] : this.showParam(cloneDeep(params[0]), list)
      } else {
        value = params
      }
      const type = this.titleName.includes(',')
      if (type) {
        const titleName = this.titleName.split(',')
        this.dialogTitle = titleName.length === 1 ? params[0][this.titleName] : this.showParam(cloneDeep(params[0]), titleName)
      } else {
        const titleName = this.titleName.split('&')
        this.dialogTitle = titleName.reduce((res, _v) => {
          res += `[${params[0][_v]}]`
          return res
        }, '')
      }
      // 自定义query
      if (this.queryCallback) {
        const arr = this.queryCallback(value) ?? []
        this.queryParam = [
          ...this.query,
          ...arr
        ]
      }
      this.showDialog = true
    },
    // 历年汇总点击事件
    handleClickYears (index) {
      this.yearsIndex = index
      // 调用钻取打开图表抽屉
      this.handleEmitYears()
    },
    handleEmitYears () {
      this.$emit('handleYears', {
        param: this.yearsData[this.yearsIndex].param,
        init: this.$refs.panel.drillingData
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
