<template>
  <view class="container">
    <view class="top-box">
      <view class="top-rate">
        <view class="title">评价得分：</view>
        <u-rate count="5" v-model="queryParams.score"></u-rate>
      </view>
      <view class="content-box">
        <view class="title">评价内容：</view>
        <view class="comment-box">
          <u--textarea v-model="queryParams.remark" count placeholder="请输入评价内容" ></u--textarea>
        </view>
      </view>
    </view>
    <button class="btn" @click="handlerContextSumbit">提交</button>
  </view>
</template>

<script>
  import { goodsCommentsAdd  } from "@/api/client/business.js"
  export default {
    data(){
      return{
        queryParams:{
          score:0,//评价打分
          remark:'',//评价内容
          goodsId: "", // 商品id
          orderId: "", // 订单id
          merchantId: "", // 商家id
        },
      }
    },
    onLoad(option){
	  let { goodsList , orderList } = option
      this.queryParams.orderId = goodsList.orderId
      this.queryParams.goodsId = goodsList.goodsId
      this.queryParams.merchantId = orderList.merchantId
    },
    methods:{
      // 测试提交
      handlerContextSumbit(){
        goodsCommentsAdd(this.queryParams).then(res=>{
          if(res.code === 'OK'){
            uni.showToast({
              title:"评论成功",
              icon:'none'
            })
            setTimeout(()=>{
              uni.navigateBack(-1)
            },1500)
          }else{
            uni.showToast({
              title:res.msg,
              icon:'none'
            })
          }
        })
      },
    }
  }
</script>

<style lang="scss" scope>
  .container{
    padding: 20rpx;
    .top-box{
      padding: 20rpx;
      border-radius: 20rpx;
      box-shadow: 0 5rpx 12rpx 0 rgba(0,0,0,0.2);
      background-color: #fff;
      .top-rate{
        display: flex;
        align-items: center;
      }
      .content-box{
        margin-top: 20rpx;
        .comment-box{
          margin-top: 20rpx;
        }
      }
      .title{
        color: #000;
        font-size: 28rpx;
      }
    }

    .btn{
      margin-top: 20rpx;
      background-color: #F57F32;
      color: #fff;
      font-size:28rpx;
      border-radius: 20rpx;
      box-shadow: 0 5rpx 10rpx 0 rgba(245,127,50, 0.8);
    }
  }
</style>
