<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>
          <year-month-select v-model="params.yearAndMonth" :showMonth="false"></year-month-select>
        </div>
      </template>

      <template slot="cygsSearch">
        <el-input v-model="params.cygs" />
      </template>

      <template slot="situationCountSearch">
        <div style="display: flex; align-items: center;">
          <span>参研个数：</span>
          <avue-input-number v-model="params.situationCountMin" :min="0" style="width: 100px !important;"></avue-input-number>
          <span style="width: 20px; text-align: center;">至</span>
          <avue-input-number v-model="params.situationCountMax" :min="0" style="width: 100px !important;"></avue-input-number>
        </div>
      </template>

      <template v-for="col of redColKey" :slot="col" slot-scope="{ row }">
        <span v-if="row.total < 183" style="color: red;" :key="col">{{ row[col] }}</span>
        <span v-else style="color: #606266;" :key="col">{{ row[col] }}</span>
      </template>
      
    </avue-crud>

    <WideTablePrinter
      ref="printWideTable"
      v-if="wideTableColumns.length"
      :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 NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import {getToken} from "@/util/auth";
import {downloadXls} from "@/util/util";
import Decimal from "decimal.js";


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

      redColKey: ['7', '8', '9', '10', '11', '12'],
    };
  },
  watch: {
    'params.yearAndMonth'(newVal) {
      this.page.currentPage = 1;
      this.getList(this.page);
    }
  },
  methods: {
    handleExport() {
      this.$confirm("是否导出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        NProgress.start();
        exportBloByPost(`/api/kd-scientific/technician/cyryhmc/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
          downloadXls(res.data, `${this.params.yearAndMonth}参研人员花名册.xlsx`);
          NProgress.done();
        })
      });
    },
    /**
     * 打印表格
     * @param isLandscape 是否横向打印
     */
    printTable(isLandscape) {
      this.wideTableColumns = this.$refs.crud.columnOption;
      this.printTitle = `${this.params.yearAndMonth}参研人员花名册`;
      this.$nextTick(() => {
        this.$refs.printWideTable.printTable(isLandscape);
      })
    },
  },
}, {
  // 模块路径
  name: 'techPerson/cyPersonRoster',
  res: ({ data }) => {
    data.records = data.records.map(item => {
      let cyxmList = item.xmList.map(item => item.xmmc);
      item.cyxm = cyxmList.join(';');
      item.situationCount = item.xmList.length;

      item.hoursList = item.hoursList.forEach(hourItem => {
        item[Number(hourItem.workDate.substring(hourItem.workDate.length - 2))] = hourItem.workHours;
      });

      let total = new Decimal(0);
      for (let i=0; i<12; i++) {
        console.log(item[`${i+1}`])
        total = total.add(new Decimal(item[`${i+1}`] || 0));
      }
      item.total = total;


      return item;
    });

    return data;
  }
});
</script>
