Component({
  properties: {
    list:{
      type:Array,
      observer:function(){
        //console.log("observer list",this.data);
        if(this.data._itemWidth&&this.data._itemWidth>0)
          this.attached();
      }
    },
    mg:Number,
    bg:{
      type:String,
      value:"white"
    },
    default:{
      type:Object,
      value:{}
    },
    type:{
      type:String,
      value:"nav"
    },
    current:{
      type:Number,
      observer: function(current){
        this.trigger();
        this.scroll();
      }
    },
    width:{
      type:Number,
      value:750
    },
    itemWidth:{
      type:Number,
      value:-1
    },
    cancellable:{
      type:Number,
      value:0
    },
    autoscroll:{
      type:Number,
      value:1
    }
  },
  data: {
    scrollLeft: 0
  },
  attached(){
    if(this.data.itemWidth==-1)
      var _itemWidth = Math.max(this.data.width/this.data.list.length,150);
    else
      var _itemWidth = this.data.itemWidth;
    this.setData({ _itemWidth });
    this.scroll();
  },
  methods: {
    scroll(){
      if(this.data.current>=0&&this.data.autoscroll&&this.data.itemWidth>0){
        let scrollLeft = (this.data.current+0.5)*this.data.itemWidth+0.5*this.data.width;
        this.setData({scrollLeft})
      }
    },
    trigger(){
      let {current} = this.data;
      if (current >= 0)
        var value = this.data.list[current];
      else
        var value = this.data.default;
      this.triggerEvent("change", { current, value});
    },
    switchNav({currentTarget:{dataset:{current}}}){
      if(current==this.data.current) {
        if(this.data.cancellable)
          current=-1;
        else return
      }
      this.setData({current});
    }
  }
})