<template>
  <a-row>
    <a-col :span="4" ref="elw">
      <a-card :body-style="{'padding':'0'}">
        <treeNode
          :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" style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;">
          <span v-if="option.value == 'slzjdccg0002'">年份</span>
          <a-input v-if="option.value == 'slzjdccg0002'" v-model:value="objYear" allow-clear style="width: 200px;"></a-input>

          <span>项目名称</span>
          <a-input v-model:value="objNm" allow-clear style="width: 200px;"></a-input>

          <span v-if="option.value == 'slzjdccg0001'">问题类别</span>
          <a-select v-if="option.value == 'slzjdccg0001'" v-model:value="dictNm" style="width: 200px" show-search allow-clear>
            <a-select-option v-for="item in dictNmData" :key="item.key" :value="item.key">{{ item.value }}</a-select-option>
          </a-select>

          <span v-if="option.value == 'slzjdccg0002'">项目大类</span>
          <a-select v-if="option.value == 'slzjdccg0002'" v-model:value="categories" style="width: 200px" show-search allow-clear>
            <a-select-option v-for="item in categoriesData" :key="item.key" :value="item.key">{{ item.value }}</a-select-option>
          </a-select>

          <span v-if="option.value == 'slzjdccg0001'">整改状态</span>
          <a-select v-if="option.value == 'slzjdccg0001'" v-model:value="state" style="width: 200px" allow-clear>
            <a-select-option value="整改中">整改中</a-select-option>
            <a-select-option value="已整改">已整改</a-select-option>
          </a-select>

          <span v-if="option.value == 'slzjdccg0002'">总投资</span>
          <a-input v-if="option.value == 'slzjdccg0002'" v-model:value="totalInvest" allow-clear style="width: 200px;"></a-input>

          <span v-if="option.value == 'slzjdccg0002'">完成比例</span>
          <a-input v-if="option.value == 'slzjdccg0002'" v-model:value="completion" addon-after="%" allow-clear style="width: 200px;"></a-input>

          <span v-if="option.value == 'slzjdccg0002'">项目开工时间</span>
          <a-range-picker
            v-if="option.value == 'slzjdccg0002'"
            v-model:value="prjTime"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            allow-clear
            style="width: 220px;" />

          <a-button type="primary" @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="objNm" v-model="objNm">
          <input v-if="option.value == 'slzjdccg0001'" type="hidden" name="dictNm" v-model="dictNm">
          <input v-if="option.value == 'slzjdccg0001'" type="hidden" name="state" v-model="state">

          <input v-if="option.value == 'slzjdccg0002'" type="hidden" name="objYear" v-model="objYear">
          <input v-if="option.value == 'slzjdccg0002'" type="hidden" name="categories" v-model="categories">
          <input v-if="option.value == 'slzjdccg0002'" type="hidden" name="completionRatioMax" v-model="completionRatioMax">
          <input v-if="option.value == 'slzjdccg0002'" type="hidden" name="completionRatioMin" v-model="completionRatioMin">
          <input v-if="option.value == 'slzjdccg0002'" type="hidden" name="moneyMax" v-model="moneyMax">
          <input v-if="option.value == 'slzjdccg0002'" type="hidden" name="moneyMin" v-model="moneyMin">
          <input v-if="option.value == 'slzjdccg0002'" type="hidden" name="startDateMax" v-model="startDateMax">
          <input v-if="option.value == 'slzjdccg0002'" type="hidden" name="startDateMin" v-model="startDateMin">

          <input type="hidden" name="excelName" v-model="option.label">
        </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 './treeNodeSlzj';
export default {
  components: {
    treeNode: treeNode,
  },
  props: ['option', 'index'],
  data() {
    return {
      showExport: false,
      dxdcMainHeight: window.innerHeight - 220,
      dxdcAsideHeight: window.innerHeight - 160,
      windowHeight: window.innerHeight - 220,
      windowWidth: window.innerWidth - 350,
      loading: true,
      treeWidth: 300,
      orgId: '',
      objNm: '',
      dictNm: '',
      dictNmData: [],
      state: undefined,
      objYear: '',
      totalInvest: '', // 总投资
      completion: '', // 完成比例
      prjTime: [],
      categories: undefined,
      categoriesData: [],

      completionRatioMax: '',
      completionRatioMin: '',
      moneyMax: '',
      moneyMin: '',
      startDateMax: '',
      startDateMin: '',
    };
  },
  created() {
    this.getDictNmData();
  },
  mounted() {},
  methods: {
    // 树节点选中或取消事件
    treeCheckedDataChange(val) {
      this.orgId = val;
      this.searchExcel();
    },
    // 获取Excel数据
    searchExcel() {
      this.startDateMax = this.prjTime[1];
      this.startDateMin = this.prjTime[0];
      if (this.totalInvest.indexOf('-') > 0) {
        this.moneyMin = this.totalInvest.split('-')[0];
        this.moneyMax = this.totalInvest.split('-')[1];
      } else {
        this.moneyMin = this.totalInvest;
        this.moneyMax = '';
      }
      if (this.completion.indexOf('-') > 0) {
        this.completionRatioMin = this.completion.split('-')[0];
        this.completionRatioMax = this.completion.split('-')[1];
      } else {
        this.completionRatioMin = this.completion;
        this.completionRatioMax = '';
      }
      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();
    },
    getDictNmData() {
      this.dictNmData = [];
      this.categoriesData = [];
      requset.get(`/dict/type/getListByPlanId2`).then((res) => {
        res.data.forEach((item) => {
          const obj = {};
          obj.key = item;
          obj.value = item;
          this.dictNmData.push(obj);
        });
      });
      requset.get(`/dict/type/getListByPlanId3`).then((res) => {
        res.data.forEach((item) => {
          const obj = {};
          obj.key = item;
          obj.value = item;
          this.categoriesData.push(obj);
        });
      });
    },
  },
  computed: {
    userId: () =>
      localStorage.getItem('userid')
        ? localStorage.getItem('userid')
        : '1098101939614724096',
  },
  activated() {
    this.searchExcel();
  },
};
</script>

<style scoped>
</style>
