// pages/qiyeyongdian/detail/detail.js

import * as echarts from '../../ec-canvas/echarts';

const app = getApp();
var Chart = null;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    showModal: false,
    modalTitle: ["选择时间", "选择地磅", "选择货物"],
    modalNum: 2,
    monthList: ["货物名字", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘炒股的人格", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", "车间后方大转盘", ],
    time: '2019.01.01-2019.01.31',
    changeColor: 0,
    tabList: ["出库", "流水"],
    tabNum: 0,
    tableTitle: ["时间", "地磅", "货物名称", "重量（T）"],
    trList: [{
        date: "09.12",
        position: "大厅左上角",
        name: "名字妙哉妙",
        num: "18",
        btn: "详情"
      },
      {
        date: "09.12",
        position: "大厅左上角",
        name: "啦啦啦啦啦啦啦啦啦啦",
        num: "18",
        btn: "详情"
      },
      {
        date: "09.12",
        position: "车间后方大转盘",
        name: "啦啦啦啦啦啦啦啦啦啦",
        num: "18",
        btn: "详情"
      },
    ],
    ec: {

      onInit: function(canvas, width, height) {

        chart = echarts.init(canvas, null, {

          width: width,

          height: height

        });

        canvas.setChart(chart);

        return chart;

      },

      lazyLoad: true, // 延迟加载
      showt: false
    },

  },
  changeTab(e) {
    this.setData({
      tabNum: e.currentTarget.dataset.id
    })

  },
  toShowModal(e) {
    this.setData({
      showModal: true
    })
  },

  hideModal() {
    this.setData({
      showModal: false
    });
  },
  choice(e) {

    this.setData({
      changeColor: e.currentTarget.dataset.id
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

    this.echartsComponnet = this.selectComponent('#mychart');


    //如果是第一次绘制

    if (!Chart) {
      this.init_echarts(); //初始化图表


    } else {

      this.setOption(Chart); //更新数据

    }

  },
  //初始化图表

  init_echarts: function() {

    this.echartsComponnet.init((canvas, width, height) => {

      // 初始化图表

      const Chart = echarts.init(canvas, null, {

        width: width,

        height: height

      });

      this.setOption(Chart)

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等

      return Chart;

    });

  },

  setOption: function(Chart) {

    Chart.clear(); // 清除

    Chart.setOption(this.getOption()); //获取新数据

  },

  // 图表配置项

  getOption() {

    var self = this;

    var option = {

      color: ["#FFF"], //图例图标颜色
      // lineStyle:{//阴影
      //   shadowColor: '#6495F8',
      //   shadowBlur: 10
      // },
      xAxis: { //横坐标

        type: 'category',

        name: '日期', //横坐标名称

        nameTextStyle: { //在name值存在下，设置name的样式

          color: '#333',

          fontStyle: 'normal'

        },
        axisLabel: {
          interval: 0,
        },
        boundaryGap: false, //1.true 数据点在2个刻度直接  2.fals 数据点在分割线上，即刻度值上

        data: ['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'],

        axisLabel: {

          textStyle: {

            fontSize: 13,

            color: '#5D5D5D'

          }

        }

      },

      yAxis: { //纵坐标

        type: 'value',

        position: 'left',

        name: '重量', //纵坐标名称

        nameTextStyle: { //在name值存在下，设置name的样式

          color: '#333333',

          fontStyle: 'normal'

        },

        splitNumber: 10, //坐标轴的分割段数


        min: 0,

        max: 100,

      },

      series: [{

        type: 'line',

        data: [10, 12, 13, 14, 23, 31, 23, 31, 48, 43, 1, 100, 23, 42, 21, 31, 23, 34, 97, 43, 59, 67, 82, 42, 23, 31, 13, 34, 34, 43, 25],

        symbol: 'true',

        itemStyle: {

          normal: {

            lineStyle: {

              color: '#ED3676'

            }

          }

        },
        // areaStyle: {
        //   normal: {
        //     color: '#6495F8' //改变区域颜色
        //   }
        // },

      }],

    }

    return option;

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    this.echartsComponnet = this.selectComponent('#mychart');


    //如果是第一次绘制

    if (!Chart) {
      this.init_echarts(); //初始化图表


    } else {

      this.setOption(Chart); //更新数据

    }
  },

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

  },

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

  },

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

  },

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

  },

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

  }
})