<template>
 <transition
 name="slide-fade"
 @after-enter="afterEnter">
 <el-card
 id="slide"
 ref="slide"
 :style="{ 'z-index': zIndex }"
 :body-style="bodyStyle"
 class="slide-detail-card-container">
 <slot/>
 </el-card>
 </transition>
</template>
<script type="text/javascript">
import { getMaxIndex } from '@/utils/index'

export default {
 name: 'SlideView', // 客户管理详情 滑动view
 components: {},
 props: {
 bodyStyle: {
 type: Object,
 default: () => {
 return { padding: 0 }
 }
 },
 /** 监听点击事件 隐藏视图 */
 listenerIDs: {
 type: Array,
 default: () => {
 return []
 }
 },
 /** 阻挡点击事件 隐藏视图 */
 noListenerIDs: {
 type: Array,
 default: () => {
 return []
 }
 },
 noListenerClass: {
 type: Array,
 default: () => {
 return []
 }
 },
 appendToBody: {
 type: Boolean,
 default: false
 }
 },
 data() {
 return {
 zIndex: getMaxIndex()
 }
 },
 computed: {},
 watch: {},
 mounted() {
 if (this.appendToBody) {
 document.body.appendChild(this.$el)
 }
 this.listenerIDs.forEach(element => {
 if (document.getElementById(element)) {
 document
 .getElementById(element)
 .addEventListener('click', this.handleDocumentClick, false)
 }
 })
 },

 beforeDestroy() {
 if (this.appendToBody && this.$el && this.$el.parentNode) {
 this.$el.parentNode.removeChild(this.$el)
 }
 },
 methods: {
 handleDocumentClick(e) {
 var hidden = true
 this.noListenerIDs.forEach(element => {
 if (
 document.getElementById(element) &&
 document.getElementById(element).contains(e.target)
 ) {
 hidden = false
 }
 })

 this.noListenerClass.forEach(element => {
 var items = document.getElementsByClassName(element)
 if (items && hidden) {
 for (let index = 0; index < items.length; index++) {
 const element = items[index]
 if (element.contains(e.target)) {
 hidden = false
 break
 }
 }
 }
 })

 if (
 document.getElementById('slide') &&
 document.getElementById('slide').contains(e.target)
 ) {
 hidden = false
 }
 if (hidden) {
 this.$emit('side-close')
 }
 },
 afterEnter() {
 this.$emit('afterEnter')
 }
 }
}
</script>
<style lang="scss" scoped>
.slide-fade-enter-active,
.slide-fade-leave-active {
 will-change: transform;
 transition: all 0.35s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
 transform: translateX(100%);
}
</style>