<template>
  <basic-container v-loading="loading">
    <avue-form ref="searchForm" v-model="params" :option="searchOption" class="cl-search-form">
      <template slot-scope="{size}" slot="menuForm">
        <el-button type="primary" :size="size" icon="el-icon-search" @click="handleSearchBtn">查询</el-button>
        <el-button :size="size" icon="el-icon-delete" @click="handleResetBtn">清空</el-button>
      </template>
    </avue-form>
    <h3 class="page-title">{{ pageTitle }}</h3>
    <div style="display: flex; align-items: center;">
      <year-month-select v-model="yearAndMonth" :showAllYear="false" style="margin: 6px 0 20px;"></year-month-select>
      <el-radio-group v-model="costType" size="mini" style="margin: 8px 0 20px 8px;">
        <el-radio-button :label="1">费用化明细表</el-radio-button>
        <el-radio-button :label="2">资本化明细表</el-radio-button>
      </el-radio-group>
    </div>
    <template v-if="listData.length">
      <common-list
        v-for="(item, index) of listData"
        :data="item" :cost-type="costType"
        @printClick="handlePrintClick"
        @exportClick="handleExportClick"
        :key="index"
        style="margin-bottom: 25px;"
        ></common-list>
    </template>
    <el-empty v-else description="暂无数据"></el-empty>

    <WideTablePrinter
      ref="printWideTable"
      :columns="wideTableColumns"
      :data="wideTableData"
      :print-title="pageTitle"
      :rows-per-page="30"
      :default-landscape="true"
      :zoom="95"
    >
      <template slot="tableHeader">
        <div>
          <span style="margin-right: 140px;">{{ `研发项目编号：${currProject.xmbh}` }}</span>
          <span style="margin-right: 100px;">{{ `研发项目名称：${currProject.xmmc}` }}</span>
          <span style="margin-right: 100px;">{{ `支出类型：${currProject.costName}` }}</span>
          <span>{{ `金额单位：元` }}</span>
        </div>
      </template>
      <template slot="tableFooter">
        <div>
          <span>录入人：</span>
        </div>
        <div style="margin-top: 6px;">
          <span>主管人：</span>
        </div>
      </template>
    </WideTablePrinter>
  </basic-container>
</template>

<script>
import YearMonthSelect from "@/components/year-month-select";
import commonList from "./components/common-list.vue";
import { getList } from "@/api/externalReports/jjkcAuxiliaryDetails";
import moment from "moment";
import { mapGetters } from "vuex";
import {exportBloByPost} from "@/api/common";
import {getToken} from "@/util/auth";
import {downloadXls} from "@/util/util";

export default {
  components: {
    YearMonthSelect,
    commonList
  },
  data() {
    return {
      loading: false,
      searchOption: {
        submitBtn:false,
        emptyBtn:false,
        column: [{
          label: '项目名称',
          prop: 'xmmc',
          type: 'input',
        }]
      },
      listData: [],

      yearAndMonth: "",
      params: {},

      costType: 1,
      
      wideTableColumns: [],
      wideTableData: [],
      currProject: {}
    }
  },
  watch: {
    yearAndMonth() {
      this.loadData();
    },
    costType() {
      this.loadData();
    }
  },
  computed: {
    ...mapGetters(['tag']),
    pageTitle() {
      let yearAndMonthCN = this.yearAndMonth ? moment(this.yearAndMonth).format('yyyy年MM月') : '';
      return `${yearAndMonthCN}${this.tag.label}`;
    },
  },
  methods: {
    loadData() {
      let params = { ...this.params, type: this.costType };
      this.loading = true;
      getList({
        ...params,
        yearAndMonth: this.yearAndMonth,
      }).then(({ data }) => {
        this.loading = false;
        if (data.code == 200) {
          let allList = data.data.map(item => {
            let childArr = item.costList.map(costItem => {
              return { xmmc: item.xmmc, xmbh: item.xmbh, xmId: item.xmId, ...costItem, zl: '记' };
            });
            return childArr;
          });


          this.listData = allList;
        }
      }).catch(() => {
        this.loading = false;
      });
    },
    handleSearchBtn() {
      this.loadData();
    },
    handleResetBtn() {
      this.params = {};
      this.$refs.searchForm.resetForm();
      this.loadData();
    },
    handlePrintClick({ column, data, projectData }) {
      this.wideTableColumns = [...column];
      this.wideTableData = data;
      this.currProject = projectData;
      this.$nextTick(() => {
        this.$refs.printWideTable.printTable(true);
      })
    },
    handleExportClick({ xmId }) {
      const exportParams = { xmId, ...this.params, type: this.costType, yearAndMonth: this.yearAndMonth };
      exportBloByPost(`/api/kd-scientific/xm/cost/details/deduction-list/export?${this.website.tokenHeader}=${getToken()}`, exportParams).then(res => {
        downloadXls(res.data, `${this.pageTitle}.xlsx`);
      });
    },
  },
}
</script>

<style lang="scss">
.cl-search-form {
  .el-form-item--small .el-form-item__label {
    display: none;
  }
  .el-form-item--small .el-form-item__content {
    margin-left: 8px !important;
  }
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item  {
    margin-bottom: 6px;
  }
  .avue-form__group .el-col {
    width: auto !important;
    padding-top: 0 !important;
  }
}
</style>
