<template>
  <uni-popup
    ref="popupRefs"
    type="center"
    :animation="true"
    :is-mask-click="true"
  >
    <view class="popup_data__package">
      <view class="popup_data__package__headers">
        <view class="popup_data__package__headers--title">{{ title }}</view>
        <uni-icons
          type="closeempty"
          class="custom_icons"
          size="30"
          @click="handleClose"
        ></uni-icons>
      </view>

      <view class="popup_data__package__content">
        <view class="detail-send-order-product">
          <view class="detail-send-order-product__wrapper">
            <template v-if="isShouHou">
               <view
              class="detail-send-order-content"
              v-for="(items, indexs) in orderProduct"
              :key="indexs"
            >
              <view class="detail-send-order-content-left">
                <view
                  class="detail-send-order-content-left-img"
                  v-if="items.product"
                >
                  <image
                    v-if="items.product.cart_info.product.image"
                    :src="items.product.cart_info.product.image"
                    mode="widthFix"
                  ></image>
                  <text v-else>暂无照片</text>
                </view>
              </view>
              <view class="detail-send-order-content-middle">
                <view
                  class="detail-send-order-content-middle-top"
                  v-if="items.product"
                >
                  {{ items.product.cart_info.product.store_name }}
                </view>
                <view
                  class="detail-send-order-content-middle-top-bot"
                  v-if="items.product.cart_info"
                >
                  {{ items.product.cart_info.productAttr.sku || "" }}
                </view>
              </view>
              <view class="detail-send-order-content-right">
                <view class="detail-send-order-yi-in-neibu-right-in">
                  ×{{ items.product.product_num || 0 }}
                </view>
              </view>
            </view>
            </template>
           
           <template v-else>
             <view
              class="detail-send-order-content"
              v-for="(items, indexs) in orderProduct"
              :key="indexs"
            >
              <view class="detail-send-order-content-left">
                <view
                  class="detail-send-order-content-left-img"
                  v-if="items.cart_info"
                >
                  <image
                    v-if="items.cart_info.product.image"
                    :src="items.cart_info.product.image"
                    mode="widthFix"
                  ></image>
                  <text v-else>暂无照片</text>
                </view>
              </view>
              <view class="detail-send-order-content-middle">
                <view
                  class="detail-send-order-content-middle-top"
                  v-if="items.cart_info"
                >
                  {{ items.cart_info.product.store_name }}
                </view>
                <view
                  class="detail-send-order-content-middle-top-bot"
                  v-if="items.cart_info"
                >
                  {{ items.cart_info.productAttr.sku || "" }}
                </view>
              </view>
              <view class="detail-send-order-content-right">
                <view class="detail-send-order-yi-in-neibu-right-in">
                  ×{{ items.product_num || 0 }}
                </view>
              </view>
            </view>
           </template>
         
         
         
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
//包裹内商品 弹窗 商品信息
export default {
  props: {
    title: {
      type: String,
      default: "包裹内商品",
    },
    value: {
      type: [String, Number],
      default: "",
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          props: "text",
          value: "value",
        };
      },
    },
    isShouHou:{
      type:Boolean,
      default:false
    },
    orderProduct: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      selectId: "",
      //   orderProduct: [
      //     {
      //       image:
      //         "https://cdn.bjtdba.com/chuxubao/images/2025-02-10/8198d202502101042344757.png"
      //     },
      // {
      //   image:
      //     "https://cdn.bjtdba.com/chuxubao/images/2025-02-10/8198d202502101042344757.png"
      // },
      // {
      //   image:
      //     "https://cdn.bjtdba.com/chuxubao/images/2025-02-10/8198d202502101042344757.png"
      // }, {
      //       image:
      //         "https://cdn.bjtdba.com/chuxubao/images/2025-02-10/8198d202502101042344757.png"
      //     }
      //   ]
    };
  },
  watch: {
    value: {
      handler(val) {
        this.selectId = val;
      },
      immediate: true,
    },
  },
  mounted() {
    this.selectId = this.value;
  },
  methods: {
    handleTabs(item, index) {
      const data = item.value || index;
      if (this.selectId === data) {
        this.selectId = "";
      } else {
        this.selectId = item.value || index;
      }
      this.$emit("update:value", this.selectId);
      const itemObj = this.selectId !== "" ? item : {};
      this.$emit("tabs", { selected: this.selectId, item: itemObj, index });
      this.handleClose();
    },
    handleClose() {
      this.close();
    },
    open(type = "bottom") {
      this.$refs.popupRefs.open(type);
    },
    close() {
      this.$refs.popupRefs.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.popup_data__package {
  padding: 26rpx 30rpx;
  min-height: 750rpx;
  max-height: 850rpx;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #ffffff;
  // background: linear-gradient(180deg, #e5edff 0%, #ffffff 100%);
  border-radius: 24rpx 24rpx 0 0;
  &__headers {
    // height: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // border-bottom: 2rpx solid #e5e5e5;
    // background: linear-gradient(180deg, #e5edff 0%, #ffffff 100%);
    padding-bottom: 15rpx;
    &--title {
      flex: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      justify-content: space-between;
      font-size: 32rpx;
      font-weight: 600;
      text-align: center;
    }
    .custom_icons {
      flex-shrink: 0;
    }
  }
  &__content {
    // border: 2rpx solid #f00;
    max-height: 690rpx;
    overflow-y: auto;
    margin-bottom: 0rpx;
    .detail-send-order-product {
      width: calc(100% - 54rpx);
      margin: 0 26rpx 30rpx;
      &__wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        .detail-send-order-content {
          width: 100%;
          display: flex;
          align-items: center;
          padding: 26rpx 0;
          gap: 20rpx;
          border-bottom: 2rpx solid #e5e5e5;
          &:last-child {
            border-bottom: 0;
          }
          .detail-send-order-content-left {
            height: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            &-img {
              width: 158rpx;
              height: 158rpx;
              background-color: #eee;
              overflow: hidden;
              border-radius: 10rpx;
              flex-shrink: 0;
              image {
                width: 100%;
                height: auto;
              }
            }
          }
        }
      }
      .detail-send-order-content-middle-top-bot {
        font-weight: 400;
        font-size: 22rpx;
        color: #666666;
      }
      .detail-send-order-content-middle {
        height: 100%;
        flex: 1;
        &-top {
          width: 100%;
          font-weight: 400;
          color: #333333;
          font-size: 28rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          justify-content: space-between;
        }
      }

      .detail-send-order-content-right {
        .detail-send-order-yi-in-neibu-right-in {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          text-align: center;
          padding-top: 5rpx;
        }
      }
    }
  }
}
</style>
