<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_sk3"
          @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">附表3-督查水库情况统计表</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="formMain3" id="formMain3" target="frameMain3" :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" name="sttm" v-model="sttm">
          <input type="hidden" id="ettm" 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="frameMain3" id="frameMain3" name="frameMain3" 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:
        '/modular-source/6ace62b8e2bb467d98286d260aebcef2/demo/reportJsp/reportJsp/showReport.jsp?rpx=dc_xskaq_xskwthz.rpx',
      radioTable: 1,
      loading: false,
      leftCol: 4,
      rightCol: 20,
      excelName: '检查发现问题汇总表',
      monthValue: dateFormat(new Date(), 'yyyy-MM'),
      findTime: [
        dateFormat(new Date(), 'yyyy-MM-dd'),
        dateFormat(new Date(), 'yyyy-MM-dd'),
      ],
      sttm: dateFormat(new Date(), 'yyyy-MM-dd'),
      ettm: dateFormat(new Date(), 'yyyy-MM-dd'),
      treeWidth: 300,
      dcType: '0',
      selectedIds: [],
      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').value =
          this.findTime[0] == undefined ? '' : this.findTime[0];
        document.getElementById('ettm').value =
          this.findTime[1] == undefined ? '' : this.findTime[1];
      } else {
        document.getElementById('sttm').value = dateFormat(
          new Date(),
          'yyyy-MM-dd',
        );
        document.getElementById('ettm').value = dateFormat(
          new Date(),
          'yyyy-MM-dd',
        );
      }
      this.$nextTick(() => {
        this.loading = true;
        // 使用form表单post提交，彻底解决参数值过长的问题
        this.$refs.formMain3.submit();
        // 使用_this
        const _this = this;
        this.$refs.frameMain3.onload = () => {
          _this.loading = false;
        };
      });
    },
    // 导出Excel数据
    exportExecl() {
      v = window.frames['frameMain3'];
      /*       // 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>
