<template>
  <div class="comment-result-con">
    <div class="header flex-default" :style="headerStyle">
      <m-icon icon="icon-back-light" :size="18" @click="goBack" />
    </div>
    <div class="result-scroll" @scroll="handleScroll">
      <div class="scroll-content">
        <div class="result-con flex-default">
          <div class="result flex-default">
            <m-icon icon="icon-order-success" :size="20" />
            <span class="title">评价成功</span>
          </div>
          <span class="adv">我们会为您提供更优质的商品及服务</span>
          <div class="opt flex-default">
            <van-button
              class="opt-btn"
              plain
              size="small"
              @click="goHome"
              round
            >
              返回首页
            </van-button>
            <van-button
              class="opt-btn"
              plain
              size="small"
              @click="toDetail"
              round
            >
              查看评价
            </van-button>
          </div>
        </div>
        <div class="credit flex-default">
          <div class="logo" />
          <div class="content">
            <div class="title" @click="getReward">领取积分</div>
            <div class="desc">
              恭喜获得
              {{ rewardRule.evaluationRefund }}
              积分，坚持评价有机会获取更多奖励
            </div>
          </div>
          <van-button
            class="go-btn"
            size="small"
            @click="getReward"
            :disabled="getDisabled"
            round
            type="primary"
          >
            {{ getDisabled ? "已领取" : "去领取" }}
          </van-button>
        </div>
        <div class="tip">心情不错~ 继续评价赚积分</div>
        <div class="more-comm" v-show="list.length > 0">
          <div
            class="goods-item"
            v-for="(item, index) of list"
            :key="`goods-item-${index}`"
          >
            <div class="header flex-default">
              <text class="name">{{ item.shopName }}</text>
              <m-icon icon="more" :size="10" />
            </div>
            <div class="content flex-default">
              <img class="thumb" :src="item.thumb" />
              <div class="info">
                <div class="name">
                  {{ item.name }}
                </div>
                <div class="label">
                  评价最多可获得
                  <font class="num">{{ rewardRule.evaluationRefund }}</font>
                  积分
                </div>
                <div class="opt flex-default">
                  <van-button
                    type="primary"
                    round
                    plain
                    size="small"
                    @click="toComment(item)"
                  >
                    去评价
                  </van-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { CommentStatus, CommentStatusObj } from "@/enums";
export default {
  data() {
    return {
      commentId: "",
      getDisabled: false,
      scrollTop: 0,
      list: [],
    };
  },
  computed: {
    ...mapState(["rewardRule"]),
    headerStyle() {
      let opacity = this.scrollTop > 100 ? 1 : this.scrollTop / 100;
      if (this.scrollTop < 10) {
        opacity = 0;
      }
      return { "background-color": `rgba(221, 46, 65, ${opacity})` };
    },
  },
  methods: {
    toDetail() {
      let query = { commentId: this.commentId };
      this.$router.push({name: "comment-detail", query})
    },
    getReward() {
      this.$showLoading();
      this.$api({
        apiName: "getCommentReward",
        postData: this.commentId,
        success: () => {
          this.getDisabled = true;
          this.$toast("领取成功");
        },
        complete: this.$hideLoading,
      });
    },
    requestCommList() {
      this.$showLoading();
      this.$api({
        apiName: "getUnCommentOrderList",
        success: (res) => {
          this.list = res;
        },
        complete: this.$hideLoading,
      });
    },
    handleScroll(e) {
      this.scrollTop = e.target.scrollTop;
    },
    toComment(item) {
      let { skuId, oid } = item;
      let query = { oid, skuId, status: CommentStatus.NO };
      this.$router.push({ name: "release-comment", query });
    },
  },
  mounted() {
    this.commentId = this.$route.params.commentId;
    this.requestCommList();
  },
};
</script>

<style lang="less">
.comment-result-con {
  height: 100%;
  background: #f5f7fb;
  > .header {
    align-items: center;
    padding: 8px 13px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }
  .result-scroll {
    height: 100%;
    overflow-y: auto;
  }
  .result-scroll > .scroll-content {
    > .result-con {
      height: 170px;
      background: linear-gradient(270deg, #f07c5b 0%, #dd2e41 100%);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      .result {
        align-items: center;
        margin-bottom: 10px;
        .title {
          font-size: 19px;
          font-weight: bold;
          margin-left: 5px;
        }
      }
      .adv {
        font-size: 12px;
        margin-bottom: 18px;
      }
      .opt .opt-btn {
        height: 31px;
        padding: 0 10px;
        background: transparent;
        border: 1px solid #ffffff;
        color: #ffffff;
        &:nth-of-type(1) {
          margin-right: 20px;
        }
      }
    }
    > .credit {
      margin-top: -15px;
      background: #ffffff;
      border-radius: 10px;
      padding: 16px;
      margin-bottom: 15px;
      align-items: center;
      > .logo {
        background: url("~@/assets/img/credit.png") no-repeat;
        background-size: 100%;
        width: 35px;
        height: 35px;
      }
      > .content {
        flex: 1;
        margin-left: 10px;
        .title {
          color: #1c1c1c;
          font-weight: bold;
          font-size: 13px;
          line-height: 15px;
          margin-bottom: 3px;
        }
        .desc {
          color: #aeaeae;
          font-size: 10px;
          line-height: 12px;
        }
      }
      > .go-btn {
        height: 28px;
        padding: 0 14px;
      }
    }
    > .tip {
      text-align: center;
      color: #aeaeae;
      font-size: 12px;
      line-height: 14px;
      margin-bottom: 15px;
    }
    > .more-comm {
      background: #ffffff;
      border-radius: 10px;
      padding: 16px;
      > .goods-item {
        padding-bottom: 15px;
        box-shadow: 0px 1px 0px 0px rgba(241, 241, 241, 1);
        margin-bottom: 15px;
        .header {
          align-items: center;
          margin-bottom: 10px;
        }
        .header > .name {
          font-size: 13px;
          color: #140603;
          font-weight: bold;
          margin-right: 3px;
        }
        .content {
          align-items: center;
        }
        .content > .thumb {
          height: 82px;
          width: 82px;
          border-radius: 4px;
          background-color: #d8d8d8;
          margin-right: 13px;
        }
        .content > .info {
          flex: 1;
          .name {
            font-size: 12px;
            color: #140603;
            line-height: 16px;
            margin-bottom: 10px;
          }
          .label {
            font-size: 10px;
            line-height: 12px;
            color: #72767d;
          }
          .label > .num {
            color: rgba(221, 46, 65, 1);
          }

          .opt {
            justify-content: flex-end;
            > button {
              height: 25px;
              padding: 0 14px;
            }
          }
        }
      }
    }
  }
}
</style>