<template>
  <div>
    <div class="d-flex mt-2 mb-2">
      <!-- 是否有下拉选项 -->
      <div v-if="hasSelect" style="width: 250px;">
        <v-select
          v-model="selectValues"
          :items="selectItems"
          outlined
          dense
          attach
          :menu-props="{ offsetY: true }"
          @change="handleChange"
        ></v-select>
      </div>
    </div>
    <table-list
      :loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      :page-info="pageInfo"
      :is-tools = "false"
      :show-select="false"
      :elevation="0"
      :disableSort="false"
      @pageHandleChange="pageHandleChange"
      @sort="handleSort"
    />
  </div>
</template>

<script>
import TableList from '@/components/List/table.vue'
import { drillingData2 } from '@/api'
import { getSettingList } from '@/api/system'
import cloneDeep from 'lodash/cloneDeep'
export default {
  name: 'show-table',
  components: { TableList },
  props: {
    otherParam: {
      type: Object,
      default: () => {}
    },
    query: {
      type: Array,
      default: () => []
    },
    // 表格钻取 读取自定义配置
    headerCode: {
      type: String,
      default: ''
    },
    // 自定义表头检索 key值
    type: {
      type: String,
      default: ''
    }
  },
  watch: {
    otherParam: {
      handler: function (val) {
        this.init()
      },
      deep: true
    }
  },
  data () {
    return {
      selectValues: null,
      selectItems: [],
      hasSelect: false,
      loading: false,
      headers: [],
      items: [],
      total: 0,
      pageInfo: {
        size: 10,
        current: 1
      },
      orders: [],
      param: {},
      dbColumn: '',
      typeQuery: {}
    }
  },
  async created () {
    await this.getSetting()
    this.init()
  },
  methods: {
    handleChange () {
      this.pageInfo.current = 1
      if (!this.selectValues) {
        this.typeQuery = {}
        this.init()
        return
      }
      this.typeQuery = {
        dbColumn: this.dbColumn,
        compare: '=',
        value: this.selectValues
      }
      this.init()
    },
    async getSetting () {
      try {
        const { data } = await getSettingList({ entity: { code: this.headerCode, webSettingCategory: 'tableManage' } })
        const param = data.records[0].entity
        const { enName, all, keys } = param.content
        this.param = {
          metaDataCombinationEngName: enName,
          metaDataCombinationItemEngName: all.map(e => e.dbColumn),
          query: this.query
        }
        this.headers = param.content.show.map(e => {
          return {
            text: e.title,
            value: e.dbColumn,
            align: 'start'
          }
        })
        if (!keys && !keys.length) {
          this.hasSelect = false
          return
        }
        const item = keys.find(e => e.key === this.type)
        // console.log(item)
        // if (this.params.origin.content.keys.length === 1) {
        //   item = this.params.origin.content.keys[0]
        // }
        if (!item) {
          this.hasSelect = false
          return
        }
        // 点击时保存元数据id
        // this.metaDataCombinationItemId = item.metaDataCombinationItemId
        this.hasSelect = true
        this.selectValues = null
        this.dbColumn = item.dbColumn
        this.selectItems = [
          { text: '全部', value: null },
          ...item.items.map(e => ({ text: e, value: e }))
        ]
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    async init () {
      const query = cloneDeep(this.param)
      if (Object.keys(this.typeQuery).length) {
        query.query = [
          ...query.query,
          this.typeQuery
        ]
      }

      const param = {
        ...this.otherParam,
        ...query,
        page: {
          ...this.pageInfo,
          orders: this.orders
        }
      }
      this.loading = true
      try {
        const { data } = await drillingData2(param)
        this.items = data.records
        this.total = data.total
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    pageHandleChange (index) {
      this.pageInfo.current = index
      this.init()
    },
    handleSort (obj) {
      // this.items = []
      this.orders = obj
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
