<template>
  <view class="">
    <view class="order__info" v-for="index in 2" :key="index">
      <view class="order__info--phone">
        <view>
          <view style="font-size: 35rpx; margin-bottom: 20rpx">
            182***4342
            <text class="tipInfo" style="margin-left: 10rpx">(预留手机)</text>
          </view>
          <view class="tipInfo">近90天第16次下单</view>
        </view>
        <u-icon name="phone" color="#2979ff" size="28" @click="handlerMakePhone"></u-icon>
      </view>

      <view class="order__info--pay">
        <text>顾客待付款</text>
        <view class="service">
          <image
            slot="icon"
            src="@/static/QR57a.jpg"
            style="width: 200rpx; height: 200rpx"
          />
          <view class="description">
            <view class="description--title">汽车维修与保养</view>
            <view class="tipInfo">专业维修保界</view>
            <view class="description--text">服务描述……</view>
          </view>
        </view>
      </view>

      <view class="order__info--compute">
        <view class="computeFlex">
          <view>发票信息</view>
          <view class="tipInfo">不需要</view>
        </view>
        <view class="computeFlex">
          <view>技术服务费</view>
          <view class="tipInfo">￥15</view>
        </view>
        <view class="computeFlex">
          <view>本单预计收入</view>
          <view class="tipInfo" style="color: #DF5F5F;">￥723.7</view>
        </view>
      </view>

      <view class="order__info--tip">
        <view class="tip-l">
          <view class="tipInfo"> 订单编号：12232964103521日</view>
          <view class="tipInfo"> 交易快照：发生争议时，可作为判断依据</view>
          <view class="tipInfo"> 下单时间：12-0318：03</view>
        </view>
        <view class="tip-r">
          <view class="r-btn" v-if="typeStyle == 1" @click="handlerCloseOrder">
            关闭交易
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default{
    data(){
      return{

      }
    },
    props:{
      "typeStyle":{
        type:Number,
        default:0
      }
    },
    watch: {
      typeStyle(newValue,oldValue){
        console.log('newValue',newValue);
      }
    },
    methods:{
      // 点击拨打电话
      handlerMakePhone(){
        uni.makePhoneCall({
        	phoneNumber: '114' //仅为示例
        });
      },
      // 删除订单
      handlerCloseOrder(){
        uni.showToast({
        	title: '么的',
          icon:'none'
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
.order {
  &__info {
    margin: 20rpx 0;
    background-color: $uni-bg-color;
    padding: $uni-bg-padding-sm;
    &--phone {
      display: flex;
      justify-content: space-between;
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #ececec;
    }

    &--pay {
      margin: 20rpx 0;
      > text {
        font-size: 36rpx;
        color: #333;
      }

      .service {
        display: flex;
        margin-top: 20rpx;
        .description {
          margin-left: 20rpx;
          &--title {
            font-size: 34rpx;
            font-weight: 700;
            margin-bottom: 10rpx;
          }

          &--text {
            font-size: 30rpx;
            color: #333;
          }
        }
      }
    }

    &--compute {
      margin-top: 40rpx;
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #ececec;
      .computeFlex {
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
      }
    }

    &--tip {
      margin-top: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tip-l{

      }
      .tip-r{
        .r-btn{
          padding: 10rpx 20rpx;
          border-radius: 20rpx;
          border: 2rpx solid #FF9480;
          color: #FF9480;
          font-size:26rpx;
          background-color: #fff;
        }
      }
    }
  }
}

.tipInfo {
  font-size: 24rpx;
  color: #666;
}
</style>
