<!--
 * @description: 按照全国左侧树分组的形式，新开此组件，原来report_jcbg_doc已更名为（福建）
 * @fileName: report_jcbg_doc_group.vue
 * @author: 张昀朝
 * @date: 2020-05-28 14:27:44
 * @后台人员: 李海潮
 * @version: V0.0.1

 * @modify_description:
 * @modify_content:
 * @modify_author:
 * @modify_date: 2020-05-28 14:27:44
-->
<template>
  <el-row>
    <el-col :span="leftCol" ref="elw">
      <el-card :body-style="{'padding':'0','overflow':'auto','width':'230'}">
        <export-tree-list-jc
          :height="dxdcAsideHeight"
          :width="treeWidth"
          :style="{'max-height':dxdcAsideHeight+'px'}"
          @provTreeSelectChange="provTreeSelectChange"
          @provTreeNodeExpand="provTreeNodeExpand"
        />
      </el-card>
    </el-col>
    <el-col :span="rightCol">
      <el-card :body-style="{'padding-top':'10px'}">
        <div class="block">
          <span class="demonstration" style="margin-right: 5px;margin-left: 7px">报告状态</span>
          <el-select style="width:180px;" v-model="bgType" placeholder="请选择">
            <el-option :label="item.nowStep" :value="item.nowId" :key="index"
                       v-for="(item,index) in bgTypeList"/>
          </el-select>
          <span class="demonstration" style="margin-right: 5px;margin-left: 7px">专业类型</span>
          <el-select style="width:180px;" v-model="listType" placeholder="请选择" multiple collapse-tags>
            <el-option
              v-for="item in listTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <!--          <span class="demonstration" style="margin-right: 5px;margin-left: 7px">排序方式</span>-->
          <!--          <el-select style="width:180px;" v-model="orderBy" clearable placeholder="请选择">-->
          <!--            <el-option label="专业类型" value="listType"/>-->
          <!--            <el-option label="严重程度" value="pblmPasi"/>-->
          <!--          </el-select>-->
          <!-- <el-button type="primary" icon="el-icon-download"
                     style="float: right;margin:0 5px"
                     @click="exportExecl">导出</el-button> -->
          <el-button type="primary" icon="el-icon-search" style="float: right;margin:0 5px" @click="searchExecl">查询
          </el-button>
        </div>

      </el-card>
      <el-card :body-style="{'height':dxdcMainHeight + 'px','padding':'0'}">
        <form ref="formMain8" id="formMain8" target="frameMain8" :action="reportSrc" method="post">
          <input type="hidden" name="width" v-model="windowWidth">
          <input type="hidden" name="height" v-model="windowHeight">
          <input id="id" type="hidden" name="rgstrId">
          <input id="bgType" type="hidden" name="bgType" v-model="bgType">
          <input id="type" type="hidden" name="type" v-model="wordType">
          <input id="userId" type="hidden" name="persId" v-model="userId">
          <input id="listType" type="hidden" name="listType" v-model="listType">
          <input id="orderBy" type="hidden" name="orderBy" v-model="orderBy">
          <!-- <input type="hidden" name="excelName" v-model="excelName"> -->
        </form>
        <div v-loading="loading"
             style="width: 100%;height: 100%;display:flex;flex-direction:row;justify-content:center;align-items:center;">
          <i v-if="firstToShow" style="font-size:32px;" class="el-icon-warning-outline"></i>
          <p v-if="firstToShow" style="font-weight: bolder;color: #868686;font-size: larger;">请通过左侧树点击指定组或工程，导出报告</p>
          <iframe v-show="!firstToShow" ref="frameMain8" id="frameMain8" name="frameMain8" src="" frameborder="0"
                  width="100%" height="100%" style="overflow: auto"></iframe>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
  //这里导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //import 《组件名称》 from '《组件路径》';
  //import {函数名称1，函数名称2} from '《组件路径》';

  import request from '@/utils/gw_ajax_request';
  import exportTreeListJc from './exportTreeList_jc_group'
  import {dateFormat} from '@/utils/gw_date.js'

  export default {
    components: {
      exportTreeListJc: exportTreeListJc,
    },
    data() {
      return {
        id: '',
        pid: '',
        dxdcMainHeight: window.innerHeight - 150,
        dxdcAsideHeight: window.innerHeight - 100,
        windowHeight: window.innerHeight - 200,
        windowWidth: window.innerWidth - 350,
        reportSrc2: '/demo/reportJsp/showReport.jsp?rpx=js_TAC_OUTLINE_WORD',
        // reportSrc:'/pageofficePath/pageoffice/tacReport/show',
        reportSrc: '/pageofficePath/pageoffice/tacReport/pdc/showNew',
        loading: false,
        leftCol: 4,
        rightCol: 20,
        excelName: '稽察报告',
        treeWidth: 250,
        firstToShow: true,
        bgType: '0',
        ywType: '1', // 业务类型 基础信息
        wordType: '',
        type: '400',
        listType: [],
        listTypeOptions: [
          {
            value: '1',
            label: '前期与设计'
          }, {
            value: '2',
            label: '建设管理'
          }, {
            value: '3',
            label: '计划下达与执行'
          }, {
            value: '4',
            label: '资金使用与管理'
          }, {
            value: '5',
            label: '工程质量'
          }, {
            value: '6',
            label: '工程安全'
          }
        ],
        orderBy: 'listType',
        bgTypeList: [],
      }
    },
    mounted() {
      this.treeWidth = this.$refs.elw.$el.clientWidth;
      this.getBgTypeList();
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      // 注意是数组
      this.listType = ['1', '2', '3', '4', '5', '6']
    },
    computed: {
      userId: function () {
        return localStorage.getItem("userid")
          ? localStorage.getItem("userid")
          : "1098101939614724096";
      }
    },
    methods: {
      provTreeSelectChange(data) {
        this.id = data.id;
        this.searchExecl();
      },
      provTreeNodeExpand(data) {

        this.id = data.id;
        this.pid = data.pid;

        this.searchExecl();
      },
      // 获取Excel数据
      searchExecl() {

        var newSrc = "";
        this.setWordType();
        let _this = this;
        if (_this.id == '') {
          return;
        }
        if (_this.id != '' && _this.pid != '' && _this.pid.length < 12) {
          // this.openMessage();
          return;
        }
        //匹配阶段（新）
        let rgstrId = '';
        // rgstrId = _this.id.split(",").map((x)=>{return x + "_" + _this.bgType;}).join(",");
        if (_this.id.length === 1) {
          // 设置为只有点击单个工程，显示稽查报告
          rgstrId = _this.id[0];
        } else {
            if(localStorage.getItem("currentRlcode").indexOf("35")>-1){
                rgstrId = _this.id.map((x) => {
                  return x;
                }).join(",");
            }else{
                return;
            }
        }
        // v-model 不同步，只能手动同步了
        document.getElementById("id").value = rgstrId;
        this.firstToShow = false;
        this.loading = true;
        // 使用form表单post提交，彻底解决参数值过长的问题
        this.$refs.formMain8.submit();
        // 使用_this
        this.$refs.frameMain8.onload = function () {
          _this.loading = false;
          // 控制iframe内图片的大小
          var iframe = document.getElementById('frameMain8');
          var doc = iframe.contentWindow.document;
          var img = doc.getElementById('imgs');

          img.style.width = '100%';
        };

      },
      openMessage() {
        const h = this.$createElement;
        this.$notify({
          title: '提示',
          message: h('i', {style: 'color: teal'}, '点击组或者工程才会生成报告')
        });
      },
      // 导出Excel数据
      exportExecl() {
        v = window.frames["frameMain8"];
        v.report1_saveAsWord();
      },
      setWordType() {
        // 不足补零 1是基础信息
        if (this.type != undefined && this.type.length == 1) {
          this.wordType = this.ywType + "0" + this.type;
        } else if (this.type.length == 2) {
          this.wordType = this.ywType + this.type;
        } else {
          this.wordType = this.type;
        }
      },
      //省份对应稽察阶段流程
      getBgTypeList() {
        request.post(`/tac/province/plan/process/list`, {}).then(res => {

          if (res.success) {
            this.bgTypeList = res.data;
            let expertOpinion = {
              nowStep: '专家现场意见稿',
              nowId: '0'
            }
            this.bgTypeList.unshift(expertOpinion);//方法将把它的参数插入 arrayObject 的头部
          }
        })
      }

    },
    watch: {
      monthValue(n, o) {
        if (n == null) {
          this.monthValue = "";
        }
      }

    },
    activated() {
      this.searchExecl();
    }
  }
</script>
<style  scoped>
  /* @import url(); 引入公共css类 */
  .el-card /deep/ .el-tree-node__children .is-current {
    background: rgb(212, 241, 255) !important;
  }
  .el-card /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background: rgb(212, 241, 255) !important;
  }
</style>
