<template>
<div>
  <drip-dialog
    :visible="visible"
    v-on:onHide="cancel"
    :touchmoveClose="touchmoveClose"
    :showClose="false">
    <div :class="b('confirm')">
      <div
        :class="b('confirm-content')"
        v-html="content"
        :style="style">
      </div>
      <slot></slot>
      <div :class="b('confirm-btn')">
        <div
          :class="b('confirm-btn-left')"
          v-text="cancelText"
          v-if="!hideCancel"
          @click="cancel">
        </div>
        <div
          :class="b('confirm-btn-right')"
          v-text="confirmText"
          v-if="!hideConfirm"
          @click="confirm">
        </div>
      </div>
    </div>
  </drip-dialog>
</div>
</template>
<script>
import dripDialog from '../dialog/Dialog'
import create from '../utils/create'

export default create({
  name: 'confirm',
  props: {
    hideCancel: {
      type: Boolean,
      default: false
    },
    hideConfirm: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    },
    content: {
      type: String
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    cancelCall: {
      type: Function,
      default: function () {}
    },
    confirmCall: {
      type: Function,
      default: function () {}
    },
    textAlign: {
      type: String,
      default: 'center'
    },
    fontWeight: {
      type: String,
      default: '500'
    },
    // fontSize
    fontSize: {
      type: [String, Number],
      default: '35'
    },
    touchmoveClose: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    cancel () {
      this.$emit('cancel')
      this.cancelCall()
    },
    confirm () {
      this.$emit('confirm')
      this.confirmCall()
    },
  },
  components: {
    dripDialog
  },
  computed: {
    // style
    style() {
      const { textAlign, fontWeight, fontSize } = this
      // calc ratio
      const ratio = document.documentElement.clientWidth / 750
      return {
          'text-align': this.textAlign,
          'font-weight': this.fontWeight,
          'font-size': ratio * fontSize + 'px'
        }
    }
  },
})
</script>
