<template>
  <div>
    <div v-if="active" class="dialog_wrapper">
      <div class="dialog">
        <div class="dialog_header">
          <span class="dialog_title">{{title}}</span>
          <button class="dialog_headerbtn" @click="toCancle">
            <i class="iconfont close_icon"></i>
          </button>
        </div>
        <div class="dialog_body">
          <slot></slot>
        </div>
        <div class="dialog_footer">
          <button class="button button--primary" @click="toCancle">取消</button>
          <button class="button button--primary" :class="{'button--info': unclick === true}" :disabled="disabled" @click="toSure">确定</button>
        </div>
      </div>
    </div>
    <div v-if="active" class="modal"></div>
  </div>
</template>

<script>
export default {
  name: 'jxDialog',
  props: {
    title: String,
    type: String,
    unclick: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      active: false,
      disabled: false
    }
  },
  methods: {
    toCancle () {
      this.active = false
      this.$emit('toCancle', this.type)
    },
    toSure () {
      this.$emit('toSure', this.type)
    }
  }
}
</script>

<style lang="stylus" scoped>
.modal
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  background: #000;
  z-index: 101;
.dialog_wrapper
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  z-index: 102;
.dialog
  position: relative;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  box-sizing: border-box;
  width: 50%;
  margin-top: 15vh;
.dialog_header
  padding: 20px 20px 10px;
.dialog_title
  line-height: 24px;
  font-size: 18px;
  color: #303133;
.dialog_headerbtn
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 16px;
.close_icon
  width 24px
  height 24px
  font-size 15px
  line-height 24px
  top 0
.dialog_body
  padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
.dialog_footer
  padding: 10px 20px 20px;
  text-align: center;
  box-sizing: border-box;
</style>
