function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
function change_color() {
  $(".ti").css("color", getRandomColor());
}
function shuffle(arr) {
  var result = [],
    random;
  while (arr.length > 0) {
    random = Math.floor(Math.random() * arr.length);
    result.push(arr[random])
    arr.splice(random, 1)
  }
  return result;
}
var app = new Vue({
  el: '#app',
  data: {
    list1: [
      { name: "亿点", color: "black" },
      { name: "Luthics", color: "purple" },
      { name: "Yii", color: "#03a9f4" }
    ],
    list2: [
      { name: "挑战", color: "black" },
      { name: "永无", color: "red" },
      { name: "止境", color: "blue" }
    ],
    list_max: 8
  },
  methods: {
    add_left: function () {
      if (this.list1.length > this.list_max) return;
      to_add = $(".ti").val();
      if (!to_add.length) return;
      color_Add = $(".ti").css("color");
      this.list1.push({ name: to_add, color: color_Add });
      $(".ti").val(null);
    },
    add_right: function () {
      if (this.list2.length > this.list_max) return;
      to_add = $(".ti").val();
      if (!to_add.length) return;
      color_Add = $(".ti").css("color");
      this.list2.push({ name: to_add, color: color_Add });
      $(".ti").val(null);
    },
    move_left: function (index = null) {
      if (this.list2.length == 0) return;
      if (this.list1.length > this.list_max) return;
      if (index == null) index = this.list2.length - 1;
      this.list1.push(this.list2[index]);
      this.list2.splice(index, 1);
    },
    move_right: function (index = null) {
      if (this.list1.length == 0) return;
      if (this.list2.length > this.list_max) return;
      if (index == null) index = this.list1.length - 1;
      this.list2.push(this.list1[index]);
      this.list1.splice(index, 1);
    },
    random_left: function () {
      this.list1 = shuffle(this.list1);
    },
    random_right: function () {
      this.list2 = shuffle(this.list2);
    }
  }
});
tippy('.ti', {
  content: '点击输入框给文本变个色',
  placement: 'top'
});

tippy('.add_left', {
  content: '点我把文本加入左面的列表',
  placement: 'left'
});

tippy('.add_right', {
  content: '点我把文本加入右面的列表',
  placement: 'right'
});

tippy('.move_left', {
  content: '点我把左面的列表的最后一项移到右面的列表',
  placement: 'left'
});

tippy('.move_right', {
  content: '点我把右面的列表的最后一项移到左面的列表',
  placement: 'right'
});

tippy('.random_left', {
  content: '点我随机排列左列表',
  placement: 'left'
});

tippy('.random_right', {
  content: '点我随机排列右列表',
  placement: 'right'
});