<template>
  <a-row>
    <a-col :span="4" ref="elw">
      <a-card :body-style="{ padding: '0' }">
        <treeNode
          :height="dxdcAsideHeight"
          :width="treeWidth"
          :isSelect="isSelect"
          ref="tree_sk"
          @treeCheckedDataChange="treeCheckedDataChange"
        />
      </a-card>
    </a-col>
    <a-col :span="20">
      <a-card :bodyStyle="{ 'padding-top': '10px' }">
        <div class="block">
          <span v-if="['sxzhdc001', 'sxzhdc002'].includes(option.value)" style="margin: 0 10px;">督查年份</span>
          <a-select
            v-if="['sxzhdc001', 'sxzhdc002'].includes(option.value)"
            v-model:value="year"
            allow-clear
            placeholder="请选择督查年份"
            style="width: 200px;">
            <a-select-option v-for="y in yearOptions" :key="y" :value="y">{{ y }}</a-select-option>
          </a-select>

          <span v-if="['sxccwt_001', 'sxccwt_002'].includes(option.value)" style="margin: 0 10px;">督查计划名称</span>
          <!-- <a-select v-if="['sxccwt_001', 'sxccwt_002'].includes(option.value)" style="width: 200px" v-model:value="state" allow-clear>
            <a-select-option value="2024年全覆盖督查">2024年全覆盖督查</a-select-option>
            <a-select-option value="2025年全覆盖督查">2025年全覆盖督查</a-select-option>
            <a-select-option value="2026年全覆盖督查">2026年全覆盖督查</a-select-option>
          </a-select> -->
          <a-select v-if="['sxccwt_001', 'sxccwt_002'].includes(option.value)" v-model:value="planId" style="width: 200px" @select="getPtypeList">
            <a-select-option v-for="item in planIdList" :value="item.id" :key="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>

          <a-button
            type="primary"
            icon="search-outlined"
            style="float: right; margin: 0 5px"
            @click="exportExcel">
            导出
          </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="orgId" v-model="orgId">
          <input type="hidden" name="orgpid" v-model="orgpid">
          <input v-if="['sxzhdc001', 'sxzhdc002'].includes(option.value)" type="hidden" name="year" v-model="year">
          <input v-if="['sxccwt_001', 'sxccwt_002'].includes(option.value)" type="hidden" name="planId" v-model="planId">

        </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 requset from '@/utils/gw_ajax_request';
import treeNode from './treeNode_synthesis';
export default {
  components: {
    treeNode: treeNode,
  },
  props: ['option', 'index', 'isSelect'],
  data() {
    return {
      dxdcMainHeight: window.innerHeight - 220,
      dxdcAsideHeight: window.innerHeight - 160,
      windowHeight: window.innerHeight - 220,
      windowWidth: window.innerWidth - 350,
      loading: true,
      treeWidth: 300,
      orgId: '',
      orgpid: '',
      year: String(new Date().getFullYear()),
      state: '2024年全覆盖督查',
      planId: undefined,
      planIdList: [],
    };
  },
  computed: {
    yearOptions() {
      const currentYear = new Date().getFullYear();
      const years = [];
      for (let i = currentYear - 5; i <= currentYear + 5; i++) {
        years.push(String(i));
      }
      return years;
    },
  },
  created() {
    this.getPlanList();
  },
  methods: {
    getPlanList() {
      requset.post('/bis/insp/all/plan/getList', {}).then((res) => {
        if (res.data) {
          this.planIdList = res.data;
          this.planId = res.data[res.data.length - 1].id;
          this.getPtypeList();
        }
      });
    },
    // 树节点选中或取消事件
    treeCheckedDataChange(val) {
      this.orgId = val;
      this.orgpid = val ? val : '015';
      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();
    },
  },
};
</script>
<style scoped>
</style>
