<template>
  <!--底部分享弹窗-->
  <up-bottom-popup :show="popupShow">
    <view class="up-share">
      <view class="up-share-title">分享到</view>
      <view class="share-main" style="padding-right: 20upx">
        <view class="up-share-top" style="display: flex; align-items: center; justify-content: center">
          <view
            class="up-share-item"
            style="width: 50%"
            :class="[shareList[0].share.length - 1 === index ? 'up-item-last' : '']"
            v-for="(item, index) in shareList[0].share"
            :key="index"
            :data-index="index"
            @tap="sharbutton($event)"
          >
            <view class="up-share-icon" hover-class="up-hover" :hover-stay-time="150">
              <iconfont :className="item.icon" :color="item.color" :size="item.size ? item.size : 36" />
              <!-- <up-icon :name="item.icon" :color="item.color" :size="item.size?item.size:36"></up-icon> -->
            </view>
            <view class="up-share-text">{{ item.name }}</view>
          </view>
          <view class="up-empty">!</view>
        </view>
      </view>

      <view class="up-btn-cancle" @tap="popup">取消</view>
    </view>
  </up-bottom-popup>
  <!--底部分享弹窗-->
</template>

<script>
export default {
  name: 'fuiSharemodel',
  data() {
    return {
      popupShowstatus: false,
      shareList: [
        {
          share: [
            {
              name: '微信',
              icon: 'brandWeixin',
              color: '#80D640'
            }
            // , {
            // 	name: "海报",
            // 	icon: "icon-haibaofenxiang",
            // 	color: "#80D640",
            // 	size: 32
            // },
          ]
        }
      ]
    };
  },
  props: {
    //是否显示分享model
    popupShow: {
      type: Boolean,
      default: false
    },
    contentHeight: {
      type: Number,
      default: 0
    },
    //是否是tabbar页面
    hasTabbar: {
      type: Boolean,
      default: false
    }
    // shareList:{
    // 	type: Array,
    // default: () => {
    // 		return [];
    // 	}
    // }
  },
  created() {
    this.popupShowstatus = this.popupShow;
    console.log('当前状态', this.popupShow);
  },
  methods: {
    popup() {
      this.popupShow = !this.popupShow;
    },
    sharbutton(event) {
      console.log(event, event.currentTarget.dataset.index);
      this.$emit('sharbutton', event.currentTarget.dataset.index);
    }
  }
};
</script>

<style>
.share-main {
  min-height: 125rpx;
  padding-bottom: 120rpx;
}
.up-share {
  background: #e8e8e8;
  position: relative;
  padding-bottom: env(safe-area-inset-bottom);
}

.up-share-title {
  font-size: 26rpx;
  color: #7e7e7e;
  text-align: center;
  line-height: 26rpx;
  padding: 20rpx 0 50rpx 0;
}

.up-share-top,
.up-share-bottom {
  min-width: 101%;
  padding: 0 20rpx 0 30rpx;
  white-space: nowrap;
}

.up-mt {
  margin-top: 30rpx;
  padding-bottom: 150rpx;
}

.up-share-item {
  /* width: 126rpx;
		display: inline-block;
		margin-right: 24rpx; */
  text-align: center;
}

.up-item-last {
  margin: 0;
}

.up-empty {
  display: inline-block;
  width: 30rpx;
  visibility: hidden;
}

.up-share-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  height: 126rpx;
  width: 126rpx;
  border-radius: 32rpx;
  margin: 0 auto;
}

.up-share-text {
  font-size: 24rpx;
  color: #7e7e7e;
  line-height: 24rpx;
  padding: 20rpx 0;
  white-space: nowrap;
}

.up-btn-cancle {
  width: 100%;
  height: 100rpx;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #f6f6f6;
  font-size: 36rpx;
  color: #3e3e3e;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
}

.up-hover {
  background: rgba(0, 0, 0, 0.2);
}
</style>
