<template>
  <div class="option">
    <template v-if="type=='select' || type=='multi'">
      <div v-for="(el,i) in optionList" :key="i" class="option__item">
        <div> 选项-{{ $asc2chart(65+i) }} </div>
        <item-rich v-model="el.content" :remove="remove" @modify="doModify(el)" @remove="doRemove(i)" />
      </div>
      <el-button v-if="add" class="item__button" type="primary" size="mini" icon="el-icon-plus" @click="doAppend" />
    </template>
  </div>
</template>

<script>
import ItemRich from './item-rich';

export default {
    components: {
        ItemRich
    },
    props: {
        optionList: {
            type: Array,
            required: true
        },
        type: {
            type: String,
            required: true
        },
        add: {
            type: Boolean,
            default: false
        },
        remove: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
        };
    },
    methods: {
        doModify(el) {
            this.$emit('modify', {model: el, prop: 'content'});
        },
        doRemove(index) {
            this.$emit('remove', index);
        },
        doAppend() {
            this.$emit('append');
        }
    }
};
</script>

<style lang="scss" scoped>
    .option {
		&__item {
			margin-bottom: 10px;
		}
    }
</style>
