<template>
  <div class="main">
    <a-row>
      <a-card :body-style="{ 'padding-top': '10px' }">
        <div class="block">
          <!-- <span>月份</span>
          <a-month-picker v-model="selectDate" placeholder="选择年" @change="changeDate" :disabled-date="disabledDate" :allow-clear="false"/> -->
          <a-button type="primary" icon="upload" style="float: right;margin:0 5px" @click="uploadExecl">导入(.xls/.xlsx文件)</a-button>
          <!-- <a-button type="primary" icon="download" style="float: right;margin:0 5px" @click="exportExecl">导出</a-button> -->
          <a-button type="primary" style="float: right;margin:0 5px" @click="deleteExecl">删除</a-button>
          <a-button type="primary"  style="float: right;margin:0 5px" @click="searchExecl">查询</a-button>
          <span style="float:right">
            <a-upload
              ref="upload"
              :action="'/modular-source/6ace62b8e2bb467d98286d260aebcef2/pdcApi/dc/insp/pblm/importHistoryZgList'"
              :multiple="false"
              :headers="header"
              :data="params"
              accept=".xls,.xlsx"
              :show-upload-list="false"
              @change="handleChange">
              <a-button size="small" type="primary" v-show="false" ref="uploadBtn">点击上传</a-button>
            </a-upload>
          </span>
        </div>
      </a-card>
    </a-row>
    <a-row>
      <form ref="formMain4" id="formMain4" target="frameMain4" :action="reportSrc" method="post">
        <input type="hidden" name="width" v-model="windowWidth">
        <input type="hidden" name="height" v-model="windowHeight">
        <input type="hidden" name="year" :value="year">
        <input type="hidden" name="moon" :value="month">
        <input type="hidden" name="flag" :value="flag">
        <input type="hidden" name="excelName" v-model="excelName">
        <input type="hidden" name="tableName" v-model="tableName">
      </form>
      <a-card :body-style="{ 'height': dxdcMainHeight + 'px', 'padding': '0' }">
        <div style="width: 100%;height: 100%;">
          <iframe
            ref="frameMain4"
            id="frameMain4"
            name="frameMain4"
            src=""
            frameborder="0"
            width="100%"
            height="100%"
            style="overflow: auto"></iframe>
        </div>
      </a-card>
    </a-row>
  </div>
</template>

<script>
import moment from 'moment';
import request from '@/utils/gw_ajax_request';
export default {
  props: ['flag', 'selectDate', 'year', 'month', 'name'],
  data() {
    return {
      moment,
      // selectDate: '',
      // year: '',
      // month: '',
      dxdcMainHeight: window.innerHeight - 230,
      windowHeight: window.innerHeight - 200,
      windowWidth: window.innerWidth - 350,
      reportSrc:
        '/modular-source/6ace62b8e2bb467d98286d260aebcef2/demo/reportJsp/reportJsp/showReport.jsp?rpx=dc_zg_1002.rpx',
      loading: true,
      excelName: '月报基础数据' + '-' + (this.name ? this.name : ''),
      header: {
        persId: localStorage.getItem('persId'),
        accessToken: localStorage.getItem('accessToken'),
        orgId: localStorage.getItem('currentOrgId'),
      },
      params: {
        startTm: '',
        flag: this.flag,
      },
      tableName: '',
    };
  },
  mounted() {
    // this.year = moment().format('YYYY')
    // this.month = moment().format('MM')
    // this.selectDate = moment(new Date(), 'YYYY-MM')
  },
  computed: {
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
    isShow() {
      return (
        localStorage.getItem('userid') == 'ff2d65f546b84447b7501523cc460df0'
      );
    },
  },
  methods: {
    changeDate(date, val) {
      if (val) {
        this.year = val.split('-')[0];
        this.month = val.split('-')[1];
      } else {
        this.year = '';
        this.month = '';
      }
    },
    // 获取Excel数据
    searchExecl() {
      if (
        this.year &&
        this.month &&
        this.year == new Date().getFullYear() &&
        parseInt(this.month) == new Date().getMonth() + 1
      ) {
        this.tableName = 'BIS_INSP_ZG_PBLM';
      } else {
        this.tableName = 'BIS_INSP_ZG_PBLM_' + this.year + this.month;
      }
      this.$nextTick(() => {
        this.loading = true;
        // 使用form表单post提交，彻底解决参数值过长的问题
        this.$refs.formMain4.submit();
        // 使用_this
        const _this = this;
        this.$refs.frameMain4.onload = () => {
          _this.loading = false;
        };
      });
    },
    // 导出Excel数据
    exportExecl() {
      v = window.frames['frameMain4'];
      v.report1_saveAsExcel();
    },
    disabledDate(current) {
      return current && current > moment().endOf('day');
    },
    uploadExecl() {
      if (!this.selectDate) {
        this.$message.warning('请选择批次');
        return false;
      }
      this.params.startTm =
        moment(this.selectDate).format('YYYY-MM') + '-01' + ' 00:00:00';
      this.$refs.uploadBtn.$el.click();
    },
    handleChange(info) {
      if (info.file.status == 'done') {
        if (info.file.response.success) {
          this.$message.success('上传成功');
        } else {
          this.$message.error(info.file.response.message);
        }
      } else if (info.file.status === 'error') {
        this.$message.error('上传失败!');
      }
    },
    deleteExecl() {
      if (!this.selectDate) {
        this.$message.warning('请选择批次');
        return false;
      }
      this.$confirm({
        title: '提示',
        content: `是否清除表数据,该操作将无法还原?`,
        okType: 'warning',
        onOk: () => {
          const params = {
            startTm:
              moment(this.selectDate).format('YYYY-MM') + '-01' + ' 00:00:00',
            flag: this.flag,
          };
          request
            .post(
              `/dc/insp/pblm/delHistoryZgList?startTm=${params.startTm}&flag=${params.flag}`,
            )
            .then((res) => {
              if (res.success) {
                this.$message.success('删除成功!');
              } else {
                this.$message.error(res.message);
              }
            });
        },
      });
    },
  },
};
</script>

<style lang='less' scoped></style>
