<template>
  <a-modal
    :visible="visible"
    title="景点排序"
    @ok="handleOk"
    @cancel="handleCancel">
    <draggable
      v-bind="dragOptions"
      :list="list"
      tag="ul"
    >
      <li
        class="list-group-item"
        v-for="(item) in list"
        :key="item.id"
      >
        {{ item.name }}

        <a-tag :color="item.status==='active'?'green':'gray'">
          {{ item.status==='active'?'已激活':'已禁用' }}
        </a-tag>
      </li>
    </draggable>
  </a-modal>
</template>

<script>
import draggable from 'vuedraggable'
import { updateScenicSeq } from '@/api/ticketSetting/scenic'

export default {
  data () {
    return {
      visible: false,
      list: [],
      dragOptions: {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      }
    }
  },
  components: {
    draggable
  },
  computed: {
    scenicList () {
      return this.$store.state.app.scenicList
    }
  },
  methods: {
    show () {
      this.visible = true
      this.list = JSON.parse(JSON.stringify(this.scenicList))
    },
    handleOk () {
      updateScenicSeq(this.list.map(item => item.id)).then(res => {
        this.$message.success('操作成功')
        this.$emit('update')
        this.handleCancel()
      })
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.list-group-item {
  padding: 5px; margin-top: -1px; cursor: move; background: #fff; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between;
  &:hover {
    background: rgb(253, 245, 231);
  }
}

.ghost {
  background: #c8ebfb;  opacity: .5;
}

</style>
