<template>
    <div class="twoDndList">
        <div class="twoDndList-list" :style="{width:width1}">
            <h3>{{list1Title}}</h3>
            <draggable :list="list1" class="dragArea" :options="{group:'article'}">
                <div class="list-complete-item" v-for="element in list1">
                    <div class="list-complete-item-handle">[{{element.id}}] {{element.title}}</div>
                    <div style="position:absolute;right:0px;">
                       <a style="float: left ;margin-top: -20px;margin-right:5px;" :href="'/article/edit/'+element.id" target="_blank"><i style="color:#20a0ff" class="el-icon-information"></i></a>
                    <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
                        <i style="color:#ff4949" class="el-icon-delete"></i>
                    </span>
                  </div>
                </div>
            </draggable>
        </div>

        <div class="twoDndList-list" :style="{width:width2}">
            <h3>{{list2Title}}</h3>
            <draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
                <div  class="list-complete-item" v-for="element in filterList2">
                  <div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.id}}] {{element.title}}</div>
                  <a style="float: right ;margin-top: -20px;" :href="'/article/edit/'+element.id" target="_blank"><i style="color:#20a0ff" class="el-icon-information"></i></a>
                </div>
            </draggable>
        </div>
    </div>
</template>

<script>
    import draggable from 'vuedraggable'
    export default {
      name: 'twoDndList',
      components: { draggable },
      computed: {
        filterList2() {
          return this.list2.filter(v => {
            if (this.isNotInList1(v)) {
              return v
            }
            return false;
          })
        }
      },
      props: {
        list1: {
          type: Array,
          default() {
            return []
          }
        },
        list2: {
          type: Array,
          default() {
            return []
          }
        },
        list1Title: {
          type: String,
          default: 'list1'
        },
        list2Title: {
          type: String,
          default: 'list2'
        },
        width1: {
          type: String,
          default: '48%'
        },
        width2: {
          type: String,
          default: '48%'
        }
      },
      methods: {
        isNotInList1(v) {
          return this.list1.every(k => v.id !== k.id)
        },
        isNotInList2(v) {
          return this.list2.every(k => v.id !== k.id)
        },
        deleteEle(ele) {
          for (const item of this.list1) {
            if (item.id === ele.id) {
              const index = this.list1.indexOf(item);
              this.list1.splice(index, 1)
              break
            }
          }
          if (this.isNotInList2(ele)) {
            this.list2.unshift(ele)
          }
        },
        pushEle(ele) {
          this.list1.push(ele)
        }
      }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .twoDndList {
        background: #fff;
        padding-bottom: 40px;
        &:after {
            content: "";
            display: table;
            clear: both;
        }
        .twoDndList-list {
            float: left;
            padding-bottom: 30px;
            &:first-of-type {
                margin-right: 2%;
            }
            .dragArea {
                margin-top: 15px;
                min-height: 50px;
                padding-bottom: 30px;
            }
        }
    }

    .list-complete-item {
        cursor: pointer;
        position: relative;
        padding: 5px 12px;
        margin-top: 4px;
        border: 1px solid #bfcbd9;
        transition: all 1s;
    }

    .list-complete-item-handle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 50px;
    }
    .list-complete-item-handle2{
      overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 20px;
    }

    .list-complete-item.sortable-chosen {
        background: #4AB7BD;
    }

    .list-complete-item.sortable-ghost {
        background: #30B08F;
    }

    .list-complete-enter, .list-complete-leave-active {
        opacity: 0;
    }
</style>
