<template>
  <div class="comment-details-con bg-grey flex-default">
    <div class="comment-details">
      <div class="comm-item">
        <div class="header flex-default">
          <div class="avatar" v-if="commentVo">
            <img
              :src="commentVo.headUrl"
              style="width: 100%; height: 100%; border-radius: 50%"
            />
          </div>
          <div class="name">{{ commentVo.nickName }}</div>
          <div class="time">{{ commentVo.createTime | getTime }}</div>
        </div>
        <div class="star-sku flex-default">
          <div class="star">
            <m-star
              :value="commentVo.businessEvaluate"
              :size="14"
              :readonly="true"
            />
          </div>
          <div class="sku">{{ commentVo.list | getSkuStr }}</div>
        </div>
        <div class="content-text">
          {{ commentVo.content }}
        </div>
        <div class="append-comment-con" v-if="commentAppend">
          <div class="title">
            <m-icon icon="icon-3dot" :size="12" />
            购买
            {{
              commentAppend.createTime | timeDifference(commentVo.createTime)
            }}
            天后追评
          </div>
          <div class="content-text">
            {{ commentAppend.content }}
          </div>
          <div class="" v-for="(data, i) in getPrivewsList" :key="i">
            <div
              class="img-box"
              v-if="data.type === 'img'"
              @click="previewItem(i)"
            >
              <img :src="data.url" style="width: 100%; height: 100%" />
            </div>
            <div
              class="vide-con"
              v-if="data.type === 'video'"
              @click="previewItem(i)"
            >
              <video :src="data.video" :poster="data.video+'?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast'"/>
              <div class="mask" />
            </div>
          </div>
        </div>
        <div class="goods-con">
          <div class="goods-out flex-default">
            <img class="m-icon picture" :src="commentVo.goodsUrl" />
            <div class="content-desc goods-inside flex-default">
              <div class="name">
                {{ commentVo.goodsName }}
              </div>
              <div class="sku">
                {{ commentVo.list | getSkuStr }}
              </div>
              <div class="price">￥{{ commentVo.price }}</div>
            </div>
            <div class="buy-icon goods-inside flex-default">
              <div class="m-icon shopCar" @click="addShopCart" />
            </div>
          </div>
        </div>
      </div>
      <div class="comm-item reply-con" v-if="commentVo.replyContent">
        <div class="append-comment-con">
          <div class="title">
            <m-icon icon="icon-3dot" :size="12" />
            1条回复
          </div>
          <div class="header flex-default">
            <div
              class="avatar"
              :style="{ backgroundImage: 'url(' + shopData.shopImage + ')' }"
            />
            <div class="name">{{ shopData.shopName }}</div>
            <div class="time">{{ commentVo.updateTime | getTime }}</div>
          </div>
          <div class="content-text" style="margin-top: 14px">
            {{ commentVo.replyContent }}
          </div>
        </div>
      </div>
    </div>
    <div
      class="footer-btn"
      @click="addComment"
      v-if="commentVo.userId === accountInfo.userId && commentAppend === null"
    >
      写追评
    </div>
    <!-- <m-preview ref="Preview"></m-preview> -->
  </div>
</template>

<script>
import { mapState } from "vuex";
import { CommentMixin } from "@/mixins";
import { CommentStatus } from "@/enums";
// import MPreview from "@/pages/components/preview/preview.vue";
export default {
  mixins: [CommentMixin],
  //   components: { MPreview },
  data() {
    return {
      goodsId: "",
      commentId: "",
      commentVo: {},
      commentAppend: null,
      shopData: {},
    };
  },
  computed: {
    ...mapState(["accountInfo"]),
    getPrivewsList() {
      let arr = [];
      if (this.commentAppend && this.commentAppend.imagesJson) {
        let imgs = JSON.parse(this.commentAppend.imagesJson);
        for (let item of imgs) {
          arr.push({ type: "img", url: item });
        }
      }
      if (this.commentAppend && this.commentAppend.video) {
        arr.push({
          type: "video",
          url: this.commentAppend.video,
          video: this.commentAppend.video,
        });
      }
      return arr;
    },
  },
  mounted() {
    this.goodsId = this.$route.query.goodsId;
    this.commentId = this.$route.query.commentId;
    // this.merchantId=options.merchantId
    this.requestData();
  },
  methods: {
    requestShop() {
      this.$api({
        apiName: "getShop",
        postData: { merchantId: this.merchantId },
        success: (res) => {
          this.shopData = res;
        },
      });
    },
    requestData() {
      this.$api({
        apiName: "getcommentDetail",
        postData: { commentId: this.commentId },
        success: (res) => {
          try {
            this.commentVo = res.list[0].commentVo;
            this.merchantId = res.list[0].commentVo.merchantId;
            if (this.commentVo.replyContent) {
              this.requestShop();
            }
            this.commentAppend = res.list[0].commentAppend;
          } catch (e) {}
        },
        complete: () => {},
      });
    },
    addShopCart() {
      if (!this.checkLogin()) return;
      this.$showLoading();
      let params = {
        goodsId: this.goodsId,
        number: 1,
        skuId: this.commentVo.skuId,
        uid: this.accountInfo.userId,
      };
      this.$api({
        apiName: "addUserShoppingCart",
        postData: params,
        success: (res) => {
          this.$toast("添加成功");
        },
        fail: (err) => {
          this.$toast(err);
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
    addComment() {
      const { skuId, commentId } = this.commentVo;
      let query = { skuId, status: CommentStatus.YES, commentId };
      this.$router.push({ name: "release-comment", query });
    },
    previewItem(index) {
       this.$PreviewImage({
        sources:this.getPrivewsList,
        current:index
        })
    },
  },
};
</script>

<style lang="less">
.comment-details-con {
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  > div{
    width: 100%;
  }
  .footer-btn {
    flex-shrink: 0;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    text-align: center;
    background-color: #ffffff;
    color: #aeaeae;
    padding-bottom: 14px;
    border-top: 1px solid #aeaeae;
  }
  .comment-details {
    overflow: auto;
    flex-shrink: 1;
    .comm-item {
      padding: 11px 16px;
      margin-bottom: 10px;
      border-radius: 0px 0px 10px 10px;
      background-color: #ffffff;
      .header {
        align-items: center;
        margin-bottom: 6px;
        .avatar {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background-color: #aeaeae;
          margin-right: 8px;
        }
        .name {
          color: #140603;
          font-size: 14px;
          font-weight: bold;
          flex: 1;
        }
        .time {
          color: #aeaeae;
          font-size: 12px;
          font-weight: normal;
        }
      }
      .content-text {
        color: #140603;
        font-size: 14px;
        line-height: 20px;
      }
      .content-img {
        align-items: center;
        margin-bottom: 10px;
        .item {
          height: 90px;
          width: 90px;
          background-color: #d8d8d8;
          border-radius: 4px;
          margin-right: 5px;
        }
      }
      .star-sku {
        align-items: center;
        margin-bottom: 8px;
        height: 17px;
        > .star {
          position: relative;
          padding-right: 2px;
          margin-right: 8px;
          ::v-deep.star-fill {
            width: 14px !important;
            height: 14px !important;
          }
          &::after {
            content: "";
            width: 1px;
            height: 10px;
            display: block;
            background-color: #999999;
            position: absolute;
            top: 2px;
            right: 0;
          }
        }
        .sku {
          color: #aeaeae;
          font-size: 12px;
          line-height: 17px;
        }
      }
      .append-comment-con {
        margin-top: 20px;
        .title {
          font-size: 15px;
          color: #140603;
          line-height: 21px;
          .m-icon {
            margin-right: 8px;
          }
          margin-bottom: 8px;
        }
        .img-box {
          width: 100%;
          // background-color: #D8D8D8;
          border-radius: 10px;
          margin-top: 10px;
          ::v-deep uni-image > img {
            position: relative;
          }
          ::v-deep uni-image > div {
            position: absolute;
            height: 100%;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
          }
        }
        .vide-con {
          position: relative;
          margin-top: 10px;
          width: 100%;
          video {
            width: 100%;
            height: inherit;
            ::v-deep.uni-video-container {
              position: relative;
            }
            ::v-deep.uni-video-cover-duration {
              display: none;
            }
          }
          .mask {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
          }
        }
      }
      .goods-con {
        background-color: #ffffff;
        border-radius: 5px;
        height: 95px;
        padding: 5px 4px 4px;
        margin-top: 25px;
        margin-bottom: 5px;
        .goods-out {
          width: 100%;
          height: 100%;
          box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
          border-radius: 5px;
          padding: 9px 6px 10px 10px;
          .goods-inside {
            height: 67px;
          }
          > .m-icon {
            width: 67px;
            height: 67px;
            background-color: #d8d8d8;
            border-radius: 5px;
            flex-shrink: 0;
            object-fit: contain;
          }
          .content-desc {
            flex-direction: 1;
            width: calc(~"100% - 91px");
            margin: 0 6px;
            align-content: space-between;
            flex-wrap: wrap;
            .name,
            .sku,
            .price {
              width: 100%;
            }
            .name {
              font-size: 14px;
              line-height: 20px;
              color: #140603;
            }
            .sku {
              color: #aeaeae;
              font-size: 12px;
              line-height: 17px;
            }
            .price {
              font-size: 14px;
              line-height: 17px;
              color: #dd2e41;
            }
          }
          .buy-icon {
            align-items: flex-end;
            .m-icon {
              background-size: 100%;
              width: 24px;
              height: 24px;
              border-radius: 0;
              background-color: transparent;
              background-image: url(data:image/png;base64,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);
            }
          }
        }
      }
    }
    .reply-con {
      min-height: 290px;
      margin-bottom: 0;
      border-radius: 10px 10px 0px 0px;
      .append-comment-con {
        margin-top: 0;
      }
      .header {
        margin: 6px 0;
      }
    }
  }
}
</style>
