<template>
  <div class="pa-3">
    <m-filter :option="filter" class="mb-3" :show-btn="false"></m-filter>
    <m-card
      :title="title"
      class="pb-3"
    >
      <template #title>
        <v-text-field
          v-model="table.search"
          style="font-weight: 200;"
          class="input-width-m"
          append-icon="mdi-magnify"
          label="快速检索数据"
          clearable
          dense
          outlined
          hide-details
        ></v-text-field>
      </template>
      <m-table
        ref="table"
        :show-select="false"
        :headers="table.headers"
        :items="table.items"
        :loading="table.loading"
        :height="height"
        :is-tools="false"
        :show-page="false"
        :disable-sort="true"
        :search="table.search"
        :elevation="0"
        :hide-default-header="true"
      >
        <template #header>
          <thead class="thead">
            <tr class="tr">
              <td class="td" v-for="header in table.headers" :key="header.value">{{ header.text }}</td>
            </tr>
          </thead>
        </template>
        <template #body="{ items }">
          <tbody class="tbody">
            <template v-for="(item, index) in items">
              <tr
                v-for="(val, i) in item.data"
                :key="index + '-' + i"
                class="tr"
              >
                <td class="noHover td" v-if="!i" :rowspan="item.data.length">
                  <div class="d-flex align-center justify-center">
                    <span class="mr-3">{{ item.city }}</span>
                    <tool-tip v-if="dict[item.city]" :text="dict[item.city].join('、')" right>
                      <v-icon>mdi-help-circle-outline</v-icon>
                    </tool-tip>
                  </div>
                </td>
                <td
                  class="td"
                  v-for="(header, _i) in headersOver"
                  :key="index + '-' + i + '-' + _i"
                >{{ val[header.value] }}</td>
              </tr>
            </template>
          </tbody>
        </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 ToolTip from '@/components/Tooltip'
import {
  getByDeptNameList,
  getCityClassification,
  getByPositionList
} from '@/api/report'
import cloneDeep from 'lodash/cloneDeep'
export default {
  name: 'the-common',
  components: { MCard, MTable, MFilter, ToolTip },
  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: 'city', align: 'center' },
          { text: '职位工作年限', value: 'positionWorkExp', align: 'center' },
          { text: 'P25', value: 'p25', align: 'center' },
          { text: 'P50', value: 'p50', align: 'center' },
          { text: 'P75', value: 'p75', align: 'center' },
          { text: 'P90', value: 'p90', align: 'center' },
          { text: '最小值', value: 'min', align: 'center' },
          { text: '最大值', value: 'max', align: 'center' },
          { text: '平均值', value: 'average', align: 'center' },
          { text: '样本数量', value: 'count', align: 'center' }
        ],
        items: [],
        loading: false
      },
      dict: {}
    }
  },
  computed: {
    headersOver () {
      return this.table.headers.slice(1, this.table.headers.length)
    },
    title () {
      const str = this.titleObj.msg
      const _str = this.query[this.titleObj.key]
      if (_str) {
        return `${str} - ${_str}`
      }
      return str + '- 全部'
    }
  },
  watch: {
    param: {
      handler (val) {
        this.query = cloneDeep(this.param)
        this.init()
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    // this.query = cloneDeep(this.param)
    // this.init()
    if (this.type === '2') {
      this.initDict()
    }
  },
  mounted () {
    this.$nextTick(() => {
      const el = this.$refs.table.$el.getBoundingClientRect()
      this.height = window.innerHeight - el.top - 50
    })
  },
  methods: {
    async initDict () {
      try {
        const { data } = await getCityClassification()
        this.dict = data
      } 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.reduce((acc, cur) => {
          const item = acc.find(_e => _e.city === cur.city)
          const { city, ...content } = cur
          if (!item) {
            acc.push({
              city: cur.city,
              data: [
                content
              ]
            })
            return acc
          }
          item.data.push(content)
          return acc
        }, [])
      } 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 {
  top: 0;
  .tr {
    background: #e7f2fb;
    .td {
      &:last-of-type {
        border-right: 1px solid #E8E8E8;
      }
      color: rgba(0,0,0,.6);
      border-left: 1px solid #E8E8E8;
      border-bottom: 1px solid #E8E8E8;
      text-align: center;
      font-size: 14px;
      font-weight: bolder;
    }
  }
}
.tbody {
  .tr {
    &:last-of-type {
      .td {
        border-bottom: 1px solid #E8E8E8;
      }
    }
    &:hover {
      .noHover {
        background-color: #FFF;
      }
    }
    .td {
      border-left: 1px solid #E8E8E8;
      text-align: center;
      &:last-of-type {
        border-right: 1px solid #E8E8E8;
      }
    }
  }
}
</style>
