<template>
  <a-row>
    <a-col :span="4" ref="elw" class="elw">
      <a-card :body-style="{'padding':'0'}">
        <export-tree-list-with-check-box-sk
          :pid="pid"
          :type="option.type"
          :pidNodes="pidNodes"
          :height="dxdcAsideHeight"
          :width="treeWidth"
          ref="tree_sk"
          @treeCheckedDataChange="treeCheckedDataChange"
        />
      </a-card>
    </a-col>
    <a-col :span="20">
      <a-card :bodyStyle="{'padding-top':'10px'}">
        <div class="block">
          <a-button type="primary" icon="download-outlined" style="float: right;margin:0 5px" @click="exportExcel"
                     v-if="showExport">导出
          </a-button>
          <a-button type="primary" icon="search-outlined" style="float: right;margin:0 5px" @click="searchExcel">查询
          </a-button>
        </div>
      </a-card>
      <a-card :body-style="{'height':dxdcMainHeight + 'px','padding':'0'}">
        <form ref="formMain" :target="index" :action="option.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="option.label">
          <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%;" :loading="loading">
          <iframe :ref="index" :id="index" :name="index" src=""
                  style="overflow: auto;border:0;width: 100%;height:100%;"></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: ['option', 'index'],
  data() {
    return {
      pid: '000',
      pidNodes: [],
      showExport: false,
      dxdcMainHeight: window.innerHeight - 200,
      dxdcAsideHeight: window.innerHeight - 160,
      windowHeight: window.innerHeight - 200,
      windowWidth: window.innerWidth - 350,
      radioTable: 1,
      loading: true,
      leftCol: 4,
      rightCol: 20,
      monthValue: dateFormat(new Date(), 'yyyy-MM'),
      sttm: '',
      ettm: '',
      treeWidth: 300,
      ids: [],
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 树节点选中或取消事件
    treeCheckedDataChange(params) {
      this.ids = [];
      params.newCheckedArray.forEach((element, index) => {
        const id = element.id;
        this.ids.push(id);
      });

      // 去重
      this.ids = Array.from(new Set(this.ids));
      this.$nextTick(() => {
        this.searchExcel();
      });
    },
    // 获取Excel数据
    searchExcel() {
      this.$nextTick(() => {
        /**
         * 1. 开启 loading
         * 2. form 提交表单
         * 3. 当iframe在加载时（显示页面），取消loading
         */
        this.loading = true;
        // 使用form表单post提交，解决参数值过长的问题
        this.$refs.formMain.submit();
        // 使用_this
        const _this = this;
        this.$el.getElementsByTagName('iframe')[0].onload = () => {
          _this.loading = false;
        };
      });
    },
    // 导出Excel数据
    exportExcel() {
      this.$el
        .getElementsByTagName('iframe')[0]
        .contentWindow.report1_saveAsExcel();
    },
  },
  computed: {
    userId: () =>
      localStorage.getItem('userid')
        ? localStorage.getItem('userid')
        : '1098101939614724096',
  },
  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.searchExcel();
  },
};
</script>

<style scoped>
</style>
