<template>
  <basic-container>
    <avue-crud
      v-bind="bindVal"
      v-on="onEvent"
      v-model="form"
      :page.sync="page"
      :before-open="handleBeforeOpen"
      :permission="permissionList"
    >
      <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="zcyzSearch">
        <div style="display: flex; align-items: center">
          <avue-input-number
            v-model="params.zcyzStart"
            :min="0"
          ></avue-input-number>
          <span style="width: 70px; text-align: center">至</span>
          <avue-input-number
            v-model="params.zcycEnd"
            :min="0"
          ></avue-input-number>
        </div>
      </template>

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

      <!-- 折旧额 -->
      <template slot="zjeSearch">
        <div style="display: flex; align-items: center">
          <avue-input-number
            v-model="params.zjeStart"
            :min="0"
          ></avue-input-number>
          <span style="width: 70px; text-align: center">至</span>
          <avue-input-number
            v-model="params.zjeEnd"
            :min="0"
          ></avue-input-number>
        </div>
      </template>
    </avue-crud>

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

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

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

        wideTableColumns: [],
        printTitle: "",
      };
    },
    watch: {
      "params.yearAndMonth"(newVal) {
        if (newVal.length > 4) {
          this.page.currentPage = 1;
          this.getList(this.page);
        }
      },
      
    },
    methods: {
      handleExport() {
        exportBloByPost(
          `/api/kd-scientific/technician/export?${
            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: "deviceManage/yfCostShareList",
    res: ({ data }) => {
      return data;
    },
  }
);
</script>
