<template>
  <div class="custom-modal-box">
    <vxe-modal v-model="show"
               :width="width"
               :min-height="height"
               :resize="resize"
               :position="position"
               :lock-scroll="false"
               :lock-view="false"
               :mask="false">
      <template slot="header">
        <div class="cus-modal-header">
          <div class="title">
            <div v-if="header.hasIcon" class="title-icon">
              <i class="iconfont icon-chuanbo"></i>
            </div>
            <div class="title-content"><span>{{ header.title }}</span></div>
            <div v-if="header.hasAfterIcon" class="country-icon">
              <img id="ship-flag-url" src="" alt=""/>
            </div>
          </div>
          <div class="operate">
            <div v-if="header.hasMin" class="icon-item operate-min" @click="showMini">
              <i class="iconfont icon-zuixiaohua"></i>
            </div>
            <div v-if="header.hasMax" class="icon-item operate-max">
              <i class="iconfont icon-zuidahua"></i>
            </div>
            <div class="icon-item operate-close">
              <i class="iconfont icon-guanbi" @click="closeDialog"></i>
            </div>
          </div>
        </div>
      </template>
      <template slot="default">
        <slot name="default"></slot>
      </template>
    </vxe-modal>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import DialogUtil from '@/util/new-dialog/index'

@Component({
  props: {
    show: {
      type: Boolean,
      default: true,
      required: false
    },
    width: {
      type: String,
      required: true
    },
    height: {
      type: String,
      required: true
    },
    resize: {
      type: Boolean,
      required: false,
      default: false
    },
    header: {
      type: Object,
      default: () => {
        return {
          title: '标题',
          hasIcon: false,
          beforeUrl: '',
          hasAfterIcon: false,
          afterUrl: '',
          hasMin: true,
          hasMax: true
        }
      }
    },
    position: {
      type: Object,
      default: () => {
        return {
          left: {
            type: String,
            required: false,
            default: '50%'
          },
          top: {
            type: String,
            required: false,
            default: '50%'
          }
        }
      }
    },
    vueName: {
      type: String,
      required: true
    },
    defaultMini: {
      type: Boolean,
      required: false,
      default: false
    }
  }
})
export default class Dialog extends Vue {
  private closeDialog() {
    DialogUtil.closeCom(this.$props.vueName)
  }

  public mounted() {
    if (this.$props.defaultMini) {
      this.$nextTick(() => {
        this.showMini()
      })
    }
  }

  private showMini() {
    DialogUtil.showMini(this.$props.vueName)
  }
}
</script>

<style scoped lang="scss">
.custom-modal-box {
  z-index: 999;

  .default-box {
    width: 100%;
    height: 100%;
  }

  ::v-deep.vxe-modal--content {
    width: 100%;
    overflow: auto !important;
  }

  .cus-modal-header {
    display: flex;
    align-items: center;

    .operate {
      display: flex;
      align-items: center;
      position: absolute;
      right: 1.25rem;

      .icon-item {
        margin-left: 1.25rem;
        cursor: pointer;
      }
    }

    .title {
      display: flex;
      align-items: center;

      .title-icon {
        color: #f5f2f0;
        margin-right: 0.625rem;
        width: 1.4375rem;
        height: 1.4375rem;
        display: flex;
        align-items: center;
        justify-content: center;

        i {
          font-size: 0.875rem;

          &:hover {

            color: var(--white-font) !important;
          }
        }
      }

      .country-icon {
        margin-left: 0.625rem;
        width: 1.875rem;
        height: 1.25rem;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
