<template>
  <view class="mask" v-if="dialogShow" @click="handleHide">
    <view class="content">
      <view class="bg">
        <view class="title">{{ dialogTitle }}</view>
        <rich-text
          class="text-[#4B4C50] text-[28rpx]"
          :nodes="dialogContent"
          :style="{
            textAlign: textAlign,
          }"
        ></rich-text>
      </view>
      <slot></slot>
      <view
        v-if="btnType == 1"
        class="bg-[#D6B184] text-[#24272A] text-center rounded-md h-[80rpx] leading-[80rpx] font-bold mt-[48rpx]"
        @click="handleHide"
        >确定</view
      >
      <view class="flex justify-between pt-44" v-if="btnType == 2">
        <view class="btn cancel-btn" @click="handleCancel">
          {{ CancelText }}</view
        >
        <view
          class="btn"
          :style="{
            background: backgroundColor,
            color: color,
          }"
          @click="handleConfirm"
        >
          {{ ConfirmText }}</view
        >
      </view>
      <!-- 登陆弹框 -->
      <view class="flex justify-between mt-[50rpx]" v-if="btnType == 3">
        <button
          class="w-[226rpx] h-[80rpx] rounded-xl text-[30rpx] font-bold text-center leading-[80rpx]"
          :style="{
            background: backgroundColor,
            color: color,
          }"
          open-type="getPhoneNumber"
          @getphonenumber="getUserPhone"
        >
          确认
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    dialogShow: {
      type: Boolean,
      default: false,
    },
    dialogTitle: {
      type: String,
      default: "",
    },
    dialogContent: {
      type: String,
      default: "",
    },
    btnType: {
      type: Number,
      default: 1,
    },
    CancelText: {
      type: String,
      default: "取消",
    },
    ConfirmText: {
      type: String,
      default: "确定",
    },
    backgroundColor: {
      type: String,
      default: "#1467FF",
    },
    color: {
      type: String,
      default: "#fff",
    },
    textAlign: {
      type: String,
      default: "left",
    },
  },
  data() {
    return {};
  },
  methods: {
    handleHide() {
      this.$emit("handleHide");
    },
    handleCancel() {
      this.$emit("handleCancel");
    },
    handleConfirm() {
      this.$emit("handleConfirm");
    },
    getUserPhone(e) {
      this.$emit("getUserPhone", e);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../meeting/common.scss";
.title {
  // text-[#202124] text-[30rpx] font-bold text-center mb-[32rpx]
  color: #23262b;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 32rpx;
}
.btn {
  width: 226rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-weight: 700;
  font-size: 30rpx;
  border-radius: 16rpx;
  box-sizing: border-box;
}
.cancel-btn {
  border: 4rpx solid #1467ff;
  color: #1467ff;
}
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 100002;

  .content {
    width: 600rpx;
    border-radius: 24rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 48rpx 60rpx 32rpx;
    // background-image: url(#{$uni-base-url}icon28.png);
    background-size: 100% 214rpx;
    background-position: top;
    background-repeat: no-repeat;
    margin: 0 auto;
    margin-top: 500rpx;
  }

  .borderColor {
    border: 2rpx solid #d6b184;
  }
}
</style>