<template>
    <!-- 选项说明 -->
    <div>
        <el-link type="primary" @click="show">选项说明</el-link>
        <el-dialog
            class="dialog"
            width="800px"
            title="选项说明"
            :visible.sync="visible"
        >
            <div class="flex" v-if="option.list.length">
                <div class="left">
                    <div
                        :class="{ active: optionIndex === i, has: item.describe }"
                        v-for="(item, i) in option.list"
                        :key="i"
                        @click="optionIndex = i"
                    >{{ item.name }}</div>
                </div>
                <div class="right">
                    <div>说明文字</div>
                    <el-input
                        type="textarea"
                        resize="none"
                        placeholder="请输入"
                        :rows="5"
                        v-model="option.list[optionIndex].describe"
                    ></el-input>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        option: { type: Object, default: () => ({}) }
    },
    data () {
        return {
            optionIndex: 0,
            visible: false
        }
    },
    methods: {
        show () {
            this.option.list.length
                ? this.visible = true
                : this.$message.warning('请先添加选项')
        }
    }
}
</script>

<style lang="less" scoped>
.left {
    width: 300px;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #DCDFE6;
    margin-right: 15px;
    flex-shrink: 0;
    div {
        line-height: 20px;
        padding: 10px;
        cursor: pointer;
        &.active {
            background-color: #F2F6FC;
        }
        &.has {
            color: #409EFF;
        }
    }
}
.right {
    flex-grow: 1;
    width: 100%;
    .el-textarea {
        margin-top: 15px;
    }
}
</style>
