<!-- 公共模态框 -->
<template>
  <transition name="modal-fade">
    <div v-if="isOpen" class="detail-modal">
      <div class="modal-body">
        <div class="modal-decorations"></div>
        <div class="detail-content">
          <div class="modal-title">
            <slot name="title"></slot>
          </div>
          <div class="scroll-container">
            <vue-scroll :ops="scrollOpt">
              <slot name="content"></slot>
            </vue-scroll>
          </div>
        </div>
        <div v-if="close" class="modal-close" @click="isOpen = false">
          <i class="iconfont icon-X"></i>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
// 展开收起组件
export default {
  name: 'PubModal',
  props: {
    close: {
      default: true,
      type: Boolean
    },
    isShow: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      scrollOpt: {
        bar: {
          background: '#eda431',
          keepShow: true,
          size: '6px',
          minSize: 0
        },
        scrollPanel: {
          scrollingX: false
        }
      }
    }
  },
  computed: {
    isOpen: {
      get() {
        // if (val) {
        //     this.autoClose();
        // }
        return this.isShow
      },
      set(val) {
        this.$emit('changeVisible', val)
      }
    }
  },
  methods: {
    // autoClose() {
    //     time && clearTimeout(time);
    //     const time = setTimeout(() => {
    //         this.isShow = false;
    //     }, 1200);
    // }
  }
}
</script>

<style lang="less" scoped>
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: 0.3s all ease-in-out;
}

.modal-fade-enter,
.modal-fade-leave-to {
  opacity: 0;
}
.detail-modal {
  top: 0;
  left: 0;
  position: absolute;
  z-index: 9;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .modal-body {
    width: 275px;
    height: 292px;
    background-image: url('~@/assets/images/lottery/detail_bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    position: relative;
    padding: 10px;
    .detail-content {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      .modal-title {
        padding: 0 42px;
        // height: 48px;
        // line-height: 48px;
        width: 100%;
        text-align: center;
        color: #eda431;
        font-weight: 700;
        font-size: 16px;
        height: 18px;
        // line-height: 16px;
        margin: 16px 0 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .scroll-container {
        flex: 1;
        padding: 0 16px 16px;
        overflow: hidden;
      }
    }
    .modal-decorations {
      position: absolute;
      width: 326px;
      height: 136px;
      top: 41px;
      left: -24px;
      background-image: url('~@/assets/images/lottery/bulinbulin.png');
      background-size: cover;
      background-repeat: no-repeat;
    }
    .modal-close {
      position: absolute;
      cursor: pointer;
      right: 0px;
      width: 38px;
      height: 38px;
      // line-height: 35px;
      text-align: center;
      color: #fff;
      border: 1px solid #fff;
      opacity: 0.5;
      border-radius: 50%;
      top: -48px;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon-X {
        font-size: 14px;
      }
    }
  }
}
</style>
