<template>
  <div class="main">
    <a-row >
      <a-card :body-style="{ 'padding-top': '10px' }" >
        <div class="block">
          <span>批次名称：</span>
          <a-select v-model:value="batchName" show-search :filter-option="filterOption" placeholder="请选择" allow-clear>
            <a-select-option v-for="item in batchList" :key="item" :value="item">{{ item }}</a-select-option>
          </a-select>
          <a-upload
            style="margin-top: 1%;"
            ref="upload"
            :multiple="false"
            :action="'/modular-source/6ace62b8e2bb467d98286d260aebcef2/pdcApi/bis/insp/InspConfirm/importZgList'"
            :headers="header"
            :data="params"
            accept=".xls,.xlsx"
            :limit="1"
            @change="uploadSuccess">
            <a-button size="small" type="primary" v-show="false" ref="uploadBtn">点击上传</a-button>
          </a-upload>
          <a-button
            type="primary"
            icon="upload"
            style="float: right;margin:0 5px"
            @click="uploadExecl">导入(.xls/.xlsx文件)</a-button>
          <a-button
            v-if="readOnlyRole == 'display'"
            type="primary"
            icon="delete"
            style="float: right;margin:0 5px"
            @click="deleteData">清理数据</a-button>
          <a-button v-if="readOnlyRole == 'display'" 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="searchExecl">查询</a-button>
        </div>
      </a-card>
    </a-row>
    <a-row>
      <form ref="formMain" id="formMain" target="frameMain" :action="reportSrc" method="post">
        <input type="hidden" name="width" v-model="windowWidth">
        <input type="hidden" name="height" v-model="windowHeight">
        <input type="hidden" name="batchName" v-model="batchName">
        <input type="hidden" name="excelName" v-model="excelName">
      </form>
      <a-card :body-style="{'height':dxdcMainHeight + 'px','padding':'0'}">
        <div style="width: 100%;height: 100%;" v-loading="loading">
          <iframe
            ref="frameMain"
            id="frameMain"
            name="frameMain"
            src=""
            frameborder="0"
            width="100%"
            height="100%"
            style="overflow: auto"></iframe>
        </div>
      </a-card>
    </a-row>
  </div>
</template>

<script>
import { getPersPlanType } from '../../api/duChaPlan';
import request from '../../utils/gw_ajax_request.js';
export default {
  data() {
    return {
      params: {
        batch: '',
      },
      header: {
        persId: localStorage.getItem('persId'),
        accessToken: localStorage.getItem('accessToken'),
        orgId: localStorage.getItem('currentOrgId'),
      },
      batchName: '',
      batchList: [],
      dxdcMainHeight: window.innerHeight - 154,
      windowHeight: window.innerHeight - 200,
      windowWidth: window.innerWidth - 350,
      reportSrc:
        '/modular-source/6ace62b8e2bb467d98286d260aebcef2/demo/reportJsp/reportJsp/showReport.jsp?rpx=batch_problem.rpx',
      loading: true,
      excelName: '综合督查发现问题确认情况',
      readOnlyRole: localStorage.getItem('readOnlyRole'),
    };
  },
  computed: {
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
    isShow() {
      return (
        localStorage.getItem('persId') == 'ff2d65f546b84447b7501523cc460df0'
      );
    },
  },
  created() {
    this.getBatchList();
  },
  methods: {
    deleteData() {
      if (!this.batchName) {
        this.$message.warning('请选择批次名称');
        return false;
      }
      this.$confirm({
        title: '提示',
        content: '确定要清空当前批次的数据吗？',
        okType: 'warning',
        onOk: () => {
          request
            .post(`/bis/insp/InspConfirm/delEmpty`, { batch: this.batchName })
            .then((res) => {
              if (res.success) {
                this.getBatchList();
                this.searchExecl();
                this.$message.success('删除成功');
              } else {
                this.$message.error(res.message);
              }
            });
        },
      });
    },
    uploadExecl() {
      if (!this.batchName) {
        this.$message.warning('请选择批次');
        return false;
      }
      this.params.batch = this.batchName;
      this.$refs.uploadBtn.$el.click();
    },
    init() {
      this.$refs.upload.clearFiles();
    },
    // 上传出错，向上触发结束
    upError(err, file, fileList) {
      this.$message.error('上传失败，请修改文件！');
      this.init();
    },
    uploadSuccess(response) {
      console.log(response, 'xxxxx');
      if (response.file.status === 'done') {
        if (response.file.response.success) {
          this.$message.success('上传成功');
          this.init();
          this.searchExecl();
        } else {
          this.$message.error(response.message);
          this.init();
        }
        // this.fileExt = response.file.response.data.fileExt
        // this.filePath = response.file.response.data.filePath
      } else if (response.file.status === 'error') {
        this.$message.error(response.message);
        this.init();
      }
    },
    getBatchList() {
      this.batchList = [];
      this.batchName = '';
      request.get('/bis/insp/BisInspStatisAnal/getBatchList').then((res) => {
        if (res.data && res.data.length > 0) {
          this.batchList = res.data;
          this.batchName = res.data[0];
          this.searchExecl();
        }
      });
    },

    // 获取Excel数据
    searchExecl() {
      // console.log("搜索条件 - " + this.ids.length);
      this.$nextTick(() => {
        this.loading = true;
        // 使用form表单post提交，彻底解决参数值过长的问题
        this.$refs.formMain.submit();
        // 使用_this
        const _this = this;
        this.$refs.frameMain.onload = () => {
          _this.loading = false;
        };
      });
    },
    // 导出Excel数据
    exportExecl() {
      v = window.frames['frameMain'];
      v.report1_saveAsExcel();
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
  watch: {
    ptype(n, o) {
      this.getLeftTreeData();
      this.searchExecl();
    },
    ids(n, o) {
      this.searchExecl();
    },
  },
};
</script>

<style lang='less' scoped>
.main {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
:deep(.ant-select) {
  width: 200px;
}
</style>
