import * as echarts from '../../../component/ec-canvas/echarts';
let app=getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
  
    zbList:[],
    admin: app.state.admin,
    xMonth:[],
    yMoney1: [],
    yMoney2: [],
    datainfo:{},
    companyId: app.state.companyId,
    cityId: app.state.cityId,
    saleList:[],
    ecScatter: {
      lazyLoad: true
    },
    ec: {
      lazyLoad: true
    }
  },


 

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getZhanbi();
    this.getZheXian();
    this.getHot();
    this.scaComponnet = this.selectComponent('#mychart-dom-multi-scatter');
    this.pieComponnet = this.selectComponent('#mychart-pie');
    
  },
  initPie: function () {

    this.pieComponnet.init((canvas, width, height) => {
      // 初始化图表
      const scaChart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      scaChart.setOption(this.getPie());
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return scaChart;
    });
  },
  getPie: function () {
    //请求数据 
    return {
      tooltip: {
        trigger: "item",
        formatter: "{a}{b} : {c} ({d}%)"
      },

      calculable: true,
      graphic: [

        {
          type: "text",
          left: "40%",
          top: "45%",
          style: {
            text: "线路占比",
            textAlign: "center",
            fill: "#2C3343", //文字的颜色
            fontSize: 18,
            fontFamily: "pingfangR"
          }
        }
      ],
      series: [
        {
          name: "订单来源",
          type: "pie",
          radius: ["50%", "70%"],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              borderWidth: 2,
              borderColor: "#fff",
              color: function (params) {
                //自定义颜色
                var colorList = [
                  "#F8733A",
                  "#53D277",
                  "#36C7D9",
                  "#F8733A",
                  "#F9B89C"
                ];
                return colorList[params.dataIndex];
              }
            },
            emphasis: {
              label: {
                show: true,

                textStyle: {
                  fontSize: "20",
                  fontFamily: "pingfangR"
                }
              }
            }
          },
          data: this.data.zbList
        }
      ]
    }
  },
  init_sca: function () {
    
    this.scaComponnet.init((canvas, width, height) => {
      // 初始化图表
      const scaChart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      scaChart.setOption(this.getScaOption());
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return scaChart;
    });
  },
  getScaOption: function () {
    
    //请求数据 
    return {
      title: {
        left: "left",
        textStyle: {
          fontWeight: "bold",
          fontSize: 14,
          color: "#333333",
          height: "30px"
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        axisLine: {
          show: false,
          lineStyle: {
            width: 30
          }
        },
        axisTick: false,
        data: this.data.xMonth,
      }, 
      yAxis: {
        type: "value",
        min: '10',
        axisTick: true,
        splitLine: {
          show: true,
          lineStyle: {
            color: "#fff"
          }
        },
      },
      series: [
        {
          type: "line",
          smooth: 1,
          symbol: 'none',
          data: this.data.yMoney1,
          lineStyle: {
            width: 3,
            color: "#36C7D9"
          },
          itemStyle: {
            borderWidth: 5,
            color: "#FFFFFF"
          },
          areaStyle: {
            color: "#A4E6EE"
          }
        },
        {
          type: "line",
          smooth: 2,
          data: this.data.yMoney2,
          lineStyle: {
            width: 3,
            color: "#ED6A6B",
            type: 'dashed'
          },
          itemStyle: {
            borderWidth: 5,
          },

          areaStyle: {
            color: "#FAD2D2"
          }
        }
      ]
    
    };
  },
  goUrl(e) {
    let item = e.currentTarget.dataset.item;
    let teamType = e.currentTarget.dataset.teamtype;
    wx.navigateTo({
      url: '/pages/GroupTour/GroupDetails/GroupDetails?idDes=' + encodeURIComponent(item.idDes) + "&tcid=" + item.tcid + "&teamType=" + teamType,
    })
  },
  getZheXian(){
    let that=this;
    app.$api('customer_post_GetCustomerBigRedEnvelope', { CustomerId: this.data.admin.customerAccountId }).then(res => {
      let datainfo = res;
      let arr1 = ['-', '-', '-', '-'];
      let newarr = [];
      datainfo.JQLRList.forEach((item, index) => {
        that.data.xMonth.push(item.Date)
        if (index < 5) {
          that.data.yMoney1.push(item.Money)
        }
        if (index > 3) {
          newarr.push(item.Money);

          that.data.yMoney2 = arr1.concat(newarr);
        }
      })
      
      datainfo.RatioList.forEach(item => {
        item.percent =datainfo.Amount / item.Money;
        item.width = (item.percent) * 100;
      })
      that.data.yMoney1 = that.data.yMoney1.concat(["-"]);
      that.setData({
        yMoney2: that.data.yMoney2,
        yMoney1: that.data.yMoney1,
        xMonth: that.data.xMonth,
        datainfo:datainfo
      })
      that.init_sca();
    }).catch(err => { })
  
  },
  getZhanbi(){
    app.$apiJavaNew('/api/b2b/user/getLinePercentage', {}).then(res => {
      let data=res;
      data.forEach(item=>{
        let obj = {};
        obj.name = item.LineName;
        obj.value = item.num;
        this.data.zbList.push(obj);
      })
      this.setData({
        zbList: this.data.zbList
      })
      this.initPie();
    }).catch(err => {

    })
  },
  goUrlUse(){
    wx.navigateTo({
      url: '/pages/mine/UseDetails/UseDetails',
    })
  },
  getHot() {
    let msg = {
      pageIndex: 1,
      pageSize: 4,
      companyId: this.data.companyId,
      cityId: this.data.cityId,
    };
    app.$apiJavaNew('/api/b2b/home/getHomeTravelSpecialSale', msg).then(res => {
      let data = res;
      
      this.setData({
        saleList: data.pageData
      })
    }).catch(err => {

    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      admin: app.state.admin
    })
    this.getZhanbi();
    this.getZheXian();
    this.getHot();
    this.scaComponnet = this.selectComponent('#mychart-dom-multi-scatter');
    this.pieComponnet = this.selectComponent('#mychart-pie');
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})