<template>
    <div class="content">
        <div v-for="(item, i) in list" :key="i">
            <div class="title">
                {{ item.title }}
            </div>
            <div>
                <el-input v-model="item.content" style="width:200px;" :disabled="item.isEdit ? false : true"></el-input>
                <span style="margin-left:10px;">亿元</span>
                <div style="margin:20px 0;">
                    <el-button @click="item.isEdit = !item.isEdit" type="primary">编辑</el-button>
                    <el-button @click="save(item, 1, i)" type="primary">保存</el-button>
                </div>
            </div>
        </div>
        <div>
            <tinymce v-model="info.content" :height="300" width="80%" menubar="" />
            <div style="margin:20px 0;">
                <!-- <el-button @click="item.isEdit = !item.isEdit" type="primary">编辑</el-button> -->
                <el-button @click="save(info, 1, i)" type="primary">保存</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import { researchModule, editModule } from '@/api/module'
export default {
    data() {
        return {
            moduleData: '',
            list: '',
            info: '',
            isDateEdit: false
        }
    },
    components: { Tinymce },
    mounted() {
        this.getModule()
    },
    methods: {
        getModule() {
            researchModule().then(res => {
                const { code, data, msg } = res
                if (code === 200) {
                    const list = data.level
                    this.info = data.info
                    list.map(i => {
                        this.$set(i, 'isEdit', false)
                    })
                    this.list = list
                    console.log(data)
                } else {
                    this.$message.error(msg)
                }
            })
        },
        save(info, type, idx) {
            const { content, title, id } = info
            if (!content) {
                this.$message.error('内容不能为空')
                return
            }
            editModule({ id, title, content }).then(res => {
                const { code, msg } = res
                if (code === 200) {
                    this.$message.success('修改成功')
                    if (type === 1) {
                        this.list[idx].isEdit = false
                    } else {
                        this.isDateEdit = false
                    }

                } else {
                    this.$message.error(msg)
                }
            })
        },
    }

}
</script>
<style lang="scss" scoped>
.content {
    .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 12px;
    }
}
</style>