<template>
    <el-row>
        <el-form-item label="题目标题">
            <el-input type="input" v-model="activeData.title" placeholder="请输入题目标题" />
        </el-form-item>
        <el-form-item label="题目描述">
            <el-input type="input" v-model="activeData.describe" placeholder="请输入题目描述" />
        </el-form-item>
        <el-form-item label="是否必答">
            <el-switch v-model="activeData.__config__.required" />
        </el-form-item>
        <el-divider>数据选项</el-divider>
        <draggable :list="activeData.options" :animation="340" group="selectItem"
            handle=".option-drag">
            <div v-for="(item, index) in activeData.options" :key="index" class="select-item">
                <div class="select-line-icon option-drag">
                    <i class="icon-ym icon-ym-darg" />
                </div>
                <el-input v-model="item.fullName" placeholder="选项名" size="small" />
                <el-input v-model="item.id" placeholder="选项值" size="small" />
                <div class="close-btn select-line-icon"
                    @click="activeData.options.splice(index, 1)">
                    <i class="el-icon-remove-outline" />
                </div>
            </div>
        </draggable>
        <div style="margin-left: 29px;">
            <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text"
                @click="addSelectItem">
                添加选项
            </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button style="padding-bottom: 0" type="text" @click="updateSelectItem">
                批量编辑
            </el-button>
        </div>
        <BatchEditing v-if="updateVisible" ref="batchEditing" @change="handleSure" />
    </el-row>
</template>
<script>
import comMixin from './mixin';
import BatchEditing from './BatchEditing'
import draggable from 'vuedraggable'


export default {
    props: ['activeData'],
    mixins: [comMixin],
    components: { draggable, BatchEditing },
    data() {
        return {
            updateVisible: false
        }
    },
    created() {
    },
    methods: {
        addSelectItem() {
            const id = this.jnpf.idGenerator()
            this.activeData.options.push({
                id: id,
                fullName: '选项' + id,
            })
        },
        updateSelectItem() {
            this.updateVisible = true
            this.$nextTick(() => {
                this.$refs.batchEditing.init(this.activeData.options)
            })
        },
        handleSure(arr) {
            this.activeData.options = arr || []
        },
    }
}
</script>