<template>
  <div :class="_wrapClass" v-show="visible">
    <div
      :class="_maskClass"
      ref="mask"
      @click="onMaskClick">
    </div>
    <div :class="_getClassNames">

      <div :class="_headerClass">
        <div :class="_titleClass">
          <Icon v-if="type" :class="_iconClass" :icon="_iconType"></Icon>
          {{ title }}
          <Icon @click="onCloseClick" :class="_closeClass" icon="clear"></Icon>
        </div>
      </div>

      <div :class="_contentClass">
        <RenderCell
          v-if="typeof content === 'function'"
          :render="content">
        </RenderCell>
        <div v-else>{{ content }}</div>
      </div>

      <div :class="_footerClass">
        <Button v-if="!cancelHidden" :class="_cancelClass" type="primary" @click="onCancelClick" >{{ cancelText }}</Button>
        <Button :class="_confirmClass" type="primary" @click="onConfirmClick">{{ confirmText }}</Button>
      </div>

    </div>
  </div>
</template>

<script>
  import RenderCell from '../render-cell';
  import Button from '../button';
  import Icon from '../icon';

  const name = 'hive-modal';

  export default {
    name,
    components: {
      Button,
      Icon,
      RenderCell,
    },
    data() {
      return {
        title: '标题',
        content: '',
        visible: false,
        confirmText: '确认',
        cancelText: '取消',
        type: false,
        titleIcon: 'circle_tick',
        destroy: true,
        value: true,
        maskClosable: true,
        cancelHidden: true,
        onConfirm: null,
        close: null,
        closed: null,
        opened: null,
      };
    },
    computed: {
      _getClassNames() {
        return [
          name,
          {
            [`${name}--show`]: this.value,
            [`${name}--hide`]: !this.value,
          },
        ];
      },
      _wrapClass() {
        return [
          `${name}-wrap`,
        ];
      },
      _maskClass() {
        return [
          `${name}-mask`,
        ];
      },
      _headerClass() {
        return [
          `${name}-header`,
        ];
      },
      _titleClass() {
        return [
          `${name}-title`,
          {
            [`${name}-title--icon`]: this.type === 'success' || this.type === 'error' || this.type === 'warning' || this.type === 'info',
          },
        ];
      },
      _contentClass() {
        return [
          `${name}-content`,
        ];
      },
      _footerClass() {
        return [
          `${name}-footer`,
        ];
      },
      _closeClass() {
        return [
          `${name}__close`,
        ];
      },
      _cancelClass() {
        return [
          `${name}__cancel`,
        ];
      },
      _confirmClass() {
        return [
          `${name}__confirm`,
        ];
      },
      _iconClass() {
        return [
          {
            [`${name}-icon`]: this.type,
            [`${name}-icon--${this.type}`]: this.type,
          },
        ];
      },
      _iconType() {
        if (this.iconType) {
          return this.iconType;
        }
        switch (this.type) {
        case 'error':
          return 'circle_clear';
        case 'warning':
          return 'circle_error';
        case 'info':
          return 'circle_info';
        case 'success':
          return 'circle_tick';
        default:
          return '';
        }
      },
    },
    methods: {
      getBrowserScrollSize() {
        let calcSize;

        const innerBox = document.createElement('div');

        innerBox.style.width = '100%';
        innerBox.style.height = '200px';

        const testBox = document.createElement('div');

        testBox.style.position = 'absolute';
        testBox.style.top = 0;
        testBox.style.left = 0;
        testBox.style.pointerEvents = 'none';
        testBox.style.visibility = 'hidden';
        testBox.style.width = '200px';
        testBox.style.height = '150px';
        testBox.style.overflow = 'hidden';

        testBox.appendChild(innerBox);

        document.body.appendChild(testBox);

        const widthContaine = innerBox.offsetWidth;
        testBox.style.overflow = 'scroll';
        let widthScroll = innerBox.offsetWidth;

        if (widthContaine === widthScroll) {
          widthScroll = testBox.clientWidth;
        }

        document.body.removeChild(testBox);

        calcSize = widthContaine - widthScroll;

        return calcSize;
      },
      setBodyCalcSize(clear) {
        const bodyIsScroll = document.body.scrollHeight >
          (window.innerHeight || document.documentElement.clientHeight) &&
          window.innerWidth > document.body.offsetWidth;
        if (!bodyIsScroll) {
          return;
        }
        if (clear) {
          document.body.style.position = '';
          document.body.style.width = '';
          return;
        }
        const calcSize = this.getBrowserScrollSize();

        if (calcSize) {
          document.body.style.position = 'relative';
          document.body.style.width = `calc(100% - ${calcSize}px)`;
        }
      },
      onConfirmClick() {
        this.onConfirm && this.onConfirm();
        this.setVisible(false);
      },
      onCancelClick() {
        this.setVisible(false);
      },
      onCloseClick() {
        this.setVisible(false);
      },
      onMaskClick(e) {
        this.maskClosable && this.setVisible(false);
      },
      setVisible(options) {
        if (!options) {
          this.$refs.mask.style.background = 'rgba(0,0,0,0)';
          this.value = false;
          setTimeout(() => {
            this.visible = false;
            this.$refs.mask.style.background = 'rgba(0,0,0,.5)';
            document.body.style.overflow = '';
            this.setBodyCalcSize(true);
            if (this.$el && this.$el.parentNode && this.destroy) {
              this.$el.parentNode.removeChild(this.$el);
            }
            this.closed && this.closed();
          }, 300);
          this.close && this.close();
        } else {
          const {
            type,
            title,
            content,
            confirmText,
            cancelText,
            onConfirm,
            opened,
            close,
            closed,
            cancelHidden,
          } = options;
          this.type = type || false;
          this.title = title || '标题';

          this.content = content;
          this.confirmText = confirmText || '确认';
          this.cancelText = cancelText ? confirmText : '取消';
          this.onConfirm = onConfirm;
          this.close = close;
          this.closed = closed;
          this.opened = opened;

          this.cancelHidden = !(type === 'confirm' && !cancelHidden || type === 'error' && !cancelHidden);

          this.visible = true;
          this.value = true;
          document.body.appendChild(this.$el);

          this.setBodyCalcSize();
          document.body.style.overflow = 'hidden';
          setTimeout(() => {
            this.opened && this.opened();
          }, 300);
        }
      },
    },
  };
</script>
