<template>
  <scroll-view scrol-y class="scrllView">
    <div class="topEvaluation">
      <div class="evaluationMark">
        {{ storeMsg.MERCHANTS_SCORE || "" }}
      </div>
      <div class="evaluationRight">
        <div class="markTitle">商家评分</div>
        <!--  -->
        <uni-rate :value="storeMsg.MERCHANTS_SCORE" size="14" activeColor="#FFD401" :allowHalf="true" color="#D9D9D9"
          void-color="#eee" void-icon="star" readonly />
      </div>

      <div class="evaluationRight" style="margin-left: 60rpx;">
        <div class="markTitle">全部评价</div>
        <div class="evaluationValue">{{ storeMsg.COMMENT_COUNT || '-' }}</div>
      </div>
    </div>

    <div class="evaluationList">
      <div class="evaluationTitle">
        <!-- 全部评价<span class="sumText">({{ storeMsg.COMMENT_COUNT || 0 }}条)</span> -->
      </div>

      <div class="evaluationItem" v-for="(item, index) in rateList" :key="index">
        <div class="itemTop">
          <div class="headImgBox">
            <image class="headImg" mode="aspectFit" lazy-load="true" :src="item.HEADIMAGEURL || 'https://eshangtech.com/ShopICO/noName.png'
              "></image>
          </div>
          <div class="userDetailBox">
            <div class="userTitle">
              {{ item.ISANONYMOUS == 0 ? item.MEMBERSHIP_NAME : "匿名用户" }}
              <span v-if="item.ISANONYMOUS == 0 && item.MEMBERSHIP_LEVEL > 100" class="vip-level">{{
                item.MEMBERSHIP_LEVEL_TEXT }}</span>
            </div>
            <div class="timeText">{{ item.CREATE_DATE || "" }}</div>
          </div>
        </div>

        <div class="itemRate">
          <uni-rate :value="item.COMMENT_SCORE" size="12" allowHalf color="#ececec" void-color="#eee" void-icon="star"
            readonly />
          <span class="rateText">{{ item.rateText }}</span>
        </div>

        <div class="evaluationContent">{{ item.COMMENT_CONTENT || "" }}</div>

        <!-- 附件图片列表 -->
        <div class="evaluationLists" v-if="item.IMAGELIST && item.IMAGELIST.length > 0">
          <div class="evaluationItems" v-for="(subItem, subIndex) in item.IMAGELIST" :key="subIndex">
            <image @click="handlePreviewImage(subIndex, item.IMAGELIST)" class="evaluationImg"
              :src="subItem.IMAGE_URL" />
          </div>
        </div>
      </div>
    </div>

    <div v-if="false">
      <div class="rate-top">
        <div class="rate-top-left">
          <span class="rate-code">{{ storeMsg.MERCHANTS_SCORE }}</span>
          <div>
            <div class="rate-text">商家评分</div>

            <uni-rate v-model="storeMsg.MERCHANTS_SCORE" size="12" allowHalf color="#ececec" void-color="#eee"
              void-icon="star" readonly />
          </div>
        </div>
        <div class="rate-top-right">
          <div class="reate-user-images">
            <image v-for="(item, i) in rateMsg.usersImages" :src="item" :key="i"></image>
          </div>
          <div class="rate-text">{{ storeMsg.COMMENT_COUNT || 0 }}评价</div>
        </div>
      </div>
      <hr class="gray-block" />
      <div class="rate-body">
        <div class="rate-screen">
          <block v-for="(item, i) in rateScreen" :key="i">
            <div class="screen-tag" v-show="item.COUNT > 0" :class="{ active: item.isCheck, gray: item.noGood }"
              @click="checkTag(i)">
              {{ item.TAGNAME + " " + item.COUNT }}
            </div>
          </block>
        </div>
        <div class="rate-list" v-show="rateList.length > 0">
          <div class="rate-card" v-for="(item, o) in rateList" :key="o">
            <div class="rate-card-top">
              <image class="rate-user-photo" mode="aspectFit" lazy-load="true" :src="item.HEADIMAGEURL ||
                'https://eshangtech.com/ShopICO/noName.png'
                "></image>

              <div class="top-card-center">
                <div class="rate-text" v-if="item.ISANONYMOUS == 0">
                  {{ item.MEMBERSHIP_NAME }}
                  <span v-if="item.MEMBERSHIP_LEVEL > 100" class="vip-level">{{
                    item.MEMBERSHIP_LEVEL_TEXT
                  }}</span>
                </div>
                <div class="rate-text" v-else>匿名用户</div>
                <div style="display: flex; align-items: center">
                  <van-rate :value="item.COMMENT_SCORE" size="12" allow-half="true" :color="item.starColor"
                    void-color="#eee" void-icon="star" readonly>
                  </van-rate>
                  <span style="font-size: 24rpx" :style="{ color: item.starColor }">{{ item.rateText }}</span>
                </div>
              </div>
              <div class="rate-date">{{ item.CREATE_DATE }}</div>
            </div>
            <div class="rate-content">
              <div>
                <span class="rate-tag" v-if="item.SALEBILL_ID != 0">消费后点评</span>
              </div>
              <div class="">{{ item.COMMENT_CONTENT }}</div>
              <div class="rate-photo" v-if="item.IMAGELIST.length > 0">
                <image mode="aspectFit" lazy-load="true" :src="img.IMAGE_URL" v-for="(img, i) in item.IMAGELIST"
                  :key="i" @click="seePhoto(img.IMAGE_URL, item.IMAGELIST)" />
              </div>
            </div>
          </div>
        </div>
        <block v-if="rateList.length === 0">
          <no-data :text="'评论空空如也'" :isShow="rateList.length" />
        </block>
      </div>
    </div>
  </scroll-view>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import noData from "../../../../components/noData.vue";
export default {
  props: ["merchantsId", "storeMsg"],
  data() {
    return {
      rateScreen: [],
      rateList: [],
      rateMsg: {
        pageIndex: 1,
        tagType: [],
        keyWord: [],
        TotalCount: 0,
        usersImages: [],
      },
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  components: {
    noData,
  },
  methods: {
    ...mapMutations(["setIsLoading"]),
    // 预览图片
    handlePreviewImage(current, picList) {
      let list = [];
      picList.forEach((item) => {
        list.push(item.IMAGE_URL);
      });
      console.log("current", current);
      console.log("list", list);

      uni.previewImage({
        urls: list,
        current: current,
        // longPressActions: {
        //   itemList: picList,
        //   success: function (data) {},
        //   fail: function (err) {},
        // },
      });
    },
    starColor(num) {
      num = Math.ceil(num);
      let colors = ["#f5bd50", "#f1b84d", "#f7a750", "#f59b3a", "#f28c44"];
      return colors[num - 1];
    },
    rateText(num) {
      num = Math.ceil(num);
      let text = ["非常差", "差", "一般", "满意", "超满意,无可挑剔"];
      return text[num - 1];
    },
    checkTag(index) {
      let _this = this;
      let u = _this.rateScreen[index];
      _this.rateScreen.map((n) => {
        if (n.ID === u.ID) {
          u.isCheck = true;
        } else {
          n.isCheck = false;
        }
      });
      if (!u.ISKEYWORD) {
        if (this.rateMsg.tagType !== u.ID) {
          this.rateMsg.tagType = u.ID;
        }
      } else {
        if (this.rateMsg.keyWord !== u.TAGNAME) {
          this.rateMsg.keyWord = u.TAGNAME;
        }
      }

      _this.setIsLoading(true);
      this.rateMsg.pageIndex = 1;
      // _this.rateList = []
      this.getRate({ needClearList: true });
    },
    seePhoto(item, list) {
      let u = [];

      list.map((n) => {
        u.push(n.IMAGE_URL);
      });
      mpvue.previewImage({
        current: item, // 当前显示图片的http链接
        urls: u, // 需要预览的图片http链接列表
      });
    },
    getScreen() {
      let _this = this;
      this.$api
        .getCoop({
          action_type: "GetCommentTag",
          merchantsId: this.storeMsg.MERCHANTS_ID || this.merchantsId,
        })
        .then((res) => {
          _this.rateScreen = res.Data.List;
          console.log("rateScreen", _this.rateScreen);
          res.Data.List.map((n) => {
            n.isCheck = false;
            n.noGood = !!(
              n.TAGNAME.indexOf("不") > -1 || n.TAGNAME.indexOf("差") > -1
            );
          });
          _this.checkTag(0);
        });
    },
    getRate(obj) {
      let _this = this;
      let images = []; // 评论列表加载的用户头像图片 少于5头像则拼接
      this.$api
        .getCoop({
          action_type: "GetCommentList",
          merchantsId: this.storeMsg.MERCHANTS_ID || this.merchantsId,
          tagType: this.rateMsg.tagType.toString(),
          keyWord: this.rateMsg.keyWord.toString(),
          pageSize: 9999,
          pageIndex: this.rateMsg.pageIndex,
        })
        .then((res) => {
          if (obj && obj.needClearList) {
            _this.rateList = res.Data.List;
          } else {
            _this.rateList = _this.rateList.concat(res.Data.List);
          }
          if (_this.rateMsg.usersImages.length < 5) {
            // 评论列表加载的用户头像图片 少于10条则拼接
            _this.rateList.map((n) => {
              if (
                n.HEADIMAGEURL !== "" &&
                images.indexOf(n.HEADIMAGEURL) === -1 &&
                images.length < 5
              ) {
                images.push(
                  n.HEADIMAGEURL || "https://eshangtech.com/ShopICO/noName.png"
                );
              }
            });
            _this.rateMsg.usersImages = images;
          }
          _this.rateMsg.TotalCount = res.Data.TotalCount;
          res.Data.List.map((n) => {
            n.rateText = _this.rateText(n.COMMENT_SCORE);
            n.starColor = _this.starColor(n.COMMENT_SCORE);
          });
          _this.setIsLoading(false);
          console.log("_this.rateList", _this.rateList);
        });
    },
    loading(op) {
      this.setIsLoading(true);
      this.rateScreen = [];
      this.rateList = [];
      this.rateMsg.usersImages = [];

      this.getScreen();
    },
    loadMore() {
      if (this.rateMsg.TotalCount > this.rateList.length) {
        this.rateMsg.pageIndex += 1;
        this.setIsLoading(true);
        this.getRate();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.topEvaluation {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 16rpx 32rpx 24rpx;
  background-color: #fff;

  .evaluationMark {
    font-family: "Microsoft YaHei";
    font-weight: 400;
    font-size: 58rpx;
    color: #FF6200;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-right: 8rpx;
    // font-family: "DINAlternate";
    // font-weight: bold;
    // font-size: 72rpx;
    // color: #ba922f;
    // line-height: 84rpx;
    // text-align: justify;
    // font-style: normal;
    // margin-right: 8rpx;
  }

  .evaluationRight {
    .markTitle {
      font-family: "PingFangSC";
      font-weight: 400;
      font-size: 22rpx;
      color: #716f69;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
    }

    .evaluationValue {
      font-family: "Microsoft YaHei";
      font-weight: 600;
      font-size: 30rpx;
      color: #000000;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}

.scrllView::-webkit-scrollbar {
  display: none;
  width: 0;
}

.evaluationList {
  margin-top: 10rpx;
  width: 100%;
  box-sizing: border-box;
  padding: 40rpx 32rpx;
  background-color: #fff;

  .evaluationTitle {
    font-family: "PingFangSC";
    font-weight: 400;
    font-size: 28rpx;
    color: #130f05;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    margin-bottom: 24rpx;

    .sumText {
      margin-left: 8rpx;
      font-family: "PingFangSC";
      font-weight: 400;
      font-size: 28rpx;
      color: #716f69;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
    }
  }

  .evaluationItem {
    width: 100%;
    margin-bottom: 48rpx;

    .itemTop {
      width: 100%;
      display: flex;
      margin-bottom: 16rpx;

      .headImgBox {
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
        overflow: hidden;

        .headImg {
          width: 100%;
          height: 100%;
        }
      }

      .userDetailBox {
        margin-left: 16rpx;

        .userTitle {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 28rpx;
          color: #130f05;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          display: flex;
          align-items: center;
          margin-bottom: 8rpx;

          .vip-level {
            font-size: 20rpx;
            background: #333;
            color: #eedcb6;
            padding: 4rpx 6rpx;
            margin-left: 16rpx;
            border-radius: 4rpx;
            display: flex;
            align-items: ceneter;
            position: relative;

            // padding-left 24rpx
            .vip-level:before {
              content: "";
              width: 20rpx;
              height: 20rpx;
              background: url("https://eshangtech.com/ShopICO/vip-ico.png") no-repeat center; // eshangtech.com/ShopICO/vip-ico.png) no-repeat center
              background-size: contain;
              position: absolute;
              left: 4rpx;
            }
          }
        }

        .timeText {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 24rpx;
          color: #716f69;
          line-height: 36rpx;
          text-align: justify;
          font-style: normal;
        }
      }
    }

    .itemRate {
      display: flex;
      align-items: center;

      .rateText {
        font-family: "PingFangSC";
        font-weight: 400;
        font-size: 24rpx;
        color: #716f69;
        line-height: 36rpx;
        text-align: justify;
        font-style: normal;
        margin-left: 4rpx;
      }
    }

    .evaluationContent {
      font-family: "PingFangSC";
      font-weight: 400;
      font-size: 28rpx;
      color: #130f05;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      width: 100%;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      /* 限制在5行内 */
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .evaluationLists {
      margin-top: 16rpx;
      display: flex;
      flex-wrap: wrap;

      .evaluationItems {
        width: 160rpx;
        height: 160rpx;
        border-radius: 12rpx;
        margin-right: 16rpx;
        overflow: hidden;

        .evaluationImg {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.rate-top {
  display: flex;
  align-items: center;
  padding: 24rpx 36rpx;

  .rate-top-left,
  .rate-top-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .rate-top-right:before {
    content: " ";
    height: 60rpx;
    width: 1rpx;
    background: #eeeeee;
    display: block;
    position: absolute;
    left: 1rpx;
  }

  .rate-code {
    color: #ed6143;
    font-size: 60rpx;
    margin-right: 16rpx;
  }

  .rate-text {
    color: #666666;
    font-size: 24rpx;
  }

  .reate-user-images {
    display: flex;
    align-items: center;
    margin-right: 8rpx;

    image {
      height: 50rpx;
      width: 50rpx;
      border-radius: 25rpx;
      margin-left: -20rpx;
    }
  }
}

.gray-block {
  background: #f5f5f5;
  height: 24rpx;
}

.rate-body {
  padding-bottom: 90rpx;

  .rate-screen {
    display: flex;
    padding: 24rpx 24rpx;
    flex-wrap: wrap;
    align-items: center;

    .screen-tag {
      text-align: center;
      width: 156rpx;
      height: 64rpx;
      line-height: 64rpx;
      border-radius: 6rpx;
      margin: 12rpx 9rpx;
      font-size: 24rpx;
      color: #ba9b6f;
      background: #f8e8d8;

      &.gray {
        background-color: #f5f5f5;
        color: #a5a5a5;
      }

      &.active {
        background-color: #ba9b6f;
        color: #fff;
      }
    }
  }

  .rate-list {
    padding-left: 32rpx;
    padding-bottom: 80rpx;
  }

  .rate-card {
    border-top: 1rpx solid #eee;
    padding: 24rpx 24rpx 24rpx 0;
    font-size: 28rpx;

    .rate-card-top {
      display: flex;
      align-items: top;
    }

    .rate-user-photo {
      height: 80rpx;
      width: 80rpx;
      border-radius: 40rpx;
    }

    .top-card-center {
      flex: 6;
      padding-left: 16rpx;
    }

    .rate-text {
      color: #666666;
      font-size: 26rpx;
      display: flex;
      align-items: center;
    }

    .vip-level {
      font-size: 20rpx;
      background: #333;
      color: #eedcb6;
      padding: 4rpx 6rpx;
      margin-left: 16rpx;
      border-radius: 4rpx;
      display: flex;
      align-items: ceneter;
      position: relative;

      // padding-left 24rpx
      .vip-level:before {
        content: "";
        width: 20rpx;
        height: 20rpx;
        background: url("https://eshangtech.com/ShopICO/vip-ico.png") no-repeat center; // eshangtech.com/ShopICO/vip-ico.png) no-repeat center
        background-size: contain;
        position: absolute;
        left: 4rpx;
      }
    }

    .rate-date {
      flex: 4;
      color: #989898;
      font-size: 22rpx;
      text-align: right;
    }

    .rate-content {
      padding-left: 96rpx;
      font-size: 26rpx;
      // padding-top 16rpx
    }

    .rate-tag {
      border-radius: 4rpx;
      border: 1rpx solid #cf855e;
      color: #cf855e;
      padding: 4rpx 6rpx;
      display: inline-block;
      font-size: 20rpx;
      margin: 0 16rpx 8rpx 0;
    }

    .rate-photo {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      image {
        height: 120rpx;
        width: 120rpx;
        border-radius: 4rpx;
        margin: 24rpx 12rpx;
      }
    }
  }
}
</style>
