<template>
  <view class="evaluate-con">
		<view class="header">
			<cu-custom :isBack="true" :isCenter="true">
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
				<block slot="content">
					<view class="tab-title">商品评价</view>
				</block>
			</cu-custom>
		</view>
		
		<view class="content-box">
			<view class="goodsStyle acea-row row-between" v-if="orderCon.productInfo">
			  <view class="pictrue">
			    <image :src="orderCon.productInfo.attrInfo.image || orderCon.productInfo.image" class="image" />
			  </view>
			  <view class="text">
			    <view class="name line1">{{ orderCon.productInfo.storeName }}</view>
					<view class="sku-box acea-row">
						<view class="sku">{{orderCon.productInfo.attrInfo.sku}}</view>
					</view>
			    <view class="money acea-row row-between-wrapper">
			      <view>￥{{ orderCon.productInfo.price }}</view>
			      <view class="num">x{{ orderCon.cartNum }}</view>
			    </view>
			  </view>
			</view>
			
			<view class="score-box">
			  <view class="score-item acea-row row-middle" v-for="(item, scoreListIndexw) in scoreList" :key="scoreListIndexw" >
			    <view>{{ item.name }}</view>
			    <view class="starsList acea-row">
			      <view class="item" @click="stars(starsIndexn, scoreListIndexw)" v-for="(itemn, starsIndexn) in item.stars" :key="starsIndexn">
			      	<image v-if="item.index >= starsIndexn" src="../../../static/images/star-light.png" mode=""></image>
			      	<image v-else src="../../../static/images/star-border-light.png" mode=""></image>
			      </view>
			    </view>
			  </view>
			</view>
			
			<view class="textarea-box acea-row">
				<image src="@/static/images/write-icon.png" mode=""></image>
				<textarea class="textarea"
					placeholder="为其他小伙伴提供更有帮助性的评价吧！"
					placeholder-style="font-size:24rpx;color: #999999;line-height:32rpx;font-weight:400;"
					v-model="expect"
				></textarea>
			</view>
			
			<view class="pictrue-list" :style="uploadPictures.length>0?'':'padding-bottom: 20rpx;'">
				<view class="acea-row row-middle" v-if="uploadPictures.length > 0">
					<view class="pictrue" v-for="(item, uploadPicturesIndex) in uploadPictures" :key="uploadPicturesIndex" >
						<image class="image" :src="item" mode="aspectFill"/>
						<image class="close" src="../../../static/images/close.png" mode="" @click="uploadPictures.splice(uploadPicturesIndex, 1)"></image>
					</view>
					<view class="pictrue uploadBnt acea-row row-center-wrapper row-column" @tap="chooseImage">
						<image class="camera" src="../../../static/images/camera.png" mode=""></image>
						<view>添加图片</view>
					</view>
				</view>
			  <view class="no-picture acea-row row-column row-center-wrapper" v-else @tap="chooseImage">
			  	<image class="camera" src="../../../static/images/camera.png" mode=""></image>
			  	<view>添加图片</view>
			  </view>
			</view>
			
		</view>
		
		<view class="evaluateBnt" @click="submit">提交</view>
		
    <!-- <view class="goodsStyle acea-row row-between" v-if="orderCon.productInfo">
      <view class="pictrue">
        <image :src="orderCon.productInfo.image" class="image" />
      </view>
      <view class="text acea-row row-between">
        <view class="name line2">{{ orderCon.productInfo.storeName }}</view>
        <view class="money">
          <view>￥{{ orderCon.productInfo.price }}</view>
          <view class="num">x{{ orderCon.cartNum }}</view>
        </view>
      </view>
    </view> -->
    <!-- <view class="score">
      <view
        class="item acea-row row-middle"
        v-for="(item, scoreListIndexw) in scoreList"
        :key="scoreListIndexw"
      >
        <view>{{ item.name }}</view>
        <view class="starsList">
          <text
            @click="stars(starsIndexn, scoreListIndexw)"
            v-for="(itemn, starsIndexn) in item.stars"
            :key="starsIndexn"
            class="iconfont"
            :class="item.index >= starsIndexn ? 'icon-shitixing font-color-red': 'icon-kongxinxing'"
          ></text>
        </view>
        <text class="evaluate">{{item.index === -1 ? "" : item.index + 1 + "分"}}</text>
      </view>
      <view class="textarea">
        <textarea placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~" v-model="expect"></textarea>
        <view class="list acea-row row-middle">
          <view
            class="pictrue"
            v-for="(item, uploadPicturesIndex) in uploadPictures"
            :key="uploadPicturesIndex"
          >
            <image :src="item" />
            <text
              class="iconfont icon-guanbi1 font-color-red"
              @click="uploadPictures.splice(uploadPicturesIndex, 1)"
            ></text>
          </view>
          <view class="pictrue uploadBnt acea-row row-center-wrapper row-column" @tap="chooseImage">
            <text class="iconfont icon-icon25201"></text>
            <view>上传图片</view>
          </view>
        </view>
      </view>
      <view class="evaluateBnt bg-color-red" @click="submit">立即评价</view>
    </view> -->
  </view>
</template>
<script>
import { postOrderProduct, postOrderComment } from "@/api/store";
import { trim, chooseImage } from "@/utils";
import { VUE_APP_API_URL } from "@/config";
import { required } from "@/utils/validate";
import { validatorDefaultCatch } from "@/utils/dialog";

const NAME = "GoodsEvaluate";

export default {
  name: NAME,
  components: {
    // VueCoreImageUpload
  },
  props: {},
  data: function() {
    return {
      orderCon: {
        cartProduct: {
          productInfo: {}
        }
      },
      scoreList: [
				// {
				//   name: "评分",
				//   stars: ["", "", "", "", ""],
				//   index: -1
				// },
        {
          name: "商品评分",
          stars: ["", "", "", "", ""],
          index: -1
        },
        {
          name: "服务评分",
          stars: ["", "", "", "", ""],
          index: -1
        }
      ],
      uploadPictures: [],
      expect: "",
      unique: ""
    };
  },
  mounted: function() {
    this.unique = this.$yroute.query.id;
    this.getOrderProduct();
  },
  watch: {
    $yroute(n) {
      if (n.name === NAME && this.unique !== n.params.id) {
        this.unique = n.params.id;
        this.$set(this.scoreList[0], "index", -1);
        this.$set(this.scoreList[1], "index", -1);
        this.expect = "";
        this.uploadPictures = [];
        this.getOrderProduct();
      }
    }
  },
  methods: {
    getOrderProduct: function() {
      let that = this,
        unique = that.unique;
      postOrderProduct(unique).then(res => {
        that.orderCon = res.data;
      });
    },
    stars: function(indexn, indexw) {
      this.scoreList[indexw].index = indexn;
    },
    chooseImage() {
      chooseImage(img => {
        this.uploadPictures.push(img);
      });
    },
    async submit() {
      const expect = trim(this.expect),
        product_score =
          this.scoreList[0].index + 1 === 0 ? "" : this.scoreList[0].index + 1,
        service_score =
          this.scoreList[1].index + 1 === 0 ? "" : this.scoreList[1].index + 1;
      try {
        await this.$validator({
          product_score: [
            required("请给商品评分", {
              type: "number"
            })
          ],
          service_score: [
            required("请给服务评分", {
              type: "number"
            })
          ]
        }).validate({
          product_score,
          service_score
        });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      postOrderComment({
        productScore: product_score,
        serviceScore: service_score,
        unique: this.unique,
        pics: this.uploadPictures.join(","),
        comment: expect
      })
        .then(() => {
          uni.showToast({
            title: "评价成功",
            icon: "success",
            duration: 2000
          });

          // ? 回跳到上一页
          this.$yrouter.back();

          // ? 默认跳转到详情页
          // this.$yrouter.push({
          // 	path: "/pages/order/OrderDetails/index",
          // 	query: {
          // 		id: this.orderCon.orderId
          // 	}
          // });

          // ? 可选重定向到详情页，这时左上角会有一个返回首页的图标
          // this.$yrouter.reLaunch({
          // 	path: "/pages/home/index",
          // });
        })
        .catch(err => {
          uni.showToast({
            title:
              err.msg || err.response.data.msg || err.response.data.message,
            icon: "none",
            duration: 2000
          });
        });
    }
  }
};
</script>
<style scoped lang="less">
	.header {
		.tab-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 42rpx;
		}
		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.content-box {
		margin: 0rpx 32rpx 46rpx;
		padding: 20rpx 20rpx 0rpx;
		width: 686rpx;
		// height: 340px;
		background: #F5F6F8;
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		.sku-box {
			padding: 18rpx 0rpx;
			.sku {
				padding: 0rpx 16rpx;
				height: 46rpx;
				background: #E3E3E3;
				border-radius: 8rpx;
				font-size: 20rpx;
				line-height: 46rpx;
			}
		}
	}
	
	.score-box {
		.score-item {
			padding-bottom: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #3A3A3C;
			line-height: 34rpx;
			.starsList {
				padding-left: 20rpx;
				.item {
					width: 48rpx;
					height: 48rpx;
					margin-right: 24rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	
	.textarea-box {
		width: 646rpx;
		height: 170rpx;
		box-shadow: inset 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.15);
		border-radius: 16rpx;
		position: relative;
		padding: 16rpx;
		margin-bottom: 20rpx;
		image {
			width: 32rpx;
			height: 32rpx;
		}
		.textarea {
			width: 582rpx;
			height: 100%;
			font-size: 24rpx;
			color: #3A3A3C;
			font-weight: 500;
			line-height: 32rpx;
		}
	}
	
	.pictrue-list {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 26rpx;
		.pictrue {
			width: 204rpx;
			height: 204rpx;
			background: #F1F1F1;
			border-radius: 16rpx;
			margin-right: 17rpx;
			margin-bottom: 20rpx;
			position: relative;
			.image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
			.close {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: 10rpx;
				right: 10rpx;
			}
		}
		.pictrue:nth-child(3n) {
			margin-right: 0rpx;
		}
		.no-picture {
			width: 646rpx;
			height: 204rpx;
			background: #F1F1F1;
			border-radius: 16rpx;
		}
		.camera {
			width: 104rpx;
			height: 104rpx;
		}
	}
	
	.evaluateBnt {
		margin: 0rpx 32rpx;
		width: 686rpx;
		height: 70rpx;
		background: #2DB5AE;
		border-radius: 16rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #F5F6F8;
		line-height: 70rpx;
		text-align: center;
	}
	
.evaluate-con .score .textarea .list .pictrue.uploadBnt {
  border: 1px solid #ddd;
}
</style>