<template>
  <basic-container>
    <avue-crud
      v-bind="bindVal"
      v-on="onEvent"
      v-model="form"
      :page.sync="page"
      :before-open="handleBeforeOpen"
      :permission="permissionList"
      :header-cell-style="headerCellStyle" 
    >
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          @click="handleDelete"
        >
          清除考勤数据
        </el-button>
        <el-button
          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" />
        
        <div style="display: flex; align-items: center;">
          <year-month-select v-model="params.yearAndMonth" :showAllYear="false"></year-month-select>
        </div>
      </template>

      <!-- <template slot="technicianId" slot-scope="{ row }">
        <span>{{ row.name }}</span>
      </template>

      <template slot="gsTotalSearch">
        <div style="display: flex; align-items: center;">
          <avue-input-number v-model="params.gsTotalStart" :min="0"></avue-input-number>
          <span style="width: 70px; text-align: center;">至</span>
          <avue-input-number v-model="params.gsTotalEnd" :min="0"></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 UploadExcelDialog from "@/components/upload-excel-dialog";
import {exportBlob} from "@/api/common";
import {getToken} from "@/util/auth";
import {downloadXls} from "@/util/util";
import { deepClone, getMonthDatesWithMarkers } from "@/util/util";
import moment from "moment";
import ChineseHoliday from "@chnlib/chinese-holiday";


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

      wideTableColumns: [],
      printTitle: "",
    };
  },
  watch: {
    'params.yearAndMonth'(newVal) {
      this.refreshTableCol(newVal);
      this.page.currentPage = 1;
      this.getList(this.page);
    }
  },
  async created() {
    this.defaultColumns = deepClone(this.option.column);
    this.refreshTableCol(this.params.yearAndMonth);
  },
  beforeDestroy() {
    this.option.column = deepClone(this.defaultColumns);
  },
  methods: {
    // handleBeforeOpen(done, type) {
    //   this.option.column.forEach(item => {
    //     if (item.prop == "technicianId") {
    //       item.dicUrl = '/api/kd-scientific/technician/page';
    //       item.dicQuery.yearAndMonth = this.params.yearAndMonth;
    //     }
    //   });
    //   done();
    // },
    refreshTableCol(yearAndMonth) {
      let yearMonth = moment(yearAndMonth).format("YYYY-MM").split("-");
      const monthDays = getMonthDatesWithMarkers(Number(yearMonth[0]), Number(yearMonth[1]));

      let newColumns = deepClone(this.defaultColumns);

      monthDays.forEach((item) => {
        let col = {
          prop: moment(item.dateString).format('yyyyMMDD'),
          label: item.dayName + "" + item.day.toString(),
          type: 'number',
          precision: 1,
          min: 0,
          width: 45,
          align: 'center',
          isWorkDay: ChineseHoliday.isWorkday(item.dateString),
          showOverflowTooltip: true,
        }

        if (!ChineseHoliday.isWorkday(item.dateString)) {
          col.labelClassName = 'red';
          col.labelClassName = 'red';
        }
        newColumns.push(col);
      });
      newColumns.push({
        prop: "monthlyHours",
        label: "本月出勤/小时",
        type: 'number',
        precision: 1,
        min: 0,
        width: 70,
        align: 'center',
        showOverflowTooltip: true,
        display: false,
      }, {
        prop: "monthlyDays",
        label: "本月出勤/天",
        type: 'number',
        precision: 1,
        min: 0,
        width: 70,
        align: 'center',
        showOverflowTooltip: true,
        display: false,
      });

      this.option.column = newColumns;
    },
    getFormData() {
      const newFormData = { ...this.form, yearAndMonth: this.params.yearAndMonth  };
      let dailyAttendances = [];
      Object.keys(this.form).forEach(key => {
        if (key.indexOf(this.params.yearAndMonth) > -1) {
          if (this.form[key]) {
            dailyAttendances.push({
              workDate: key,
              workHours: this.form[key]
            });
          }
          delete newFormData[key];
        }
      });
      newFormData.dailyAttendances = dailyAttendances;
      return newFormData;
    },
    handleImport() {
      let excelParams = { yearAndMonth: this.params.yearAndMonth };
      this.$refs.uploadExcelDialog.open('/api/kd-scientific/attendance/import', excelParams);
    },
    uploadAfter() {
      this.page.currentPage = 1;
      this.getList(this.page);
    },
    handleExport() {
      exportBlob(`/api/kd-scientific/attendance/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);
      })
    },
    headerCellStyle ({ column }) {
      let color = column.labelClassName ? 'red' : 'rgba(0,0,0,.85)';
      return {
        color
      }
    }
  },
}, {
  // 模块路径
  name: 'yfCostManage/basicDataSetting/attenInfo',
  res: ({ data }) => {
    let newList = [];
    data.records.forEach((item) => {
      let objData = { ...item, id: item.technicianId };
      item.dailyAttendances.forEach(hourItem => {
        objData[hourItem.workDate] = (hourItem.workHours || 0).toFixed(1);
      });
      newList.push(objData);
    });
    data.records = newList;
    return data;
  },
});
</script>
