<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-07-02 16:48:49
 * @LastEditors: 无尘
 * @LastEditTime: 2020-07-03 16:06:19
-->
<!--
  <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"><span class="square-pot bg-597ef7"></span><span class="font-12 color-8c8c8c">登录员工数</span><span class="square-pot bg-e6ecfa m-l-40"></span><span class="font-12 color-8c8c8c">员工总数</span></div>
    <ul>
      <li v-for="(item, index) in charData" :key="index + 'process'">
        <div class="group-name font-12 color-000-45">{{ item.storeGroupName }}</div>
        <el-tooltip placement="top">
          <div slot="content">
            <div>
              <div>
                <span class="font-12 color-fff">{{ item.storeGroupName }}</span
                ><span class="font-12 color-fff">{{ item.loginRate }}</span>
              </div>
              <div>
                <span class="procedd-tip-dot bg-e6ecfa"></span> <span class="font-12 color-fff">员工人数:</span> <span class="font-12 color-fff">{{ item.totalClerkCnt }}</span>
              </div>
              <div>
                <span class="procedd-tip-dot bg-597ef7"></span> <span class="font-12 color-fff">登录人数:</span> <span class="font-12 color-fff">{{ loginClerkCnt }}</span>
              </div>
            </div>
          </div>
          <div class="people-total">
            <div class="flex people-total-bg">
              <div class="login-total" :style="{ width: item.loginRate }"></div>
              <div>{{ item.loginRate }}</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
    }
  },
  mounted() {},
  watch: {
    charData() {}
  },
  methods: {}
};
</script>

<style lang="less" 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;
}
.m-l-40 {
  margin-left: 40px;
}
.procedd-tip-dot {
  width: 6px;
  height: 6px;
  padding-right: 6px;
  border-radius: 3px;
}
.people-total {
  position: relative;
  width: 100%;
  height: 20px;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 95%;
    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;
  }
}
</style>
