<template>
  <a-row>
    <a-col :span="3" 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="21">
      <a-card :bodyStyle="{'padding-top':'10px'}">
        <div class="block">
          <span style="margin: 0 10px;">督查计划名称</span>
          <a-select 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>
          <span v-if="option.value !== 'sx001' && option.value !== 'sx005'" style="margin: 0 10px;">督查事项</span>
          <a-select allowClear="true" v-if="option.value !== 'sx001' && option.value !== 'sx005'" v-model:value="ptype" @select="searchExcel" style="width: 200px">
            <a-select-option v-for="item in ptypeList" :value="item.dictTypeCd" :key="item.dictTypeCd">
              {{ item.dictTypeDesc }}
            </a-select-option>
          </a-select>
          <span v-if="option.value == 'sx002' || option.value == 'sx003'" style="margin: 0 10px;">工程名称</span>
          <a-input v-if="option.value == 'sx002' || option.value == 'sx003'" v-model:value="name" allow-clear style="width: 200px;"></a-input>
          <span v-if="option.value == 'sx002'" style="margin: 0 10px;">督察状态</span>
          <a-select v-if="option.value == 'sx002'" v-model:value="state" style="width: 200px" allow-clear>
            <a-select-option value="0">未督查</a-select-option>
            <a-select-option value="1">督查中</a-select-option>
            <a-select-option value="2">已督查</a-select-option>
          </a-select>
          <a-button type="primary" icon="search-outlined" style="float: right;margin:0 5px" @click="searchExcel">查询
          </a-button>
        </div>
      </a-card>
      <a-card v-if="option.value !== 'sx004'" :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="planId" v-model="planId">
          <input type="hidden" name="cityCode" v-model="cityCode">
          <input type="hidden" name="countyCode" v-model="countyCode">
          <input type="hidden" name="adCode" v-model="adCode">
          <input type="hidden" name="notCode" v-model="notCode">
          <input type="hidden" name="state" v-model="state">
          <input type="hidden" name="excelName" v-model="option.label">
          <input v-if="option.value !== 'sx001'" type="hidden" name="ptype" v-model="ptype">
          <input v-if="option.value !== 'sx001'" type="hidden" name="name" v-model="name">
        </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-card v-else :body-style="{ 'height': dxdcMainHeight + 'px', 'padding': '0' }">
        <sxEcharts ref="sxEcharts" :width="windowWidth" :height="dxdcMainHeight" />
      </a-card>
    </a-col>
  </a-row>

</template>

<script>
import requset from '../../utils/gw_ajax_request';
import sxEcharts from './sx004.vue';
import treeNode from './treeNode';
export default {
  components: {
    treeNode: treeNode,
    sxEcharts,
  },
  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,
      cityCode: '',
      countyCode: '',
      adCode: '',
      notCode: 'not',
      planId: undefined,
      planIdList: [],
      ptype: undefined,
      ptypeList: [],
      name: '',
      state: undefined,
    };
  },
  created() {
    this.getPlanList();
  },
  mounted() {},
  methods: {
    // 树节点选中或取消事件
    treeCheckedDataChange(val) {
      let str = '';
      if (val == '360000') {
        str = '';
      } else {
        if (val.endsWith('00')) {
          // if (val.substr(0, 4).endsWith('0')) {
          //   str = val.substr(0, 3)
          // } else {
          str = val.substr(0, 4);
          // }
        } else {
          // if (val.endsWith('0')) {
          //   str = val.substr(0, 5)
          // } else {
          str = val;
          // }
        }
      }
      if (str.length == 0) {
        this.cityCode = '';
        this.countyCode = '';
        this.adCode = '';
      } else if (str.length && (str.length == 3 || str.length == 4)) {
        this.cityCode = str;
        this.countyCode = '';
        this.adCode = str;
      } else {
        this.cityCode = '';
        this.countyCode = str;
        this.adCode = str;
      }
      if (this.adCode == '3604') {
        // 九江
        this.notCode = '360482000000'; // 共青城
      } else if (this.adCode == '3611') {
        // 上饶
        this.notCode = '361128000000'; // 鄱阳
      } else if (this.adCode == '3607') {
        // 赣州
        this.notCode = '360781000000'; // 瑞金
      } else if (this.adCode == '3608') {
        // 吉安
        this.notCode = '360829000000'; // 安福
      } else if (this.adCode == '3610') {
        // 抚州
        this.notCode = '361021000000'; // 南城
      } else if (this.adCode == '3609') {
        // 宜春
        this.notCode = '360981000000'; // 丰城
      } else {
        this.notCode = 'not';
      }
      this.searchExcel();
    },
    // 获取Excel数据
    searchExcel() {
      if (this.option.value !== 'sx004') {
        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;
          };
        });
      } else {
        this.$refs.sxEcharts.getEchartsData(
          this.planId,
          this.ptype,
          this.adCode,
          this.notCode,
        );
      }
    },
    // 导出Excel数据
    exportExcel() {
      this.$el
        .getElementsByTagName('iframe')[0]
        .contentWindow.report1_saveAsExcel();
    },
    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();
        }
      });
    },
    getPtypeList() {
      this.ptype = undefined;
      requset
        .get(`/dict/type/getListByPlanId`, { params: { id: this.planId } })
        .then((res) => {
          this.ptypeList = res.data;
          this.ptype =
            res.data && res.data.length !== 0
              ? res.data[0].dictTypeCd
              : undefined;
          this.searchExcel();
        });
    },
  },
  computed: {
    userId: () =>
      localStorage.getItem('userid')
        ? localStorage.getItem('userid')
        : '1098101939614724096',
    orgid: () => localStorage.getItem('currentOrgId'),
  },
  activated() {
    this.searchExcel();
  },
};
</script>

<style scoped>
</style>
