<template>
  <div class="informationEvalution">
    <div class="head-title">
      资讯评价
      <!-- <el-button style="float:right;margin-left:10px" @click="CommonJump('addZixunPj')" 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.PlatformSource" 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-date-picker size="small" @change="msg.pageIndex=1,getList()" v-model="dateList" type="datetimerange"
          range-separator="至" start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" end-placeholder="结束日期">
        </el-date-picker>
        <!-- <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="ArticleName" label="资讯名称" width="200">
        </el-table-column>
        <el-table-column prop="UserName" label="用户" width="100">
        </el-table-column>
        <el-table-column 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 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="详情">
          <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(item)"
            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="2">
            </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 :visible.sync="seeimgDig" width="45%">
      <div>
        <img :src="imgSrc" style="width:100%;max-width:100%;" alt="">
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        msgVal: '',
        msgId: '',
        msg: {
          pageIndex: 1,
          pageSize: 15,
          CommentGrade: 0,
          PlatformSource: 0,
          ArticleName: '', //咨询标题
          Content: '', //评价内容
          StartTime: '', //评价时间
          EndTime: '', //评价时间
          UserName: '', //用户昵称
          ArticleId: 0 //资讯id
        },
        templateList: [], //评价类型
        platList: [], //所属平台
        total: 0,
        tableData: [],
        addMsg: {
          Id: 0,
          Name: '',
          Content: '',
          CommentGrade: 0,
        },
        //搜索内容下拉
        option: [{
            Id: 1,
            name: '用户昵称'
          },
          {
            Id: 2,
            name: '资讯标题'
          },
          {
            Id: 3,
            name: '评价内容'
          },
        ],
        //日期
        dateList: [],
        SelectList: [],
        seeimgDig:false,
        imgSrc:'',
      }
    },
    created() {
      this.getTemplate(); //获取评价类型下拉数据
      this.getplat(); //获取所属平台下拉数据
      if(this.$route.query.ArticleId){
          this.msg.ArticleId=this.$route.query.ArticleId;
      }
      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(() => {

        });
      },
      OpenImg(item) {
        this.imgSrc = item
        this.seeimgDig = true;
      },
      TableSelectChange(val) {
        this.SelectList = val;
      },
      //改变下拉切换搜索名称或者内容 标题
      ChangeId(val) {
        let msgVal = this.msgVal;
        if (this.msgId == 1) {
          this.msg.UserName = msgVal;
          this.msg.ArticleName = '';
          this.msg.Content = '';
        }
        if (this.msgId == 2) {
          this.msg.UserName = '';
          this.msg.ArticleName = msgVal;
          this.msg.Content = '';
        }
        if (this.msgId == 3) {
          this.msg.UserName = '';
          this.msg.ArticleName = '';
          this.msg.Content = msgVal;
        }
        this.getList();
      },
      //获取数据
      getList() {
        if (this.dateList && this.dateList.length > 0) {
          this.msg.StartTime = this.dateList[0];
          this.msg.EndTime = this.dateList[1];
        } else {
          this.msg.StartTime = '';
          this.msg.EndTime = '';
        }
        this.loading = true;
        this.apipost("/api/Education/GetArticleCommentPageList", 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;
        })
      },
      changeSwitch(item) {
        let index = 4;
        //Is_Top 是否置顶 1是 2否
        //4 批量置顶 5取消置顶
        if (item.Is_Top == 1) {
          index = 4;
        } else {
          index = 5;
        }
        let msg = {
          CommentIds: item.ID,
          Type: index,
        }
        this.commonSet(msg);
      },
      commonSet(msg) {
        this.apipost("/api/Education/SetArticleCommentBatch", 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)
          }
        })
      },
      EditTemplate() {

      },
      setBatch(item, index) {
        let msg = {
          CommentIds: item.ID,
          Type: index,
        }
        if (index == 6) {
          this.delComent(msg);
        }
      },
      delComent(msg) {
        let that = this;
        that.$confirm("确认删除？", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apipost("/api/Education/SetArticleCommentBatch", msg, res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.Success(res.data.message)
              this.getList();
            } else {
              this.Error(res.data.message)
            }
          })
        }).catch(() => {

        });
      },
    },
  };

</script>

<style>
  .informationEvalution .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

</style>