<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-10-10 14:44:45
 * @LastEditors: 无尘
 * @LastEditTime: 2020-11-16 13:41:46
 -->

<!--
  <total-preview :loginData="loginData"></total-preview>
  import totalPreview from '@/components/login-data/total-preview.vue';
-->
<template>
  <ul class="flex flex-space-between">
    <li class="data-total-cell today flex-1">
      <div class="flex p-20-15">
        <div><img src="../../assets/data/today.png" class="m-w-55" alt="" /></div>
        <div class="m-l-20">
          <div class="cell-title">
            <el-tooltip class="item" effect="dark" content="今日截至当前时间的登录人数。导购同时归属多家门店的记多人。更新频率 15 分钟" placement="top-start">
              <span class="font-13 color-909399 cell-title-span" style="cursor: pointer;padding-bottom: 2px; ">今日登录人数</span>
            </el-tooltip>
          </div>
          <div class="font-28 color-303133 cell-value font-din m-t-15">{{ loginData.toDayLoginClerkCnt || '0' }}</div>
        </div>
      </div>
    </li>
    <li class="data-total-cell w-m-192 flex-1">
      <div class="flex p-20-15">
        <div><img src="../../assets/data/login.png" class="m-w-55" alt="" /></div>
        <div class="m-l-20">
          <div class="cell-title">
            <el-tooltip class="item" effect="dark" content="截至昨日23：59：59统计出的昨日登录人数。导购同时归属多家门店的记多人。" placement="top-start">
              <span class="font-13 color-909399 cell-title-span" style="cursor: pointer;padding-bottom: 2px; ">昨日登录人数</span>
            </el-tooltip>
          </div>
          <div class="font-28 color-303133 cell-value font-din m-t-15">{{ loginData.loginClerkCnt || '0' }}</div>
        </div>
      </div>
    </li>
    <li class="data-total-cell w-m-220 flex-1">
      <div class="flex p-20-15">
        <div><img src="../../assets/data/login.png" class="m-w-55" alt="" /></div>
        <div class="m-l-20">
          <div class="cell-title">
            <el-tooltip class="item" effect="dark" content="企业下人均每日的登录次数。" placement="top-start">
              <span class="font-13 color-909399 cell-title-span " style="cursor: pointer;padding-bottom: 2px; ">昨日人均登录次数</span>
            </el-tooltip>
          </div>
          <div class="font-28 color-303133 cell-value font-din m-t-15">{{ loginData.avgLoginTimes || '0' }}</div>
        </div>
      </div>
    </li>
    <li class="data-total-cell w-m-220 flex-1">
      <div class="flex p-20-15">
        <div><img src="../../assets/data/time.png" class="m-w-46" alt="" /></div>
        <div class="m-l-20">
          <div class="cell-title">
            <el-tooltip class="item" effect="dark" content="企业下人均每日的访问总时长。" placement="top-start">
              <span class="font-13 color-909399 cell-title-span" style="cursor: pointer;padding-bottom: 2px; ">昨日人均访问总时长</span>
            </el-tooltip>
          </div>
          <div class="font-28 color-303133 cell-value font-din m-t-15">{{ loginData.avgVisitTime | formatTime }}</div>
        </div>
      </div>
    </li>
    <li class="data-total-cell flex-1">
      <div class="flex p-20-15">
        <div><img src="../../assets/data/people.png" class="m-w-46" alt="" /></div>
        <div class="m-l-20">
          <div class="cell-title">
            <el-tooltip class="item" effect="dark" content="企业下的好办门店员工总人数，导购同时归属多家门店的记多人" placement="top-start">
              <span class="font-13 color-909399 cell-title-span" style="cursor: pointer;padding-bottom: 2px; ">员工总人数</span>
            </el-tooltip>
          </div>
          <div class="font-28 color-303133 cell-value font-din m-t-15">{{ loginData.totalClerkCnt || '0' }}</div>
        </div>
      </div>
    </li>
    <li class="data-total-cell w-m-230 flex-1">
      <div class="flex p-20-15">
        <div><img src="../../assets/data/people.png" class="m-w-46" alt="" /></div>
        <div class="m-l-20">
          <div class="cell-title">
            <el-tooltip class="item" effect="dark" content="截至昨日好办上线门店企业员工近三天登录总人数" placement="top-start">
              <span class="font-13 color-909399 cell-title-span" style="cursor: pointer;padding-bottom: 2px; ">近三日活跃总人数</span>
            </el-tooltip>
          </div>
          <div class="font-28 color-303133 cell-value font-din m-t-15">{{ loginData.activeClerkCnt || '0' }}</div>
        </div>
      </div>
      <div class="to-link-icon">
        <el-tooltip content="活跃人员明细" placement="top">
          <div class="detail-icon cursor-pointer flex flex-align-center flex-pack-center" @click="changeRoute('/activeDetail?brandId=' + activeBrand)"><span class="font-13 iconfont-hb3 iconmingxibeifen color-c0c4cc"></span></div>
        </el-tooltip>
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'total-preview',
  props: {
    activeBrand: {
      type: String,
      default() {
        return '';
      }
    },
    loginData: {
      type: Object,
      default() {
        return {
          totalClerkCnt: '0',
          activeClerkCnt: '0',
          loginClerkCnt: '0',
          avgLoginTimes: '0',
          avgVisitTime: '',
          toDayLoginClerkCnt: '0'
        };
      }
    }
  },
  data() {
    return {
      dataObj: {}
    };
  },
  methods: {
    /**
     * 路由跳转
     */
    changeRoute(path) {
      this.$router.push(path);
    }
  },
  watch: {
    loginData: function(newData, oldData) {
      var that = this;
      that.dataObj = newData;
    }
  },
  /* 接收数据 */
  mounted() {
    const that = this;
    that.dataObj = that.loginData;
  }
};
</script>
<style lang="scss" scoped>
.font-13 {
  font-size: 13px;
}
.font-28 {
  font-size: 28px;
}
.p-20-15 {
  padding: 20px 15px;
}
.m-w-46 {
  max-width: 46px;
  max-height: 46px;
}
.m-w-55 {
  max-width: 55px;
  max-height: 55px;
}
.m-l-20 {
  margin-left: 20px;
}
.m-t-15 {
  margin-top: 15px;
}
.data-total-cell {
  position: relative;
  min-width: 170px;
  height: 96px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 8px 1px rgba(221, 227, 237, 0.34);
  border-radius: 10px;
  &.w-m-220 {
    min-width: 220px;
  }
  &.w-m-192 {
    min-width: 192px;
  }
  &.w-m-230 {
    min-width: 230px;
  }
  .cell-title-span {
    color: #909399;
    border-bottom: 1px dashed #2f54eb;
  }
  & + .data-total-cell {
    margin-left: 20px;
  }
  &.today {
    min-width: 202px;
    background: rgba(89, 126, 247, 1);
    box-shadow: 0px 2px 8px 1px rgba(200, 205, 226, 0.81);
    .cell-title {
      .cell-title-span {
        color: #fff;
        border-bottom: 1px dashed #fff;
      }
    }
    .cell-value {
      color: #fff;
    }
  }
  .to-link-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 24px;
    height: 24px;
  }
}
.detail-icon {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: #f0f2f5;
  &:hover {
    background: rgba(47, 84, 235, 0.08);
    .iconmingxibeifen {
      font-size: 13px;
      color: #2f54eb;
    }
  }
}
</style>
