<template>
  <div class="full-box ztfx">
    <div class="" style="width: 100%;height:100%;" >
      <div class="top-tip-box t-title">当前位置：专题分析  >  产业引导基金专题分析</div>
      <div class="ztfx-info-box">
        <div class="left-search-box">
          <div class="lsb-top">数据截止时间：{{lastYear}}</div>
          <div class="lsb-search">
            <div class="lsb-search-box">
              <div class="sl-row">
                <div class="sl-row-label">行业</div>
                <el-select v-model="filter.industryCode" clearable placeholder="请选择"  @change="dateRangeChanged">
                  <el-option label="全部" value=""></el-option>
                  <el-option  v-for="item in locations" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
              </div>
              <div class="sl-row">
                <div class="sl-row-label">时间</div>
                <el-date-picker type="date" :picker-options="beginDate(filter.endDate)" v-model="filter.startDate" placeholder="开始日期" value-format="yyyy-MM-dd" style="width:calc(100% - 40px);float: left;" @change="dateRangeChanged"></el-date-picker>
              </div>
              <div class="sl-row">
                <div class="sl-row-label">至</div>
                <el-date-picker type="date" :picker-options="processDate(filter.startDate)"  v-model="filter.endDate" placeholder="结束日期" value-format="yyyy-MM-dd" style="width:calc(100% - 40px);float: left;" @change="dateRangeChanged"></el-date-picker>
              </div>
            </div>
            <div class="lsb-search-border">
              <div class="lsbb-top"></div>
              <div class="lsbb-role"></div>
              <div class="lsbb-bottom"></div>
            </div>
          </div>
          <div class="lsb-info">
            <div class="lsb-title" v-if="false"><span class="dot"></span>年度信息汇总</div>
            <div class="item-chart" style="padding-top: 20px">
              <router-link
                :to="'/'+item.type+'?startTime='+filter.startDate+'&endTime='+filter.endDate+'&industryCode='+filter.industryCode"
                v-for="item in tabList"
                :key="item.index"
                class="ztfx-tab-item" replace tag="div">
                <div class="tab-item-text">{{item.name}}</div>
              </router-link>
            </div>
          </div>
        </div>
        <div class="right-info-box">
          <div class="right-left-border">
            <div class="rlb-top"></div>
            <div class="rlb-role"></div>
            <div class="rlb-bottom"></div>
          </div>
          <div class="ri-box">
            <router-view/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  const currentDate = new Date('2020/12/31') // 当前日期
  const month = currentDate.getMonth()+1; // 月份
  const year = month<10?currentDate.getFullYear()+"-0"+month :currentDate.getFullYear()+"-"+month;
  const startDate = currentDate.format("yyyy-")+"01-01"
  const endDate = currentDate.format("yyyy-MM-dd")
  export default {
    name: 'cyydjj',
    data () {
      return {
        locations:[],
        filter:{
          industryCode:'',
          startDate: startDate,
          endDate:endDate
        },
        lastYear:endDate,
        tabList: [
          {name:'产业基金规模统计',type:'economic/cyydjj/gmtj',className:'router-link-active'},
          {name:'产业基金使用分析',type:'economic/cyydjj/syfx',className:''},
        ],
      }
    },
    mounted (){
      this.GLOBAL.app.getDictList(resp => {
        this.locations = resp["行业列表"];
      })
    },
    created(){
      this.getLastDate();
      this.initPage("/economic/cyydjj/gmtj");
    },
    watch:{
      $route(to,from){
        if(to.name === "cyydjj"){
          this.initPage("/economic/cyydjj/gmtj");
        }
      }
    },
    methods:{
      initPage(path) {
        let vm = this;
        let timeStart = !vm.$Util.isEmpty(vm.filter.startDate) ? vm.filter.startDate.split("-")[0] : null,
          timeEnd = !vm.$Util.isEmpty(vm.filter.endDate) ? vm.filter.endDate.split("-")[0] : null;
        if(timeStart == null || timeEnd== null || timeStart > timeEnd || timeStart <timeEnd){
          let dataText = timeStart == null ? '请选择开始时间': timeEnd ==null ? '请选择结算时间':'支持查询同一年数据，请选择起止时间为同一年后查询！';
          vm.$message({ showClose: true, message:dataText,  type: 'warning'});
          return;
        }
        vm.$router.replace({path:path,query:{startTime:vm.filter.startDate,endTime:vm.filter.endDate,industryCode:vm.filter.industryCode}})
      },
      getLastDate(){
        let vm = this;
        vm.$http.get('/dx-economy-api/subject/cyydjj/latestDate',{params:{}}).then(function (resp) {
          vm.lastYear = resp.data.data;
        })
      },
      /* 左侧日期区间选择发生变化 */
      dateRangeChanged(){
        this.initPage(this.$route.path);
      },
    }
  }
</script>
<style>
  .search-row-condition .el-date-editor .el-range-input{width:35%!important;}
</style>
<style scoped>
.ztfx-tab-item.router-link-active{color:#07b6ff}

</style>