<template>
  <view v-if="show_pop" class="pop-com">
	<view class="mask"></view>
	<view :class="'popcon'+(showCancel?' popcon-has-cancel':'')">
		<view class="title PfScMedium">{{title}}</view>
		<view class="con over2 over4" v-html="content"></view>
		<view class="btn-wrapper flex">
			<view :class="'btn cancel btn1'+(!showCancel?'':' has-cancel')" hover-class="hover" @click="Cancel" v-if="showCancel">{{cancel}}</view>
			<view :class="'btn primary btn1'+(!showCancel?' no-cancel':' has-cancel')" hover-class="hover" @click="Confirm">{{confirm}}</view>
		</view>
	</view>
  </view>
</template>

<script>
export default {
  name: "pop",
  props: {
    showCancel: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    cancel: {
      type: String,
      default: "取消"
    },
    confirm: {
      type: String,
      default: "确认"
    },
    content: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      show_pop: false
    }
  },
  methods: {
    open() {
      this.show_pop = true;
    },
    close() {
      this.show_pop = false;
    },
    Confirm(e) {
      this.$emit("confirm", e);
      this.close();
    },
    Cancel(e) {
      this.$emit("cancel", e);
      this.close();
    },
  },
};
</script>

<style lang="scss" scoped>
	.pop-com{
		.mask{
			width: 100%;
			height: 100vh;
			background: rgba(0,0,0,0.27);
			z-index: 899;
			position: fixed;
			left: 0;
			top: 0;
		}
		.popcon{
			box-sizing: border-box;
			width: 650rpx;
			min-height: 404rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			position: fixed;
			z-index: 988;
			top:50%;
			left:50%;
			margin: -332rpx 0 0 -325rpx;
			padding: 50rpx 90rpx;
			&.popcon-has-cancel{
				padding: 50rpx 60rpx;
			}
		}
		.title{
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			letter-spacing: 1rpx;
			text-align: center;
			font-size: 36rpx;
			color: #000000;
			margin-bottom: 28rpx;
		}
		.con{
			width: 100%;
			min-height: 104rpx;
			overflow: hidden;
			font-size: 32rpx;
			color: #999999;
			line-height: 48rpx;
			word-break: break-all;
			text-align: center;
		}
		.popcon-has-cancel{
			.btn-wrapper{
				justify-content: space-between !important;
			}
		}
		.btn-wrapper{
			width: 100%;
			justify-content: center;
			margin-top: 52rpx;
			.no-cancel{
				width: 530rpx;
			}
			.has-cancel{
				width: 250rpx;
			}
		}
	}
</style>
