<template>
    <div class="" style="width: 100%;height:100%;" >
      <div class="ztfx-tab-box">
        <div class="tab-item" :class="{active :type == 'xxcy'}" @click="initChartsByType('东乡新兴产业基金')">东乡新兴产业基金</div>
        <div class="tab-item" :class="{active :type == 'smjj'}" @click="initChartsByType('激石东乡产业发展引导私募基金')">激石东乡产业发展引导私募基金</div>
      </div>
      <div class="ztfx-charts-box">
        <div class="ztfx-chart-item" style="height: calc(100% - 17px);">
          <div class="roles-one"></div><div class="roles-two"></div>
          <div class="roles-three"></div><div class="roles-four"></div>
          <div class="ztfx-chart-title"><span class="dot"></span>基金投资行业分析</div>
          <div class="ztfx-chart-info" id="chartOne"></div>
        </div>
        <div class="ztfx-chart-item" style="height: calc(100% - 17px);">
          <div class="roles-one"></div><div class="roles-two"></div>
          <div class="roles-three"></div><div class="roles-four"></div>
          <div class="ztfx-chart-title"><span class="dot"></span>各项目投资额占比分析</div>
          <div class="ztfx-chart-info" id="chartTwo" v-show="$Util.isEmpty(tips)"></div>
          <div class="" style='padding-left: 50px;line-height: 50px;' v-if="!$Util.isEmpty(tips)">{{tips}}</div>
        </div>
      </div>
    </div>
</template>

<script>
  let month = new Date().getMonth()==0?1:new Date().getMonth()+1;
  let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month;
  export default {
    name: 'syfx',
    data () {
      return {
        type:'xxcy',
        filter:{
          industryCode:'',
          name:'',
          startDate: new Date().format("yyyy-")+"01",
          endDate:new Date().format("yyyy-MM")
        },
        defaultOp:{
          title: { show: false },
          legend:{show:false,height:"0"},
          grid:{top:30,bottom:30},
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#777'
              },
              crossStyle: {
                color: 'rgba(255,255,255,.8)',
              }
            }
          },
          xAxis: {
            axisLabel:{color:'rgba(255,255,255,.9)'/*,interval:0*/},
            axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
            splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}}
          }
        },
        tips:'',
      }
    },
    mounted (){
      this.filter.startDate = this.$route.query.startTime;
      this.filter.endDate =  this.$route.query.endTime;
      this.filter.industryCode =  this.$route.query.industryCode;
      this.loadTabCharts();
    },
    watch:{
      $route(to,from){
        if(to.name === "syfx"){
          this.loadTabCharts();
        }
      }
    },
    methods:{
      initChartsByType(name){
        let vm = this
        vm.filter.name = name
        vm.type = name=='东乡新兴产业基金'?'xxcy':'smjj';
        vm.loadTabCharts();
      },
      loadTabCharts(){
        /*this.drawLine('chartOne',['生物医药','电子信息','新能源','金属加工','轻工制造'],[12,334,344,333,787],[122,223,440,22,678],[2,22,34,45,88]);*/
        /*let t = [{name: "华冠科技", value: 122},{name: "书源科技", value: 233},{name: "科诺制药", value: 453},{name: "唯呢尔", value: 453},{name: "润邦", value: 453}];
        let legend=[];
        t.forEach(function (item) {
          legend.push(item.name)
        })
        this.drawPie("chartTwo",t,legend)*/
        this.getOneData();
        this.getTwoData()
      },
      getOneData(){
        let vm = this;
        vm.$http.get('/dx-economy-api/subject/cyydjj/industry',{params:vm.filter}).then(function (resp) {
          let t = resp.data.data
          vm.drawLine('chartOne',t.xAxis,t.value,t.value2);
        })
      },
      getTwoData(){
        let vm = this;
        vm.$http.get('/dx-economy-api/subject/cyydjj/projectScale',{params:vm.filter}).then(function (resp) {
          let t = resp.data.data
          vm.tips = vm.$Util.isEmpty(t) ? '暂无信息':'';
          let legend = [];
          t.forEach(function (item) {
            legend.push(item.name)
          })
          vm.drawPie("chartTwo",t,legend)
        })
      },
      drawLine(container,cate,d1,d2){
        let vm = this
        let myChart = vm.$echarts.init(document.getElementById(container))
        let op = {
          xAxis: {
            type:"category",
            data: cate,
            axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}}
          },
          yAxis:[
            {
              type: 'value',
              name:'工业产值(亿元)',
              /*minInterval: 10,*/
              nameTextStyle:{color:'rgba(255,255,255,.8)'},
              axisLabel:{
                color:'rgba(255,255,255,.8)',
                formatter: function (value) {
                  let texts = [];
                  if(value<1000){
                    texts.push(value)
                  }else if(Math.ceil(value/1000)>=1&&Math.ceil(value/1000)<10){
                    texts.push(Math.ceil(value/1000) + "千")
                  }else if(Math.ceil(value/10000)>=1&&Math.ceil(value/10000)<100){
                    texts.push(Math.ceil(value/10000) + "万")
                  }else if(Math.ceil(value/1000000)>=1){
                    texts.push(Math.ceil(value/1000000) + "百万")
                  }
                  return value
                }},
              axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
              splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}}
            },
            {
              type: 'value',
              name: '同比',
              /*minInterval: 1,*/
              nameTextStyle:{color:'rgba(255,255,255,.8)'},
              axisLabel:{color:'rgba(255,255,255,.8)'},
              axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
              splitLine:{show:false}
            }
          ],
          series: [
            {
              name: '工业产值(亿元)',
              type: 'bar',
              color:"#6ee988",
              barMaxWidth:'20',
              data: d1,//[100,200,33,56,188,123,143,23,99],//res.zcz
              itemStyle: {
                color: {
                  type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                  colorStops: [{
                    offset: 0, color: '#6ee988' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#6ee988' // 100% 处的颜色
                  }]
                }
              }
            },
            {
              name: '同比',
              type: 'line',
              yAxisIndex: 1,
              color:"#e0e63d",
              data: d2,//[10,20,30,44,77,55,66,22,100],//res.tb
              areaStyle: {
                color: {
                  type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                  colorStops: [{
                    offset: 0, color: '#e0e63d' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                  }]
                }
              }
            }]
        }
        myChart.setOption($.extend(true,op,vm.defaultOp));
        /*if(container == "gytz") {
          myChart.on('click', function (param) {
            let _start = "",_end = "";
            if(!vm.$Util.isEmpty(vm.timeFilter)){
              if(vm.timeFilter.length === 1){
                _start = vm.timeFilter[0];
              }else if(vm.timeFilter.length === 2){
                _start = vm.timeFilter[0];
                _end = vm.timeFilter[1];
              }
            }
            vm.$router.push({name: "gytz", params: {sDate: _start, eDate: _end}})
          })
        }*/
      },
      drawPie(container,data,legend){
        let vm = this
        let myChart = vm.$echarts.init(document.getElementById(container))
        let op = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          color:['#efca5a','#7dbbea','#ef995a','#ef5a6f','#a8de74','#de74a1','#cb74de','#7483de','#74d8de','#74dec1','#6cef5a','#d85aef'],
          legend: {
            orient: 'horizontal',
            bottom: '10',
            data:legend,
            textStyle:{color:"rgba(255,255,255,.8)"}
          },
          series: [
            {
              name:'固定资产投资占比',
              type:'pie',
              radius:['30%', '70%'],
              // minAngle: 30,
              center:['50%', '35%'],
              avoidLabelOverlap: false,
              label:{show:false},
              data:data
            }
          ]
        }
        myChart.setOption(op)
        /*myChart.on('click', function (param) {
          let _start = "",_end = "";
          if(!vm.$Util.isEmpty(vm.timeFilter)){
            if(vm.timeFilter.length === 1){
              _start = vm.timeFilter[0];
            }else if(vm.timeFilter.length === 2){
              _start = vm.timeFilter[0];
              _end = vm.timeFilter[1];
            }
          }
          vm.$router.push({name:"jjyx",params:{sDate:_start,eDate:_end,bk:'',industry:param.name}})
        })*/
      },
    }
  }
</script>
<style>
  .search-row-condition .el-date-editor .el-range-input{width:35%!important;}
</style>
<style scoped>


</style>