<template>
  <view @tap="itemClick('mask')" class="mask-content">
    <view class="dialog-content" @tap.stop="">
      <view
        class="head-content"
        v-if="info.title"
        :style="info.content ? '' : 'min-height:90rpx;padding: 30rpx'"
      >
        <text>{{ info.title }}</text>
      </view>
      <scroll-view class="main-content" scroll-y v-if="info.content">
        <view class="info-content">
          <text>{{ info.content }}</text>
        </view>
      </scroll-view>
      <view class="foot-content alert" v-if="'alert' == info.type">
        <view
          class="btn active"
          hover-class="active1"
          hover-start-time="0"
          hover-stay-time="0"
          @tap.stop="itemClick('confirm')"
        >
          {{ info.confirmText }}
        </view>
      </view>
      <view class="foot-content confirm" v-if="'confirm' == info.type">
        <view
          class="btn cancel"
          hover-class="active1"
          hover-start-time="0"
          hover-stay-time="0"
          @tap="itemClick('cancel')"
        >
          {{ info.cancelText }}
        </view>
        <view
          class="btn active"
          hover-class="active1"
          hover-start-time="0"
          hover-stay-time="0"
          @tap.stop="itemClick('confirm')"
        >
          {{ info.confirmText }}
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onBackPress, onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

interface InfoType {
  type: string
  title: string
  content: string
  cancelText: string
  confirmText: string
  isMaskClose: string
}
const info = ref<InfoType>({
  type: 'alert', //alert:单按钮,confirm:双按钮
  title: '', //
  content: '',
  cancelText: '取消',
  confirmText: '确定',
  isMaskClose: '1', //1点击遮罩层关闭弹窗
})
let isReturn = false
onBackPress((options: any) => {
  options.isReturn = isReturn
  if (options.from == 'backbutton' && options.isReturn == 0) {
    return true
  } else if (options.from == 'navigateBack' && options.isReturn == 1) {
    return false
  }
})

onLoad((options) => {
  isReturn = options!.isReturn
  info.value.type = options!.type
  info.value.title = options!.title
  info.value.content = options!.content
  info.value.cancelText = options!.cancelText
  info.value.confirmText = options!.confirmText
  info.value.isMaskClose = options!.isMaskClose
})

function itemClick(type: string) {
  if (type == 'mask' && info.value.isMaskClose != '1') {
    return
  }
  uni.navigateBack()
  uni.$emit('jx_dialog', type)
}
</script>

<style lang="scss">
$btncolor: #0b7ffe;
page {
  background: transparent;
}
.mask-content {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);

  .dialog-content {
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(30px);
    border-radius: 25px;
    width: 560rpx;
    border-radius: 22rpx;
    animation: centerScale 0.15s;
    @keyframes centerScale {
      0% {
        transform: scale(1.3);
      }
      100% {
        transform: scale(1);
      }
    }

    .head-content {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000000;
      font-weight: bold;
      font-size: 32rpx;
      padding: 10rpx 30rpx;
      padding-top: 25rpx;
    }
    .main-content {
      max-height: 350rpx;
      .info-content {
        min-height: 80rpx;
        padding: 10rpx 30rpx 20rpx 30rpx;
        font-size: 30rpx;
        color: #000000;
        display: flex;
        justify-content: center;
        text {
          text-align: center;
        }
      }
    }
    .foot-content {
      border-top: 1rpx solid #e4e4e4;
      display: flex;
      justify-content: center;
      align-items: center;
      .btn {
        font-weight: bold;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &.alert {
        .btn {
          border-top: 1rpx solid #e4e4e4;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          color: $btncolor;
          height: 80rpx;
          padding: 10rpx 0;
          font-weight: bold;
        }
      }
      &.confirm {
        display: flex;
        justify-content: space-between;
        .btn {
          width: 100%;
          height: 100rpx;
          &.active {
            border-left: 1rpx solid #e4e4e4;
            color: $btncolor;
            font-weight: bold;
          }
          &.cancel {
            border-right: 1rpx solid #e4e4e4;
            color: $btncolor;
            font-weight: bold;
          }
        }
      }
    }
  }

  .active1 {
    background-color: #dddddd;
  }
}
</style>
