<template>
  <el-carousel :interval="3000"  style="margin-top:30px;" align=center type="card"  class="carousel" height="70vh" >

    <el-carousel-item class="carousel-item-intro"  style="width:85%; height:100%;position:absolute;left:-18%;">
      <div class="ddiv1">
        <div class="div1" :style="{width: '90%', height: '90%'}" id="echartContainer1"></div>
        <div class="nextpage">
          <p style="display:none">{{count}}</p>
          <el-button size="mini"  class="gopagediv1" @click="goPageClick1"> 上一页</el-button>
          <el-button size="mini" class="gopagediv1" @click="nextPageClick1"> 下一页</el-button>
        </div>
      </div>
    </el-carousel-item>

    <el-carousel-item class="carousel-item-func"  style="width:85%;height:100%;position:absolute;left:-18%">
      <div class="ddiv2">
        <div class="div2" :style="{width: '90%', height: '90%'}" id="echartContainer2" ></div>
        <div class="nextpage">
          <p style="display:none"></p>
          <el-button size="mini"  class="gopagediv1" @click="goPageClick2"> 上一页</el-button>
          <el-button size="mini" class="gopagediv1" @click="nextPageClick2"> 下一页</el-button>
        </div>

      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
  import Axios from "axios"
  import {baseUrl2} from "../../utils/global"

  var echarts = require('echarts');
  export default {
    components:{
    },
    data () {
      return {
        echartzz:{
          title : {
            text: '业务详情统计',
            x:'center'
          },
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            x:'center',
            top:'10%',
            data: ['参保登记', '信息变更','待遇申请','参保注销','补缴保费','升档改办','关系转移']
          },
          grid: {
            top: '25%',
            containLabel: true
          },
          xAxis:  {
            name:"数量",
            type: 'value'
          },
          yAxis: {
            type: 'category',
            name:'乡镇名称',
            data: []
          },
          series: [
            {
              name: '参保登记',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: []
            },
            {
              name: '信息变更',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: []
            },
            {
              name: '待遇申请',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: []
            },
            {
              name: '参保注销',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: []
            },
            {
              name: '补缴保费',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: []
            },
            {
              name: '升档改办',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: []
            },
            {
              name: '关系转移',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: []
            },
          ]
        },
        count: 1,
        chartdata:{
          chartnum:'',
          chartsize:'',
        },
        total:'',
        fycount:'',
        fysize:10,
        fynum:0,

        echartrz:{
          title : {
            text: '认证统计',
            x:'center'
          },
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            x:'center',
            top:'10%',
            data: ['已认证', '未认证','认证比例'],
            selected: {
              已认证:true,
              未认证:true,
              认证比例:false,
            },
          },
          grid: {
            top: '30%',
            containLabel: true
          },
          xAxis:  {
            type: 'value',
            name:"数量"
          },
          yAxis: {
            type: 'category',
            name:'乡镇名称',
            data: []
          },
          series: [
            {
              name: '已认证',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: []
            },
            {
              name: '未认证',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: []
            },
            {
              name: '认证比例',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: []
            },
          ]
        },
      }
    },

    mounted(){
      sessionStorage.setItem("zz",JSON.stringify(this.echartzz));
      sessionStorage.setItem("rz",JSON.stringify(this.echartrz));
      this.chartinfo();
      this.chartCertification();

    },

    methods:{
      chartCertification(){


        Axios.get(baseUrl2+'/chart/timingselect',{
        })
          .then(res => {

            this.icount = res.data.obj.pagetotal;
            res.data.obj.result.length=this.fysize;
            for (var i = this.fynum ; i <res.data.obj.result.length ; i++) {
              this.echartrz.yAxis.data.push(res.data.obj.result[i].townName+"  ");
              this.echartrz.series[0].data.push(res.data.obj.result[i].verified);
              this.echartrz.series[1].data.push(res.data.obj.result[i].unverified);
              this.echartrz.series[2].data.push(res.data.obj.result[i].rzl);
            }

            //console.log("分页linit"+this.fynum+","+this.fysize);
            //console.log("首次=="+this.fynum+","+this.fysize+"/////"+res.data.obj.result.length+"总数"+this.icount)
            let myChart1 = echarts.init(document.getElementById('echartContainer2'));
            myChart1.setOption(this.echartrz);
            /*   myChart1.on('legendselectchanged',function (parms) {
                 var option = this.getOption();
                 alert(123)
               })*/
            console.log()

          })
          .catch(res => {
            console.log('报错了');
          });
      },
      goPageClick2(){
        if(this.fynum==0){
          this.$message.error('已经第一页了');
        }else{
          this.echartrz=JSON.parse(sessionStorage.getItem("rz"));
          if(this.fysize==this.icount){
            this.fysize=this.fynum;
            this.fynum=this.fynum-10;
            this.chartCertification();
            //  console.log("上一页linit"+this.fynum+","+this.fysize);
          }else {
            this.fysize = this.fysize-10;
            this.fynum=this.fynum-10;
            this.chartCertification();
            //  console.log("上一页linit"+this.fynum+","+this.fysize);
          }
        }
      },
      nextPageClick2(){
        if(this.fysize<this.icount){
          this.fysize = this.fysize+10;
          this.fynum=this.fynum+10;
          this.echartrz=JSON.parse(sessionStorage.getItem("rz"));
          if(this.fysize>this.icount){
            this.fysize=this.icount
            //  console.log("下一页linit"+this.fynum+","+this.fysize);
            this.chartCertification();
          }else{
            //  console.log("下一页linit"+this.fynum+","+this.fysize);
            this.chartCertification();
          }
        }else{
          this.$message.error('已经是最后一页了');
        }
      },

      chartinfo(){
        this.$api.getlist.selectchartInfo(this.chartdata).then((res) => {
          res.data.result = res.data.result.reverse();
          for (var i = 0; i < res.data.result.length; i++) {
            this.echartzz.yAxis.data.push(res.data.result[i].name+"   ");
            this.echartzz.series[0].data.push(res.data.result[i].t1);
            this.echartzz.series[1].data.push(res.data.result[i].t2);
            this.echartzz.series[2].data.push(res.data.result[i].t3);
            this.echartzz.series[3].data.push(res.data.result[i].t4);
            this.echartzz.series[4].data.push(res.data.result[i].t5);
            this.echartzz.series[5].data.push(res.data.result[i].t6);
            this.echartzz.series[6].data.push(res.data.result[i].t7);
          }
          this.total = res.data.pagetotal;
          let myChart1 = echarts.init(document.getElementById('echartContainer1'));
          myChart1.setOption(this.echartzz);

        }).catch((res) => {
          console.log('报错了');
        });
      },
      nextPageClick1(){
        this.count++;
        this.chartdata.chartnum = this.count;
        this.chartdata.chartsize=10;
        console.log(this.count);
        if(this.total>(this.chartdata.chartnum-1)*this.chartdata.chartsize){
          this.echartzz=JSON.parse(sessionStorage.getItem("zz"));
          this.chartinfo(this.chartdata);
        }else {
          this.count--;
          this.$message.error('已经是最后一页了');
        }

      },
      goPageClick1(){
        this.count--;
        this.chartdata.chartnum = this.count;
        this.chartdata.chartsize=10;
        console.log(this.count);
        if(this.count<1){
          this.count++;
          this.$message.error('已经是第一页了');
        }else{
          this.echartzz=JSON.parse(sessionStorage.getItem("zz"));
          this.chartinfo(this.chartdata);
        }
      }
    },
  }


</script>

<style>
  .carousel-item-intro {
    background-color:#D9E0E1;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    -moz-border-radius: 15px;
    background-clip: padding-box;
    box-shadow: 0 0 25px #a3b3b965;
  }
  .carousel-item-func {
    background-color: #D9E0E1;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    -moz-border-radius: 15px;
    background-clip: padding-box;
    box-shadow: 0 0 25px #a3b3b965;
  }
  .carousel-item-env {
    /*background-color: #41a7b9;*/
    background-color: #D9E0E1;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    -moz-border-radius: 15px;
    background-clip: padding-box;
    box-shadow: 0 0 25px #a3b3b965;
  }
  .ddiv1{
    margin: auto;
    height: 90%;
  }
  .div1{
    height:65%;
    margin-top: 5%;
  }
  .ddiv2{
    margin: auto;
    height: 90%;
  }
  .div2{
    height:65%;
    margin-top: 5%;
  }
</style>
