<template>
  <div v-transfer-dom>
    <x-dialog :show.sync="show" :hide-on-blur="hideOnBlur">
      <div class="vux-dialog_header">
        <slot name="title">
          <div class="vux-dialog_title" :class="titleClass">
            {{ title }}<a class="pull-right" @click="handleCloseClick"><i class="iconfont" v-if="showClose">&#xe827;</i></a>
          </div>
        </slot>
      </div>
      <div class="vux-dialog_body">
        <slot name="content"></slot>
      </div>
      <slot name="footer">
        <div class="vux-dialog_footer" v-if="showFooter">
          <a href="javascript:;" class="vux-dialog_btn tx-gray" @click="handleCancelClick" v-if="showCancelBtn">{{ cancelText }}</a>
          <a href="javascript:;" class="vux-dialog_btn" @click="handleConfirmClick" v-if="showComfirmBtn">{{ confirmText }}</a>
        </div>
      </slot>
    </x-dialog>
  </div>
</template>
<script>
import { XDialog, TransferDom } from 'vux'
export default {
    name: 'Dialog',
    props: {
        title: {
            type: String,
            default: '标题'
        },
        // 是否显示关闭按钮
        showClose: {
            type: Boolean,
            default: false
        },
        // left,center,right
        textAlign: {
            type: String,
            default: 'center'
        },
        showDialog: {
            type: Boolean,
            default: false
        },
        hideOnBlur: {
            type: Boolean,
            default: false
        },
        showFooter: {
            type: Boolean,
            default: true
        },
        showCancelBtn: {
            type: Boolean,
            default: true
        },
        showComfirmBtn: {
            type: Boolean,
            default: true
        },
        cancelText: {
            type: String,
            default: '取消'
        },
        confirmText: {
            type: String,
            default: '确认'
        }
    },
    directives: {
        TransferDom
    },
    components: {
        XDialog
    },
    computed: {
        titleClass () {
            return {
                'text-center': this.textAlign === 'center',
                'text-left': this.textAlign === 'left',
                'text-right': this.textAlign === 'right'
            }
        },
        show: {
            get () {
                return this.showDialog
            },
            set (val) {
                this.$emit('update:showDialog', val)
            }
        }
    },
    data () {
        return {
        }
    },
    methods: {
        handleCancelClick () {
            this.$emit('cancel')
        },
        handleConfirmClick () {
            this.$emit('confirm')
        },
        handleCloseClick () {
            this.show = false
            this.$emit('close')
        }
    },
    mounted () {
    }
}
</script>
<style lang="less" scoped>
  /deep/.vux-x-dialog {
    .vux-dialog_header {
      min-height: 16px;
      padding: 8px 15px;
      border-bottom: 1px solid #E4E7ED;
      .vux-dialog_title.text-center {
        text-align: center;
      }
      .vux-dialog_title.text-left {
        text-align: left;
      }
      .vux-dialog_title.text-right {
        text-align: right;
      }
    }
    .vux-dialog_body{
      max-height: 245px;
      overflow-y: auto;
    }
    .vux-dialog_footer{
      position: relative;
      display: flex;
      justify-content: center;
      margin-top: 20px;
      height: 40px;
      line-height: 42px;
    }
    .vux-dialog_footer::after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1px;
      border-top: 1px solid #E4E7ED;
      color: #E4E7ED;
      transform: scaleY(0.5);
    }
    .vux-dialog_btn{
      position: relative;
      flex: 1;
      color: #3CC51F;
    }
    .vux-dialog_btn:not(:first-child)::after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 1px;
      border-left: 1px solid #E4E7ED;
      color: #E4E7ED;
      transform: translateX(0.5);
    }
  }
  .tx-gray {
    color: #99958d!important;
}
</style>
