<template>
  <div class="ms-form-table">
    <vab-query-form>
      <ms-search-box-top-panel :span="12">
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="handleAdd($event)"
        >
          添加
        </el-button>
      </ms-search-box-top-panel>
    </vab-query-form>
    <el-table
      :key="toggleIndex"
      ref="tableRef"
      border
      :data="data"
      :height="height"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
    >
      <el-table-column v-if="drag" align="center" label="操作" width="60">
        <template #default>
<!--          <ms-icon-->
<!--            class="ms-rank"-->
<!--            icon="drag-move-2-line"-->
<!--            style="cursor: move"-->
<!--          />-->
          <vab-icon
            class="ms-rank"
            icon="file-list-2-line"
            style="cursor: move"
          />
        </template>
      </el-table-column>
      <slot></slot>
      <el-table-column align="center" label="操作" width="120">
        <template #default="{ $index, row }">
          <el-button
            icon="el-icon-delete"
            plain
            type="danger"
            @click="handleDelete(row, $index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty class="ms-data-empty" description="暂无数据" />
      </template>
    </el-table>
  </div>
</template>

<script>
  import MsSearchBoxTopPanel from '@/components/MsSearchBox/components/MsSearchBoxTopPanel.vue'
  import Sortable from 'sortablejs'
  import VabQueryForm from "@/vab/components/VabQueryForm/index.vue";
  export default {
    name: 'MsFormTable',
    components: {VabQueryForm, MsSearchBoxTopPanel },
    provide() {
      return {
        tableRef: this.$refs.tableRef,
      }
    },
    props: {
      //prop接收父组件传递过来的数据    数组类型，默认为空数组
      form: {
        type: Array,
        default: () => [],
      },
      //设置默认数组类型来进行类型检查。我们可以在声明 props 属性时，使用 default 属性来设置默认的数组类型数据。
      rowTemplate: {
        type: Object,
        default: () => {},
      },
      drag: {
        type: Boolean,
        default: false,
      },
      height: {
        type: Number,
        default: 200,
      },
    },
    emits: ['update:form', 'row-click'],
    data() {
      return {
        tableRef: null,
        data: [],
        toggleIndex: 0,
      }
    },
    watch: {
      form(newValue) {
        this.data = newValue
      },
      data(newValue) {
        this.$emit('update:form', newValue)
      },
    },

    mounted() {
      this.data = this.form
      if (this.drag) this.rowDrop()
    },
    methods: {
      rowDrop() {
        const tbody = this.$refs.tableRef.$el.querySelector(
          '.el-table__body-wrapper tbody'
        )
        Sortable.create(tbody, {
          handle: '.ms-rank',
          animation: 300,
          onEnd: ({ newIndex, oldIndex }) => {
            const tableData = this.data
            const currRow = tableData.splice(oldIndex, 1)[0]
            tableData.splice(newIndex, 0, currRow)
            this.toggleIndex += 1
            this.$nextTick(() => {
              this.rowDrop()
            })
          },
        })
      },
      handleAdd() {
        //JSON.stringify将JavaScript 对象转换为字符串。
        this.data.push(JSON.parse(JSON.stringify(this.rowTemplate)))
        console.log('add_________')
        console.log('this.data==', this.data)
      },
      handleDelete(row, index) {
        this.data.splice(index, 1)
      },
      rowClick(row, column, event) {
        this.$emit('row-click', row, column, event)
      },
      tableRowClassName({ row, rowIndex }) {
        row.index = rowIndex
      },
    },
  }
</script>



