<template>
  <div>
    <el-drawer
      v-if="cType === 'drawer'"
      direction="rtl"
      size="500"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <template slot="title">
        <div>
          <!-- <svg-icon icon-class="switch" @click="handleSwitch" />&nbsp; -->
          <span>{{ title }}</span>
        </div>
      </template>
      <slot :name="cType" />
    </el-drawer>
    <transition>
      <el-dialog
        v-if="cType === 'dialog'"
        :close-on-click-modal="false"
        :width="width"
        v-bind="$attrs"
        v-on="$listeners"
      >
        <template slot="title">
          <div style="text-align: center;color:#3E7BFA ;font-size: 20px;">
            <!-- <svg-icon icon-class="switch" @click="handleSwitch" />&nbsp; -->
            <span>{{ title }}</span>
          </div>
        </template>
        <slot :name="cType" />
      </el-dialog>
    </transition>

  </div>
</template>

<script>
export default {
  name: 'EditorContainer',
  props: {
    popupType: {
      type: String,
      default: 'dialog'
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: ''
    }
  },
  computed: {
    cType() {
      return this.popupType
    }
  },
  created() {
  },
  methods: {
    handleSwitch() {
      if (this.cType === 'drawer') {
        this.$emit('switch', 'dialog')
      } else {
        this.$emit('switch', 'drawer')
      }
    }
  }
}
</script>
