<template>
  <view v-if="isPop">
    <view class="pop-bg" @click="closeFunc"></view>
    <view class="pop-box">
      <view class="order-detail">
        <view class="d-e-c"
          ><u-icon
            @click="closeFunc"
            name="close"
            size="30rpx"
            color="#999"
          ></u-icon
        ></view>
        <view class="p-0-20 f32 fb tc">{{ $t("MY_ORD_5") }}</view>
        <!-- <view class="payload-box d-c d-a-s">
					<image class="payload-bg" src="/static/bg/order-bg.png" mode=""></image>
					<view class="d-s-c pr">
						<u-icon name="checkmark-circle" size="34rpx" color="#fff"></u-icon>
						<text class="white ml10">{{ detail.orderStatusVal }}</text>
					</view>
					<view class="white f24 pr" v-if="detail.orderStatus == 0 && payTime">请在{{ payTime }}内完成支付,否则订单将会被自动取消</view>
				</view> -->
        <!-- 		<view class="express-box d-b-c">
					<u-icon size="56rpx" name="/static/icon/order/express.png"></u-icon>
					<view class="flex-1 d-c d-a-s m-0-20">
						<view class="f24 gray3">共3个包裹，运送中</view>
						<view class="f20 gray9">邮政快递：71234567891</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view> -->
        <view
          class="product-box"
          v-if="serchStatus == 1 || serchStatus == 3 || serchStatus == 6"
        >
          <view class="product-title">{{ $t("w_0077") }}</view>
          <view class="product-list">
            <view
              v-for="(item, index) in detail.storeOutBiExtList"
              :key="index"
              class="product-item"
            >
              <image class="product-img" :src="item.cover" mode=""></image>
              <view class="product-info d-c d-b-s flex-1">
                <view class="text-ellipsis-2 f28 gray3 fb"
                  >{{ item.productName }}
                </view>
                <view class="f24">
                  <text class="">{{ item.specsName }}</text>
                </view>
                <view class="f24">
                  <text class="">{{ item.productCode }}</text>
                </view>
              </view>
              <view class="f24 gray3 ml20">X{{ item.quantity }}</view>
            </view>
          </view>
        </view>
        <view class="product-box" v-if="serchStatus == -1 || serchStatus == ''">
          <view class="product-title">{{ $t("w_0077") }}</view>
          <view class="product-list">
            <view
              v-for="(item, index) in detail.itemList"
              :key="index"
              class="product-item"
            >
              <image class="product-img" :src="item.cover" mode=""></image>
              <view class="product-info d-c d-b-s flex-1">
                <view class="text-ellipsis-2 f28 gray3"
                  >{{ item.productName }} {{ item.specsName }}
                </view>
                <view class="price-color f24">
                  {{ currencyIcon() }}
                  <text class="f32 fb">{{ formatNum(item.price) }}</text>
                </view>
              </view>
              <view class="f24 grayD ml20">X{{ item.quantity }}</view>
            </view>
          </view>
          <!-- <view class="d-b-s">
						<view style="width: 132rpx;" class="mr20 f28  domation">活动赠品</view>
						<view class="flex-1" style="line-height: 1.5;">
							<view class="d-b-c mb20">
								<view class="f28 gray3 text-ellipsis-2">海之圣超饱和富氢水杯（绿色</view>
								<view class="f24 grayD ml20">X1</view>
							</view>
							<view class="d-b-c mb20">
								<view class="f28 gray3 text-ellipsis-2">海之圣超饱和富氢水杯（绿色</view>
								<view class="f24 grayD ml20">X1</view>
							</view>
			
							<view class="d-b-c mb20">
								<view class="f28 gray3 text-ellipsis-2">海之圣超饱和富氢水杯（绿色</view>
								<view class="f24 grayD ml20">X1</view>
							</view>
						</view>
					</view> -->
        </view>
        <view
          class="product-box"
          v-if="serchStatus == 1 || serchStatus == 3 || serchStatus == 6"
        >
          <view class="d-b-c mb10">
            <text class="f24 gray9 mr20">{{ $t("MY_ORD_3") }}：</text>
            <text class="f24 gray3">{{ detail.payTime }}</text>
          </view>
          <view class="d-b-c mb10" v-if="serchStatus == 6 || serchStatus == 1">
            <text class="f24 gray9 mr20">{{ $t("fn_170") }}：</text>
            <text class="f24 gray3">{{ detail.storeName }}</text>
          </view>
          <view class="d-b-c mb10" >
            <text class="f24 gray9 mr20">{{ $t("MN_F_T_1204") }}：</text>
            <text class="f24 gray3">{{ detail.bonusRatio || 0 }}</text>
          </view>
        </view>
        <view class="product-box" v-if="serchStatus == -1 || serchStatus == ''">
          <view class="d-b-c mb10">
            <text class="f24 gray9 mr20">{{ $t("MY_ORD_6") }}：</text>
            <text class="f24 gray3">{{ formatNum(detail.orderAmount) }}</text>
          </view>
          <view class="d-b-c mb10" v-if="detail.orderType != 30">
            <text class="f24 gray9 mr20">{{ $t("MY_ORD_16") }}(PV)：</text>
            <text class="f24 gray3">{{ formatNum(detail.orderAchieve) }}</text>
          </view>
          <view class="d-b-c mb10" v-if="opento">
            <text class="f24 gray9 mr20">{{ $t("MN_F_T_1204") }}：</text>
            <text class="f24 gray3">{{ detail.bonusRatio || 0 }}</text>
          </view>
          <!-- <view class="d-b-c mb10" v-if="detail.orderType != 30">
            <text class="f24 gray9 mr20">{{ $t("MY_ORD_16") }}(BV)：</text>
            <text class="f24 gray3">{{
              formatNum(detail.orderAssAchieve)
            }}</text>
          </view> -->
          <!-- 	<view class="remark-box">
						<text class="f26 gray6 mr20">备注：</text>
						<text class="f26 gray3">zxczxczxczczczcxzxc</text>
					</view> -->
        </view>
        <view
          class="product-box border-t"
          style="padding-bottom: 0"
          v-if="
            detail.deliveryWay != 2 && (serchStatus == -1 || serchStatus == '')
          "
        >
          <view class="product-title">{{ $t("w_0065") }}</view>
          <view class="address-box d-b-c">
            <!-- <u-icon width="33rpx" height="40rpx" name="/static/icon/order/address.png"></u-icon> -->
            <view class="flex-1 d-c d-a-s">
              <view class="f28 mb10 gray3">
                <text class="mr20">{{ detail.recName }}</text>
                <text>{{ detail.recPhone }}</text>
              </view>
              <view class="f24 gray9"
                >{{ detail.recProvince }}{{ detail.recCity
                }}{{ detail.address }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: 0,
      orderData: {},
      payTime: "",
    };
  },
  props: ["detail", "isPop", "serchStatus","opento"],
  methods: {
    closeFunc() {
      this.$emit("close");
    },
    getPayTime(time) {
      // 转换为式分秒
      let h = parseInt((time / 60 / 60) % 24);
      h = h < 10 ? "0" + h : h;
      let m = parseInt((time / 60) % 60);
      m = m < 10 ? "0" + m : m;
      let s = parseInt(time % 60);
      s = s < 10 ? "0" + s : s;
      // 作为返回值返回
      return h + ":" + m + ":" + s;
    },
  },
};
</script>

<style lang="scss">
.pop-box {
  width: 80%;
  box-sizing: border-box;
  position: fixed;
  top: 15%;
  // bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #ffffff;
  border-radius: 15rpx;
  z-index: 100;
}

.order-detail {
  padding: 23rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.payload-box {
  padding: 30rpx 22rpx;
  position: relative;
  height: 137rpx;
  box-sizing: border-box;
  margin: 0 auto;
  margin-bottom: 20rpx;

  .payload-bg {
    width: 564rpx;
    height: 137rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
}

.express-box {
  width: 563;
  height: 124rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 0 auto;
  margin-bottom: 20rpx;
  box-sizing: border-box;
  // padding: 34rpx 21rpx;
  padding: 0 21rpx;

  .icon.icon-jiantou {
    font-size: 32rpx;
    color: #999;
  }
}

.address-box {
  width: 563;
  // height: 124rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 0 auto;
  box-sizing: border-box;
  // padding: 34rpx 21rpx;
  padding: 20rpx 0;
}

.product-box {
  padding: 26rpx 20rpx 0 20rpx;
  background: #ffffff;
  // border-radius: 20rpx;
  margin-bottom: 20rpx;

  .product-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 5rpx;
    font-weight: bold;
  }

  .product-item {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    .product-img {
      width: 132rpx;
      height: 132rpx;
      border-radius: 10rpx;
      display: block;
      margin-right: 20rpx;
    }

    .product-info {
      height: 132rpx;
    }
  }

  .product-item:last-child {
    border: none;
  }
}

.remark-box {
  width: 563;
  box-sizing: border-box;
  padding: 26rpx 20rpx 26rpx 20rpx;
  margin-bottom: 20rpx;
  background: #ffffff;
  border-radius: 20rpx;
  word-break: break-all;
  line-height: 1.5;
}

.order-btns-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 96rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 23rpx;
  background-color: #ffffff;
  z-index: 20;
  border-top: 1rpx solid #eee;
}

.order-btn {
  min-width: 152rpx;
  padding: 0 28rpx;
  box-sizing: border-box;
  height: 56rpx;
  border-radius: 30rpx;
  line-height: 56rpx;
  background: #fb3024;
  font-size: 26rpx;
  font-weight: 400;
  color: #ffffff;
  border: 1rpx solid #fb3024;
  text-align: center;
  margin-left: 23rpx;
}

.order-btn.border-btn {
  border: 1rpx solid #dddddd;
  color: #333333;
  background: none;
}

.pop-bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 98;
  background-color: rgba(0, 0, 0, 0.6);
}
</style>
