<template>
    <div>
        <el-dialog
            :title="addSpeechcraftDialog.title"
            :visible="true"
            width="850px"
            append-to-body
            :close-on-click-modal="false"
            @close="handleClose"
        >
        <el-scrollbar class="bor">
            <div class="dialog-content">
                
                <el-form ref="ruleForm" 
                        :model="queryParam" 
                        :rules="rulesClient" 
                        label-width="120px" 
                        class="demo-ruleForm">
                        <el-row :gutter="20" type="flex" align="middle">
                            <el-col :span="15">
                            <el-form-item label="模板名称" prop="name">
                                <el-input
                                v-model.trim="queryParam.name"
                                placeholder="请输入模板名称"
                                clearable maxlength="20"
                                ></el-input>
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" type="flex" align="middle">
                            <el-col :span="15">
                            <el-form-item label="产品类型" prop="productTypeId">
                                <el-select v-model="queryParam.productTypeId"
                                           clearable placeholder="请选择"
                                           class="width100">
                                    <el-option
                                            v-for="item in dictList"
                                            :key="item.code"
                                            :label="item.codeName"
                                            :value="item.code">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" type="flex" align="middle">
                            <el-col :span="15">
                            <el-form-item label="备注" prop="remark">
                                <el-input
                                type="textarea"
                                :rows="3"
                                placeholder="请输入内容"
                                maxlength="60"
                                v-model="queryParam.remark">
                            </el-input>
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" type="flex" align="middle">
                            <el-col :span="24">
                            <el-form-item label="话术内容" prop="remark">
                                <editor ref="editorintroduction" :editorHtml="queryParam.content" @onEditorChange="onEditorChange" />
                            </el-form-item>
                            </el-col>
                        </el-row>
                </el-form>
            </div>
        </el-scrollbar>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose()">取消</el-button>
            <el-button type="primary" @click="handleSubmit()">确认</el-button>
        </span>
        </el-dialog>
        
    </div>
</template>
<script>
import basicApi from "@/services/basicManage";
    export default {
        components: {
            editor: () => import("@/components/editor")
        },
        props: {
            addSpeechcraftDialog: {
                type: Object,
                default: () => {
                    return {}
                },
            },
            dictList: {
                type: Array,
                default: () => {
                    return []
                },
            },
        },
        data() {
            return {
                queryParam:{
                    productTypeId:'',
                    name:'',//名称
                    remark:'',
                    content:'',
                    type:2 //调解模板传1  话术模板传2
                },
                rulesClient: {
                    name: [
                        { required: true, message: '请输入模板名称', trigger: 'change',},
                    ],
                    productTypeId: [
                        { required: true, message: '请选择产品类型', trigger: 'change',},
                    ],
                },
                operateMethodOptions:[],
                
            };
        },
        mounted () {
            // 当为编辑时才调用详情接口
            if(Object.keys(this.addSpeechcraftDialog.data).length>0){
                 this.queryParam = JSON.parse(JSON.stringify(this.addSpeechcraftDialog.data));

                 setTimeout(() => {
                    document.querySelector(".ql-editor").innerHTML = this.queryParam.content;
                    this.editorHtml=this.queryParam.content
                }, 100);
            }
        },
        methods: {
            handleSubmit(){
                if(!this.$clickThrottle()) { return }
                let _this=this;
                 this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                    if(Object.keys(this.addSpeechcraftDialog.data).length>0)
                    {
                        basicApi.updateTemplateById(_this.queryParam).then(res => {
                            this.$message({
                                showClose: true,
                                message: '编辑话术模板成功！',
                                type: 'success'
                            });
                            this.handleClose()
                            this.$parent.getMediateDataList(1)
                        })
                    }
                    else
                    {
                        basicApi.addTemplate(_this.queryParam).then(res => {
                            this.$message({
                                showClose: true,
                                message: '新增话术模板成功！',
                                type: 'success'
                            });
                            this.handleClose()
                            this.$parent.getMediateDataList(1)
                        })
                    }
                } 
                 })
            },
            handleClose() {
                this.$emit('update:addSpeechcraftDialog', null)
            },
            onEditorChange(data) {
                this.queryParam.content = data.content;
            }
        }
    };
</script>
<style scoped>
.dialog-content{
    padding: 16px 37px 16px 12px;
    max-height:650px
}

</style>