<template>
  <transition name="wrap">
    <div v-show="visible" class="lyf-ui-dialog" :style="{
      zIndex
    }">
      <transition name="fade">
        <div class="lyf-ui-mask" v-show="visible"></div>
      </transition>
      <transition name="scale">
      <div ref="dialogInnerRef" class="lyf-ui-dialog-inner" v-show="visible" :style="{
        width,
        marginTop: marginTop + 'px',
        borderRadius: borderRadius + 'px',
      }">
        <div class="lyf-ui-dialog-content">
          <slot name="title">
            <div class="lyf-ui-dialog-title" v-if="title">{{ title }}</div>
          </slot>
          <slot>
            <div class="lyf-ui-dialog-message" v-if="message" v-html="message"></div>
          </slot>
        </div>
        <div class="lyf-ui-dialog-control" v-if="showConfirmButton || showCancelButton">
          <div 
            class="lyf-ui-dialog-button"
            :style="{
              color: cancelColor
            }"
            @click="cancelBtnClick"
          >{{ cancelText }}</div>
          <div 
            class="lyf-ui-dialog-button"
            :style="{
              color: confirmColor
            }"
            @click="confirmBtnClick"
          >{{ confirmText }}</div>
        </div>
      </div>
      </transition>
    </div>
  </transition>
</template>

<script>
import { defaultValue } from './data'

export default {
  name: 'LyfDialog',
  props: {
    visible: {
      type: Boolean,
      default: defaultValue.visible
    },
    overlay: {
      type: Boolean,
      default: defaultValue.overlay
    },
    zIndex: {
      type: Number,
      default: defaultValue.zIndex
    },
    width: {
      type: String,
      default: defaultValue.width
    },
    borderRadius: {
      type: Number,
      default: defaultValue.borderRadius
    },
    title: {
      type: String,
      default: defaultValue.title
    },
    message: {
      type: String,
      default: defaultValue.message
    },
    showConfirmButton: {
      type: Boolean,
      default: defaultValue.showConfirmButton
    },
    showCancelButton: {
      type: Boolean,
      default: defaultValue.showCancelButton
    },
    confirmText: {
      type: String,
      default: defaultValue.confirmText
    },
    cancelText: {
      type: String,
      default: defaultValue.cancelText
    },
    confirmColor: {
      type: String,
      default: 'var(--primary-color)'
    },
    cancelColor: {
      type: String,
      default: 'var(--font-color_1)'
    },
    // 居中往上提48px
    offsetMarginTop: {
      type: Number,
      default: 48
    },
  },
  data() {
    return {
      marginTop: 0
    }
  },
  methods: {
    cancelBtnClick() {
      if (this.finally && this.finally instanceof Function) {
        this.finally()
      }
      if (this.cancel && this.cancel instanceof Function) {
        // api调用
        this.cancel()
      } else {
        this.$emit('cancel')
        this.$emit('update:visible', false)
      }
    },
    confirmBtnClick() {
      if (this.finally && this.finally instanceof Function) {
        this.finally()
      }
      if (this.confirm && this.confirm instanceof Function) {
        // api调用
        this.confirm()
      } else {
        this.$emit('confirm')
        this.$emit('update:visible', false)
      }
    },
    computedMarginTop() {
      this.$nextTick(() => {
        this.marginTop = - (parseInt(this.$refs.dialogInnerRef.offsetHeight / 2) + this.offsetMarginTop)
      })
    },
  },
  watch: {
    visible: {
      handler(value, prev) {
        if (value) {
          this.computedMarginTop()
        }
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.lyf-ui-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.lyf-ui-dialog .lyf-ui-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--mask-color_1);
}

.lyf-ui-dialog .lyf-ui-dialog-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin: 0 auto;
  background-color: var(--background-color_2);
}

.lyf-ui-dialog .lyf-ui-dialog-content {
  padding: var(--dialog-content-padding) 0;
}

.lyf-ui-dialog .lyf-ui-dialog-title {
  margin: 0 var(--space_24);
  color: var(--font-color_1);
  font-size: 18px;
  text-align: center;
  line-height: 28px;
}

.lyf-ui-dialog .lyf-ui-dialog-message {
  margin: 6px var(--space_24) 0;
  color: var(--font-color_3);
  font-size: 15px;
  line-height: 22px;
  text-align: center;
}

.lyf-ui-dialog .lyf-ui-dialog-control {
  display: flex;
  border-top: solid var(--border-width) var(--border-color_1);
}

.lyf-ui-dialog .lyf-ui-dialog-control .lyf-ui-dialog-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-left: solid var(--border-width) var(--border-color_1);
  font-size: 16px;
}

.lyf-ui-dialog .lyf-ui-dialog-control .lyf-ui-dialog-button:first-child {
  border-left: none;
}
</style>