<template>
    <div>
        <el-dialog
            :title="addTemplateDialog.title"
            :visible="true"
            width="550px"
            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="24">
                            <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="24">
                            <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="24">
                            <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 prop="content">
                                <!-- <div class="logo-wrap"> -->
                    <upload-file :file-list="fileList" :max-count="1"
                                :show-file-name="true"
                                uploadName="调解协议模板"
                                accept=".doc,.docx"
                                @handleUploadFile="handleUploadFile">
                    </upload-file>
                <!-- </div> -->
                            </el-form-item>
                            </el-col>
                        </el-row>
                        
                </el-form>
                <!-- <div class="logo-wrap">
                    <upload-file :file-list="fileList" :max-count="1"
                                :show-file-name="true"
                                uploadName="调解协议模板"
                                accept=".doc,.docx"
                                @handleUploadFile="handleUploadFile">
                    </upload-file>
                </div> -->
            </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: {
            uploadFile: () => import('../../../../components/uploadFile.vue'),//上传
        },
        props: {
            addTemplateDialog: {
                type: Object,
                default: () => {
                    return {}
                },
            },
            dictList: {
                type: Array,
                default: () => {
                    return []
                },
            },
        },
        data() {
            return {
                queryParam:{
                    productTypeId:'',
                    name:'',//名称
                    remark:'',
                    content:'',
                    type:1 //调解模板传1  话术模板传2
                },
                rulesClient: {
                    name: [
                        { required: true, message: '请输入模板名称', trigger: 'change',},
                    ],
                    content: [
                        { required: true, message: '请输入上传调解协议模板', trigger: 'change',},
                    ],
                },
                operateMethodOptions:[],
                fileList:[]
            };
        },
        mounted () {
            // 当为编辑时才调用详情接口
            if(Object.keys(this.addTemplateDialog.data).length>0){
                 this.queryParam = JSON.parse(JSON.stringify(this.addTemplateDialog.data));
                 if(this.queryParam.content!='')this.fileList.push({fileName: "调解协议模板",url:this.queryParam.content})
            }
        },
        methods: {
            // 获取上传的文件
            handleUploadFile(fileList){
                fileList = JSON.parse(JSON.stringify(fileList))
                this.fileList = fileList.map((item,i) => {
                    return {
                        url: item.url,
                        fileName:'调解协议模板'
                    }
                })
                if(fileList.length>0)
                {
                    this.queryParam.content = this.fileList[0].url
                    this.queryParam.fileSize = (fileList[0].fileSize / 1024 / 1024).toFixed(2)
                }
                else{this.queryParam.content=""}
            },
            handleSubmit(){
                if(!this.$clickThrottle()) { return }
                let _this=this;
                 this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                    if(Object.keys(this.addTemplateDialog.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:addTemplateDialog', null)
            },
        }
    };
</script>
<style scoped>
.dialog-content{
    padding: 16px 107px 16px 72px;
    max-height:500px
}
.logo-wrap{
    padding: 0 120px;
}
</style>