<template>
  <div class="un-comment-list-item">
    <div class="header flex-default">
      <div class="name">{{ merchantName }}</div>
      <m-icon icon="icon-more" :size="9" />
    </div>
    <div class="content flex-default">
      <img class="thumb" :src="data.thumb" />
      <div class="goods flex-default">
        <div class="spu">{{ data.name }}</div>
        <div class="sku">{{ skuLabel }}</div>
        <div class="opt flex-default">
          <van-button
            type="primary"
            plain
            size="small"
            v-show="showBtn"
            @click="handleClick"
          >
            {{ btnLabel }}
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { CommentStatus } from "@/enums";
export default {
  props: ["oid", "data", "i", "merchantName"],
  computed: {
    skuLabel() {
      if (this.data && this.data.propList) {
        return this.data.propList.map((p) => p.value).join(" + ");
      }
      return "";
    },
    btnLabel() {
      if (this.data.buyerState == CommentStatus.NO) {
        return "评价";
      } else if (this.data.buyerState == CommentStatus.YES) {
        return "追评";
      }
      return "";
    },
    showBtn() {
      return (
        this.data.buyerState == CommentStatus.NO ||
        this.data.buyerState == CommentStatus.YES
      );
    },
  },
  data() {
    return {};
  },
  methods: {
    handleClick() {
      let { skuId, buyerState: status, commentId } = this.data;
      let query = { oid, skuId, status, commentId, from: this.i };
      this.$router.push({ name: "release-comment", query });
    },
  },
};
</script>

<style lang="less">
.un-comment-list-item {
  margin-bottom: 5px;
  background: #ffffff;
  border-radius: 20px;
  padding: 15px;

  > .header {
    align-items: center;
    margin-bottom: 10px;
    .name {
      color: #140603;
      font-size: 13px;
      line-height: 15px;
      font-weight: bold;
      margin-right: 2px;
    }
  }
  > .content {
    > .thumb {
      height: 80px;
      width: 80px;
      border-radius: 4px;
      background-color: #d8d8d8;
      margin-right: 13px;
    }
    > .goods {
      flex: 1;
      flex-direction: column;
      padding-top: 2px;
      .spu {
        color: #140603;
        font-size: 13px;
        line-height: 17px;
        margin-bottom: 10px;
        flex: 1;
      }
      .sku {
        color: #72767d;
        font-size: 11px;
        line-height: 13px;
        margin-bottom: 2px;
      }
      .opt {
        justify-content: flex-end;
        height: 27px;
      }
    }
  }
}
</style>

