<template>
  <div class="sis-transfer">

    <el-card class="box-card sis__card sis__left">
      <div style="line-height: 20px" slot="header">
        <span>{{ title[0] }}</span>
      </div>

      <el-checkbox-group class="sis__group" v-model="leftCheckedList" @change="checkChange">
        <el-checkbox v-for="item in sourceData" :key="item[props.key]" class="sis__item" :label="item[props.key]">
          {{ item[props.label] }}
        </el-checkbox>
      </el-checkbox-group>

      <div class="sis__bottom">
        <div v-if="!$slots.left" style="float: left;padding-left: 10px">
          <slot name="left"></slot>
        </div>
        <el-button style="margin-right: 20px" @click="checkAll">全选</el-button>
      </div>
    </el-card>

    <div class="sis__btns">
      <el-button type="info" @click="toRightClick"><i class="el-icon-arrow-right"></i></el-button>
      <br> <br>
      <el-button type="info" @click="toLeftClick"><i class="el-icon-arrow-left"></i></el-button>
    </div>

    <el-card class="box-card sis__card sis__right">
      <div slot="header">
        <span>{{ title[1] }}</span>
      </div>


      <el-checkbox-group class="sis__group" v-model="rightCheckedList" @change="checkChange">
        <draggable class="list-group" @start="drag=true" @end="drag=false">
          <el-checkbox v-for="item in targetData" :key="item[props.key]" class="sis__item" :label="item[props.key]">
            {{ item[props.label] }}
          </el-checkbox>
        </draggable>

      </el-checkbox-group>

      <div class="sis__bottom">
        <div v-if="!$slots.left" style="float: left;padding-left: 10px">
          <slot name="right"></slot>
        </div>
        <el-button style="margin-right: 20px" @click="clearAll">清空</el-button>
      </div>
    </el-card>
  </div>
</template>

<script type="text/ecmascript-6">
  import draggable from 'vuedraggable';
  /**
   * @author 白雨浓
   * @date 17-8-29 上午10:40
   *
   * 穿梭框组件
   **/
  export default{
    components: {draggable},
    name: 'SisTransfer',
    props: {
      title: {
        type: Array,
        default: ['列表1', '列表2']
      },
      leftMenuListData: {
        type: Array,
        required: true
      },
      rightMenuListData: {
        type: Array,
        required: true
      },
      props: {
        type: Object,
        default() {
          return {
            label: 'label',
            key: 'key',
            disabled: 'disabled'
          };
        }
      }
    },
    data(){
      return {
        leftMenuData: this.$props.leftMenuListData,
        rightMenuData: this.$props.rightMenuListData,
        leftCheckedList: [],
        rightCheckedList: [],
        isAll: false
      }
    },
    computed: {
      sourceData() {
        return this.leftMenuData.filter(item => {
          return this.rightMenuData.indexOf(item[this.props.key]) === -1;
        });
      },
      targetData() {
        return this.rightMenuData;
      }
    },
    watch: {
      leftMenuListData(val, oldVal){
        this.leftMenuData = val
      },
      rightMenuListData(val, oldVal){
        this.rightMenuData = val
      },
    },
    mounted(){
      this.$nextTick(() => {
      })
    },
    methods: {
      /** 全选 点击 */
      checkAll(){
        if (!this.isAll) {
          this.leftCheckedList = [];
          this.leftMenuData.forEach(item => {
            this.leftCheckedList.push(item[this.props.key])
          });
          this.isAll = true;
        } else {
          this.leftCheckedList = [];
          this.isAll = false;
        }
      },
      /** 清空 点击 */
      clearAll(){
        this.rightCheckedList = [];
        this.rightMenuData = [];
        this.$emit('update:leftMenuData', this.leftMenuData);
        this.$emit('update:rightMenuData', this.rightMenuData);
        this.$emit('on-clear');
      },
      /** checkBox变化 */
      checkChange(event){
      },
      /** 向右点击 加入 */
      toRightClick(){
        let currentData = this.leftMenuData.slice();
        this.leftCheckedList.forEach(key => {
          const leftItem = this.getItem(this.leftMenuData, key);

          if (!this.indexOf(leftItem, this.rightMenuData)) {
            const index = currentData.indexOf(leftItem);
            if (index > -1) {
              const item = currentData.splice(index, 1);
              this.rightMenuData.push(item[0]);
            }
          }
        });
        this.leftCheckedList = [];
        this.leftMenuData = currentData;
        this.$emit('update:leftMenuData', this.leftMenuData);
        this.$emit('update:rightMenuData', this.rightMenuData);

        this.leftCheckedList = [];
        this.isAll = false;
      },
      /** 向左点击 删除 */
      toLeftClick(){
        let currentData = this.rightMenuData.slice();
        this.rightCheckedList.forEach(key => {
          const rightItem = this.getItem(this.rightMenuData, key);

          if (!this.indexOf(rightItem, this.leftMenuData)) {
            const index = currentData.indexOf(rightItem);
            if (index > -1) {
              const item = currentData.splice(index, 1);
              this.leftMenuData.push(item[0]);
            }
          } else {
            const index = currentData.indexOf(rightItem);
            currentData.splice(index, 1);
            this.rightCheckedList = currentData;
          }
        });
        this.rightCheckedList = [];
        this.rightMenuData = currentData;
        this.$emit('update:leftMenuData', this.leftMenuData);
        this.$emit('update:rightMenuData', this.rightMenuData);
      },
      /** 根据key在数组中获得对象 */
      getItem(list, key){
        for (const item of list) {
          if (item[this.props.key] === key)
            return item;
        }
      },
      /** 根据id判断item是否在另外一个数组中 */
      indexOf(item, arr){
        for (const a of arr) {
          if (item[this.props.key] === a[this.props.key])
            return true;
        }
        return false;
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .sis-transfer {
    position relative
    width 900px
    height th = 600px

    .sis__card {
      width 45%
      height th

      .el-card__body {
        padding 0
      }

      .sis__bottom {
        position absolute
        bottom 0
        left 0
        width 100%
        height 50px
        line-height 50px
        text-align right
        border-top 1px solid #D1DBE5
      }

      .sis__group {
        min-height 400px
        max-height 485px
        overflow auto
      }

      .sis__item {
        display block
        margin 8px auto 0 auto
        padding-left 30px
      }
    }

    .sis__left {
      position absolute
      top 0
      left 0
    }

    .sis__right {
      position absolute
      top 0
      right 0
    }

    .sis__btns {
      position absolute
      width bw = 8%
      height bh = 100px
      top 50%
      left 50%
      margin-top -(bh/ 1.7)
      margin-left -(bw/ 2)
      text-align center
    }
  }
</style>
