<template>
  <div>
    <cms-modal
      @onCancel="onCancel"
      v-if="inputValue"
      v-model="inputValue"
      modal-title="配置列表元素"
      :resize="false"
      modal-width="70%"
      modal-height="70%"
      :modal-callback="finishCallback">
      <vxe-table
        height="auto" size="small"
        :data="cols"
        class="t1"
      >
        <vxe-column width="60" align="center" class-name="handle">
          <i class="el-icon-rank" style="font-size: 14px;cursor: pointer"/>
        </vxe-column>
        <vxe-column field="title" title="字段标题" align="left" min-width="200"/>
        <vxe-column field="align" title="显示位置" align="center" width="150">
          <template slot-scope="{row}">
            <el-select v-model="row.align" clearable placeholder="选择显示位置" size="small">
              <el-option value="left" label="居左"></el-option>
              <el-option value="center" label="居中"></el-option>
              <el-option value="right" label="居右"></el-option>
            </el-select>
          </template>
        </vxe-column>
        <vxe-column field="fixed" title="固定位置" align="center" width="160">
          <template slot-scope="{row}">
            <el-select v-model="row.fixed" clearable placeholder="选择固定位置" size="small">
              <el-option value="left" label="左侧固定"></el-option>
              <el-option value="right" label="右侧固定"></el-option>
            </el-select>
          </template>
        </vxe-column>
        <vxe-column field="visible" title="是否显示" align="center" width="150">
          <template slot-scope="{row}">
            <el-select v-model="row.visible" clearable placeholder="选择是否显示" size="small">
              <el-option :value="true" label="显示"></el-option>
              <el-option :value="false" label="隐藏"></el-option>
            </el-select>
          </template>
        </vxe-column>
        <vxe-column field="minWidth" title="最小宽度" align="center" width="110">
          <template slot-scope="{row}">
            <el-input size="small" v-model="row.minWidth" placeholder="最小宽度"></el-input>
          </template>
        </vxe-column>
        <vxe-column field="width" title="显示宽度" align="center" width="155">
          <template slot-scope="{row}">
            <el-input-number
              type="number" controls-position="top"
              size="small"
              :min="80"
              :max="300"
              v-model="row.width"
              placeholder="显示宽度"></el-input-number>
          </template>
        </vxe-column>
      </vxe-table>
      <template slot="footer">
        <cms-button type="primary" @click="sureBtn">{{ '确定' }}</cms-button>
        <!--        <cms-button type="primary" @click="revertBtn">{{ '还原' }}</cms-button>-->
        <cms-button @click="onCancel">{{ '取消' }}</cms-button>
      </template>
    </cms-modal>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import Sortable from 'sortablejs' // 引入插件
import { mixTableConfig } from "@/comps/mixin/common-mixins";

export default {
  name: "CmsColumnConfig",
  components: { draggable },
  data() {
    return {
      dragging: false,
      cols: []
    }
  },
  mounted() {
    this.columns.forEach(column => this.cols.push(column));
    // 允许拖拽（注意：在created中无效）
    setTimeout(() => {
      this.sortable('t1', 'cols') // 参数分别为table的class名称，table的数据data
    }, 200)
  },
  methods: {
    // 拖拽table test
    sortable(className, targetName) {
      const table = document.querySelector('.' + className + ' .vxe-table--body tbody')
      const that = this
      Sortable.create(table, {
        handle: '.handle',
        // 拖拽完毕后触发
        onEnd({ newIndex, oldIndex }) {
          if (newIndex === oldIndex) return
          that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0])
        }
      })
    },

    checkMove: function (evt) {
      // return (evt.draggedContext.element.name !== 'apple');
      return true;
    },
    dragEnd() {
      this.dragging = false
    },
    onCancel() {
      this.$emit('onCancel', false)
    },
    revertBtn() {
      if (this.revertCallback) this.revertCallback();
    },
    sureBtn() {
      const list = this.cols;
      if (this.finishCallback) this.finishCallback(list);
    }
  },
  computed: {
    inputValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    fields() {
      return [ {
        ...mixTableConfig.seq
      } ]
    }
  },
  props: {
    value: Boolean,
    // 列元素集合
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 修改完成后调用的事件
    finishCallback: Function,
    // 修改完成后调用的事件
    revertCallback: Function,
  }
}
</script>

<style scoped>
.row {
  background: cadetblue;
  width: 100%;
  height: 150px;
  line-height: 150px;
  text-align: center;
  margin: 15px 0;
}

.active {
  background: chocolate !important;
}
</style>