<template>
    <div v-loading="dialogLoading" :element-loading-text="loadingText">
        <el-row :gutter="15">
            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                <el-col :span="24">
                    <el-form-item label="内容类型:" prop="contentType">
                        <el-radio-group v-model="formData.contentType">
                            <el-radio-button label="10620">文本内容</el-radio-button>
                            <el-radio-button label="10610">图文内容</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <template v-if="this.formData.contentType === '10620'">
                    <el-col :span="24">
                        <el-form-item label="关键字" prop="keyWords">
                            <el-input v-model="formData.keyWords" placeholder="请输入关键字" clearable :style="{ width: '80%' }" size="medium"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="关键字类型" prop="keyWordsType">
                            <el-radio-group v-model="formData.keyWordsType">
                                <el-radio-button label="10510">包含匹配</el-radio-button>
                                <el-radio-button label="10520">完全匹配</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="详细内容" prop="picTextDetailContent">
                            <el-input v-model="formData.picTextDetailContent" placeholder="请输入详细内容" clearable :style="{ width: '80%' }" type="textarea" maxlength="200" :rows="10" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="formData.remark" placeholder="请输入备注" clearable :style="{ width: '80%' }" size="medium"></el-input>
                        </el-form-item>
                    </el-col>
                </template>
                <template v-if="this.formData.contentType === '10610'">
                    <el-col :span="24">
                        <el-form-item label="关键字" prop="keyWords">
                            <el-input v-model="formData.keyWords" placeholder="请输入关键字" clearable :style="{ width: '80%' }" size="medium"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="关键字类型" prop="keyWordsType">
                            <el-radio-group v-model="formData.keyWordsType">
                                <el-radio-button label="10510">包含匹配</el-radio-button>
                                <el-radio-button label="10520">完全匹配</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="formData.title" placeholder="请输入标题" clearable :style="{ width: '80%' }"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="简介" prop="synopsis">
                            <el-input v-model="formData.synopsis" placeholder="请输入简介" clearable :style="{ width: '80%' }"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="封面图片" prop="pictureUrl">
                            <el-upload ref="pictureUrl" :file-list="pictureUrlFileList" :action="pictureUrlAction" :before-upload="pictureUrlBeforeUpload" :on-success="pictureUrlUploadSuccess" :on-remove="pictureUrlOnRemove" list-type="picture" accept="image/*" :style="{ width: '80%' }">
                                <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="外链网址" prop="picTextUrl">
                            <el-input v-model="formData.picTextUrl" placeholder="请输入图文外链网址" clearable :style="{ width: '80%' }"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="formData.remark" placeholder="请输入备注" clearable :style="{ width: '80%' }" size="medium"></el-input>
                        </el-form-item>
                    </el-col>
                </template>
            </el-form>
        </el-row>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm" style="margin-left: 5%">提交</el-button>
            <el-button @click="closeDialog">取 消</el-button>
        </div>
    </div>
</template>
<script>
import { uploadMaterial, getReply, addReply, updateReply } from '@/api/wxManage/wxreply'
export default {
    created() {},
    data() {
        return {
            formDataUpLoad: {},
            contentTextFlag: true,
            contentImageFlag: true,
            flag: false,
            dialogLoading: true,
            loadingText: '查询中',
            formData: {
                replyId: null,
                keyWords: null,
                keyWordsType: null,
                isUseKeyWords: '0',
                title: null,
                author: null,
                synopsis: null,
                pictureUrl: null,
                picTextDetailContent: null,
                picTextUrl: null,
                replyType: '10730',
                contentType: '10620',
                lookNumber: null,
                mediaId: null,
                createById: null,
                remark: null
            },
            rules: {
                replyType: [{ required: true, message: '回复类型不能为空', trigger: 'blur' }],
                keyWords: [
                    { required: true, message: '关键字不能为空', trigger: 'blur' },
                    { min: 1, max: 10, message: '用户名称长度必须介于 1 和 10 之间', trigger: 'blur' }
                ],
                keyWordsType: [{ required: true, message: '关键字类型不能为空', trigger: 'change' }],
                picTextDetailContent: [{ required: true, message: '详细内容不能为空', trigger: 'blur' }],
                contentType: [{ required: true, message: '内容类型不能为空', trigger: 'change' }],
                pictureUrl: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
                synopsis: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
                picTextUrl: [{ required: true, message: '外链网址不能为空', trigger: 'blur' }],
                title: [{ required: true, message: '标题不能为空', trigger: 'blur' }]
            },
            pictureUrlAction: `${process.env.VUE_APP_BASE_API}` + '/common/uploadOSS',
            pictureUrlFileList: []
        }
    },

    methods: {
        handleDate() {
            if (this.formData.replyType === '10710' || this.formData.replyType === '10720') {
                this.formData.contentType = '10620'
                this.contentImageFlag = false
            }
            if (this.formData.replyType === '10730') {
                this.formData.contentType = ''
                this.contentImageFlag = true
            }
        },
        pictureUrlBeforeUpload(file) {
            let isRightSize = file.size / 1024 / 1024 < 2
            if (!isRightSize) {
                this.$message.error('文件大小超过 2MB')
            }
            return isRightSize
        },
        pictureUrlUploadSuccess(response, file, fileList) {
            this.pictureUrlFileList = fileList
            if (this.pictureUrlFileList.length > 1) {
                this.pictureUrlFileList.splice(0, 1)
            }
            this.pictureUrlFileList[0].url = this.pictureUrlFileList[0].response.data.src
            this.formData.pictureUrl = this.pictureUrlFileList[0].url
        },
        pictureUrlOnRemove(file, fileList) {
            this.pictureUrlFileList = fileList
        },
        //提交
        submitForm() {
            this.$refs['elForm'].validate((valid) => {
                if (!valid) {
                    return
                }
                if (this.pictureUrlFileList && this.pictureUrlFileList.length > 0) {
                    this.formData.pictureUrl = this.pictureUrlFileList[0].url
                }
                this.dialogLoading = true
                this.loadingText = '保存中'
                if (this.id !== undefined && this.id !== null) {
                    updateReply(this.formData)
                        .then((res) => {
                            this.$message('保存成功')
                            this.dialogLoading = false
                            this.$emit('closeDialog')
                            this.$emit('refresh')
                            this.$root.$emit('refreshList')
                        })
                        .catch((e) => {
                            this.dialogLoading = false
                            this.$message.error(e.data.msg)
                        })
                } else {
                    addReply(this.formData)
                        .then((res) => {
                            this.$message('添加成功')
                            this.dialogLoading = false
                            this.$emit('closeDialog')
                            this.$emit('refresh')
                            this.$root.$emit('refreshList')
                        })
                        .catch((e) => {
                            this.dialogLoading = false
                            this.$message.error(e.data.msg)
                        })
                }
            })
        },
        checkClose(done) {
            this.$confirm('是否关闭表单，关闭后数据将丢失？')
                .then(function () {
                    done()
                })
                .then(() => {})
                .catch(() => {})
        },
        closeDialog() {
            var ctx = this
            this.$confirm('是否关闭表单，关闭后数据将丢失？')
                .then(function () {
                    ctx.$emit('closeDialog')
                })
                .then(() => {})
                .catch(() => {})
        },
        setInitData(replyId) {
            this.id = replyId
            this.pictureUrlFileList = []
            if (replyId !== undefined && replyId !== '') {
                this.dialogLoading = true
                this.loadingText = '查询中'
                getReply(this.id)
                    .then((res) => {
                        this.formData = res.data
                        this.dialogLoading = false
                        if (this.formData.pictureUrl) {
                            this.pictureUrlFileList = [
                                {
                                    url: this.formData.pictureUrl
                                }
                            ]
                        }
                        this.resetForm('elForm')
                    })
                    .catch((e) => {
                        this.dialogLoading = false
                        this.$message.error(e.data.msg)
                    })
            } else {
                this.dialogLoading = false
            }
        }
    }
}
</script>
