<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-26 15:07:33
 * @LastEditTime: 2019-10-09 14:38:58
 * @LastEditors: Please set LastEditors
 -->
<template>
  <ul class="zte-modules" :data-current="currentName">
    <li
      class="module"
      :class="{
        'current': sys.modules === service,
      }"
      v-for="(sys, index) in showModules"
      :title="sys.name"
      :key="index"
      @click="openSystem(sys, true)">
      <div class="icon">
        <svg-icon type="css" :icon-class="sys.icon"></svg-icon>
      </div>
      <div class="name">{{ sys.name }}</div>
    </li>
    <el-popover
      v-if="moreModules.length"
      :class="{
        'current': isMore,
      }"
      class="module"
      popper-class="modules-popover"
      placement="bottom"
      width="300"
      trigger="click"
      v-model="popoverVisible"
    >
      <ul
        class="more-modules"
        :class="{
          'current': isMore,
        }"
      >
        <li
          class="module"
          :class="{
            'current': sys.modules === service,
          }"
          v-for="(sys, index) in moreModules"
          :title="sys.name"
          :key="index"
          @click="handlerClickSys(sys)"
        >
          <div class="icon">
            <svg-icon type="css" :icon-class="sys.icon"></svg-icon>
          </div>
          <div class="name">{{ sys.name }}</div>
        </li>
      </ul>
      <li class="module" slot="reference">
        <div class="icon">
          <svg-icon type="css" icon-class="top-more"></svg-icon>
        </div>
        <div class="name">更多</div>
      </li>
    </el-popover>
  </ul>
</template>

<script>
import openSystem from './mixins/openSystem';
import svgIcon from './svg-icon';

export default {
  name:'zteModules',
  mixins: [openSystem],
  components: {
    svgIcon,
  },
  props: {
    service: String,
    modules: {
      type: Array,
      default: () => ([]),
    },
    maxView: {
      type: Number,
      default: 0,
      validator:val => val >= 0,
    },
  },
  data() {
    return {
      popoverVisible: false,
    }
  },
  computed: {
    currentModules() {
      return this.modules || []
    },
    currentName() {
      const currentSys = this.currentModules.find(item => item.modules === this.service) || {};
      const currentName = currentSys.name;
      if (currentName) {
        document.title = currentSys.name;
      }
      return currentName;
    },
    showModules() {
      const modules = this.maxView ? this.currentModules.slice(0, this.maxView) : this.currentModules;
      return modules;
    },
    moreModules() {
      if (!this.maxView) return [];
      const modules = this.currentModules.slice(this.maxView);
      return modules;
    },
    isMore() {
      const isMore = this.moreModules.some(sys => sys.modules === this.service);
      return isMore;
    },
  },
  created() {
    this.checkVersion();
  },
  mounted() {
    this.lastLoginTime();
  },
  methods: {
    handlerClickSys(sys) {
      this.popoverVisible = false;
      this.openSystem(sys, true)
    },
    lastLoginTime() {
      const datetime = this.$cookies.get('lastLoadingTime');
      if (datetime) {
        const [date, time] = datetime.split(' ');
        const [year, month, day] = date.split('-');
        this.$notify({
          type: 'success',
          title: '登录成功',
          dangerouslyUseHTMLString: true,
          message: `
            您最近一次登录时间为：<span style="font-weight: bold">${year}年${month}月${day}日 ${time}</span>;
            若非本人操作，请
            <a style="color: #0089d1" href="/eas/#/userCenter?changePwd=true" target="_blank">修改系统登录密码</a>。`,
          position: 'bottom-right',
        });
      }
      this.$cookies.remove('lastLoadingTime');
    },
    checkVersion() {
      this.$http.get('common/params/getValueByCode/VERSION')
        .then(
          ({ data }) => {
            const VUE_APP_VERSION = this.$cookies.get('VUE_APP_VERSION');
            if (data.version && !(VUE_APP_VERSION && data.version === VUE_APP_VERSION)) {
              this.$cookies.set('VUE_APP_VERSION', data.version, '30d');
              window.location.reload();
            }
          },
        )
        .catch();
    },
  },
}
</script>
