$(function () {
  //1. 复制一份list标签里面的li, 为css滚动动画提供
  $('.monitor .content').each(function () {
    $(this).find('ul').append($(this).find('ul').children('li').clone())
  });

  //2. 故障监控按键点击切换
  $('.monitor .tabs').on('click', 'a', function () {
    //2.0 添加移除active类名
    $(this).addClass('active').siblings().remove('active')

    //2.1 找到下标
    let index = $(this).index()

    //2.2 设置对应content显示
    $('.monitor .content').eq(index).show().siblings('.content').hide()
  });

  // 3. 添加饼状图
  (function () {
    let mychart = echarts.init($('.site .pie')[0])

    let option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      series: [{
        name: '面积模式',
        type: 'pie',
        radius: ['5%', '60 %'],
        labelLine: {
          // 连接扇形图线长
          length: 3,
          // 连接文字线长
          length2: 3,
        },
        center: ['50%', '50%'],
        roseType: 'area',
        data: [{
            value: 10,
            name: 'rose1'
          },
          {
            value: 5,
            name: 'rose2'
          },
          {
            value: 15,
            name: 'rose3'
          },
          {
            value: 25,
            name: 'rose4'
          },
          {
            value: 20,
            name: 'rose5'
          },
          {
            value: 35,
            name: 'rose6'
          },
          {
            value: 30,
            name: 'rose7'
          },
          {
            value: 40,
            name: 'rose8'
          }
        ]
      }]
    }
    // 基于准备好的dom，初始化echarts实例
    mychart.setOption(option)
  })();

  //4.添加柱状图
  (function () {
    let mychart = echarts.init($('.user .bar')[0])

    let item = {
      value: 1200,
      itemStyle: {
        color: '#254065'
      },
      // 设置提示弹出框的样式
      tooltip: {
        // 这个可以设置整个框的样式
        // extraCssText: 'opacity:0'
        trigger: 'none'
      },
      // 设置鼠标移上时柱状条的背景色
      emphasis: {
        itemStyle: {
          color: '#254065'
        }
      }
    }

    let option = {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: 'red' // 0% 处的颜色
        }, {
          offset: 1,
          color: 'blue' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      },
      tooltip: {
        trigger: 'item',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '5%',
        right: '5%',
        top: '5%',
        bottom: '5%',
        containLabel: true,

      },
      xAxis: [{
        type: 'category',
        data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          color: '#4c9bfd'
        },
        axisLine: {
          lineStyle: {
            color: '#68d8fe'
          }
        }
      }],

      yAxis: [{
        type: 'value',
        axisLabel: {
          color: '#4c9bfd'
        },
        splitLine: {
          lineStyle: {
            color: ['#68d8fe']
          }
        },
        axisLine: {
          lineStyle: {
            color: '#68d8fe'
          }
        }
      }],

      series: [{

        name: '设备数量',

        type: 'bar',

        barWidth: '50%',

        data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
      }]

    }

    mychart.setOption(option)

  })();

  //5.订单量统计
  //5.1 造一个假的订单数据
  let orderData = [{
      num: 3650000,
      money: 36500000
    },
    {
      num: 90000,
      money: 900000
    },
    {
      num: 30000,
      money: 300000
    },
    {
      num: 2400,
      money: 24000
    }
  ];

  (function () {
    //设置初始下标
    let index = 0

    //5.2 绑定鼠标点击事件
    $('.order .tabs').on('click', 'a', function () {
      //修改类名
      $(this).addClass('active').siblings().removeClass('active')
      //找到下标
      let temp = $(this).index()
      index = temp
      //修改元素内容为对应下标的数组数据
      $('.order .data .item .order_orders').text(orderData[temp]['num'])
      $('.order .data .item .order_count').text(orderData[temp]['money'])
    })

    //开始自动执行一次
    $('.order .tabs a').eq(index).click()

    //自动轮播
    let timeId = setInterval(function () {
      index++
      if (index == $('.order .tabs a').length) {
        index = 0
      }
      $('.order .tabs a').eq(index).click()
    }, 5000)


  })();

  //6.销售统计
  (function () {

    //造一个假的数据
    let data = {
      year: [
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
        ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      ],
      quarter: [
        [230, 750, 120, 970],
        [430, 310, 60, 230],
        ['春', '夏', '秋', '冬']
      ],
      month: [
        [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36, 34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36, 34, 87, 32, 76, 98, 12, 32],
        [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98, 56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98, 56, 43, 98, 21, 56, 87, 43],
        ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
      ],
      week: [
        [43, 73, 62, 54, 91, 54, 66],
        [32, 54, 34, 87, 32, 45, 76],
        ['星期1', '星期2', '星期3', '星期4', '星期5', '星期6', '星期日']
      ]
    }

    //画图
    let mychart = echarts.init($('.sales .line')[0])

    let option = {
      legend: {
        data: ['预期销售额', '实际销售额度'],
        textStyle: {
          color: '#4c9bfd'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '20%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          color: "#4c9bfd",
          interval: 0
        },
        axisLine: {
          lineStyle: {
            color: '#68d8fe'
          }
        },
        data: data.year[2],
        boundaryGap: false,
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: "#4c9bfd"
        },
        axisLine: {
          lineStyle: {
            color: '#68d8fe'
          }
        },
        splitLine: {
          lineStyle: {
            color: ['#68d8fe']
          }
        },
      },
      color: ['yellow', 'red'],
      series: [{
          name: '预期销售额',
          data: data.year[0],
          type: 'line',
          smooth: true,

        },
        {
          name: '实际销售额度',
          data: data.year[1],
          type: 'line',
          smooth: true,
        },
      ]
    }

    mychart.setOption(option)

    //起始下标
    let index = 0

    //点击事件
    $('.sales .caption').on('click', 'a', function () {
      //修改class
      $(this).addClass('active').siblings('a').removeClass('active')
      //更改index
      index = $(this).index() - 1 //兄弟里还有一个h2
      //获取当前的自定义属性
      let current = $(this).data('type')
      //更改option里面的数据
      option.series[0].data = data[current][0]
      option.series[1].data = data[current][1]
      option.xAxis.data = data[current][2]
      //重新渲染图形
      mychart.setOption(option)
    })


    //定时器轮播
    let timeId

    function slideshow() {
      timeId = setInterval(function () {
        index++
        if (index == $('.sales .caption a').length) {
          index = 0
        }
        $('.sales .caption a').eq(index).click()
      }, 5000);
    }

    slideshow()

    //鼠标悬停停止轮播
    $('.sales').on('mouseenter', function () {
      clearInterval(timeId)
    })

    //鼠标移开继续轮播
    $('.sales').on('mouseleave', function () {
      slideshow()
    })

  })();

})