<template>
  <basic-container>
    <avue-crud
      v-bind="bindVal"
      v-on="onEvent"
      v-model="form"
      :summaryMethod="summaryMethod"
    >
      <template slot="menuLeft">
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-download"
          @click="handleExport"
        >
          导出
        </el-button>
      </template>

      <template slot="body">
        <h3 class="page-title">{{ pageTitle }}</h3>
        <year-month-select v-model="params.yearAndMonth" :showAllYear="false"></year-month-select>
      </template>
      
    </avue-crud>

    <upload-excel-dialog ref="uploadExcelDialog" :uploadAfter="uploadAfter"/>

  </basic-container>
</template>

<script>
import YearMonthSelect from "@/components/year-month-select";
import {exportBloByPost} from "@/api/common";
import {getToken} from "@/util/auth";
import {downloadXls, summaryMethod} from "@/util/util";
import moment from "moment";
import { mapGetters } from "vuex";


export default window.$crudCommon({
  components: {
    YearMonthSelect,
  },
  data() {
    return {
      params: {
        yearAndMonth: "",
      },
      defaultColumns: [],

      wideTableColumns: [],
      printTitle: "",
    };
  },
  watch: {
    'params.yearAndMonth'() {
      this.getList();
    }
  },
  computed: {
    ...mapGetters(['tag']),
    pageTitle() {
      let yearAndMonthCN = this.params.yearAndMonth ? moment(this.params.yearAndMonth).format("yyyy年MM月") : '';
      return `${yearAndMonthCN}${this.tag.label}`.replace(/每月/g, '');
    }
  },
  methods: {
    // 合计
    summaryMethod({ columns, data }) {
      return summaryMethod(columns, data, this.option.sumColumnList, 'yearAndMonth');
    },
    loadData() {
      this.loading = true;
      this.api[this.option.list || 'getList'](this.getSearchParams()).then(res => {
        if (res.data.code == 200) {
          this.data = res.data.data;
        }
        
        this.loading = false;
      });
    },
    handleExport() {
      exportBloByPost(`/api/kd-scientific/cost/summary/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
        downloadXls(res.data, `${this.pageTitle}.xlsx`);
      });
    },
  },
}, {
  // 模块路径
  name: 'yfCostManage/yfCostStatistics/yfCostSummaryList',
});
</script>
