<template>
  <view class="item">
    <view class="flex-between orderNum">
      <text>订单号：{{ data.ReOrderNo }}</text>
      <text style="color: #446dfc">{{ data.ReOrderStatusName }}</text>
    </view>
    <view class="flex-between remarks" v-if="data.ReRemark">
      备注：{{ data.ReRemark }}
    </view>
    <view class="consigneeInfo">
      <text style="margin-right: 40rpx">{{ data.OrderModel.Consignee }}</text>
      <text style="margin-right: 20rpx">{{ data.OrderModel.Mobile }}</text>
      <view
        class="flex-between"
        style="color: #446dfc"
        @click="call(data.Mobile)"
      >
        <u-icon name="phone-circle-o" style="margin-right: 10rpx"></u-icon>
        联系收货人
      </view>
    </view>
    <view class="flex-between goodsInfo">
      <view class="goodsImg">
        <image
          :src="data.OrderDetailModel.CoverImagePath"
          mode="aspectFill"
          class="img"
        />
        <text v-if="data.Type == 1" class="reType">退货退款</text>
        <text v-if="data.Type == 2" class="reType">换货</text>
      </view>
      <view class="goodsBox">
        <view class="goodsName">{{ data.OrderDetailModel.GoodsName }}</view>
        <view class="weight"
          >规格：{{
            getSpecificationsStr(data.OrderDetailModel.SpecificationList)
          }}</view
        >
        <view class="flex-between">
          <text style="color: #808080">x{{ data.ReNumber }}</text>
          <text>￥{{ data.Income }}</text>
        </view>
      </view>
    </view>
    <view class="priceBox">
      <text>实付金额</text>
      <text style="color: #111; margin: 0 4rpx; fond-size: 26rpx"
        >￥{{ data.Income.toFixed(2) }}</text
      >
    </view>
        <view class="priceBox">
      <text>申请退款</text>
      <text style="color: #111; margin: 0 4rpx; fond-size: 26rpx"
        >￥{{ data.Refund.toFixed(2) }}</text
      >
    </view>
        <view class="priceBox">
      <text>实际退款</text>
      <text style="color: #111; margin: 0 4rpx; fond-size: 26rpx"
        >￥{{data.RefundActual!=null ? data.RefundActual.toFixed(2):0.00}}</text
      >
    </view>
    
    <view class="btnBox">
      <button class="btn" v-if="item.ReOrderStatus==1" @click="pending(2)">
        拒绝
      </button>
      <button class="btn" v-if="item.ReOrderStatus==1" @click="pending(1)">
        同意
      </button>
    </view>

    <!-- 待处理 -->
    <u-modal
      v-model="pendModal"
      :show-cancel-button="true"
      @confirm="pendingForm"
      contentSlot
      title="备注"
    >
      <textarea class="textarea" v-model="pendMsg.Remark" />
    </u-modal>
  </view>
</template>
<script>
export default {
  props: {
    data: Object,
    orderType: Number,
  },
  data() {
    return {
      modal: false,
      exitMsg: {
        OrderId: 0,
        Type: 1,
        Remark: "",
      },
      // 待处理
      pendMsg: {
        OrderId: 0,
        Type: 1,
        Remark: 0,
      },
      pendModal: false,
    };
  },
  methods: {
    jumpPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
    //打电话
    call(num) {
      uni.makePhoneCall({
        phoneNumber: num,
      });
    },
    getSpecificationsStr(arr = []) {
      let str = arr
        .map((e) => {
          return e;
        })
        .toString();
      return str;
    },
    //确认收货
    ConfirmReceipt() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "是否确认收货?",
        success: function (res) {
          if (res.confirm) {
           
          }
        },
      });
    },
   

  },
  created() {
    this.exitMsg.Remark = this.data?.Remark;
    this.exitMsg.OrderId = this.data?.OrderId;
  },
};
</script>
<style lang="scss" scoped>
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item {
  width: 700rpx;
  //   height: 480rpx;
  background-color: #fff;
  box-sizing: border-box;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 20rpx auto;
  .orderNum {
    font-size: 24rpx;
    color: #111;
    margin-bottom: 20rpx;
  }
  .remarks {
    font-size: 24rpx;
    color: #111;
    margin-bottom: 20rpx;
  }
  .consigneeInfo {
    width: 100%;
    height: 70rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    background-color: #f7f7f7;
    font-size: 24rpx;
    border-radius: 6rpx;
    margin-bottom: 20rpx;
  }
  .goodsInfo {
    margin-bottom: 30rpx;
  }
  .goodsImg {
    width: 160rpx;
    height: 160rpx;
    border-radius: 6rpx;
    overflow: hidden;
    box-shadow: 0rpx 0rpx 10rpx 0px rgba(36, 36, 36, 0.2);
    margin-right: 20rpx;
    position: relative;
    .img {
      width: 100%;
      height: 100%;
      border-radius: 6rpx;
    }
    .reType {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 160rpx;
      height: 40rpx;
      background-color: #446dfc;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 22rpx;
    }
  }
  .goodsBox {
    width: 480rpx;
    height: 160rpx;
    font-size: 24rpx;
    color: #333;
    .goodsName {
      height: 45%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }
    .weight {
      height: 35%;
      color: #808080;
    }
  }
  .priceBox {
    text-align: right;
    color: #808080;
    font-size: 24rpx;
    margin-bottom: 30rpx;
  }
  .btnBox {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .btn {
      //   width: 90rpx;
      height: 50rpx;
      border-radius: 25rpx;
      border: 2rpx solid #f7f7f7;
      margin: 0 0 0 10rpx;
      padding: 0 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22rpx;
      color: #111;
    }
  }
}
.input {
  width: 80%;
  height: 80rpx;
  border-radius: 10rpx;
  background-color: #f7f7f7;
  padding: 0 30rpx;
  font-size: 24rpx;
  margin: 20rpx auto;
}
.textarea {
  width: 80%;
  // height: 80rpx;
  border-radius: 10rpx;
  background-color: #f7f7f7;
  padding: 30rpx;
  font-size: 24rpx;
  margin: 20rpx auto;
}
</style>