<template>
    <div class="weui-cell">
        <div class="label">
            <slot></slot>
        </div>
        <draggable
            class="sort"
            :list="listItem.value"
            :animation="300"
            handle=".iconfont"
            @start="start"
            @end="end"
        >
            <div
                class="item"
                :class="{ active: item.value }"
                v-for="(item, index) in listItem.value"
                :key="index"
            >
                <div class="number">
                    <span>{{ index + 1 }}</span>
                </div>
                <div class="name">{{ item.name }}</div>
                <i class="iconfont" @click="click">&#xe828;</i>
            </div>
        </draggable>
    </div>
</template>

<script>
import draggable from 'vuedraggable'
import common from '@/common/formRender/mixin/common.js'
export default {
    mixins: [common],
    components: { draggable },
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    created () {
        this.verifyInit()
    },
    methods: {
        // 点击设置默认值
        click () {
            if (!this.formItem.value[0].value) {
                this.formItem.value.forEach((item, index) => {
                    item.value = index + 1
                })
                this.clearValidate()
            }
        },
        // 拖拽开始
        start () {
            this.$store.state.form.scroll.disable()
        },
        // 拖拽结束
        end () {
            this.$store.state.form.scroll.enable()
            this.formItem.value.forEach((item, index) => {
                item.value = index + 1
            })
            this.clearValidate()
        },
        // 校验初始化
        verifyInit () {
            const rules = []
            const { required } = this.listItem.verify
            if (required) rules.push(this.required(this.listItem.title))
            if (rules.length) this.validator = new this.Schema({ value: rules })
        },
        // 必填校验
        required (title) {
            return {
                required: true,
                validator: (rule, value, callback) => {
                    !value[0].value
                        ? callback(new Error(title + '必填'))
                        : callback()
                }
            }
        },
        // 校验
        verify () {
            return this.validate({ value: this.formItem.value })
        }
    }
}
</script>

<style lang="less" scoped>
.sort {
    margin-top: 5px;
}
.item {
    display: flex;
    align-items: center;
    min-height: 32px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    background-color: #fff;
    overflow: hidden;
    & + .item {
        margin-top: 5px;
    }
    .number {
        width: 50px;
        flex-shrink: 0;
        align-self: stretch;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f2f2f2;
        border-right: 1px solid #E4E7ED;
        span {
            width: 21px;
            height: 21px;
            line-height: 20px;
            border-radius: 50%;
            background-color: #fff;
            border: 1px solid #909399;
        }
    }
    .name {
        flex-grow: 1;
        padding: 6px 12px;
        line-height: 20px;
        word-break: break-all;
        text-align: left;
    }
    .iconfont {
        width: 30px;
        line-height: 30px;
        flex-shrink: 0;
        color: #606266;
    }
    &.active {
        .number span {
            color: #fff;
            background-color: #409EFF;
            border-color: #409EFF;
        }
    }
}
</style>
