<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_sk4"
          @treeCheckedDataChange="treeCheckedDataChange"
        />
      </a-card>
    </a-col>
    <a-col :span="20">
      <a-card :body-style="{'padding-top':'10px'}">
        <div class="block">
          <!-- <span class="demonstration" style="margin-right: 5px">选择时间段</span>
           <a-date-picker
               v-model:value="findTime"
               type="daterange"
               value-format="yyyy-MM-dd"
               range-separator="至"
               start-placeholder="开始日期"
               end-placeholder="结束日期">
           </a-date-picker>-->
   <!--       <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="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="ids" v-model="ids">
          <input type="hidden" name="excelName" v-model="excelName">
          <input type="hidden" name="dt" v-model="monthValue">
          <input type="hidden" id="sttm_sk4" name="sttm" v-model="sttm">
          <input type="hidden" id="ettm_sk4" name="ettm" v-model="ettm">
        </form>
        <div style="width: 100%;height: 100%;" v-loading="loading">
          <iframe ref="frameMain4" id="frameMain4" name="frameMain4" 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 - 215,
      dxdcAsideHeight: window.innerHeight - 160,
      windowHeight: window.innerHeight - 160,
      windowWidth: window.innerWidth - 350,
      // reportSrc:'/JsReport/reportFiles/reportjsp/showReport_hzz.jsp?raq=sk04_problemIdentified4.raq',
      //reportSrc:'/JsReport/reportFiles/reportjsp/showReport_pages.jsp?raq=/fujian/sk04_problemIdentified4.raq',
      reportSrc:
        '/modular-source/6ace62b8e2bb467d98286d260aebcef2/demo/reportJsp/reportJsp/showReport.jsp?rpx=dc_xskaq_zrzj.rpx',
      radioTable: 1,
      loading: false,
      leftCol: 4,
      rightCol: 20,
      excelName: '责任追究建议',
      monthValue: dateFormat(new Date(), 'yyyy-MM'),
      sttm: '',
      ettm: '',
      treeWidth: 300,
      findTime: [],
      ids: [],
    };
  },
  mounted() {},
  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() {
      if (this.findTime != null) {
        // this.sttm = this.findTime[0];
        // this.ettm = this.findTime[1];
        document.getElementById('sttm_sk4').value =
          this.findTime[0] == undefined ? '' : this.findTime[0];
        document.getElementById('ettm_sk4').value =
          this.findTime[1] == undefined ? '' : this.findTime[1];
      } else {
        document.getElementById('sttm_sk4').value = '';
        document.getElementById('ettm_sk4').value = '';
      }

      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();
      /*        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 = '';
      }
    },
    findTime(n, o) {
      if (n == null) {
        this.sttm = '';
        this.ettm = '';
      }
    },
  },
  activated() {
    this.searchExecl();
  },
};
</script>

<style scoped>


</style>
