<template>
    <!-- 批量编辑 -->
    <div>
        <el-link type="primary" @click="edit">批量编辑</el-link>
        <el-dialog
            class="dialog"
            width="600px"
            title="批量编辑"
            :visible.sync="visible"
        >
            <p class="info">每行对应一个选项</p>
            <el-input type="textarea" :rows="10" v-model="textarea"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        link: { type: Boolean, default: false },
        value: { type: Boolean, default: false },
        option: [Array, Object],
        optionList: { type: Array, default: () => [] }
    },
    data () {
        return {
            visible: false,
            textarea: ''
        }
    },
    methods: {
        // 批量编辑
        edit () {
            this.textarea = this.optionList.map(item => item.name).join('\n')
            this.visible = true
        },
        // 保存
        save () {
            const list = this.textarea.split('\n').filter(item => item)
            if (list.length) {
                const optionList = list.map((item, index) => {
                    const obj = {
                        name: item,
                        value: this.value ? '' : index + 1
                    }
                    if (this.link) obj.link = []
                    return obj
                })
                this.$emit('update:optionList', optionList)
                if (!this.value) {
                    this.option.nextValue = list.length + 1
                    this.option.checked = ''
                }
                this.visible = false
            } else {
                this.$message.warning('选项不能为空')
            }
        }
    }
}
</script>

<style lang="less" scoped>
.dialog {
    .info {
        margin-bottom: 10px;
    }
    .info, .el-textarea {
        font-size: 16px;
    }
}
</style>
