<template>
  <el-drawer
    :visible.sync="closeDrawerTemp"
    :with-header="false"
    direction="rtl"
    :size="drawerWidth?drawerWidth+ '%' : 90 + '%'"
    append-to-body
    :before-close="closeDrawer">
    <div class="detail__panel">
      <router-view :key='$route.path' v-if="closeDrawerTemp"/>
    </div>
  </el-drawer>
</template>

<script>
import  {mapGetters} from 'vuex'

export default {
  props:['drawerWidth'],
  computed:{
    ...mapGetters({
      closeDrawerTemp:'closeDrawerTemp',
      historyRouter:'historyRouter'
    })
	},
  data () {
    return {

    }
  },
  watch:{
    closeDrawerTemp (val) {
      val === false ? this.$emit('onSuccess'):''
      val === false ? this.$store.dispatch('setHistoryRouter',null):""
    }
  },
  methods:{
    closeDrawer (done) {
      if (this.historyRouter) {
        this.$router.replace(this.historyRouter)
        this.$store.dispatch('setHistoryRouter',null)
      } else {
        this.$store.dispatch('changeDetailDrawer',false)
        this.$router.go(-1)
      }
    }
  },
  mounted () {
    var that = this
    window.addEventListener("popstate", function(e) {
      that.$store.dispatch('changeDetailDrawer',false)
    }, false);
  }
}

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