
let chart = null;
function deteleNull(arr){
  let brr=[];
  arr.forEach(item => {
      if(item!==null){
      brr.push(item)
    }
  })
  return brr
}
let envTypelist={
  hcho:{
    min:0,
    max:0.2
  },
  pm25:{
    min:0,
    max:100
  }
}
function chartFn(data=[],envType,envName) {
  function onInitChart(canvas, width, height, F2) {
    // const data = data;
    // const data = [
    //   { time: "1951",release:0, sales: 38,标准区间: [ 25, 45 ] },
    //   { time: "1952",release:1, sales: 52,标准区间: [ 25, 35 ] },
    //   { time: "1956",release:2, sales: 61,标准区间: [ 25, 45 ] },
    //   { time: "1957",release:3, sales: 26,标准区间: [ 25, 45 ] },
    //   { time: "1958",release:4, sales: 48,标准区间: [ 25, 45 ] },
    //   { time: "1959",release:5, sales: 30,标准区间: [ 25, 45 ] },
    //   { time: "1960",release:6, sales: 38,标准区间: [ 25, 45 ] },
    //   { time: "1962",release:7, sales: 20,标准区间: [ 25, 45 ] },
    //   { time: "1964",release:8, sales: null,标准区间: [ 25, 45 ]},
    //   { time: "1966",release:9, sales: 38,标准区间: [ 25, 45 ] },
    //   { time: "1968",release:10, sales: 38,标准区间: [ 25, 45 ] },
    //   { time: "1970",release:11, sales: 20,标准区间: [ 30, 45 ] },
    //   { time: "1972",release:12, sales: 20,标准区间: [ 30, 45 ] },
    // ];
    let maxTemp;
    let minTemp;
    if(envTypelist[envType]){
      maxTemp=envTypelist[envType].max;
      minTemp=envTypelist[envType].min;
    }else{
      let envArr= [];
      data.forEach(item=>{
          envArr = envArr.concat(item['标准区间'])
          envArr.push(item.sales)
      })
      envArr = deteleNull(envArr);
      maxTemp=Math.ceil(Math.max.call(null,...envArr)) + 1;
      minTemp=Math.floor(Math.min.call(null,...envArr)) - 1;
    }
    console.log(maxTemp,minTemp,"envType")
    chart = new F2.Chart({
      el: canvas,
      width,
      height,
    });

    chart.source(data, {
      // release: {
      //   range: [ 0.05, 0.95 ],
      //   min: (dataIndex+10)>data.length?(data.length-10):dataIndex, // 设置刚开始显示的区间 0-5
      //   max: (dataIndex+10)>data.length?data.length:dataIndex+10
      // },
      sales:{
        min: minTemp,
        max: maxTemp
      },
      '标准区间':{
        min: minTemp,
        max: maxTemp
      }
    });

    chart.tooltip({
      showCrosshairs: true,
      showItemMarker: false,
      background: {
        radius: 2,
        fill: '#1890FF',
        padding: [ 3, 5 ]
      },
      nameStyle: {
        fill: '#fff'
      },
      onShow: function onShow(ev) {
        const items = ev.items;
        // console.log(items)
        let time = items[0].origin.time;
        items[0].name = time?`${time} 区间`:'区间';
        if(items[1]&&items[1].name){
          items[1].name = envName
        }
        // items[1].name?(items[1].name = envName);
        return (ev.items = ev.items.splice(2));
      }
    });

    // 定义进度条
    // chart.scrollBar({
    //   mode: 'x',
    //   xStyle: {
    //     offsetY: -5
    //   }
    // });
    // chart.interaction('pan',{
    //   mode: 'x',
    //   // step: 2,
    //   pressTime:0,
    //   onStart:function(){

    //   },
    //   onEnd:function(){

    //   },

    // });
    chart.axis('release', {
      label: function label(text) {
        return {
          fontSize: 10,
          color:'#C3C6CB',
          text: (data[text]&&data[text].time)?data[text].time:''
        };
      }
    });
    chart.axis('sales', {
      label: function label(text) {
        return {
          text: ''
        };
      }
    });
    chart.interval().position('release*标准区间').color('#B2E6F2').size(3);
    chart.line().position('release*sales').color('#04B49C').size(1);
    chart.point().position('release*sales').style({
      lineWidth: 1,
      stroke: '#04B49C',
    }).size(0.6);
    chart.render();
    return chart;
  }
  return onInitChart;
}


Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tragetChart:{
      type:Array,
      value:()=>{return []},
      observer: '_onRefresh'
    },
    targetIndex:{
      type:Number,
      value:0
    },
    envType:{
      type:String,
      value:''
    },
    envName:{
      type:String,
      value:''
    }
  },
  lifetimes: {
    attached:function (){
      // let chartdom = this.selectComponent('#envchart')
      // if(this.data.tragetChart&&this.data.tragetChart.length){
      //   console.log(this.data.targetIndex,this.data.tragetChart,"this.data.targetIndex")
      //   chartdom.init(chartFn(this.data.tragetChart,this.data.targetIndex))
      // }
    },
    detached: function() {

    },
  },
  updateChart(data){
    // let chartdom = this.selectComponent('#envchart')
    // this.setdata({'opts.onInit':chartFn(this.data.tragetChart)})
  },
  data: {
    opts:{
      lazyLoad: true,
      // onInit: chartFn
    }
  },
  methods: {
    _onRefresh(){
      let chartdom = this.selectComponent('#envchart');
      chartdom.init(chartFn(this.data.tragetChart,this.data.envType,this.data.envName));
    }
  }
})
