<template>
  <div class="es-simplicity-handler">
    <template v-for="item in data">
      <div
        v-if="item.type == 'contact'"
        class="es-simplicity-contact"
        :key="item.type"
      >
        <div class="es-contact-label">{{ item.label }}</div>
        <div class="es-contact-content">
          <div v-for="ele in item.content" :key="ele">{{ ele }}</div>
        </div>
      </div>
      <div
        class="es-simplicity-date-time"
        v-else-if="item.type === 'dateTime'"
        :key="item.type"
      >
        <div class="es-simplicity-handler-time">
          {{ time }}
        </div>
        <div class="es-simplicity-handler-date">
          {{ date }}
        </div>
      </div>
      <div
        v-else-if="item.type === 'online' || item.type === 'onlineUser'"
        class="es-simplicity-online"
        :key="item.type"
      >
        当前
        <span
          class="es-simplicity-online-num"
          @click="isClick ? handleClick({ type: 'online' }) : ''"
          :class="{ 'es-pointer': isClick }"
        >
          {{ nums[item.type] }}
        </span>
        人在线
      </div>
      <el-tooltip
        v-else-if="showTitleType === 'tooltip'"
        :key="item.type"
        effect="dark"
        :content="item.title"
        placement="bottom"
      >
        <el-badge
          class="es-simplicity-handler-item"
          :hidden="!nums[item.type] && !item.num"
          :value="nums[item.type] || item.num || 0"
          :max="99"
        >
          <es-icon
            class="es-simplicity-handler-icon es-simplicity-handler-icon-hover"
            @click.stop="handleClick(item)"
            :contents="item.icon"
          ></es-icon>
        </el-badge>
      </el-tooltip>
      <div
        class="es-simplicity-handler-item es-simplicity-handler-item-hover"
        v-else
        :key="item.type"
        @click.stop="handleClick(item)"
      >
        <el-badge
          class="es-simplicity-handler-item"
          :hidden="!nums[item.type] && !item.num"
          :value="nums[item.type] || item.num || 0"
          :max="99"
        >
          <es-icon
            class="es-simplicity-handler-icon"
            :contents="item.icon"
          ></es-icon>
        </el-badge>
        <span
          class="es-simplicity-handler-text"
          v-if="showTitleType === 'text'"
          >{{ item.title }}</span
        >
      </div>
    </template>
  </div>
</template>

<script>
import util from 'eoss-ui/src/utils/util';
export default {
  name: 'Handler',
  components: {},
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    nums: {
      type: Object,
      default() {
        return {};
      }
    },
    showTitleType: {
      type: String,
      default: 'tooltip',
      validator: (val) => {
        return val === 'text' || val === 'tooltip';
      }
    }
  },
  data() {
    return {
      time: '',
      date: '',
      timer: null
    };
  },
  computed: {
    isClick() {
      let useCaseCodes = util.getStorage('useCaseCodes');
      return useCaseCodes && useCaseCodes.includes('sys_user_onlineList');
    }
  },
  watch: {
    data: {
      handler: 'deep',
      immediate: true,
      handler(newVal, oldVal) {}
    }
  },
  created() {
    //this.time = util.timeCycle() + '好!';
    this.date = util.formatDate('', 'yyyy年M月d日');
  },
  mounted() {
    this.getTime();
  },
  methods: {
    getTime() {
      this.timer && clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.time = util.formatDate('', 'HH:mm:ss');
      });
    },
    handleClick(res) {
      this.$emit('click', res);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="scss" scoped></style>
