<template>
  <!-- 一些功能暂定 -->
  <view class="">
    <view class="order__info" v-for="item in list" :key="item.id">
      <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">
        <view class="service">
          <view class="orderInfo" v-for="ele in item.goodsInfo" :key="ele.id">
            <image slot="icon" :src="ele.goodsPic" style="width: 150rpx; height: 150rpx" />
            <view>{{ ele.goodsName }}</view>
          </view>
        </view>

        <!-- <view class="description">
          <view class="description--title">汽车维修与保养</view>
          <view class="tipInfo">专业维修保界</view>
          <view class="description--text">服务描述……</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">{{ `￥${item.totalAmount}` || '--' }}</view>
        </view>
        <view class="computeFlex">
          <view>优惠金额</view>
          <view class="tipInfo" style="color: #df5f5f">{{ `￥${item.couponAmount}` || '--' }}</view>
        </view>
      </view>

      <view class="order__info--tip">
        <view class="tip-l">
          <view class="tipInfo"> 订单编号：{{ item.orderSn }}</view>
          <!-- <view class="tipInfo"> 交易快照：发生争议时，可作为判断依据</view> -->
          <view class="tipInfo"> 下单时间：{{ $u.timeFormat(item.createTime) }}</view>
        </view>
        <view class="tip-r">
          <view class="r-btn" v-if="typeStyle == 1" @click="handlerCloseOrder"> 关闭交易 </view>
        </view>
      </view>
    </view>
	<!-- list为空时 -->
	<view  style="margin-top: 40rpx" v-if="list.length === 0" >
		<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
	</view>
	
  </view>
</template>

<script>
  export default {
    data() {
      return {};
    },
    props: {
      typeStyle: {
        type: Number,
        default: 0,
      },
      list: {
        type: Array,
        default: [],
      },
    },
    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;
        position: relative;

        >text {
          font-size: 36rpx;
          color: #333;
        }

        .service {
          display: flex;
          width: 100%;
          overflow-x: auto;
          white-space: nowrap;

          .orderInfo {
            height: 200rpx;
            widows: 150rpx;
            padding: 10rpx;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 26rpx;
          }
        }

        .description {
          height: 200rpx;
          position: absolute;
          right: 0;
          top: 0;
          padding: 40rpx 20rpx 30rpx 20rpx;
          background-color: rgba($color: #fff, $alpha: 0.9);

          &--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-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>
