<template>
  <div>
    <m-filter :option="filter" class="mb-3" @search="handleSearch" @resetNoParams="handleReset"></m-filter>
    <m-card
      :title="title"
      class="pb-3"
    >
      <m-table
        ref="table"
        :show-select="false"
        :headers="table.subHeaders"
        :items="table.items"
        :loading="table.loading"
        :height="height"
        :is-tools="false"
        :show-page="false"
        :disable-sort="true"
        :hide-default-header="true"
        :search="table.search"
        :elevation="0"
      >
        <template #header>
          <thead class="thead">
            <tr class="thead-first">
              <th
                v-for="head in table.headers"
                :key="head.text"
                class="thead-first-th"
                :colspan="head.colspan"
              >
              {{ head.text }}
              </th>
            </tr>
            <tr class="thead-first">
              <th
                class="thead-first-th"
                v-for="(sub, index) in table.subHeaders"
                :key="sub.value + index"
              >
                {{ sub.text }}
              </th>
            </tr>
          </thead>
        </template>
      </m-table>
    </m-card>
  </div>
</template>

<script>
import MFilter from '@/components/Filter'
import MCard from '@/components/MCard'
// import UploadBtn from '@/components/UploadBtn'
import MTable from '@/components/List/table'
import {
  getDict,
  getByDeptNameList,
  getByPositionList
} from '@/api/report'
import cloneDeep from 'lodash/cloneDeep'
export default {
  name: 'the-common',
  components: { MCard, MTable, MFilter },
  props: {
    filter: {
      type: Object,
      default: () => {}
    },
    param: {
      type: Object,
      default: () => {}
    },
    titleObj: {
      type: Object,
      default: () => {}
    },
    type: {
      type: String,
      default: '1'
    }
  },
  data () {
    return {
      height: 100,
      query: {},
      table: {
        search: '',
        headers: [
          { text: '', value: 'cityName', colspan: 1 }
        ],
        subHeaders: [
          { text: '城市', value: 'city' }
        ],
        items: [],
        loading: false
      }
    }
  },
  computed: {
    title () {
      const str = this.titleObj.msg
      const _str = this.query[this.titleObj.key]
      if (_str) {
        return `${str} - ${_str}`
      }
      return str + '- 全部'
    }
  },
  created () {
    this.query = cloneDeep(this.param)
    this.initDict()
    this.init()
  },
  mounted () {
    this.$nextTick(() => {
      const el = this.$refs.table.$el.getBoundingClientRect()
      this.height = window.innerHeight - el.top - 50
    })
  },
  methods: {
    // 更新表头
    async initDict () {
      try {
        const { data } = await getDict(this.query)
        const list = [
          'oneYearOrLess',
          'twoToFourYear',
          'fiveToSevenYear',
          'eightYearOrMore'
        ]
        const header = data.positionWorkExp.map((_e, _i) => ({ text: _e, value: list[_i], colspan: 4 }))
        this.table.headers.push(...header)
        const subHeaders = list.reduce((res, item) => {
          res.push(
            { text: 'P25', value: item + 'P25', align: 'center' },
            { text: 'P50', value: item + 'P50', align: 'center' },
            { text: 'P75', value: item + 'P75', align: 'center' },
            { text: 'P90', value: item + 'P90', align: 'center' }
          )
          return res
        }, [])
        this.table.subHeaders.push(...subHeaders)
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    async init () {
      this.table.loading = true
      const listApi = this.type === '1' ? getByDeptNameList : getByPositionList
      try {
        const { data } = await listApi(this.query)
        this.table.items = data
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.table.loading = false
      }
    },
    handleSearch (val) {
      Object.assign(this.query, val)
      this.init()
    },
    handleReset () {
      const obj = {}
      this.$emit('reset')
      this.filter.list.forEach(_e => {
        obj[_e.key] = _e.default
        _e.value = _e.default
      })
      Object.assign(this.query, obj)
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
.thead {
  background-color: #e7f2fb;
  font-size: 14px;
  font-weight: bold;
  color: rgba(0,0,0,.6);
  &-first {
    &-th {
      box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.12) !important;
      &:not(:first-of-type) {
        text-align: center !important;
      }
    }

  }
}
</style>
