<template>
  <uni-popup 
	ref="popup" 
	type="center" 
	background-color="#fff"
	:mask-click="maskClick"
  >
    <view class="joinContent">
      <view class="joinHeader">
        <view 
			class="iconfont commonIcon" 
			:class="icon"
			:style="{fontSize:iconSize}"
		>
		</view>
      </view>
      <view class="joinCon">
        <view class="one">
          {{ content }}
        </view>
		<view 
			class="two" 
			v-if="twoContent"
			:style="{color:fontColor}"
		>
		  {{ twoContent }}
		</view>
      </view>
      <view class="joinFotter">
		  <view 
			v-if="showCanel"
			@click="handleCancel" 
			style="background-color: #FAFAFA;color: #333333;"
		>
		    {{ cancelText }}
		  </view>
		  <view @click="handleContinue">
		    {{ continueText }}
		  </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'everyJoinPopup',
  props: {
    // 弹窗内容
    content: {
      type: String,
      default: '您已加盟为合伙人，无需重复加盟'
    },
	icon: {
	  type: String,
	  default: 'icon-redgantanhao'
	},
	iconSize: {
	  type: String,
	  default: '50rpx'
	},
	twoContent:{
		type: String,
	},
    // 继续按钮文字
    continueText: {
      type: String,
      default: '前往首页'
    },
    // 暂不操作按钮文字
    cancelText: {
      type: String,
      default: '暂不操作，继续浏览'
    },
	// 文字颜色
	fontColor: {
	  type: String,
	},
	// 默认点击蒙层可以关闭弹窗
	maskClick: {
	  type: Boolean,
	  default: true
	},
	showCanel: {
	  type: Boolean,
	  default: false
	}
  },
  methods: {
    // 打开弹窗
    open() {
      this.$refs.popup.open()
    },
    // 关闭弹窗
    close() {
      this.$refs.popup.close()
    },
    // 点击加盟
    handleJoin() {
      this.$emit('join')
      this.close()
    },
    // 点击继续
    handleContinue() {
      this.$emit('continue',1)
      this.close()
    },
	// 继续浏览
	handleCancel(){
		this.$emit('continue',2)
		this.close()
	}
  }
}
</script>

<style lang="scss" scoped>
.joinContent {
  width: 500rpx;
  border-radius: 30rpx;
  background-color: #ffff;
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  
  .joinHeader {
    // width: 60rpx;
    // height: 60rpx;
    // border-radius: 50%;
    // background: #FFC300;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
	.commonIcon{
		color: #FFC300;
		font-size: 30rpx;
	}
  }
  
  .joinCon {
    display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
    .one {
      font-size: 29rpx;
      color: rgba(38, 41, 44, 1);
	  font-weight: 500;
    }
    
    .two {
      font-size: 26rpx;
	  text-align: left;
      margin-top: 10rpx;
      margin-bottom: 20rpx;
    }
  }
  
  .joinFotter {
    width: 100%;
    color: #fff;
    display: flex;
    align-items: center;
	flex-direction: column;
    box-sizing: border-box;
    padding: 10rpx 0;
    font-size: 26rpx;
    
    view {
	  width: 90%;
      background: rgba(54, 57, 169, 1);
      border-radius: 40rpx;
      padding:20rpx;
	  text-align: center;
	  margin-top: 20rpx;
    }
  }
}
</style>