<template>
  <Modal
    v-model="modalVisible"
    title="排序"
    @on-ok="ok"
    @on-cancel="close"
  >
    <div class="row">
      <div class="col-6">
        <draggable
          :list="dataList"
          :disabled="!enabled"
          class="list-group"
          ghost-class="ghost"
          :move="checkMove"
          @start="dragging = true"
          @end="dragging = false"
        >
          <div
            class="list-group-item"
            v-for="(element,index) in dataList"
            :key="element.id"
          >
         <span>{{ index+1 }}</span><span>{{ element.details.name }}</span>
          </div>
        </draggable>
      </div>
    </div>
  </Modal>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'simple',
  components: {
    draggable
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    visible: {
      handler: function (val) {
        this.modalVisible = val
      },
      immediate: true
    },
    list: {
      handler: function (val) {
        this.dataList = JSON.parse(JSON.stringify(val)).sort((one, two) => {
          return one.seq - two.seq
        })
      },
      immediate: true
    }
  },
  data () {
    return {
      enabled: true,
      dataList: [],
      modalVisible: false,
      dragging: false
    }
  },
  computed: {
  },
  methods: {
    close () {
      this.$emit('update:visible', false)
    },
    ok () {
      let list = this.dataList.map((p, index) => {
        delete p.created_at
        delete p.deleted_at
        delete p.updated_at
        p.seq = index + 1
        return p
      })
      console.log(list)
      this.$emit('ok', list)
    },
    checkMove: function (e) {
      window.console.log('Future index: ' + e.draggedContext.futureIndex)
    }
  }
}
</script>
<style scoped>
.buttons {
  margin-top: 35px;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group-item {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background-color: #e2e6e7;
    border-left: 3px solid #8937d5;;
    margin: 10px 0;
    font-size: 14px;
    cursor:move
}
span {
    margin-left: 10px;
}
</style>
