<template>
  <div class="happraise">
    <div class="head-title">
      估价列表
    </div>
    <div class="content">
      <div style="margin-bottom:20px">
        <span>分类</span>
        <el-select style="margin:0 10px" class="w200" @change="(msg.pageIndex = 1), getList()" v-model="msg.CategoryId"
          size="small" placeholder="请选择" clearable>
          <el-option label="不限" :value="0"></el-option>
          <el-option v-for="item in CategoryList" :key="item.Id" :label="item.Name" :value="item.Id">
          </el-option>
        </el-select>
        <span>分类名称</span>
        <el-input type="text" style="width:250px" size="small" maxlength="100" v-model="msg.BrandName"
          @input="(msg.pageIndex = 1), getList()" clearable>
        </el-input>
        <span style="margin-left: 10px">咨询用户</span>
        <el-select size="small" v-model="msg.UserId" @change="(msg.pageIndex = 1), getList()" placeholder="请选择"
          :filter-method="ChangeListName" filterable clearable>
          <el-option label="不限" :value="0"></el-option>
          <el-option v-for="item in userList" :key="item.Id" :label="item.Name" :value="item.Id"></el-option>
        </el-select>
        <span>是否回复</span>
        <el-select style="margin:0 10px" @change="(msg.pageIndex = 1), getList()" v-model="msg.IsReply" size="small"
          placeholder="请选择">
          <el-option label="不限" :value="0"></el-option>
          <el-option v-for="item in ReplyList" :key="item.Id" :label="item.Name" :value="item.Id">
          </el-option>
        </el-select>
        <el-button @click="(msg.pageIndex = 1), getList()" size="small" type="primary">
          查询
        </el-button>
      </div>
      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
        <el-table-column prop="Id" label="编号" width="150"> </el-table-column>
        <el-table-column prop="UserName" label="用户昵称"></el-table-column>
        <el-table-column prop="CategoryName" label="分类"></el-table-column>
        <el-table-column prop="BrandName" label="品牌名称"></el-table-column>
        <el-table-column prop="CreateDate" label="创建时间"></el-table-column>
        <el-table-column label="是否回复">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.ReplyDate == ''" effect="dark">
              未回复
            </el-tag>
            <el-tag v-else effect="dark">
              已回复
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="回复内容">
          <template slot-scope="scope">
            <p class="answer-con">
              {{ scope.row.ReplyContent }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="ReplyDate" label="回复时间"> </el-table-column>
        <el-table-column label="操作" width="250px">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="回复" placement="top">
              <img style="margin-right:10px;" v-if="scope.row.ReplyDate == ''"
                src="../../assets/img/userman/add_remark.png" @click="showReplayForm(scope.row, 1)" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="查看" placement="top">
              <img style="width: 32px;height: 32px;" @click="showReplayForm(scope.row, 2)"
                src="../../assets/img/userman/icon-show.png" />
            </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 :title="editTitle" :visible.sync="isShowReplayForm" width="800px">
      <el-form ref="answerform" label-width="150px" :rules="rules" :model="replayMsg">
        <el-form-item label="咨询用户" class="user">
          {{ replayMsg.UserName }}
        </el-form-item>
        <el-form-item label="咨询时间">
          {{ replayMsg.CreateDate }}
        </el-form-item>
        <el-form-item label="咨询分类">
          {{ replayMsg.CategoryName }}
        </el-form-item>
        <el-form-item label="咨询品牌">
          {{ replayMsg.BrandName }}
        </el-form-item>
        <el-form-item label="商品图片">
          <div class="shopImg1">
            <div class="indexApp_more-image" v-for="(item, index) in replayMsg.GoodsImgList" :key="index">
              <div class="img_Des">
                <el-image style="width: 100px; height: 100px" v-if="item.Path" :src="item.Path"
                  :preview-src-list="srcList"></el-image>
                <p>{{ item.Name }}</p>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="更多照片" class="more_img">
          <div class="shopImg1">
            <div class="indexApp_more-image" v-for="(item, index) in replayMsg.MoreImgList" :key="index">
              <div class="img_Des">
                <el-image style="width: 100px; height: 100px" v-if="item.Path" :src="item.Path"
                  :preview-src-list="moreImg"></el-image>
                <p>{{ item.Name }}</p>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="备注信息" class="remark">
          {{ replayMsg.Remark }}
        </el-form-item>
        <el-form-item label="回复内容" prop="ReplyContent">
          <template v-if="showType == 1">
            <el-input style="width:400px" size="small" maxlength="800" show-word-limit :rows="4" type="textarea"
              v-model="replayMsg.ReplyContent">
            </el-input>
          </template>
          <template v-else>
            <p>{{ replayMsg.ReplyContent }}</p>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowReplayForm = false">取 消</el-button>
        <el-button size="small" type="primary" @click="saveData('answerform')" v-if="showType == 1">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      msg: {
        pageIndex: 1,
        pageSize: 15,
        BrandName: "",
        CategoryId: "",
        BrandId: "",
        UserId: "",
        IsReply: ""
      },
      //回复状态
      ReplyList: [
        {
          Id: 1,
          Name: "已回复"
        },
        {
          Id: 2,
          Name: "未回复"
        }
      ],
      editTitle: "回复",
      //回复信息
      replayMsg: {
        GoodsId: 0,
        GoodsImgList: [],
        MoreImgList: [],
        ReplyContent: "", //回复内容
        Remark: "", //备注信息
        CategoryName: "", //分类名称
        BrandName: "", //品牌名称
        UserName: "", //咨询用户
        CreateDate: "" //咨询时间
      },
      isShowCategoryForm: false,
      isShowChooseImage: false,
      CategoryList: [], //分类列表
      isShowReplayForm: false, //是否显示回复弹窗
      showType: 1, //回复类型(1-回复，2-查看)
      userList: [], //用户列表
      //用户查询
      userMsg: {
        pageIndex: 1,
        pageSize: 50,
        Name: "",
        Source: 0,
        MemberGrade: 0,
        Id: 0,
        Moblie: ""
      },
      //放大商品图片数组
      srcList: [],
      moreImg: [],

      //输入框验证
      rules: {
        ReplyContent: [
          { required: true, message: "请输入回复内容", trigger: "blur" }
        ]
      },
    };
  },
  created() {
    this.getCategoryList();
    this.getuserList();
  },
  mounted() {
    this.getList();
  },
  methods: {
    //搜索用户
    ChangeListName(val) {
      this.userMsg.Name = val;
      this.getuserList();
    },
    //获取用户列表
    getuserList() {
      this.apipost("/api/user/GetMemberUserDropDownList", this.userMsg, res => {
        if (res.data.resultCode == 1) {
          let pageData = res.data.data.pageData;
          this.userList = pageData;
        }
      });
    },
    showReplayForm(item, showType) {
      this.editTitle = '回复'
      this.replayMsg.GoodsId = item.Id;
      let { GoodsImgList, MoreImgList, Remark, CategoryName, BrandName, UserName, CreateDate } = item;
      this.replayMsg = { GoodsImgList, MoreImgList, Remark, CategoryName, BrandName, UserName, CreateDate }
      this.replayMsg.GoodsId=item.Id;
      this.showType = showType;
      this.srcList = item.GoodsImgList.map(v => v.Path);
      this.moreImg = item.MoreImgList.map(v => v.Path);
      if (this.showType == 2) {
        this.replayMsg.ReplyContent = item.ReplyContent;
        this.editTitle = '查看'
      }
      this.isShowReplayForm = true;
    },
    //获取分类列表
    getCategoryList() {
      this.apipost("/api/Assess/GetCategoryDropList", {}, res => {
        if (res.data.resultCode == 1) {
          this.CategoryList = res.data.data;
        } else {
          this.Error(res.data.message);
        }
      });
    },
    //获取数据
    getList() {
      this.isShowCategoryForm = false;
      this.loading = true;
      this.assetsApipost("/api/Assess/GetGoodsPageList", this.msg, res => {
        this.loading = false;
        if (res.data.resultCode == 1) {
          this.total = res.data.data.count;
          this.tableData = res.data.data.pageData;
        } else {
          this.Error(res.data.message);
        }
      });
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
 
    saveData(answerform) {
      this.$refs[answerform].validate((valid) => {
        if (valid) {
          this.assetsApipost("/api/Assess/SetGoodsReply", this.replayMsg, res => {
            if (res.data.resultCode == 1) {
              this.isShowReplayForm = false;
              this.Success(res.data.message);
              this.getList();
            } else {
              this.Error(res.data.message);
            }
          });
        } else {
          this.$message.error('请输入回复内容');
          return false;
        }
      });
    },
    //回复验证结果
  },
};
</script>
<style scoped>
.happraise .content {
  background: #fff;
  margin-top: 10px;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.happraise .shopImg1 {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.happraise .shopImg1>div {
  width: 20%;
}

.happraise .img_Des {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.happraise .el-form-item {
  margin-bottom: 0;
}

.happraise .remark {
  margin: 20px 0;
}

.happraise .answer-con {
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  /* white-space: pre-line; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
</style>
