<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-07-02 16:48:49
 * @LastEditors: 无尘
 * @LastEditTime: 2020-07-09 11:35:37
-->
<!--
  <area-progress :charData="charData" id="a-chart"></area-progress>
  import areaProgress from '@/components/login-data/area-progress.vue';
-->
<template>
  <div class="bar-chart-body">
    <div class="bar-legend m-b-20"><span class="square-pot bg-597ef7"></span><span class="font-12 color-8c8c8c p-l-5">登录员工数</span><span class="square-pot bg-e6ecfa m-l-40"></span><span class="font-12 color-8c8c8c p-l-5">员工总数</span></div>
    <ul>
      <li v-for="(item, index) in charData" :key="index + 'process'" class="cursor-pointer">
        <div class="group-name font-12 color-000-45 m-b-4">{{ item.storeGroupName }}</div>
        <el-tooltip placement="top">
          <div slot="content">
            <div>
              <div class="flex flex-space-between">
                <span class="font-12 color-fff">{{ item.storeGroupName }}</span
                ><span class="font-12 color-fff p-l-40">登录率：{{ item.loginRateString }}</span>
              </div>
              <div class="m-t-10">
                <span class="process-tip-dot bg-e6ecfa"></span> <span class="font-12 color-fff">员工人数:</span> <span class="font-12 color-fff">{{ item.totalClerkCnt }}</span>
              </div>
              <div class="m-t-10">
                <span class="process-tip-dot bg-597ef7"></span> <span class="font-12 color-fff">登录人数:</span> <span class="font-12 color-fff">{{ item.loginClerkCnt }}</span>
              </div>
            </div>
          </div>
          <div class="people-total">
            <div class="flex people-total-bg">
              <div class="login-total" :style="{ width: item.loginRateString }"></div>
              <div class="login-rate" :style="{ left: item.loginRateString }">{{ item.loginRateString }}</div>
            </div>
          </div>
        </el-tooltip>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chart: null
    };
  },
  props: {
    charData: {
      type: Array,
      default() {
        return [];
      }
    },
    id: String,
    width: {
      type: Number,
      default: null
    }
  },
  watch: {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.square-pot {
  display: inline-block;
  width: 8px;
  height: 8px;
}
.color-000-45 {
  color: rgba(0, 0, 0, 0.45);
}
.bg-597ef7 {
  background: #597ef7;
}
.bg-e6ecfa {
  background: #e6ecfa;
}
.color-8c8c8c {
  color: #8c8c8c;
}
.p-l-5 {
  padding-left: 5px;
}
.p-l-40 {
  padding-left: 40px;
}
.m-b-4 {
  margin-bottom: 4px;
}
.m-l-40 {
  margin-left: 40px;
}
.bar-legend {
  margin-top: 27px;
}
.process-tip-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 3px;
}
li {
  & + li {
    margin-top: 14px;
  }
}
.people-total {
  position: relative;
  width: 95%;
  height: 20px;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(89, 126, 247, 0.1);
    z-index: 0;
  }
  .people-total-bg {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .login-total {
    height: 100%;
    background: #597ef7;
  }
  .login-rate {
    position: absolute;
    left: 0;
    margin-left: 10px;
    line-height: 20px;
    font-size: 12px;
    color: #595959;
  }
}
</style>
