<template>
  <div>
    <el-button size="small" :type="type ? type : 'text'" @click="onShow(drawer=true)">{{title}}</el-button>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      direction="rtl"
      size="90%"
      append-to-body
      @close="closeDrawer">
      <div class="detail__panel">
        <router-view/>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import  {mapGetters} from 'vuex'
export default {
  props:['id','detailPath','title','type'],
  components:{
  },
  computed:{
	},
  data () {
    return {
      drawer:false
    }
  },
  methods:{
    onShow () {
      this.$router.push({path:this.detailPath.path,query:{id:this.id}})
    },
    closeDrawer () {
      this.$router.back()
    }
  },
  watch:{
    closeDrawerTemp (val) {
      val?this.drawer = false:''
    }
  }
}

</script>
<style>
</style>
<style scoped>
.detail__panel{
  background:#f1f2f3;
  overflow-y: scroll;
  font-size: 14px;
  color:#666;
  height:100vh;
}
</style>