<template>
    <div class="evalTemplate evaluationMan">
        <div class="head-title">
            评价管理
            <el-button @click="addTemplate" style="float:right;margin-left:10px" size="small" type="primary">添加客户评价</el-button>
            <el-button @click="CommonJump('evaluationTemplate')" style="float:right" size="small" type="primary">回复模板</el-button>
        </div>
        <div class="content">
            <div style="margin-bottom:20px">
                <span>评价类型</span>
                <el-select style="margin:0 10px" 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>
                <span>所属平台</span>
                <el-select class="w100" @change="getList" style="margin-right: 10px;" v-model="msg.OrderSource" size="small" placeholder="请选择">
                    <el-option label="全平台" :value="0"></el-option>
                    <el-option
                    v-for="item in platList"
                    :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>
                <el-button style="margin-left:10px" size="small">批量回复</el-button>
                <el-button @click="plSet(2)" style="margin-left:10px" size="small">批量隐藏</el-button>
                <el-button @click="plSet(6)" style="margin-left:10px" size="small">批量删除</el-button>
            </div>
            <el-table
                :data="tableData"
                v-loading="loading" 
                border
                @selection-change="TableSelectChange"
                style="width: 100%">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                    prop="Id"
                    label="ID"
                    width="80">
                </el-table-column>
                 <el-table-column
                    prop="UserName"
                    label="用户"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="Name"
                    label="平台"
                    width="80">
                    <template slot-scope="scope">
                        <img v-if="scope.row.PlatformSource==1" src="../../assets/img/userman/wx.png" alt="">
                    </template>  
                </el-table-column>
                <el-table-column
                    prop="Content"
                    label="商品名称"
                    width="200">
                    <template slot-scope="scope">
                        <div class="goods-info">
                            <div class="backImg" style="background-image: url(https://cdnimg.iotweixin.com/uploads/mall1285/20200312/edf59b3b77f9920cf8ad03aea896a042.jpg); background-size: cover; "></div>
                            <div class="app-ellipsis">
                                <div class="vue-line-clamp" style="word-break: break-all; -webkit-line-clamp: 2;">
                                    东山岛佛跳墙 满坛香 福寿全 6罐装 顺丰直达 福建省包邮 赞羊严选  海鲜霸王餐 
                                </div>
                            </div>
                        </div>
                    </template>  
                </el-table-column>
                <el-table-column
                    prop="Name"
                    label="评价"
                    width="80">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="好评" placement="top">
                            <img v-if="scope.row.CommentGrade==1" src="../../assets/img/userman/good.png" alt="">
                        </el-tooltip>
                        <!-- <el-tooltip class="item" effect="dark" content="中评" placement="top">
                            <img v-if="scope.row.CommentGrade==2" src="../../assets/img/userman/good.png" alt="">
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="差评" placement="top">
                            <img v-if="scope.row.CommentGrade==3" src="../../assets/img/userman/good.png" alt="">
                        </el-tooltip> -->
                    </template>  
                </el-table-column>
                <el-table-column
                    prop="Name"
                    label="详情"
                    width="200">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content="scope.row.Content" placement="top">
                            <span>{{scope.row.Content}}</span>
                        </el-tooltip>
                        <div>
                            <div style="margin: 10px; display: inline-block; cursor: pointer;">
                                <div class="backImg" style="background-image: url(https://cdnimg.iotweixin.com/uploads/mall1285/20200316/586d61c616082de7c3a7d1d778104785.jpg); background-size: cover;"></div>
                            </div>
                            <div style="margin: 10px; display: inline-block; cursor: pointer;">
                                <div class="backImg" style="background-image: url(https://cdnimg.iotweixin.com/uploads/mall1285/20200316/586d61c616082de7c3a7d1d778104785.jpg); background-size: cover;"></div>
                            </div>
                        </div>
                    </template>  
                </el-table-column>
                <el-table-column
                    prop="CommentGradeName"
                    label="评价回复">
                    <template slot-scope="scope">
                        <span>{{scope.row.Reply}}</span>
                    </template>    
                </el-table-column>
                <el-table-column
                    prop="CommentGradeName"
                    width="100"
                    label="置顶">
                    <template slot-scope="scope">
                        <el-switch
                            @change="changeSwitch(scope.row)"
                            v-model="scope.row.Is_Top"
                            active-color="#409EFF"
                            :active-value="1"
                            :inactive-value="0">
                        </el-switch>
                    </template>    
                </el-table-column>
                <el-table-column
                    prop="CommentGradeName"
                    width="100"
                    label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.Is_Show==1" size="mini" type="success">显示</el-tag>
                        <el-tag v-if="scope.row.Is_Show==2" size="mini" type="warning">隐藏</el-tag>
                    </template>    
                </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/reply.png" alt="">
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                            <img @click="setBatch(scope.row,6)" style="margin-right:10px" src="../../assets/img/userman/del.png" alt="">
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="隐藏" placement="top">
                            <img @click="setBatch(scope.row,2)" v-if="scope.row.Is_Show==1" style="margin-right:10px" src="../../assets/img/userman/icon-hidden.png" alt="">
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="显示" placement="top">
                            <img @click="setBatch(scope.row,3)" v-if="scope.row.Is_Show==2" style="margin-right:10px" src="../../assets/img/userman/icon-show.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:3,name:'评价内容'},
            ],
             msg:{
                pageIndex:1,
                pageSize:15,
                CommentGrade:0,
                PlatformSource:0,
                UserName:'',
                GoodsName:'',
                Content:'',
            },
            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' }
                ],
            },
            platList:[],
            SelectList:[],
        }
    },
    created(){
        this.getTemplate();
        this.getList();
        this.getplat();
    },
    mounted(){},
    methods:{
        // 批量删除 隐藏 显示
        plSet(index){
            let that=this;
            if(this.SelectList.length==0){
                this.Error("请勾选数据!");
                return;
            }
            let Ids="";
            let IdList=[];
            this.SelectList.forEach(item=>{
                IdList.push(item.Id);
            })
            Ids=IdList.join(',');
            let msg={
                CommentIds:Ids,
                Type:index,
            }
            let str="";
            if(index==2){
                str=`已选中${that.SelectList.length}条数据，是否批量隐藏？`;
            }
            if(index==6){
                str=`已选中${that.SelectList.length}条数据，是否批量删除？`;
            }
            
            that.$confirm(str, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.commonSet(msg);
            }).catch(() => {
                
            });
            
        },
        changeSwitch(item){
            let index=4;
            if(item.Is_Top==1){
                index=4;
            }else{
                index=5;
            }
            let msg={
                CommentIds:item.Id,
                Type:index,
            }
            this.commonSet(msg);
            
        },
        // 显示隐藏
        setBatch(item,index){
            let msg={
                CommentIds:item.Id,
                Type:index,
            }
            this.commonSet(msg);
        },
        commonSet(msg){
            this.apipost("/api/order/SetGoodsCommentBatch",msg, res => {
                this.loading = false;
                if (res.data.resultCode == 1) {
                    this.Success(res.data.message)
                    this.getList();
                }else{
                    this.Error(res.data.message)
                }
            })
        },
        
        TableSelectChange(val){
            this.SelectList=val;
        },
        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.UserName=msgVal;
                this.msg.GoodsName='';
                this.msg.Content='';
            }
            if(this.msgId==2){
                this.msg.UserName='';
                this.msg.GoodsName=msgVal;
                this.msg.Content='';
            }
            if(this.msgId==3){
                this.msg.UserName='';
                this.msg.GoodsName='';
                this.msg.Content=msgVal;
            }
            this.getList();
        },
        getList(){
            let msgVal=this.msgVal;
            if(this.msgId==1){
                this.msg.UserName=msgVal;
                this.msg.GoodsName='';
                this.msg.Content='';
            }
            if(this.msgId==2){
                this.msg.UserName='';
                this.msg.GoodsName=msgVal;
                this.msg.Content='';
            }
            if(this.msgId==3){
                this.msg.UserName='';
                this.msg.GoodsName='';
                this.msg.Content='';
            }
            if(!this.msgVal || this.msgVal==''){
                this.msg.UserName='';
                this.msg.GoodsName='';
                this.msg.Content='';
            }
            this.loading = true;
            this.apipost("/api/order/GetGoodsCommentPageList", 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;
                }
            })
        },
        getplat(){
            this.apipost("/api/user/GetMemberUserSourceEnumList",{}, res => {
                this.platList=res.data.data;
            })
        },
        handleCurrentChange(val) {
            this.msg.pageIndex = val;
            this.getList();
        },
        getTemplate(){
            this.apipost("/api/order/GetGoodsCommentTypeEnumList",{}, res => {
                this.templateList=res.data.data;
            })
        },
        
    },
};
</script>

<style>
.evaluationMan .backImg{
    background-position: center center; 
    width: 50px; height: 50px; 
    border-radius: 0%; 
    margin-right: 10px; 
    float: left;
}
.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>
