<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_sk7"
          @treeCheckedDataChange="treeCheckedDataChange"
        />
      </a-card>
    </a-col>
    <a-col :span="20">
      <a-card :body-style="{'padding-top':'10px'}">
        <!-- <a-radio-group v-model:value="radioTable">
            <a-radio :label="1">附表6-督查登记表</a-radio>
        </a-radio-group> -->
        <div class="block">
          <!--<span class="demonstration">选择月份</span>-->
          <!--<a-date-picker-->
          <!--v-model="monthValue"-->
          <!--type="month"-->
          <!--placeholder="选择月">-->
          <!--</a-date-picker>-->
          <!--<span class="demonstration" style="margin-right: 5px">选择时间段</span>-->
          <!-- <a-date-picker v-model:value="sttm" type="date" value-format="yyyy-MM-dd"
                          placeholder="选择日期" style="width: 150px"></a-date-picker>
          <span style="padding-left: 10px;padding-right: 10px;">至</span>
          <a-date-picker v-model:value="ettm" type="date" value-format="yyyy-MM-dd"
                          placeholder="选择日期" style="width: 150px"></a-date-picker> -->
          <!--<a-date-picker
              v-model:value="findTime"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </a-date-picker>
          <span class="demonstration" style="margin-right: 5px;margin-left: 7px">督查状态</span>
          <a-select v-model:value="dcType" clearable placeholder="督查状态">
              <a-option label="未督查" value="0"></a-option>
              <a-option label="督查中" value="1"></a-option>
              <a-option label="已督查" value="2"></a-option>
          </a-select>-->


<!--          <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="formMain7" id="formMain7" target="frameMain7" :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_sk6" name="sttm" v-model="sttm">
          <input type="hidden" id="ettm_sk6" name="ettm" v-model="ettm">
          <input type="hidden" name="state" v-model="dcType">
        </form>
        <div style="width: 100%;height: 100%;" v-loading="loading">
          <iframe ref="frameMain7" id="frameMain7" name="frameMain7" 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=sk06_Register6.raq',
      //reportSrc:'/JsReport/reportFiles/reportjsp/showReport_pages.jsp?raq=sk06_Register6.raq',
      reportSrc:
        '/modular-source/6ace62b8e2bb467d98286d260aebcef2/demo/reportJsp/reportJsp/showReport.jsp?rpx=dc_xskaq_zdaqyhwthz.rpx',
      radioTable: 1,
      loading: false,
      leftCol: 4,
      rightCol: 20,
      excelName: '存在重大安全隐患水库问题汇总表',
      monthValue: dateFormat(new Date(), 'yyyy-MM'),
      sttm: '',
      ettm: '',
      treeWidth: 300,
      findTime: [],
      dcType: '',
      ids: [],
    };
  },
  mounted() {
    // if(this.$refs.elw.$el.clientWidth == 0){
    //     this.treeWidth = globalVariable.treeWidth;
    // }else {
    //     this.treeWidth = this.$refs.elw.$el.clientWidth;
    // }
  },
  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_sk6').value =
          this.findTime[0] == undefined ? '' : this.findTime[0];
        document.getElementById('ettm_sk6').value =
          this.findTime[1] == undefined ? '' : this.findTime[1];
      } else {
        document.getElementById('sttm_sk6').value = '';
        document.getElementById('ettm_sk6').value = '';
      }
      this.$nextTick(() => {
        this.loading = true;
        // 使用form表单post提交，彻底解决参数值过长的问题
        this.$refs.formMain7.submit();
        // 使用_this
        const _this = this;
        this.$refs.frameMain7.onload = () => {
          _this.loading = false;
        };
      });
    },
    // 导出Excel数据
    exportExecl() {
      v = window.frames['frameMain7'];
      // 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>
