<template>
  <transition :name="'sidelip-down'" @after-leave="afterLeave" @after-enter="afterEnter">
    <div :class="[{'sidelip-warp': !full,'sidelip-warp-full': full},className]" v-if="state > -99" @resize="resize" :style="style">
      <Spin fix v-show="loading.length" style="z-index: 2000 !important">
        <Icon type="ios-loading" size=18 class="sidelip-warp-load"></Icon>
        <div>Loading</div>
      </Spin>
      <div class="view-box-content">
        <div class="sidelip-bar-wrapper" v-if="isNav">
          <div class="sidelip-bar-info">
            <Button type="ghost" size="small" icon="ios-undo" @click.native="hide(false)"></Button>
            <span>{{title}}</span>
          </div>
          <div class="sidelip-bar-buttons">
            <span class="sidelip-bar-buttons-tip">{{ tip }}</span>
            <Button size="small" v-for="(item,index) in actions" :key="index" :loading="actionState[item.action]"
                    :type="item.theme" :icon="item.icon" v-preventReClick :disabled="item.disabled"
                    @click.native="item.handle()">{{item.text}}</Button>
          </div>
        </div>
        <div class="sidelip-con">
          <slot></slot>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import store from "../../vuex";

export default {
  name: "sidelip",
  components: {},
  props: {
    full: {
      type: Boolean,
      default() {
        return false
      }
    },
    isNav: {
      type: Boolean,
      default() {
        return true
      }
    },
    className: {
      type: String,
      default() {
        return ''
      }
    },
    //关闭前的操作
    closeStartFn: {
      type: Function,
    }
  },
  data() {
    return {
      display: false,
      state: -99,
      actions: [],
      actionState: {},
      title: "",
      tip: '',
      style: {},
      width: "",
      height: "",
    };
  },
  computed: {
    loading () {
      return $store.getters.sidelipLoading
    }
  },
  created: function () {
    $store.commit('clearLoading');
    document.body.classList.add('bodyHid');
    this.resize();
    $channel.$on("ToggleSidebarMenu", () => {
      this.$nextTick(() => {
        this.resize();
      });
    });
  },
  beforeMount: function () { },
  mounted: function () {
    this.state = -1;
    window.onresize = () => {
      this.resize();
    };
  },
  beforeDestroy: function () {
    document.body.classList.remove('bodyHid');
  },
  destroyed: function () {
    window.onresize = null;
    this.$el.remove();
    // document.querySelector(".single-page").removeChild(this.$el);
  },
  methods: {
    hide(type) {
      //点击标签跳转的不用触发关闭前的额外操作
      if (type) {
        this.handleHide();
        return;
      }
      this.closeStartFn().then(() => {
        this.handleHide();
      });
    },
    handleHide() {
      this.state = -99;
      $instanceSidelipArray.pop();
      $channel.$emit('FlowBtnRouterBefore');
    },
    afterLeave() {
      this.$destroy();
    },
    afterEnter() {
      this.state = 0;
    },
    setPageActions(data) {
      this.actions = data;
      for (let a of this.actions) {
        if (!!a.action) {
          this.actionState[a.action] = false;
        }
      }
    },
    setActionsState(action, state) {
      this.actionState[action] = state;
      this.$forceUpdate();
    },
    setTitle(val) {
      this.title = val;
    },
    setTip(val) {
      this.tip = val;
    },
    resize() {
      if (this.full) {
        this.style.width = '100%'
      } else {
        // 菜单区域宽度
        let menuWidth = document.querySelector(".sidebar-menu-con").offsetWidth;
        // 工作区域左边距
        let offsetLeft = document.querySelector(".single-page").offsetLeft;
        let borderWidth = 1;
        //this.style = {"width": `${document.body.offsetWidth - menuWidth - ((offsetLeft + borderWidth) * 2)}px`};
        this.style = {"width": `${document.body.offsetWidth -
          document.querySelector(".sidebar-menu-con").offsetWidth - 32}px`};
      }
    }
  },
  watch: {},
  directives: {}
};
</script>
<style lang="less">
  .sidelip-warp-load{
    animation: sidelip-warp-spin 1s linear infinite;
  }
  @keyframes sidelip-warp-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
  }
  .sidelip-bar-buttons-tip {
    margin-right: 10px;
  }
</style>
