<template>
  <popup class="x-confirm-popup" :visible="visible" @click-mask="onClickMask">
    <div class="x-confirm-popup__head" slot="head">
      <div class="x-confirm-popup__head-left" @click="onClickCancel">取消</div>
      <div class="x-confirm-popup__head-title"></div>
      <div class="x-confirm-popup__head-right" @click="onClickConfirm">确定</div>
    </div>
    <slot></slot>
  </popup>
</template>

<script>
import Popup from '../Popup'

export default {
  props: {
    visible: Boolean
  },
  components: {
    Popup
  },
  methods: {
    onClickMask() {
      this.$emit('cancel', {target: 'mask'})
    },
    onClickCancel() {
      this.$emit('cancel', {target: 'cancel'})
    },
    onClickConfirm() {
      this.$emit('confirm', {target: 'confirm'})
    }
  }
}
</script>

<style lang="less">
.x-confirm-popup {
  &__head {
    display: flex;
    height: 44px;
    font-size: 16px;
    line-height: 44px;
    background: #fbf9fe;
    border-bottom: 1px solid #D9D9D9;
  }
  &__head-left {
    padding-left: 15px;
    color: #828282;
  }
  &__head-title {
    flex: 1;
    text-align: center;
    color: #222;
  }
  &__head-right {
    padding-right: 15px;
    color: #eb4735;
  }
}
</style>
