<template>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="80%"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <div
        v-loading="loading"
        :element-loading-text="loadingText"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-form :model="form" ref="form" :rules="rules" label-width="120px">
            <el-form-item label="链接内容" prop="posterContent">
                <editor ref="editor" v-model="form.posterContent" :fileSize="20" :min-height="200" />
            </el-form-item>
        </el-form>
      </div>  
      <div slot="footer" class="dialog-footer">
        <el-button @click="visibleStatus = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="submitRetailRateForm">
          {{ loading ? '提交中...':'保存' }}</el-button>
      </div>
    </el-dialog>
</template>
<script>
import { insertOrUpdateContentApi,getPoster } from "@/api/distribution/personnelMr";
import Editor from "@/components/Editor";
export default {
    name: '',
    components: { Editor },
    data(){
        return {
            open: false,
            title: null,
            loading: false,
            loadingText: '提交中...',
            form: {},
            rules: {
                posterContent: [
                    { required: true, message: '请输入链接内容', trigger: ['change','blur'] },
                ],
            }
        }
    },
    methods: {
        initData(title,data) {
            this.open = true
            this.loadingText = '加载数据中...'
            this.title = title
            this.getDetailsFun()
        },
        /** 获取推广码 */
        getDetailsFun(row={}) {
            this.loading = true;
            getPoster({...row}).then(response => {
                let data = response.data
                if(response.code == 200) {
                    console.log(":ddsfds")
                    this.$set(this.form,'posterContent',data.posterContent)
                }
                this.loading = false;
            }).catch ((error) => {
                this.$message.error("获取详情失败!");
                this.open = false
                this.loading = false;
            })
        },
        submitRetailRateForm() {
            this.$refs["form"].validate(async (valid) => {
                if (valid) {
                try {
                    this.loadingText = '提交中...'
                    this.loading = true;
                    const { code } = await insertOrUpdateContentApi({ ...this.form });
                    if (code === 200) {
                        this.loading = false;
                        this.$message.success("操作成功!");
                        this.$emit("refresh")
                        this.open = false
                    }else {
                        this.$message.error("操作失败!");
                    }
                } catch (error) {
                } finally {
                    this.loading = false;
                }
                }
            });
        }
    },
    watch: {
        'form.posterContent'(){
            if(this.form.posterContent == "<p><br></p>") {
                this.$set(this.form,'posterContent',null)
            }
        }
    }
}
</script>
<style scoped lang="scss">
</style>