<template>
  <popup v-model:value="value" style="z-index: 1001" content-animate="scale" @close="$emit('destroy-popup')">

    <div class="confirm-container relative">

      <div @click="close" v-if="!buttonAsync" class="absolute confirm-icon cursor-pointer animate-rotate-hover">
        <icon type="close" class="confirm-icon-target"></icon>
      </div>

      <article class="confirm-title">{{title}}</article>

      <section class="rowCenter">
        <v-button v-if="!buttonAsync" @click="triggerCancel" class="confirm-button cancel-button">{{cancelText||'取消'}}</v-button>
        <v-button @submit-verify="triggerConfirm" :success-text="successAsyncText" @submit="triggerWaiting" class="confirm-button" :class="{'confirm-button-screen':buttonAsync}">{{confirmText||'确定'}}</v-button>
      </section>
    </div>

  </popup>
</template>

<script>
import {
  Popup,
  vButton,
  icon
} from '$components';
import mixins from '../mixins';
import props from '../props';
export default {
  name: "popup-confirm",
  components:{
    Popup,
    vButton,
    icon
  },
  mixins,
  props
}
</script>

<style scoped lang="scss" src="../style.scss"></style>