<template>
  <vue-final-modal v-slot="{ close }">
    <div class="loginmodal">
      <div class="art" :class="level"><!-- agreeart warningart -->
        <span class="img"></span>
        <p v-html="$t(code)"></p>
        <div class="btn">
          <template v-if="type == 'confirm'">
            <button class="yes" @click="$emit('confirm', 'yes', close)">{{$t('front.button.yes')}}</button>
            <button class="no" @click="$emit('confirm', 'no', close)">{{$t('front.button.no')}}</button>
          </template>

          <template v-if="type == 'check'">
            <button class="yes" @click="$emit('check', 'ok', close)">{{$t('front.button.confirm')}}</button>
          </template>
        </div>
        <button class="closeart" @click="onClose(close)"><img src="@/assets/img/icon_cancel.svg" /></button>
      </div>
    </div>
  </vue-final-modal>

</template>

<script>

export default {
  name: 'Alert',
  props: {
    code: {
      type: String
    },
    type: {
      type: String
    },
    level: {
      type: String,
      default: 'warningart'
    }
  },
  data () {
    return {
      lang: 'ko',
      result: ''
    }
  },
  methods: {
    onClose (close) {
      close()
      // this.$emit('close', this.type, this.result)
    }
  }
}
</script>

<style scoped src="@/styles/header.css"></style>
<style scoped src="@/styles/common.css"></style>
<style scoped src="@/styles/subcommon.css"></style>
<style scoped>
button {cursor: pointer}
.art {position: relative;width: 400px;margin: 0 auto;padding: 60px 91px;text-align: center;box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);border-radius: 5px;background-color: #fff;}
.art img {height: 80px;}
.art h1 {font-size: 30px;font-weight: bold;}
.art p {margin-top: 28px;font-size: 18px;color: #000;line-height: 1.5em;}
.art .btn {display: flex;justify-content: center;gap: 20px;}
.art .yes, .art .no {background: none;border: 0;box-sizing: border-box;width: 100%;height: 36px;font-size: 15px;border-radius: 10px;margin-top: 30px;}
.art .img {display: block;margin: 0 auto;margin-bottom: 30px;}
.agreeart .img {width: 49px;height: 49px;background: url('~@/assets/img/agreeart.svg')no-repeat;background-size:cover;background-position: center;}
.agreeart>h1 {color: #e5972d;}
.agreeart .yes {border: 0;color: #fff;background: #5068d4;}
.agreeart .no {background: #999da3;color: #fff;}
.warningart .img {width: 49px;height: 49px;background: url('~@/assets/img/warningart.svg')no-repeat;background-position: center;}
.warningart>h1 {color: #e1423c;}
.warningart .yes {border: 1px solid #e1423c;color: #fff;background:#c63d40;}
.warningart .no {background: #555;color: #fff;border: 1px solid #555;}
.closeart {background: none;border: 0;position: absolute;right: 20px;top: 20px;}
.closeart img {height: 45px;}
@media (max-width: 1000px) {
  .art{ padding:40px 20px; margin-top: 0;width: calc(100% - 20px); box-sizing: border-box;}
  .art .yes, .art .no {margin-top: 20px;font-size: 20px;height: 50px;}
  .art p{font-size: 16px; }
}
</style>
