<template>
<view>
  <view class="orderItem" v-for="(item,index) in shops" :key="index" @click="todetail(item.id)">
    <view class="title">
      <view class="orderno">订单编号：{{item.order_no}}</view>
      <view class="state">{{item.state}}</view>
    </view>
    <view v-for="(i,j) in item.goods_list" :key="j">
       <view class="shopinfo" >
      <img :src="i.imgpaththumb" alt class="shoppic" />
      <view class="right">
        <view class="shopname">{{i.goods_name}}</view>
        <view class="pri">
          <view>共{{i.goods_num}}件</view>
          <view class="money">￥{{i.price_z}}</view>
        </view>
      </view>
    </view>
    
    </view>
   <view class="btns">
      <view class="btn" v-if="item.state=='待评价'" @click="pingjia(item.id)">前去评价</view>
      <view class="btn" v-if="item.state=='待收货'" @click="shouhuo(item.id)">确定收货</view>
      <view class="btn" v-if="item.state=='待付款'">微信支付</view>
    </view>
  </view>
</view>

</template>

<script>
import requestP from "../../static/js/request.js";
export default {
  name: "orderItem",
  data() {
    return {
      status: ""
    };
  },
  props: {
    orderno: {
      type: String
    },
    state: {
      type: String
    },
    shops:{
      type:Array
    }
  },
  methods:{
    pingjia(e){
      uni.navigateTo({
        url:"/pages/comment/comment?orderid="+e
      })
    },
    todetail(e){
      console.log("去详情",e)
       uni.navigateTo({
        url:"/pages/order-detail/order-detail?id="+e
      })
    },
    shouhuo(e){
      console.log(e)
      requestP.requestP({
        url:"order/shouhuo",
        data:{
          order_id:e
        }
      }).then((res)=>{
          uni.showToast({
              title: "收货成功",
              icon: "success",
              duration: 2000
            });
            this.state=e.kind
    console.log(this.state)
    requestP.requestP({
      url:"order/get_order_list",
    }).then((res)=>{
      console.log(res.data.data)
      this.orderlist=res.data.data  
    })
     requestP.requestP({
      url:"order/get_order_list",
      data:{
        type:0
      }
    }).then((res)=>{
      console.log(res.data.data)
      this.orderlist0=res.data.data  
    })
    requestP.requestP({
      url:"order/get_order_list",
      data:{
        type:1
      }
    }).then((res)=>{
      console.log(res.data.data)
      this.orderlist1=res.data.data  
    })
    requestP.requestP({
      url:"order/get_order_list",
      data:{
        type:2
      }
    }).then((res)=>{
      console.log(res.data.data)
      this.orderlist2=res.data.data  
    })
      })
    }
  }
};
</script>

<style lang="scss">
.orderItem {
  background-color: white;
  .title {
    width: 695upx;
    height: 80upx;
    line-height: 80upx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .orderno {
      font-size: 22upx;
      color: #999999;
      // line-height: 51upx;
    }
    .state {
      font-size: 26upx;
      color: #f57426;
    }
  }
  .shopinfo {
    width: 685upx;
    height: 169upx;
    border-top: 1upx solid #eeeeee;
    border-bottom: 1upx solid #eeeeee;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    // margin-top: upx;
    .shoppic {
      width: 149upx;
      height: 149upx;
      margin: auto 0;
    }
    .right {
      color: #999999;
      font-size: 22upx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .shopname {
        width: 513upx;
        line-height: 40upx;
      }
      .pri {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10upx;
        .money {
          color: #a50b18;
          font-size: 32upx;
        }
      }
    }
  }
  .btns {
    height: 78upx;
    font-size: 26upx;
    margin-top: 8upx;
    .btn {
      width: 158upx;
      height: 59upx;
      text-align: center;
      line-height: 59upx;
      color: #a50b18;
      border: 1upx solid rgba(165, 11, 24, 1);
      float: right;
      margin-right: 32upx;
      margin-top: 8upx;
    }
  }
}
</style>