<template>
    <div class="evalTemplate">
        <div class="head-title">
            <span @click="CommonJump('evaluationMan')" class="blue point">评价管理</span> / 回复模板
            <el-button @click="addTemplate" style="float:right" size="small" type="primary">添加模板</el-button>
        </div>
        <div class="content">
            <div style="margin-bottom:20px">
                <span>模板类型</span>
                <el-select class="w100" @change="getList" v-model="msg.CommentGrade" size="small" placeholder="请选择">
                    <el-option label="全部回复" :value="0"></el-option>
                    <el-option
                    v-for="item in templateList"
                    :key="item.Id"
                    :label="item.Name"
                    :value="item.Id">
                    </el-option>
                </el-select>
                <el-input style="margin-left:15px;width:350px" class="input-item" placeholder="请输入内容" v-model="msgVal" size="small">
                    <el-select class="w100" @change="ChangeId" v-model="msgId" slot="prepend" placeholder="请选择">
                        <el-option
                        v-for="item in option"
                        :key="item.Id"
                        :label="item.name"
                        :value="item.Id">
                        </el-option>
                    </el-select>
                    <el-button @click="getList" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
            <el-table
                :data="tableData"
                v-loading="loading" border
                style="width: 100%">
                <el-table-column
                    prop="Id"
                    label="ID"
                    width="80">
                </el-table-column>
                <el-table-column
                    prop="Name"
                    label="模板名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="Content"
                    label="模板内容">
                </el-table-column>
                <el-table-column
                    prop="CommentGradeName"
                    width="120"
                    label="模板类型">
                </el-table-column>
                <el-table-column
                    width="220"
                    prop="address"
                    label="操作">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                            <img @click="EditTemplate(scope.row)" style="margin-right:10px" src="../../assets/img/userman/edit.png" alt="">
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                            <img @click="Delete(scope.row)" src="../../assets/img/userman/del.png" alt="">
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
                layout="prev, pager, next" :total="total">
            </el-pagination>
        </div>
        <!-- 添加模板 -->
        <el-dialog title="添加模板" :visible.sync="addDig" width="600px">
            <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="80px">
                <el-form-item label="模板名称" prop="Name">
                    <el-input size="small" v-model="addMsg.Name"></el-input>
                </el-form-item>
                <el-form-item label="模板内容" prop="Content">
                    <el-input size="small" v-model="addMsg.Content" type="textarea" row="2"></el-input>
                </el-form-item>
                <el-form-item label="操作" prop="CommentGrade">
                    <el-radio v-model="addMsg.CommentGrade" :label="item.Id" v-for="(item,index) in templateList" :key="index">{{item.Name}}</el-radio>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="addDig = false">取 消</el-button>
                <el-button size="small" type="primary" @click="czsubmitForm('addMsg')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "evalTemplate",
    data(){
        return{
            addDig:false,
            loading:false,
            tableData:[],
            msgVal:'',
            msgId:'',
            option:[
                {Id:1,name:'模板名称'},
                {Id:2,name:'ID'}
            ],
             msg:{
                pageIndex:1,
                pageSize:15,
                Id:0,
                Name:'',
                CommentGrade:0,
            },
            templateList:[],
            total:0,
            addMsg:{
                Id:0,
                Name:'',
                Content:'',
                CommentGrade:0,
            },
            rules:{
                Name: [
                    { required: true, message: '请输入模板名称', trigger: 'blur' }
                ],
                Content: [
                    { required: true, message: '请输入模板内容', trigger: 'blur' }
                ],
                CommentGrade: [
                    { required: true, message: '请选择类型', trigger: 'change' }
                ],
            },
        }
    },
    created(){
        this.getTemplate();
        this.getList();
    },
    mounted(){},
    methods:{
        Delete(row){
            let that=this;
            that.$confirm("确认删除模板？", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.apipost('/api/order/DelGoodsCommentTemplateInfo',{TemplateId:row.Id},
                    res => {
                    if (res.data.resultCode === 1) {
                        this.getList();
                        this.Success(res.data.message)
                    } else {
                        this.Error(res.data.message);
                    }
                    },
                    null
                );
            }).catch(() => {
                
            });
        },
        EditTemplate(row){
            this.addMsg={
                Id:row.Id,
                Name:row.Name,
                Content:row.Content,
                CommentGrade:row.CommentGrade,
            }
            this.addDig=true;
        },
        addTemplate(){
            this.addMsg={
                Id:0,
                Name:'',
                Content:'',
                CommentGrade:1,
            }
            this.addDig=true;
        },
        czsubmitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let cmd = "/api/order/SetGoodsCommentTemplateInfo";
                    this.apipost(cmd, this.addMsg,
                    res => {
                        if (res.data.resultCode === 1) {
                            this.getList();
                            this.Success(res.data.message)
                            this.addDig = false;
                        } else {
                        this.Error(res.data.message);
                        }
                    },
                    null
                    );
                } else {
                    return false;
                }
            });
        },
        ChangeId(val){
            let msgVal=this.msgVal;
            if(this.msgId==1){
                this.msg.Name=msgVal;
                this.msg.Id=0;
            }
            if(this.msgId==2){
                this.msg.Name='';
                this.msg.Id=msgVal;
            }
            this.getList();
        },
        getList(){
            if(this.msgId==1){
                this.msg.Name=this.msgVal;
                this.msg.Id=0;
            }
            if(this.msgId==2){
                this.msg.Name='';
                this.msg.Id=this.msgVal;
            }
            if(!this.msgVal || this.msgVal==''){
                this.msg.Name='';
                this.msg.Id=0;
            }
            this.loading = true;
            this.apipost("/api/order/GetGoodsCommentTemplatePageList", this.msg, res => {
                this.loading = false;
                if (res.data.resultCode == 1) {
                    this.total = res.data.data.count;
                    let pageData = res.data.data.pageData;
                    this.tableData = pageData;
                }
            })
        },
        handleCurrentChange(val) {
            this.msg.pageIndex = val;
            this.getList();
        },
        getTemplate(){
            this.apipost("/api/order/GetGoodsCommentTypeEnumList",{}, res => {
                this.templateList=res.data.data;
            })
        },
        
    },
};
</script>

<style>
.evalTemplate .input-item .el-input__inner:hover {
    border: 1px solid #dcdfe6;
    border-right: 0;
    outline: 0;
}
.evalTemplate .input-item .el-input__inner {
    border-right: 0;
}
.evalTemplate .el-input-group__append {
    background-color: #fff;
    border-left: 0;
    width: 10%;
    padding: 0;
}
.evalTemplate .content{
    background: #fff;
    margin-top:10px;
    padding: 20px;
    box-sizing: border-box;
}

</style>
