<template>
  <basic-container style="position: relative">
    <avue-crud
      :data="infoData"
      :option="options"
      :search.sync="search"
      :table-loading="visible"
      :page.sync="infoPages"
      @search-change="searchChange"
      @search-reset="resetChange"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
    </avue-crud>
  </basic-container>
</template>

<script>
import {confirmCount} from '@/api/report/report'
import CustomLoading from "@/components/Custom-Loading/index.vue";
import { dateFormat } from "@/util/date";
const columnEnum = {
  'data1': '总数',
  'data2': '机构登记数',
  'data3': '总库（其他）',
}
const pages = { total: 0, size: 10, currentPage: 1 }
const baseOptions = {
  dateBtn: false,
  addBtn: false,
  editBtn: false,
  delBtn: false,
  height: "auto",
  reserveSelection: false,
  border: true,
  columnBtn: false,
  refreshBtn: false,
  menu: false,
  tip: false,
  searchMenuSpan: 6,
  selection: false,
  headerAlign: 'center',
  align: 'center',
}
export default {
  components: {CustomLoading},
  data() {
    return {
      infoPages: Object.assign({}, pages),
      infoData: [],
      visible: false,
      search: {},
      headColum: [],
    }
  },
  created() {
    this.getList()
  },
  computed: {
    options() {
      const tableHead = this.headColum.map((item, index) => ({
        label: item.gname,
        display:false,
        children: Object.keys(columnEnum).map((key) => ({
          label: columnEnum[key],
          prop:  `${index}_${item.gid}_${key}`,
          display:false,
          width: 100,
        }))
      }))
      const headTitle = {
        label: '机构名称',
        prop: 'name',
        search: true,
        fixed: true,
      }
      if(this.infoPages.total !== 0) {headTitle.width = 200}
      return {
        ...baseOptions,
        height: 200,
        width:200,
        column: [
          headTitle,
          ...tableHead,
          {
            label: '日期',
            prop: 'date',
            hide: true,
            display: false,
            type:'date',
            searchSpan: 8,
            searchRange:true,
            search:true,
          }]
      }
    }
  },
  methods: {
    sizeChange(size) {
      this.infoPages.size = size
      this.getList()
    },
    currentChange(page) {
      this.infoPages.page = page
      this.getList()
    },
    searchChange(values, done) {
      this.getList().then(() => {done()})
    },
    resetChange() {
      this.search = {}
      let params = {  size: 10, current: 1 }
      this.getList()
    },
    getList(values) {
      return new Promise(async(resolve, reject) => {
        this.visible = true
        let params = {
          size: this.infoPages.size,
          current: this.infoPages.currentPage,
          ...this.search,
        }
        if( Array.isArray(this.search.date) &&  this.search.date.length ) {
          const [stime, etime] =  this.search.date
          params.stime = dateFormat(stime, "yyyy-MM-dd")
          params.etime = dateFormat(etime, "yyyy-MM-dd")
          delete params.date
        }
        let resData = await confirmCount(params)
        if(resData.data.code === 200) {
          const { current, size ,total, records } = resData.data.data
          this.infoData = records.map((item) => ({
            ...item,
            ...this.decompose(item.list)
          }))
          const columnInfo = records.length ? records[0].list : []
          this.headColum = columnInfo
          this.infoPages = { ...this.infoPages, currentPage: current, total, size}
          this.visible = false;
          resolve(true)
        } else {
          reject()
        }
      })
    },
    decompose(list) {
      let obj = {}
      for (let i = 0; i < list.length; i++) {
        const item = list[i]
        Object.keys(item.dataVO).forEach((vitem) => {
          obj[`${i}_${item.gid}_${vitem}`] = item.dataVO[vitem]
        })
      }
      return obj
    }
  }
}
</script>

<style scoped lang="scss">

</style>
