<template>
  <div class="evalTemplate evaluationMan">
    <div class="head-title">
      评价管理
      <el-button @click="CommonJump('carEvaluation')" style="float:right;margin-left:10px" size="small"
        type="primary">添加司导评价</el-button>
      <el-button @click="CommonJump('customerEvaluation')" 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="msg.pageIndex=1,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="msg.pageIndex=1,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="msg.pageIndex=1,getList()" slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-button @click="plHf" 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="{backgroundImage:'url(' + domainManager().ImageUrl+scope.row.CoverImage + ')',backgroundSize:'cover'}">
              </div>
              <div class="app-ellipsis">
                <div class="vue-line-clamp" style="word-break: break-all; -webkit-line-clamp: 2;">
                  {{scope.row.GoodsName}}
                </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>

          </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 v-for="(item,index) in scope.row.CommentImgList" :key="index" @click="OpenImg(scope.row)"
                style="margin: 10px; display: inline-block; cursor: pointer;">
                <div class="backImg"
                  :style="{backgroundImage:'url(' + domainManager().ImageUrl+item + ')',backgroundSize:'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" :current-page.sync="msg.pageIndex"
        layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <!-- 评论回复 -->
    <el-dialog custom-class="plDig" title="评论回复" :visible.sync="addDig" width="960px">
      <div style="margin-bottom:15px">
        <el-radio v-model="typeVal" :label="1">直接输入</el-radio>
        <el-radio v-model="typeVal" :label="2">选择模板</el-radio>
      </div>
      <template v-if="typeVal==1">
        <div style="height:220px">
          <el-input v-model="hfMsg.Content" type="textarea" row="10" style="height:100%" placeholder="请输入回复内容">
          </el-input>
        </div>
      </template>
      <template v-if="typeVal==2">
        <el-card class="box-card" shadow="never">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="(item,index) in templateList" :key="item.Id" :dataId="item.Id" :label="item.Name"
              :name="`first${index}`"></el-tab-pane>
          </el-tabs>
          <div class="table-box">
            <div flex="dir:left">
              <div flex="cross:center" class="table-item" style="width: 10%;"></div>
              <div flex="cross:center" class="table-item" style="width: 30%;">模板名称</div>
              <div flex="cross:center" class="table-item" style="width: 60%;">模板内容</div>
            </div>
            <div v-for="(item,index) in tableData1" :key="index" flex="dir:left">
              <div flex="main:center cross:center" class="table-item" style="width: 10%;">
                <el-radio @change="radioChange(item.Content)" v-model="radio" :label="item.Id"></el-radio>
              </div>
              <div flex="cross:center" class="table-item" style="width: 30%;">
                <div class="app-ellipsis">
                  <div class="vue-line-clamp" style="word-break: break-all; -webkit-line-clamp: 2;">{{item.Name}}</div>
                </div>
              </div>
              <div flex="cross:center" class="table-item" style="width: 60%;">
                <div class="app-ellipsis">
                  <div class="vue-line-clamp" style="word-break: break-all; -webkit-line-clamp: 2;">{{item.Content}}
                  </div>
                </div>
              </div>
            </div>
            <el-pagination style="text-align:right" background @current-change="handleCurrentChange1"
              :page-size="msg1.pageSize" layout="prev, pager, next" :total="total1">
            </el-pagination>
          </div>

        </el-card>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="addDig = false">取 消</el-button>
        <el-button size="small" type="primary" @click="czsubmitForm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看图片 -->
    <el-dialog :visible.sync="seeimgDig" width="45%">
      <div>
        <img :src="imgSrc" style="width:100%;max-width:100%;" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "evalTemplate",
    data() {
      return {
        imgSrc: '',
        seeimgDig: false,
        radio: false,
        activeName: 'first0',
        typeVal: 1,
        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,
        },
        platList: [],
        SelectList: [],
        tableData1: [],
        total1: 0,
        msg1: {
          pageIndex: 1,
          pageSize: 15,
          Id: 0,
          Name: '',
          CommentGrade: 1,
        },
        hfMsg: {
          CommentIds: '',
          Type: 1,
          Content: '',
        },
      }
    },
    created() {
      this.getTemplate();
      this.getList();
      this.getplat();
      this.getTemplateList();
    },
    mounted() {},
    methods: {
      OpenImg(item) {
        // this.imgSrc=item;
        this.imgSrc = 'https://cdnimg.iotweixin.com/uploads/mall1285/20200316/586d61c616082de7c3a7d1d778104785.jpg';

        this.seeimgDig = true;
      },
      // 批量回复
      plHf() {
        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(',');
        this.hfMsg = {
          CommentIds: Ids,
          Type: 1,
          Content: '',
        }
        this.addDig = true;
      },
      EditTemplate(row) {
        this.hfMsg = {
          CommentIds: row.Id,
          Type: 1,
          Content: '',
        }
        this.addDig = true;
      },
      czsubmitForm() {
        if (this.hfMsg.Content == '') {
          this.Error("请输入内容");
          return;
        }
        this.commonSet(this.hfMsg);

      },
      radioChange(val) {
        this.hfMsg.Content = val;
      },
      handleClick(val) {
        let dataId = val.$attrs.dataId;
        this.msg1.CommentGrade = dataId;
        this.getTemplateList();
      },
      // 批量删除 隐藏 显示
      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();
            this.addDig = false;
          } 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(() => {

        });
      },

      addTemplate() {
        this.addMsg = {
          Id: 0,
          Name: '',
          Content: '',
          CommentGrade: 1,
        }
        this.addDig = true;
      },

      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 = msgVal;
        }
        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();
      },
      handleCurrentChange1(val) {
        this.msg1.pageIndex = val;
        this.getTemplateList();
      },
      getTemplate() {
        this.apipost("/api/order/GetGoodsCommentTypeEnumList", {}, res => {
          this.templateList = res.data.data;
        })
      },
      getTemplateList() {
        this.loading1 = true;
        this.apipost("/api/order/GetGoodsCommentTemplatePageList", this.msg1, res => {
          this.loading1 = false;
          if (res.data.resultCode == 1) {
            this.total1 = res.data.data.count;
            let pageData = res.data.data.pageData;
            this.tableData1 = pageData;
          }
        })
      },

    },
  };

</script>

<style>
  .evaluationMan .el-input.is-active .el-input__inner,
  .el-input__inner:focus {
    border-color: #dcdfe6;
  }

  .plDig .table-item .el-radio__label {
    display: none;
  }

  .plDig .table-item {
    border-bottom: 1px solid #E3E3E3;
    border-right: 1px solid #E3E3E3;
    height: 50px;
    padding-left: 5px;
  }

  .plDig .table-box {
    border-top: 1px solid #E3E3E3;
    border-left: 1px solid #E3E3E3;
  }

  .plDig .el-textarea__inner {
    height: 100%;
  }

  .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>
