<template>
   <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>测报系统</el-breadcrumb-item>
        <el-breadcrumb-item>虫情测报</el-breadcrumb-item>
        <el-breadcrumb-item>害虫统计</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="check-btns">
            <div class="type-check">
               <el-button :type="0==display?'primary':'default'"  size="mini" @click="displayCheck(0)">手动害虫统计</el-button>
               <el-button :type="1==display?'primary':'default'" size="mini"  @click="displayCheck(1)">自动害虫统计</el-button>
            </div>
            <div class="time-check">
               <el-button type="primary" size="mini">当天</el-button>
                  <el-button  size="mini">近一月</el-button>
                  <el-button  size="mini">近半年</el-button>
                  <el-button  size="mini">近一年</el-button>
               <el-date-picker
                  size="small"
                  align="right"
                  v-model="timeRange"
                  type="daterange"
                  @change="timeRangChange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
               </el-date-picker>
            </div>
      </div>
      <el-card class="box-card" v-if="showControl">
          <el-table
            :data="hisData"
            stripe
            style="width: 100%">
            <el-table-column v-for="(item,index) in tableHead" :key="index" :width="item.property=='date'?'160px':''" :label="item.label" :prop="item.property">
               <template slot-scope="scope">
                     {{scope.row[scope.column.property]}}
               </template>
            </el-table-column>
         </el-table>
         <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @prev-click="prevClick"
            @next-click="nextClick"
            @current-change="changePage">
         </el-pagination>
      </el-card>
      <div v-if="!showControl">
         <template v-if="isEchartData">
         <el-row :gutter="30" type="flex" justify="space-between">
            <el-col :span="8" v-for="(item,index) in echartOptions" :key="index">
               <el-card class="box-card">
                     <chart ref="chart1" :options="item" :auto-resize="true"></chart>
               </el-card>
            </el-col>
         </el-row>
        </template>
         <template v-else>
             <highcharts :options="options"></highcharts>
            <el-card class="box-card">
               <p style="text-align:center">暂无数据！</p>
            </el-card>
         </template>

      </div>
   </div>
</template>

<script>
var options = {
    title: {
      text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
    },
    subtitle: {
      text: '数据来源：thesolarfoundation.com'
    },
    yAxis: {
      title: {
        text: '就业人数'
      }
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle'
    },
    plotOptions: {
      series: {
        label: {
          connectorAllowed: false
        },
        pointStart: 2010
      }
    },
    series: [{
      name: '安装，实施人员',
      data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
      name: '工人',
      data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
      name: '销售',
      data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
      name: '项目开发',
      data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
      name: '其他',
      data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],
    responsive: {
      rules: [{
        condition: {
          maxWidth: 500
        },
        chartOptions: {
          legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom'
          }
        }
      }]
    }
  }
   export default {
      data(){
         return {
            options: options,
            timeRange:'',
            //总数据条数
            total:0,
            queryInfo:{
               begin:'',
               end:'',
               e_id:this.$route.params.id,
               page:1
            },
            queryInfoE:{
               begin:'',
               end:'',
               e_id:this.$route.params.id
            },
            //图表实时否有数据
            isEchartData:true,
            //表格和图表按钮样式切换参数
            display:"0", //0代表表格、1代表图表
            // 表格和图表显示切换控制
            showControl:true,
            //echarts图表参数
            echartOptions:[],
            // 动态表头
            tableHead:[],
            // 表格数据
            hisData:[]
            }
       },
      created(){
         this.getHisDataList();
      },
      mounted(){
         // this.echartsFn(); 
      },
      methods:{
         //获取历史数据
         getHisDataList(){
          this.$axios({
             method:'POST',
             url:'/qxz_data',
             data:this.qs.stringify(this.queryInfo)
          }).then((res)=>{
            this.total=Number(res.data.nums);
             if(res.data.nums>0){
                let arr1=[{label:'日期',property:'date'}];
                let arr2=[];
                for(let i in res.data.conf){
                  let obj={};
                  if(res.data.conf[i]){
                    let arr=res.data.conf[i].split('#');
                        obj.label=`${arr[0]}(${arr[1]})`;
                        obj.property=i;
                        arr1.push(obj);
                  }
                }
                  this.tableHead=arr1; 
                  for(let item of res.data.data){
                     let obj={};
                     obj.date=item.time;
                     for(let i1 in item.dat){
                        if(item.dat[i1]){
                           obj[i1]=item.dat[i1].split('#')[0];
                        }
                     }
                     arr2.push(obj);
                  }
                  this.hisData=arr2;
             }
          })
         },
         //获取图表历史数据
         getEchartsHisDataList(){
           this.$axios({
               method:'POST',
               url:'/qxz_data_chart',
               data:this.qs.stringify(this.queryInfoE)
            }).then((res)=>{
                   this.echartsFn(res.data); 
             }).catch(()=>{
                console.log("获取数据失败！")
             })
         },
         echartsFn(data){
            let legend={};
            let time=[];
            let seriesGroup={};
            if(data.conf&&data.data&&data.data.length>0){   //如果图表数据不为空
               for(let i in data.conf){    //对conf遍历
                  if(data.conf[i]){
                     legend[i]={          //图例对象,i代表title
                        data:[`${data.conf[i].split('#')[0]}(${data.conf[i].split('#')[1]})`],
                     }    
                  }
               }
               for(let item of data.data){   //对data数据遍历
                     time.unshift(item.time.split(" ")[1].split(":")[0]);
                     for(let m in item.dat){
                        if(legend[m]){
                           if(seriesGroup[m]){
                              if(item.dat[m].split('#')[0]==-99.99){
                                 seriesGroup[m].data.unshift('N/A') 
                              }else{
                                 seriesGroup[m].data.unshift(item.dat[m].split('#')[0])
                              }
                           }else{
                               if(item.dat[m].split('#')[0]==-99.99){
                                 seriesGroup[m]={
                                    data:['N/A']
                                 };
                               }else{
                                 seriesGroup[m]={
                                    data:[item.dat[m].split('#')[0]]
                                 };
                               }
                           }
                        }
                         
                     }
               }
               // console.log(seriesGroup);
               console.log(time);
               // console.log(legend);
               this.echartOptions=[];
               for(let i in legend){
                  let obj=this.optionEchart(i,legend[i],time,seriesGroup[i]);
                  this.echartOptions.unshift(obj);
               }
               // console.log(this.echartOptions)
            }else{
               this.isEchartData=false;
            }
         },
         optionEchart(title,legend,time,seriesData){
            return {
                  color: ["#17BB89"],
                  title:{
                     text:title
                  },
                  tooltip: {
                     trigger: 'axis'
                  },
                  legend: {
                     data: legend.data
                  },
                  grid: {
                     left: '0',
                     right: '0',
                     bottom: '0',
                     height: '80%',
                     containLabel: true
                  },
                  xAxis: {
                     type: 'category',
                     axisTick:{
                        show:false   //x轴分割线
                     },
                     axisLabel:{
                        color:'#C1C1C1'
                     },
                     axisLine:{
                        lineStyle:{
                           color:'#C1C1C1',
                           type:'dashed'
                        }
                     },
                     data:time
                  },
                  yAxis: {
                     type: 'value',
                     axisTick:{
                        show:false
                     },
                     axisLine:{
                        show:false,
                        },
                     splitLine:{
                        show:true,
                        lineStyle:{
                           color:'#C1C1C1',
                           type:'dashed'
                        }
                     },
                     axisLabel:{
                        color:'#C1C1C1'
                     }
                  },
                  series: [{
                     name:legend.data[0],
                     data: seriesData.data,
                     type: 'line'
                  }]
               };
         },
         //表格和图表切换
         displayCheck(a){
           this.display=a;
           if(a==0){
            this.timeRange='';
             this.showControl=true;
           }else if(a==1){
             this.timeRange='';
             this.showControl=false;
             this.getEchartsHisDataList();  //渲染echarts
           }
         },
         prevClick(val){
            this.queryInfo.page--;
            this.getHisDataList();
         },
         nextClick(val){
            this.queryInfo.page++;
            this.getHisDataList();
         },
         //改变page
         changePage(val){
            this.queryInfo.page=val;
            this.getHisDataList();
         },
         timeRangChange(value){
            console.log(value);
            if(value&&value.length>0){
               let begin=new Date(value[0]);
               let end=new Date(value[1]);
               Date.prototype.toLocaleString=function(){
                  return this.getFullYear()+'-'+(this.getMonth()+1<10?'0'+this.getMonth()+1:this.getMonth()+1)+'-'+
                  (this.getDate()<10?'0'+this.getDate():this.getDate())
               }
               if(this.display==0){
                  this.queryInfo.begin=begin.toLocaleString();
                  this.queryInfo.end=end.toLocaleString(); 
                  this.getHisDataList();
               }else if(this.display==1){
                  this.queryInfoE.begin=begin.toLocaleString();
                  this.queryInfoE.end=end.toLocaleString(); 
                  this.getEchartsHisDataList();  
               }
            }else{
               
            }
         }
   
      }
            
   }
</script>

<style lang='less' scoped>
.check-btns{display:flex;justify-content: space-between;margin-bottom:20px}
.echarts{width:100%;height:300px}
</style>