<!--Created by 熊超超 on 2018/5/21.-->
<template>
  <el-dialog v-if="dialog && dialog.visible" :title="dialog.title" :width="width" v-bind="dialog.options"
             :visible="dialog.visible"
             @close="onClose" :append-to-body="appendToBody">

    <xt-dialog v-if="!inside" :inside="true" append-to-body/>
    <compinent :is="dialog.content"></compinent>
    <div slot="footer" class="dialog-footer" v-if="dialog.options && dialog.options.showBtn">
      <el-button type="primary" @click="onClose">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {mapState} from 'vuex'
export default {
  components: {XtDialog: () => import('./XtDialog.vue')},
  props: {
    inside: { type: Boolean, default: false },
    appendToBody: { type: Boolean, default: false },
  },
  computed: {
    ...mapState(['insideDialog', 'outsideDialog']),
    dialog () {
      return this.inside ? this.insideDialog : this.outsideDialog
    },
    width () {
      if (this.dialog.options && this.dialog.options.width) {
        return this.dialog.options.width
      } else {
        return this.inside ? '60%' : '70%'
      }
    },
  },
  methods: {
    onClose () {
      if (this.dialog.visible) {
        this.$utils.hideDialog()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
