<template>
  <transition
    appear
    name="custom-classes-transition"
    enter-active-class="animated slideInRight speed"
    leave-active-class="animated slideOutRight speed"
  >
  <div class="base-panel" v-show="show">
    <div class="ui-between header" app-border dir-bottom>
      <span>{{show.name}}</span>
      <i class="iconfont icon_close" @click="cancel"></i>
    </div>
    <div class="content">
      <component :select="select" @openMaterial="$emit('openMaterial')" :is="component"></component>
    </div>
    <div class="ui-between footer" app-border dir-top>
      <button class="ui-button submit" @click="save">完成</button>
    </div>
  </div>
  </transition>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  props: ['show','data','editTitle','select'],
  data(){
    return {

    }
  },
  computed:{
    ...mapGetters({
      info:'info',
      backupInfo:'backupInfo'
    }),
    component(){
      let page = this.show;
      return () => import(`./${page.id}.vue`);
    }
  },
  
  methods:{
    cancel(){
      this.$store.commit("SetInfo", this.backupInfo);
      this.$emit("close");
    },
    save(){
      this.$store.commit("SetInfo", this.info);
      this.$emit("close");
    }
  }
};
</script>
<style lang="less" scoped>
.base-panel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 236px;
  background: rgba(38, 39, 41, 1);
  box-shadow: 0px 0px 20px #090909;
  z-index: 10;
  display: flex;
  flex-direction: column;
  .header {
    height: 51px;
    padding: 0 10px;
    display: flex;
    .icon_close {
      cursor: pointer;
    }
  }
  .footer {
    padding: 15px;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    .ui-button {
      width: 100%;
    }
  }
  
}
</style>
