<template>
  <a-modal
    :class="'custom-modal' + (innerFullscreen ? ' fullscreen' : '')"
    v-bind="_attrs"
    v-model="visible"
    :footer="null"
  >
    <img slot="closeIcon" src="@/assets/images/global/close.png" />
    <div slot="title">
      <div class="custom-modal-title">
        <span>{{ title }}</span>
        <template v-if="enableFullScreen">
          <img  v-if="innerFullscreen" src="@/assets/images/global/quit-fullscreen.png" @click="innerFullscreen = false" />
          <img  v-else src="@/assets/images/global/fullscreen.png" @click="innerFullscreen = true" />
        </template>
      </div>
    </div>
    <slot></slot>
    <a-space v-if="showFooter" class="operators" :size="20">
      <a-button type="success" @click="onSave" :loading="confirmLoading">Save</a-button>
      <a-button type="warn" @click="onCancel">Cancel</a-button>
    </a-space>
  </a-modal>
</template>
<script>
export default {
  props: {
    value: {
      type: Boolean
    },
    okHandler: {
      type: Function
    },
    title: {
      type: String
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    enableFullScreen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: this.value,
      confirmLoading: false,
      innerFullscreen: false
    }
  },
  watch: {
    visible(val) {
      this.$emit('input', val)
    },
    value(val) {
      this.visible = val
      if (val) {
        this.innerFullscreen = false
      }
    }
  },
  methods: {
    async onSave() {
      if (this.okHandler instanceof Function) {
        try {
          this.confirmLoading = true
          await this.okHandler()
          this.visible = false
        } catch (error) {
          console.error(error)
        } finally {
          this.confirmLoading = false
        }
      } else {
        this.visible = false
      }
    },
    onCancel() {
      this.visible = false
    }
  },
  computed: {
    _attrs() {
      let attrs = { ...this.$attrs }
      // 如果全屏就将宽度设为 100%
      if (this.innerFullscreen) {
        attrs['width'] = '100%'
      }
      return attrs
    }
  }
}
</script>
<style lang="less" scoped>
.operators {
  width: 100%;
  justify-content: center;
  .ant-btn {
    width: 92px;
  }
}

.custom-modal {
  &-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
  }

  ::v-deep {
    .ant-modal-close-x {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ant-modal-header {
      padding-right: 50px;
    }
  }

  &.fullscreen {
    ::v-deep {
      .ant-modal {
        top: 0;
        height: 100vh;
      }

      .ant-modal-content {
        height: 100vh;
        padding-bottom: 0;
      }
    }
  }
}
</style>
