<template>
    <div class="content">
        <div>
            <div class="title">投资数据年份</div>
            <div>
                <el-date-picker v-model="date.content" type="datetime" placeholder="选择日期时间" style="width:300px"
                    format="yyyy" value-format="yyyy" :disabled="isDateEdit ? false : true">
                </el-date-picker>
                <div style="margin:20px 0;">
                    <el-button @click="isDateEdit = true" type="primary">编辑</el-button>
                    <el-button @click="save(date, 0)" type="primary">保存</el-button>
                </div>
            </div>
        </div>
        <div v-for="(item, i) in list" :key="i">
            <div class="title">
                招商模块第{{ i + 1 }}块
            </div>
            <div>
                <textarea name="" id="" cols="80" rows="8" v-model="item.content"
                    :disabled="item.isEdit ? false : true"></textarea>
                <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>
</template>
<script>
import { investModule, editModule } from '@/api/module'
import Tinymce from '@/components/Tinymce'
export default {
    data() {
        return {
            moduleData: '',
            list: '',
            date: '',
            isDateEdit: false
        }
    },
    mounted() {
        this.getModule()
    },
    methods: {
        getModule() {
            investModule().then(res => {
                const { code, data, msg } = res
                if (code === 200) {
                    this.date = data.date
                    const list = data.info
                    list.map(i => {
                        this.$set(i, 'isEdit', false)
                    })
                    this.list = list
                    console.log(data)
                }
            })
        },
        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)
                }
            })
        },
    },
    components: { Tinymce },

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