<template>
  <div>
    <Form id="year-contract-table">
      <input name="year" type="hidden">
    </Form>
    <!--<PTVXETable id="table-year" :tableHeight="tableHeight" @on-result-change="_tableResultChange"-->
    <!--ref="pageTable" :getPage="getPage" hide-checkbox hide-page :show-footer="true">-->
    <!--<vxe-table-column-->
    <!--sortable-->
    <!--:field="item.key"-->
    <!--:title="item.title"-->
    <!--:min-width="item.width?item.width:200"-->
    <!--:fixed="item.fixed?item.fixed:undefined"-->
    <!--v-for="item in pageColumns" :key="item.key">-->
    <!--<template slot-scope="scope">-->
    <!--<div v-if="item.detail"><a @click.stop="_detailModal(scope.row)">{{scope.row[item.key]}}</a></div>-->
    <!--<span v-else>{{scope.row[item.key]}}</span>-->
    <!--</template>-->
    <!--</vxe-table-column>-->
    <!--</PTVXETable>-->

    <!--合计 暂时用此表格-->
    <element-table
      id="table-year"
      ref="pageTable"
      show-summary="true"
      sum="true"
      :get-page="getPage"
      hide-checkbox
      @on-result-change="_tableResultChange"
    >
      <el-table-column
        v-for="item in pageColumns"
        :key="item.key"
        :prop="item.key"
        :label="item.title"
        :width="item.width"
        :min-width="200"
        :fixed="item.fixed?item.fixed:undefined"
        sortable
      >
        <template slot-scope="scope">
          <div v-if="item.detail">
            <a @click.stop="_detailModal(scope.row)">{{ scope.row[item.key] }}</a>
          </div>
          <span v-else>{{ scope.row[item.key] }}</span>
        </template>
      </el-table-column>
    </element-table>
    <!--    <Details ref="detailsModal"></Details>-->
  </div>
</template>

<script>
export default {
  components: {
    // Details
  },
  data() {
    return {
      // tableHeight: '260',
      pageColumns: [
        {
          title: '签订日期',
          key: 'entrustDate',
          width: 200,
          detail: true,
          month: true
        },
        { title: '委托数量', key: 'quantity' },
        { title: '委托额度', key: 'fee' }
      ],
      getPage: {
        records: []
      },
      year: ''
    }
  },
  mounted() {
    this.$refs.pageTable._hideLoading()
  },
  methods: {
    _openTable(data, result) {
      this.year = data
      this.$refs.pageTable._hideLoading()
      this._page(result)
    },
    _page(data) {
      this.getPage.records = data
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'changeSize':
          // this._page()
          this.$refs.pageTable._hideLoading()
          break
      }
    },
    _detailModal(data) {
      console.log(data)
      // this.$refs.detailsModal._open(data)
    },

    /** *********************************导出-begin*********************************************/
    _exportSampleForm() {
      let result = []
      this.$store
        .dispatch('StatisticContract/pageYearContract', this._searchParams())
        .then(() => {
          result = this.$store.state.StatisticContract.page
          if (result.length === 0) {
            this.$Message.warning('暂无数据，不可导出！')
          } else {
            this.$Modal.confirm({
              title: '提示',
              content: '确定导出全部数据(最多导出5000条)？',
              onOk: () => {
                this.$exportExcel(
                  'table-year',
                  '年度委托量统计表',
                  this.pageColumns,
                  result
                )
              }
            })
          }
        })
    },
    // 参数
    _searchParams() {
      const data = this.$serialize('year-contract-table')
      if (this.year) {
        data.year = this.year
      }
      return this.$extend(data, { page: 1, rows: 5000 })
    }
    /** *********************************导出样品台账-end*********************************************/
  }
}
</script>
