<template>
  <uni-popup ref="popup" type="center" background-color="#fff">
	  
    <view class="joinContent">
		<view class="title" v-if="title">
			{{title}}
		</view>
      <view class="joinHeader"  v-if="tipIcon">
        <view class="iconfont icon-exclamation" ></view>
      </view>
      <view class="joinCon">
        <view class="one">
          {{ content }}
        </view>
      </view>
      <view class="joinFotter" v-if="btnType == 'vertical'">
        <view @click="handleJoin" style="background-color: #FAFAFA;color: #333333;">
          {{ joinText }}
        </view>
        <view @click="handleContinue">
          {{ continueText }}
        </view>
      </view>
	  <view class="joinFotter horizontal" v-if="btnType == 'horizontal'">
	    <view @click="handleJoin" style="background-color: #FAFAFA;color: #333333;">
	      {{ joinText }}
	    </view>
	    <view @click="handleContinue">
	      {{ continueText }}
	    </view>
	  </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'PartnerTipPopup',
  props: {
	  title: {
	    type: String,
	  },
	  // vertical垂直排列，horizontal横向排列
	  btnType: { 
	    type: String,
		 default: 'vertical'
	  },
    // 弹窗内容
    content: {
      type: String,
      default: '您还未加盟为合伙人,分享后无法拿到收益'
    },
    // 加盟按钮文字
    joinText: {
      type: String,
      default: '我已知晓，继续分享'
    },
    // 继续按钮文字
    continueText: {
      type: String,
      default: '去加盟为合伙人'
    },
	// 是否展示icon
	tipIcon: {
	  type: Boolean,
	  default: true
	}
  },
  methods: {
    // 打开弹窗
    open() {
      this.$refs.popup.open()
    },
    // 关闭弹窗
    close() {
      this.$refs.popup.close()
    },
    // 点击继续
    handleJoin() {
      this.$emit('continue')
      this.close()
    },
    // 点击加盟
    handleContinue() {
      this.$emit('join')
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .uni-popup .uni-popup__wrapper{
		 margin: 0 !important;
		 border-radius: 30rpx;
	 }
.joinContent {
  width: 500rpx;
  border-radius: 30rpx;
  background-color: #ffff;
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  .title{
	  text-align: center;
	  width: 100%;
  }
  .joinHeader {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background: #FFC300;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
	.icon-exclamation{
		color: #fff;
		font-size: 30rpx;
	}
  }
  
  .joinCon {
    padding: 10rpx;
	box-sizing: border-box;
    .one {
      font-size: 28rpx;
      color: rgba(38, 41, 44, 1);
      text-align: left;
    }
    
    .two {
      color: rgba(145, 144, 148, 1);
      font-size: 26rpx;
      text-align: center;
      margin-top: 10rpx;
      margin-bottom: 20rpx;
    }
  }
  
  .joinFotter {
    width: 100%;
    color: #fff;
    display: flex;
    align-items: center;
	flex-direction: column;
    box-sizing: border-box;
    font-size: 26rpx;
    
    view {
	  width: 80%;
      background: rgba(54, 57, 169, 1);
      border-radius: 40rpx;
      padding: 20rpx;
	  text-align: center;
	  margin-top: 20rpx;
    }
  }
  .horizontal{
	  flex-direction: row;
	  justify-content: space-between;
	  view{
		 width: auto; 
		 border-radius:15rpx;
	  }
  }
}
</style>