<template>
  <view class="item">
    <view class="flex-between orderNum">
      <text>订单号：{{ data.OrderNo }}</text>
      <text style="color: #446dfc">{{ data.OrderStatusName }}</text>
    </view>
    <view class="flex-between remarks" v-if="data.Remark">
      商家备注：{{ data.Remark }}
    </view>
    <view class="consigneeInfo">
      <text style="margin-right: 40rpx">{{ data.Consignee }}</text>
      <text style="margin-right: 20rpx">{{ data.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"
      v-for="(item, index) in data.DetailList"
      :key="index"
    >
      <view class="goodsImg">
        <image :src="item.CoverImage" mode="aspectFill" class="img" />
      </view>
      <view class="goodsBox">
        <view class="goodsName">{{ item.GoodsName }}</view>
        <view class="weight">规格：{{getSpecificationsStr(item.SpecificationList)}}</view>
        <view class="flex-between">
          <text>x{{ item.Number }}</text>
          <text>￥{{ item.SmallShopsCostPrice }}</text>
        </view>
      </view>
    </view>
    <view class="priceBox">
      <text>合计：</text>
      <text style="color: #111">￥{{ data.Income }}</text>
      <text v-if="data.FreightMoney > 0"
        >（含运费￥{{ data.FreightMoney }}）</text
      >
    </view>
    <view class="btnBox">
      <button class="btn" @click="modal = true">备注</button>
      <button class="btn">拒绝</button>
      <button class="btn">同意</button>
    </view>
    <u-modal
      v-model="modal"
      :show-cancel-button="false"
      @confirm="modal = false"
      contentSlot
      title="备注"
    >
      <input type="number" class="input" placeholder="(限15字)" :maxlength="15" v-model="data.Remark" />
    </u-modal>
  </view>
</template>
<script>
export default {
  props: {
    data: Object,
  },
  data() {
    return {
      modal: false,
    };
  },
  methods: {
    call(num) {
      uni.makePhoneCall({
        phoneNumber: num,
      });
    },
    getSpecificationsStr(arr){
      let str=arr.map((e)=>{return e}).toString()
      return str
    }
  },
  mounted() {
    console.log(54, this.data);
  },
};
</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: 26rpx;
    color: #333;
    margin-bottom: 20rpx;
  }
  .remarks {
    font-size: 26rpx;
    color: #333;
    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;
    .img {
      width: 100%;
      height: 100%;
      border-radius: 6rpx;
    }
  }
  .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%;
    }
  }
  .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: 30rpx;
      border: 2rpx solid #f7f7f7;
      margin: 0 0 0 30rpx;
      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: 26rpx;
  margin: 40rpx auto;
}
</style>