<template>
  <table-list
    ref="tableRef"
    class="mt-2"
    :total="total"
    :headers="headers"
    :items="tableData"
    :is-tools="false"
    :show-page="true"
    :page-info="pageInfo"
    @pageHandleChange="drillPageHandleChange"
    :show-select="false"
    :elevation="0"
    :loading="loading"
    :disable-sort="true"
    :height="height"
  ></table-list>
</template>

<script>
import TableList from '@/components/List/table.vue'
import { dealExcelToTableData } from './utils/dataDeal'
import { drillingData2 } from '@/api'
import { combinationDetail } from '@/api/dataBook'
export default {
  name: 'tableShowDialog',
  components: { TableList },
  computed: {},
  props: {
    height: {
      type: [String, Number],
      default: '528'
    },
    chartCustomizedShow: {
      type: Boolean,
      default: false
    },
    useField: {
      type: Boolean,
      default: false
    },
    fieldInfo: {
      type: Object,
      default: () => {}
    },
    excelData: {
      type: Array,
      default: () => []
    },
    headerEnNames: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      tableShow: true,
      loading: false,
      headers: [],
      tableData: [],
      allTableData: [],
      total: 0,
      pageInfo: {
        current: 1,
        size: 10
      }
    }
  },
  created () {
    // this.$refs.tableRef
    this.pageInfo.current = 1
    if (this.chartCustomizedShow) this.useField ? this.getCombinationItems() : this.analyzingEexel() // 定制展示
  },
  mounted () {
  },
  watch: {},
  methods: {
    getEexelData () { // 表格生成
      this.loading = true
      const startIndex = (this.pageInfo.current - 1) * this.pageInfo.size
      const endIndex = Math.min(startIndex + this.pageInfo.size, this.allTableData.length)
      this.tableData = this.allTableData.slice(startIndex, endIndex)
      this.loading = false
      this.$emit('finished')
    },
    async getFieldData () { // 数据域生成
      this.loading = true
      try {
        const filter = this.fieldInfo?.filterObj || { query: [], orders: [] }
        const engNameArr = this.headers.map(i => i.value)
        const obj = {
          metaDataCombinationEngName: this.fieldInfo.fieldEngName, // 数据域英文名称
          metaDataCombinationItemEngName: engNameArr, // 元数据成员英文名称
          query: filter.query,
          page: {
            ...this.pageInfo,
            orders: filter.orders
          }
        }
        if (!obj.metaDataCombinationItemEngName?.length) return console.error('元数据成员英文名称metaDataCombinationItemEngName缺失')
        const { data } = await drillingData2(obj)
        this.tableData = data?.records || []
        this.total = data?.total || 0
      } catch (error) {
        this.$snackbar.error(error.msg || error)
      } finally {
        this.loading = false
        this.$emit('finished')
      }
    },
    upDate (type) { // 定制新增编辑
      if (this.useField && !Object.keys(this.fieldInfo).length) return
      if (type === 'chartTypeChange') this.useField ? this.getFieldData() : this.analyzingEexel()
      if (type === 'tableHeaderChange') this.useField ? this.getFieldData() : this.getEexelData()
    },
    // 解析Eexel
    analyzingEexel () {
      this.loading = true
      const { headers, tableData } = dealExcelToTableData(this.excelData)
      if (this.headerEnNames?.length) {
        this.headers = this.headerEnNames.map(e => {
          return headers.find(i => i.value === e)
        }).filter(f => f)
      } else {
        this.headers = headers
      }
      this.allTableData = tableData
      this.total = tableData?.length || 0
      this.getEexelData()
    },
    // 根据数据域id拿元数据列表 // 表头
    async getCombinationItems () {
      this.loading = true
      const obj = { metaDataCombinationId: this.fieldInfo.fieldId, publicSystem: 1 }
      try {
        const { data } = await combinationDetail(obj)
        const metaData = data.metaDataCombinationItems // 元数据成员
        this.headers = this.headerEnNames.map(e => {
          const item = metaData.find(i => i.dbColumn === e)
          return item ? { text: item.title, value: item.dbColumn } : null
        }).filter(f => f)
      } catch (error) {
        this.$snackbar.error(error.msg || error)
      } finally {
        this.getFieldData()
      }
    },
    drillPageHandleChange (index) {
      this.pageInfo.current = index
      this.useField ? this.getFieldData() : this.getEexelData()
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
