<template>
  <div :class="{'modal-screen-full':isFull,'modal-screen-exit':!isFull}" class="modal-container" v-if="show" style="z-index:1000">
    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
      <div class="modal-title" :style="{background: (title ? '#f8f8f8': '#fff')}">
        <div :style="{height: (title ? '38px' : 0)}"><span>{{title || ''}}</span></div>
        <div>
          <a href="javascript:;" @click="openFull">
            <a-icon style="font-size: 21px;margin-left: 8px" type="fullscreen" v-if="!isFull" />
          </a>
          <a href="javascript:;" @click="openFull">
            <a-icon style="font-size: 21px;margin-left: 8px" type="fullscreen-exit" v-if="isFull" />
          </a>
          <a href="javascript:;" @click="close">
            <a-icon style="font-size: 21px;margin-left: 8px" type="close" />
          </a>
        </div>
      </div>
      <div class="modal-content" ref="main">
        <slot name="content" ref="content"></slot>
      </div>
      <div class="modal-footer" :style="{background: (title ? '#f8f8f8': '#fff')}">
        <slot name="footer"></slot>
      </div>
    </a-spin>
  </div>
</template>

<script>
export default {
  name: "sModal",
  data () {
    return {
      isFull: false,
      footerSlots: false,
    }
  },
  props: {
    show: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    title: {
      type: String,
      default: () => {
        return ''
      }
    },
    loading: {
      type: Boolean,
      default: () => {
        return false
      }
    },
  },
  model: {
    prop: 'show',
    event: 'close',
  },
  created () {
    if (this.$slots.footer)
      this.footerSlots = true
  },
  methods: {
    close () {
      this.$emit('close', false);
    },
    openFull () {
      this.isFull = !this.isFull
    },
    changeScroll () {
      this.$refs.main.scrollTop = document.getElementsByClassName('s_modal_content')[0].offsetHeight
    }
  },
}
</script>

<style scoped lang="less">
.modal-container {
  .view-table {
    border-bottom: 0px !important;
  }
}
.modal-screen-full {
  padding: 1px 2px 1px 2px;
  position: fixed;
  left: 3px;
  top: 55px;
  background: #ffffff;
  overflow: auto;
  z-index: 1000;
  width: calc(100% - 5px);
  height: calc(100vh - 56px);
}
.modal-screen-exit {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 3px;
  background: #ffffff;
  overflow: auto;
  z-index: 3;
  height: calc(100% - 6px);
  // height: calc(100vh - 124px);
}
.modal-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
  line-height: 36px;
  padding-left: 6px;
  color: #333;
  font-weight: 700;
  font-size: 16px;
  border-width: 1px 1px 1px 1px;
  border-color: #f0f0f0;
  border-style: solid;
  a {
    color: black;
  }
}
.modal-content {
  overflow: auto;
  height: calc(100% - 76px);
}
.modal-content-flow {
  overflow: hidden !important;
}
.modal-footer {
  text-align: center;
  background-color: rgb(248, 248, 248);
  border-width: 1px 1px 1px 1px;
  border-color: #f0f0f0;
  border-style: solid;
  height: 38px;
  line-height: 34px;
}
</style>