<template>
  <view class="item-box" v-for="(item,index) of props.dataList">
    <view class="time-state">
      <view style="color: #666666;">下单时间：{{ item.time }}</view>
      <view v-if="item.state === 0" style="color: #0129D3">等待接单</view>
      <view v-if="item.state === 1" style="color: #FF0000">订单进行中</view>
      <view v-if="item.state === 2" style="color: #666666">已完成</view>
    </view>
    <view class="tit-tip multi-line-omit">
      <view style="display: flex;align-items: center;margin-bottom: 44rpx;margin-top: 32rpx">
        <view style="width: 14rpx;height: 14rpx;border-radius: 7rpx;background-color: #7FAB29;margin-right: 16rpx"></view>
        <view style="color: #333333;font-size: 28rpx;">出发：渠道大厦</view>
      </view>
      <view style="display: flex;align-items: center;margin-bottom: 48rpx">
        <view style="width: 14rpx;height: 14rpx;border-radius: 7rpx;background-color: #0129D3;margin-right: 16rpx"></view>
        <view style="color: #333333;font-size: 28rpx;">到达：广州市越秀区环市西路159号</view>
      </view>
    </view>
    <view style="color: #F22727;margin-top: 20rpx">
      <span style="color: #333333;font-size: 28rpx;margin-right: 4rpx">订单总额</span>
      <span style="font-size: 28rpx;font-weight: 600;">￥</span>
      <span style="font-family: Bebas;font-weight: 400;font-size: 42rpx;">{{ item.q }}</span>
    </view>
    <view v-if="item.state === 0" class="item-btn">
      <up-button class="btn" size="small" color="#0129D3" shape="circle" type="primary" text="取消订单"></up-button>
    </view>
    <view v-if="item.state === 2" class="item-btn">
      <up-button class="btn" size="small" color="#0129D3" shape="circle" :plain="true" type="primary" text="申请售后"></up-button>
      <up-button class="btn" size="small" color="#0129D3" shape="circle" type="primary" text="评价"></up-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import {reactive,ref,defineProps} from 'vue';
import {onLoad, onShow} from '@dcloudio/uni-app'
const props = defineProps({
  dataList:{
    type:Array,
    default:()=>[
      {
        time: '2023/09/02 12:00',
        state: 0,
        text:'专版单张： -210*285-双铜纸[157克]-彩色-双面印-1000(张)-单面覆亮膜',
        q:'88.00'
      },
      {
        time: '2023/09/02 12:00',
        state: 1,
        text:'专版单张： -210*285-双铜纸[157克]-彩色-双面印-1000(张)-单面覆亮膜',
        q:'888.00'
      },
      {
        time: '2023/09/02 12:00',
        state: 2,
        text:'专版单张： -210*285-双铜纸[157克]-彩色-双面印-1000(张)-单面覆亮膜',
        q:'8888.00'
      },
    ]
  }
})
</script>

<style scoped lang="scss">
.item-box{
  width: 100%;
  padding: 32rpx;
  background-color: white;
  border-radius: 24rpx;
  margin-bottom: 32rpx;
  .time-state{
    font-weight: 400;
    font-size: 24rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18rpx;
  }
  .tit-tip {
    text-align: justify;
    font-size: 30rpx;
    font-weight: 400;
    color: #353635;
    //font-family: PingFang SC;
  }
  .item-btn{
    margin-top: 20rpx;
    display: flex;
    justify-content: flex-end;
    .btn{
      width: 25%;
      //margin: 0!important;
      margin: 0 0 0 18rpx !important;
    }
  }
}
</style>