<template>
  <uni-popup
    ref="popup_detail"
    type="bottom"
    mask-background-color="rgba(0,0,0,0.8)"
    :is-mask-click="true"
  >
    <view class="popup-img-detail">
      <image
        class="close"
        src="@/assets/icon/icon-close-dark.png"
        @click="close"
      >
      </image>
      <text class="title">{{ title }}</text>
      <text class="desc">图片仅供参考，请以实物为准</text>
      <view class="popup-img-detail-content">
        <image
          v-for="item in list"
          :key="item"
          class="img"
          :src="item"
          mode="widthFix"
        ></image>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  data() {
    return {
      title: "商品详情",
      list: [],
    };
  },

  methods: {
    open(data) {
      this.title = data.title || "商品详情";
      this.list = data.list;
      this.$refs.popup_detail.open();
    },
    close() {
      this.$refs.popup_detail.close();
    },
  },
};
</script>

<style lang="scss">
.popup-img-detail {
  padding: 32rpx 24rpx 64rpx;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  height: 80vh;
  .title {
    display: block;
    min-height: 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #505050;
    line-height: 44rpx;
    padding-right: 80rpx;
  }
  .desc {
    display: block;
    height: 34rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #9496a5;
    line-height: 34rpx;
    margin-top: 8rpx;
  }
  .popup-img-detail-content {
    margin-top: 24rpx;
    flex: 1;
    overflow-y: auto;
    .img {
      display: block;
      width: 100%;
    }
  }
}
.close {
  width: 32rpx;
  height: 32rpx;
  position: absolute;
  right: 24rpx;
  top: 24rpx;
}
</style>
