<template>
  <basic-container>
    <avue-crud
      v-bind="bindVal"
      v-on="onEvent"
      v-model="form"
      :page.sync="page"
      :permission="permissionList"
      :summary-method="summaryMethod"
    >
      <template slot="menuLeft">
        <el-button
          v-if="!isSelAnnual"
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          @click="handleDelete"
        >
          删 除
        </el-button>
        <el-button
          v-if="!isSelAnnual"
          type="success"
          size="small"
          plain
          icon="el-icon-upload2"
          @click="handleImport"
        >
          导入
        </el-button>
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-download"
          @click="handleExport"
        >
          导出
        </el-button>
        <print-table-btn @click="printTable" />
      </template>

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

      <template slot="xmIdForm">
        <project-select placeholder="请选择项目名称" v-model="form.xmId" :params="{ yearAndMonth: params.yearAndMonth }" @change="handleProjectChange"></project-select>
      </template>

      <template slot="amountSearch">
        <div style="display: flex; align-items: center;">
          <span>金额(元)：</span>
          <avue-input-number v-model="extraParams.amountMin" :min="0" style="width: 140px !important;"></avue-input-number>
          <span style="width: 20px; text-align: center;">至</span>
          <avue-input-number v-model="extraParams.amountMax" :min="0" style="width: 140px !important;"></avue-input-number>
        </div>
      </template>
      
    </avue-crud>

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

    <WideTablePrinter
      ref="printWideTable"
      :columns="wideTableColumns"
      :data="wideTableData"
      :print-title="pageTitle"
      :rows-per-page="30"
      :default-landscape="true"
      :zoom="90"
    >
      <template slot="tableHeader">
        <div>
          <span style="margin-right: 200px;">科目：研发支出</span>
          <span style="margin-right: 200px;">{{ `期间：${params.yearAndMonth}` }}</span>
          <span style="margin-right: 200px;">币种：人民币</span>
        </div>
      </template>
    </WideTablePrinter>
  </basic-container>
</template>

<script>
import { getList as getCompSubjectList } from "@/api/basicResource/compSubjectSetting";
import YearMonthSelect from "@/components/year-month-select";
import UploadExcelDialog from "@/components/upload-excel-dialog";
import projectSelect from "@/components/project-select";
import {exportBlob} 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,
    projectSelect,
    UploadExcelDialog,
  },
  data() {
    return {
      params: {
        yearAndMonth: "",
      },
      isSelAnnual: false,

      wideTableColumns: [],
      wideTableData: [],
    };
  },
  watch: {
    'params.yearAndMonth'(newVal) {
      if (newVal.length > 4) {
        // 是否勾选未全年
        this.isSelAnnual = false;
      } else {
        this.isSelAnnual = true;
      }
      this.page.currentPage = 1;
      this.getList(this.page);
    },
  },
  computed: {
    ...mapGetters(['tag']),
    permissionList() {
      return {
        addBtn: !this.isSelAnnual,
        editBtn: !this.isSelAnnual,
        delBtn: !this.isSelAnnual,
      };
    },
    pageTitle() {
      let yearAndMonthCN = '';
      if (this.params.yearAndMonth) {
        let formatTemp = this.params.yearAndMonth.length <= 4 ? 'yyyy年' : 'yyyy年MM月'
        yearAndMonthCN = moment(this.params.yearAndMonth).format(formatTemp)
      }

      let tagName = this.tag.label.replace(/[0-9]./, '');

      return `${yearAndMonthCN}${tagName}`;
    }
  },
  mounted() {
    this.getSubjectList();
  },
  methods: {
    // 合计
    summaryMethod({ columns, data }) {
      return summaryMethod(columns, data, this.option.sumColumnList, 'esubjectName');
    },
    getSubjectList() {
      getCompSubjectList(1, 99999).then(res => {
        this.loading = false;
        if (res.data.code == 200) {

          const column = this.findObject(this.option.column, "esubjectId");
          column.dicData = res.data.data.records;
        }
      })
    },
    handleImport() {
      let excelParams = { yearAndMonth: this.params.yearAndMonth };
      this.$refs.uploadExcelDialog.open('/api/kd-scientific/xm/cost/details/import', excelParams);
    },
    uploadAfter() {
      this.page.currentPage = 1;
      this.getList(this.page);
    },
    handleExport() {
      exportBlob(`/api/kd-scientific/xm/cost/details/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
        downloadXls(res.data, `${this.pageTitle}.xlsx`);
      });
    },
    /**
     * 打印表格
     * @param isLandscape 是否横向打印
     */
    printTable(isLandscape) {
      this.wideTableColumns = this.printOption.column;
      this.wideTableData = [...this.$refs.crud.list];
      if (this.wideTableData.length) {
        this.wideTableData.push(this.$refs.crud.sumsList);
      }
      this.$nextTick(() => {
        this.$refs.printWideTable.printTable(isLandscape);
      })
    },
    getFormData() {
      const column = this.findObject(this.option.column, "esubjectId");
      let currSubjectObj = column.dicData.find(item => item.id == this.form.esubjectId);
      
      return {
        ...this.form,
        esubjectName: currSubjectObj ? currSubjectObj.name : '',
        yearAndMonth: this.params.yearAndMonth,
        esubjectCode: currSubjectObj ? currSubjectObj.code : ''
      };
    },
  },
}, {
  // 模块路径
  name: 'yfCostManage/basicDataSetting/yfCostBill',
  res: ({ data }) => {
    return data;
  },
});
</script>
