<template>
  <a-row>
    <a-col :span="4" ref="elw">
      <a-card :body-style="{'padding':'0'}">
        <export-tree-list-with-check-box-sk
          :pid="pid"
          :type="type"
          :pidNodes="pidNodes"
          :height="dxdcAsideHeight"
          :width="treeWidth"
          ref="tree_sk"
          @treeCheckedDataChange="treeCheckedDataChange"
        />
      </a-card>
    </a-col>
    <a-col :span="20">
      <a-card :body-style="{'padding-top':'10px'}">
        <div class="block">
          <!--          <a-button type="primary" icon="a-icon-download"
                               style="float: right;margin:0 5px"
                               @click="exportExecl">导出
                    </a-button>-->
          <a-button type="primary" icon="a-icon-search" style="float: right;margin:0 5px" @click="searchExecl">查询
          </a-button>
        </div>
      </a-card>
      <a-card :body-style="{'height':dxdcMainHeight + 'px','padding':'0'}">
        <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="ids" v-model="ids">
          <input type="hidden" name="excelName" v-model="excelName">
          <input type="hidden" name="dt" v-model="monthValue">
          <input type="hidden" name="sttm" v-model="sttm">
          <input type="hidden" name="ettm" v-model="ettm">
        </form>
        <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-col>
  </a-row>

</template>

<script>
import { dateFormat } from '../../utils/gw_date.js';
import exportTreeListWithCheckBoxSk from './exportTreeListWithCheckBox_sk';
export default {
  components: {
    exportTreeListWithCheckBoxSk: exportTreeListWithCheckBoxSk,
  },
  props: [],
  data() {
    return {
      // ids:[],
      pid: '000',
      pidNodes: [],
      type: '001',
      dxdcMainHeight: window.innerHeight - 200,
      dxdcAsideHeight: window.innerHeight - 160,
      windowHeight: window.innerHeight - 200,
      windowWidth: window.innerWidth - 350,
      // reportSrc:'/JsReport/reportFiles/reportjsp/showReport.jsp?raq=sk01_pers1.raq',
      //reportSrc:'/JsReport/reportFiles/reportjsp/showReport_pages.jsp?raq=/fujian/sk01_pers1.raq',
      reportSrc:
        '/modular-source/6ace62b8e2bb467d98286d260aebcef2/demo/reportJsp/reportJsp/showReport.jsp?rpx=dc_xskaq_xskmc.rpx',
      radioTable: 1,
      loading: true,
      leftCol: 4,
      rightCol: 20,
      excelName: '检查小型水库名称及分布情况表',
      monthValue: dateFormat(new Date(), 'yyyy-MM'),
      sttm: '',
      ettm: '',
      treeWidth: 300,
      ids: [],
    };
  },
  mounted() {},
  created() {},
  computed: {
    userId: () =>
      localStorage.getItem('userid')
        ? localStorage.getItem('userid')
        : '1098101939614724096',
  },
  methods: {
    //树节点选中或取消事件
    treeCheckedDataChange(params) {
      this.ids = [];
      //console.dir(params.newCheckedArray);
      params.newCheckedArray.forEach((element, index) => {
        const id = element.id;
        this.ids.push(id);
      });

      // 去重
      this.ids = Array.from(new Set(this.ids));
      this.$nextTick(() => {
        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();
      /*        v.report1_saveAsExcel();*/
    },
  },
  watch: {
    monthValue(n, o) {
      if (n == null) {
        this.monthValue = '';
      }
    },
    sttm(n, o) {
      if (n == null) {
        this.sttm = '';
      }
    },
    ettm(n, o) {
      if (n == null) {
        this.ettm = '';
      }
    },
  },
  activated() {
    this.searchExecl();
  },
};
</script>

<style scoped>


</style>
