<template>
  <view class="commit-box">
    <u-empty text="没有找到未评价的商品信息" font-size="36" mode="list" v-if="g.length == 0 && !loading"></u-empty>
    <view
      v-if="g.length > 0&& !loading"
      style="height: 100vh;width: 100vw;overflow: hidden;padding:0 0 10px 0;"
    >
      <scroll-view
        :scroll-y="true"
        @scrolltolower="lower"
        :enable-back-to-top="true"
        :enable-flex="true"
        :scroll-top="scrollTop"
        @scroll="scroll"
        style="height: 100%; padding-bottom: 0px;"
      >
        <view class="good-list">
          <view class="good-item" v-for="(x, i) in g" :key="i">
            <image class="good-pic" :src="x.CoverImage" mode="aspectFill" />
            <view class="right-box">
              <view class="good-info">
                <view class="good-name">{{x.GoodsName}}</view>
                <view class="good-attr">
                  <u-tag
                    v-for="(y, yi) in x.SpecificationList"
                    :key="yi"
                    size="mini"
                    :text="y"
                    type="warning"
                  />
                </view>
              </view>
              <view class="op-box">
                <u-button
                  size="mini"
                  ripple
                  plain
                  shape="circle"
                  :custom-style="{color:mc,borderColor:mc,width:60+'px'}"
                  @click="goCommit(x)"
                >评价</u-button>
              </view>
            </view>
          </view>
        </view>
        <u-loadmore
          v-if="showLoading"
          :status="status"
          :load-text="loadText"
          :font-size="24"
          :margin-top="20"
          :margin-bottom="20"
          bg-color="#F5F5F5"
        />
      </scroll-view>
    </view>
	<coupon
	  v-if="showCoupons"
	  :coupon-message="couponMessage"
	  :msgtype="msgType"
	  @goLook="goLook"
	  @closeBtn="closeBtn"
	></coupon>
  </view>
</template>

<script>
	import coupon from "@/components/coupons/coupons";
export default {
	components: {
	  coupon
	},
  data() {
    return {
      pageTitle: "评价中心",
      loading: false,
      g: [],
      showLoading: false,
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多评价商品了",
      },
      status: "loadmore",
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      mc: "",
      secondary: "",
      msg: {
        pageIndex: 1,
        pageSize: 10,
        IsComment: 2,
        GoodsName: "",
        OrderNo: "",
		OrderClassify:1
      },
      page_count: 0,
      isover: false,
	  couponMessage: "",//弹出优惠券的内容
	  showCoupons: false,
	  msgType:1,//类型
    };
  },
  onShow() {
    this.msg.pageIndex = 1;
    this.g = [];
    this.init();
    
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
    this.mc = this.$uiConfig.mainColor;
    this.secondary = this.$uiConfig.secondary;
  },
  methods: {
    scroll(e) {
      this.old.scrollTop = e.detail.scrollTop;
    },
    goCommit(x) {
      let msg = {
        GoodsId: x.GoodsId,
        OrderDetailId: x.OrderDetailId,
        GoodsName: x.GoodsName,
        CoverImage: x.CoverImage,
		OrderId: x.OrderId
      };
      uni.navigateTo({
        url:
          "/pages/guidecar/order-commit-detail?param=" +
          encodeURIComponent(JSON.stringify(msg)),
        fail: function (e) {
          console.log(e);
        },
      });
    },
    goTop(e) {
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(function () {
        this.scrollTop = 0;
      });
    },
    init() {
      this.isover = false;
      this.loading = true;
      this.showLoading = this.msg.pageIndex != 1;
      this.request2(
        {
          url: "/api/AppletOrder/GetAppletGoodsWaitCommentPageList",
          data: this.msg,
        },
        (res) => {
			this.loading = false;
          this.isloading = false;
          if (res.resultCode == 1) {
            this.g = this.g.concat(res.data.pageData);
            this.page_count = res.data.pageCount;
            if (this.page_count == 1) {
              this.isover = true;
              this.status = "nomore";
            } else {
              this.status = "loadmore";
            }
          }
          uni.hideNavigationBarLoading();
        }
      );
    },
    lower(e) {
      if (this.msg.pageIndex < this.page_count) {
        this.status = "loading";
        this.msg.pageIndex++;
        this.init();
      } else {
        this.isover = true;
        this.status = "nomore";
      }
    },
	getReceive(couponMessage,msgType){
		console.log(couponMessage,msgType)
		setTimeout(()=>{
			this.couponMessage = '获取'+couponMessage+'积分';
			this.msgType = msgType;
			this.showCoupons = true;
		},500)
		
	},
	goLook() {
	  this.showCoupons = true;
	  uni.navigateTo({
	    url: "/pages/user-center/integral-detail/integral-detail",
	  });
	},
	closeBtn() {
	  this.showCoupons = false;
	},
  },
};
</script>

<style>
.commit-box {
  background: #faf8f9;
  height: 100vh;
  position: relative;
}
.commit-box .quick {
  right: 50rpx;
  bottom: 50rpx;
  position: absolute;
}

.commit-box .quick .item {
  background: #fff;
  border: 1px solid #aaa;
  height: 90rpx;
  width: 90rpx;
  color: #333;
  border-radius: 90rpx;
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.commit-box .good-list {
}
.commit-box .good-list .good-item {
  margin-top: 10px;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  display: flex;
}
.commit-box .good-list .good-item .good-pic {
  width: 200rpx;
  height: 200rpx;
  margin-right: 15px;
  border-radius: 5px;
}
.commit-box .good-list .good-item .right-box {
  width: 1px;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 200rpx;
}
.commit-box .good-list .good-item .right-box .good-info {
  flex: 1;
  width: 100%;
  height: 1px;
}
.commit-box .good-list .good-item .right-box .op-box {
  text-align: right;
  height: 25px;
}
.commit-box .good-list .good-item .right-box .good-info .good-name {
  font-size: 28rpx;
  color: #333;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 5px;
}
.commit-box .good-list .good-item .right-box .good-info .good-attr {
  text-align: left;
}
</style>