<template>
  <view class="shop-item">
    <view class="item-title" @click="navTo">
      <view>wxo12335656455532232666</view>
      <view>待付款</view>
    </view>
    <view class="item-body" @click="navTo">
      <image class="image" src="../../../static/logo.png"></image>
      <view class="body-content">
        <view>
          <view class="title">
            <view>黄牛肉20kg</view>
            <view>¥10.00</view>
          </view>
          <view class="tips">
            <view>我不吃牛肉</view>
            <view>x5</view>
          </view>
        </view>
        <view class="all">共5件商品, 总金额 <text>¥20.30</text> </view>
      </view>
    </view>
    <view v-if="type==1" class="item-btn">
      <view style="width: 80px;"><up-button size="small" plain color="#989898" shape="circle">取消订单</up-button></view>
      <view style="width: 80px;"><up-button size="small" plain color="#20B128" shape="circle">立即支付</up-button></view>
    </view>
    <view v-if="type==2||type==0" class="item-btn">
      <view style="width: 80px;"><up-button size="small" plain color="#989898" shape="circle">申请售后</up-button></view>
      <view style="width: 80px;"><up-button size="small" plain color="#20B128" shape="circle">确认收货</up-button></view>
      <view style="width: 80px;"><up-button size="small" plain color="#20B128" shape="circle">再次购买</up-button></view>
    </view>
    <view v-if="type==3" class="item-close">
      <view class="title">
        <view class="type">退款申请中</view>
        <view>等待商家处理</view>
      </view>
      <up-icon name="arrow-right"></up-icon>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  type:{
    type: Number,
    default: 0
  }
})

const navTo = ()=>{
  uni.navigateTo({
    url: '/pagesOrder/detail/detail?type=1'
  })
}
</script>

<style lang="scss">
  
  .shop-item{
    width: 710rpx;
    height: 340rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 14rpx;
    padding: 20rpx;
    box-sizing: border-box;
    .item-title{
      display: flex;
      justify-content: space-between;
    }
    .item-body{
      display: flex;
      justify-content: space-between;
      margin: 20rpx 0;
      .image{
        width: 160rpx;
        height: 160rpx;
        margin-right: 20rpx;
      }
      .body-content{
        width: 490rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #989898;
        
        .title{
          display: flex;
          justify-content: space-between;
          font-size: 28rpx;
          color: #444;
        }
        .tips{
          display: flex;
          justify-content: space-between;
          font-size: 24rpx;
          margin-top: 10rpx;
        }
        .all{
          align-self: flex-end;
          font-size: 26rpx;
          text{
            color: #F55726;
          }
        }
      }
    }
    .item-btn{
      display: flex;
      justify-content: flex-end;
      view{
        width: 80rpx;
        margin-left: 20rpx;
      }
    }
    .item-close{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #F6F6F6;
      padding: 15rpx;
      border-radius: 14rpx;
      
      .title{
        display: flex;
        .type{
          font-weight: 600;
          margin-right: 20rpx;
        }
      }
    }
  }
</style>