<template>
    <div class="">
        <div class="f1 f">
            <el-tag type="info">{{ conf.__config__.label }}</el-tag>
        </div>
        <div class="f2 f">
            <span class="index" v-if="index - 1 < 10"> 0{{ index - 1 }}</span>
            <span class="index" v-else>{{ index - 1 }}</span>
            <span>{{ conf.title }}</span>
        </div>
        <div class="f3 f">
            <el-input placeholder="请输入题目描述" v-model="conf.describe"></el-input>
        </div>
        <div class="f4">
            <draggable class="drag-wrapper" :list="conf.options" :animation="340"
                group="optionsGroup" handle=".option-drag">
                <div v-for="item,index in conf.options" :key="index" class="option-child">
                    <div class="select-line-icon option-drag">
                        <i class="icon-ym icon-ym-darg" />
                    </div>
                    <div class="cicle"></div>
                    {{item.fullName}}
                </div>
            </draggable>

        </div>
    </div>

</template>

<script>

import draggable from 'vuedraggable'


export default {
    name: 'QuestionnaireRadio',
    components: {
        draggable
    },
    props: {
        value: {
            type: [String, Number],
            default: ''
        },
        index: {
            type: [Number],
            required: true
        },
        addonBefore: {
            type: String,
            default: ''
        },
        addonAfter: {
            type: String,
            default: ''
        },
        detailed: {
            type: Boolean,
            default: false
        },
        useMask: {
            type: Boolean,
            default: false
        },
        maskConfig: {
            type: Object,
            default: () => { }
        },
        showOverflow: {
            type: Boolean,
            default: false
        },
        conf: {
            type: Object,
            default: () => { }
        }
    },
    mounted() {
        console.log(this.conf)
    },
}
</script>

<style lang="scss" scoped>
.f {
    margin-bottom: 10px;
}
.f2 {
    display: flex;
    align-items: center;
    color: #000;
    font-size: 20px;
    .index {
        margin-right: 10px;
        font-weight: bold;
    }
}
.f4 {
    .option-child {
        display: flex;
        align-items: center;
        .cicle {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 2px solid #000;
            margin: 0 10px;
        }
    }
}
</style>