<template>
  <div class="form-wrap">
    <div
      class="table-box"
      style="margin-top:30px">
      <div class="block-title">
        票种标签管理
        <el-button
          type="primary"
          @click="saveSort"
        >
          保存排序
        </el-button>
        <el-button
          type="primary"
          style="margin-right:10px"
          @click="$refs.dialog.show(data,'add',true)"
        >
          新增
        </el-button>
      </div>

      <el-table
        border
        stripe
        ref="multipleTable"
        tooltip-effect="dark"
        v-loading="loading"
        row-key="id"
        :tree-props="{ hasChildren: 'hasChildren', children: '' }"
        :data="tableData">
        <el-table-column
          v-for="(item, index) in col"
          :width="item.width"
          :key="`col_${index}`"
          :prop="dropCol[index].prop"
          :label="item.label">
        </el-table-column>
        <el-table-column
          label="子标签"
          width="400px"
        >
          <template slot-scope="scope">
            <draggable
              :list="scope.row.children"
            >
              <div
                v-for="(item,index) in scope.row.children"
                :key="index">
                <el-tag
                  size="big"
                  type="success"
                >
                  <div class="tagWrapper">
                    <div>
                      {{ item.name }}
                    </div>
                    <div class="btn">
                      <el-button
                        type="text"
                        icon="el-icon-edit"
                        @click="$refs.dialog.show(item,'edit')"
                      ></el-button>
                      <el-button
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(item.id)"></el-button>
                    </div>
                  </div>
                </el-tag>
              </div>
            </draggable>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              size="small"
              @click="$refs.dialog.show(scope.row,'edit',true)"
            >
              编辑
            </el-link>

            <el-link
              type="primary"
              size="small"
              @click="$refs.dialog.show(scope.row,'add')"
            >
              新增子标签
            </el-link>

            <el-link
              type="primary"
              size="small"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        :current-page.sync="form.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="form.pageSize"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="getList()"
        :total="total">
      </el-pagination>
    </div>

    <Dialog
      ref="dialog"
      :parent="tableData"
      @update="getList"></Dialog>
  </div>
</template>

<script>
import Dialog from './Dialog'
import { getTicketTypeTagList, deleteTicketTypeTag, updateTicketTypeSeq } from '@/api/ticketTypeTag'
import draggable from 'vuedraggable'
import Sortable from 'sortablejs'

export default {
  created () {
    this.getList()
  },
  components: {
    Dialog,
    draggable
  },
  data () {
    return {
      col: [{ label: '编号', prop: 'id', width: 100 }, { label: '名称', prop: 'name' },
        { label: '描述', prop: 'description' }],
      dropCol: [{ label: '编号', prop: 'id', width: 100 }, { label: '名称', prop: 'name' },
        { label: '描述', prop: 'description' }],
      form: {
        keyWords1: ''
      },
      total: 1,
      loading: false,
      tableData: [],
      data: null
    }
  },
  mounted () {
    this.rowDrop()
  },
  methods: {
    rowDrop () {
      // 此时找到的元素是要拖拽元素的父容器
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        //  指定父元素下可被拖拽的子元素
        draggable: '.el-table__row',
        onEnd ({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },

    // 保存排序
    saveSort () {
      this.data.children = this.tableData
      updateTicketTypeSeq(this.data).then(res => {
        this.$message.success('保存成功')
      })
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getList()
    },
    getList () {
      this.loading = true
      let params = JSON.parse(JSON.stringify(this.form))
      getTicketTypeTagList(params).then(res => {
        this.data = res
        this.tableData = res.children
        // 更新全局节目信息
      }).finally(() => {
        this.loading = false
      })
    },
    reset () {
      this.$refs.form.resetFields()
    },
    handleDelete (id) {
      this.$confirm('确认删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTicketTypeTag(id).then(res => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.form-wrap {
  .el-input,.el-select,.el-date-editor,.el-date-editor.el-input,.el-input-number {
    width: 300px;
  }
}
.tagWrapper {
  display: flex;  min-width: 250px;  justify-content: space-between;
}

</style>
