<template>
  <el-carousel :interval="100000" 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" id="echartContainer1">
        </div>
        <div class="nextpage">
          <p style="display:none">{{count}}</p>
          <el-button  class="gopagediv1" @click="goPageClick1"> 上一页</el-button>
          <el-button  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" id="echartContainer2" ></div>
      </div>
      <div class="nextpage">
      </div>
    </el-carousel-item>
    <el-carousel-item class="carousel-item-env"  style="width:85%;height:100%;position:absolute;left:-18%;">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
  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: '30%',
            containLabel: true
          },
          xAxis:  {
            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:'',

        echartrz:{
          title : {
            text: '认证统计',
            x:'center'
          },
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            x:'center',
            top:'10%',
            data: ['已认证', '未认证','认证比例']
          },
          grid: {
            top: '30%',
            containLabel: true
          },
          xAxis:  {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            name:'乡镇名称',
            data: ['周一','周二','周三','周四','周五','周六','周日']
          },
          series: [
            {
              name: '已认证',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [320, 302, 301, 334, 390, 330, 320]
            },
            {
              name: '未认证',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '认证比例',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [0.56, 0.35, 0.91, 0.34, 0.9, 0.3, 0.31]
            },
          ]
        },
      }
    },

    mounted(){

      sessionStorage.setItem("lj",JSON.stringify(this.echartzz));
      this.chartinfo();
      this.chart11();

    },
    methods:{
      chart11(){
      },

      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);
   /*       let myChart2 = echarts.init(document.getElementById('echartContainer2'));
          myChart2.setOption(this.echartrz);*/
        }).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("lj"));
          this.chartinfo(this.chartdata);
        }else {
          alert('已经到最后一页了');
        }

      },

      goPageClick1(){
        this.count--;
        this.chartdata.chartnum = this.count;
        this.chartdata.chartsize=10;
        console.log(this.count);
        if(this.count<1){
          alert('已经第一页了');
        }else{
          this.echartzz=JSON.parse(sessionStorage.getItem("lj"));
          this.chartinfo(this.chartdata);
        }

      }
    },


  }



</script>

<style>
  .carousel-item-intro {
    background-color: #EFF3F4;
    -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: #52c578;
    -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;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    -moz-border-radius: 15px;
    background-clip: padding-box;
    box-shadow: 0 0 25px #a3b3b965;
  }
  .ddiv1{
    margin: auto;
    width: 90%;
    height: 90%;
  }
  .div1{
    width:70%;
    height:65%;
    margin-top: 5%;
  }
  .nextpage{
  }

  .ddiv2{
    margin: auto;
    width: 90%;
    height: 90%;
  }
  .div2{
    width:70%;
    height:65%;
    margin-top: 5%;
  }
</style>
