<template>
  <bubble-base-bubble ref="bubbleBaseBubbleRef" :padding="0" :width="379" :height="260" showMask transparentBackground>
    <section class="layout-content">
      <div class="layout-head">{{ instance.title }}</div>
      <section class="message-box">
        <span class="message">{{ instance.message }}</span>
      </section>
      <div class="layout-foot">
        <div class="mr30">
          <img src="@/assets/images/icon/cancle.png" class="action-img global-play-click-sound" @click="hideClick()" />
        </div>
        <div v-loading="instance.confirmButtonLoading">
          <img
            src="@/assets/images/icon/next.png"
            class="action-img global-play-click-sound"
            :class="instance.confirmButtonLoading ? 'disabled' : ''"
            @click="affirmClick()"
          />
        </div>
      </div>
    </section>
  </bubble-base-bubble>
</template>

<script setup lang="ts">
  import BubbleBaseBubble from '@/components/bubble/bubble-base-bubble/bubble-base-bubble.vue';
  import { reactive, useTemplateRef } from 'vue';

  export type Instance = {
    title: string;
    message: string;
    confirmButtonLoading: boolean;
  };
  const bubbleBaseBubbleRef = useTemplateRef<InstanceType<typeof BubbleBaseBubble>>('bubbleBaseBubbleRef');

  type ShowData = {
    eventElement: $BubbleEvent | $BubbleHTMLElement;
    title: string;
    message: string;
    /** 确认时回调 */
    affirmCallBack?: (hide: () => void, instance: Instance) => void;
  };

  const instance = reactive<Instance>({
    title: '',
    message: '',
    confirmButtonLoading: false,
  });

  let affirmCallBack: ShowData['affirmCallBack'] | undefined = undefined;
  /**
   * 显示
   */
  function show(data: ShowData) {
    affirmCallBack = 'affirmCallBack' in data && typeof data.affirmCallBack === 'function' ? data.affirmCallBack : undefined;
    instance.title = data.title || '';
    instance.message = data.message || '';
    bubbleBaseBubbleRef.value?.show(data.eventElement);
  }

  /**
   * 点击隐藏
   */
  function hideClick() {
    hide();
  }
  /**
   * 隐藏
   */
  function hide() {
    instance.confirmButtonLoading = false;
    bubbleBaseBubbleRef.value?.hide();
  }
  /**
   * 点击确定
   */
  function affirmClick() {
    typeof affirmCallBack === 'function' && affirmCallBack(hide, instance);
  }

  defineExpose({
    show,
    hide,
  });
</script>

<style lang="scss" scoped>
  .layout-content {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 30px 40px;
    background-image: url('@/assets/images/bg/bg-pubble.png');
    background-size: 100% 100%;
    border-radius: 4px;

    .layout-head {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      font-size: 20px;
      font-weight: bold;
      color: #333333;
    }

    .message-box {
      padding: 0 10px;
      margin-top: 15px;

      .message {
        font-size: 16px;
        line-height: 1.4;
        color: #666666;
      }
    }

    .layout-foot {
      position: absolute;
      right: 40px;
      bottom: 40px;
      display: flex;

      .action-img {
        width: 55px;
        height: 55px;
        cursor: pointer;

        &:active {
          opacity: 0.8;
        }

        &.disabled {
          cursor: not-allowed;
          opacity: 0.8;
        }
      }

      .mr30 {
        margin-right: 30px;
      }
    }
  }
</style>
