<template>
  <basic-container>
    <avue-crud
      v-bind="bindVal"
      v-on="onEvent"
      v-model="form"
      :page.sync="page"
    >
      <template slot="menuLeft">
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-download"
          @click="handleExport"
        >
          导出
        </el-button>
        <print-table-btn @click="printTable" />
        
        <div style="display: flex; align-items: center;">
          <year-month-select v-model="params.yearAndMonth" :showAllYear="false"></year-month-select>
        </div>
      </template>

      <template slot="jczSearch">
        <div style="display: flex; align-items: center;">
          <span>净残值：</span>
          <avue-input-number v-model="params.jczMin" :min="0" style="width: 100px !important;"></avue-input-number>
          <span style="width: 20px; text-align: center;">至</span>
          <avue-input-number v-model="params.jczMax" :min="0" style="width: 100px !important;"></avue-input-number>
        </div>
      </template>

      <template slot="zcyzSearch">
        <div style="display: flex; align-items: center;">
          <span>资产原值：</span>
          <avue-input-number v-model="params.zcyzMin" :min="0" style="width: 100px !important;"></avue-input-number>
          <span style="width: 20px; text-align: center;">至</span>
          <avue-input-number v-model="params.zcyzMax" :min="0" style="width: 100px !important;"></avue-input-number>
        </div>
      </template>

      <template slot="yzjeSearch">
        <div style="display: flex; align-items: center;">
          <span>月折旧额：</span>
          <avue-input-number v-model="params.yzjeMin" :min="0" style="width: 100px !important;"></avue-input-number>
          <span style="width: 20px; text-align: center;">至</span>
          <avue-input-number v-model="params.yzjeMax" :min="0" style="width: 100px !important;"></avue-input-number>
        </div>
      </template>

      <template slot="attendanceHoursSearch">
        <div style="display: flex; align-items: center;">
          <span>月使用工时：</span>
          <avue-input-number v-model="params.attendanceHoursMin" :min="0" style="width: 100px !important;"></avue-input-number>
          <span style="width: 20px; text-align: center;">至</span>
          <avue-input-number v-model="params.attendanceHoursMax" :min="0" style="width: 100px !important;"></avue-input-number>
        </div>
      </template>

      <template slot="workHoursSearch">
        <div style="display: flex; align-items: center;">
          <span>已研发工时：</span>
          <avue-input-number v-model="params.workHoursMin" :min="0" style="width: 100px !important;"></avue-input-number>
          <span style="width: 20px; text-align: center;">至</span>
          <avue-input-number v-model="params.workHoursMax" :min="0" style="width: 100px !important;"></avue-input-number>
        </div>
      </template>
      
    </avue-crud>

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

    <WideTablePrinter
      ref="printWideTable"
      :columns="wideTableColumns"
      :data="data"
      :print-title="printTitle"
      :rows-per-page="30"
      :default-landscape="true"
    />
  </basic-container>
</template>

<script>
import YearMonthSelect from "@/components/year-month-select";
import {exportBlob} from "@/api/common";
import {getToken} from "@/util/auth";
import {downloadXls} from "@/util/util";
import moment from "moment";
import Decimal from "decimal.js";


export default window.$crudCommon({
  components: {
    YearMonthSelect,
  },
  data() {
    return {
      params: {
        yearAndMonth: moment(new Date()).format('YYYYMM'),
      },
      defaultColumns: [],

      wideTableColumns: [],
      printTitle: "",
    };
  },
  watch: {
    'params.yearAndMonth'(newVal) {
      this.page.currentPage = 1;
      this.getList(this.page);
    }
  },
  methods: {
    handleExport() {
      exportBlob(`/api/kd-scientific/asset/kyyqsbzjfyfpb?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
        downloadXls(res.data, `${this.params.yearAndMonth}科研仪器设备折旧费用分配表.xlsx`);
      });
    },
    /**
     * 打印表格
     * @param isLandscape 是否横向打印
     */
    printTable(isLandscape) {
      this.wideTableColumns = this.$refs.crud.columnOption;
      this.printTitle = `${this.params.yearAndMonth}科研仪器设备折旧费用分配表`;
      this.$nextTick(() => {
        this.$refs.printWideTable.printTable(isLandscape);
      })
    },
  },
}, {
  // 模块路径
  name: 'yfCostManage/yfCostStatistics/devDepreAllocation',
  res: ({ data }) => {
    data.records = data.records.map(item => {
      let _yanfaFenTanLv = item.yanfaFenTanLv;

      item.zcbm = item.asset ? item.asset.zcbm : '';
      item.zcmc = item.asset ? item.asset.zcmc : '';
      item.zclb = item.asset ? item.asset.zclb : '';
      item.yt = item.asset ? item.asset.yt : '';
      item.zcyz = item.asset ? item.asset.zcyz : '';
      item.jcz = item.asset ? item.asset.jcz : '';
      item.yzje = item.asset ? item.asset.yzje : '';
      item.attendanceHours = item.asset ? item.asset.zgs : '';
      item.yanfaFenTanLv = new Decimal(item.yanfaFenTanLv).mul(new Decimal(100));
      item.yanfaTanXiao = Number(new Decimal(item.yzje || 0).mul(_yanfaFenTanLv || 0)).toFixed(2);
      return item;
    });
    return data;
  },
});
</script>
