<template>
  <Card title="亮点展示">
    <div class="container">
      <div class="top">
        <div
          :class="['top-item', { active: activeIndex == index }]"
          v-for="(item, index) in headerList"
          :key="index"
          @click="handelItemClick(index)"
        >{{ item }}</div>
      </div>
      <vue-scroll style="height: calc(100% - 27px);">
        <div class="bottom list">
          <div class="list-item" v-for="(item, index) in list" :key="index">
            <span class="label">{{ item.name }}</span>
            <span class="value">{{ item.content }}</span>
          </div>
        </div>
      </vue-scroll>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card'
export default {
  components: { Card },
  data() {
    return {
      // 头部行
      headerList: ['质量', '安全', '技术'],
      // 激活的item
      activeIndex: 0,
      // 列表
      list: [
        { name: '中国建筑第四工程局有限公司', content: '' },
        { name: '中国建筑第四工程局有限公司', content: '' },
        { name: '中国建筑第四工程局有限公司', content: '' },
        { name: '中国建筑第四工程局有限公司', content: '' },
        { name: '中国建筑第四工程局有限公司', content: '' },
        { name: '中国建筑第四工程局有限公司', content: '' },
        { name: '中国建筑第四工程局有限公司', content: '' },
      ]
    }
  },
  methods: {
    /** item单击事件 */
    handelItemClick(index) {
      this.activeIndex = index
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  padding-top: 10px;
  width: 100%;
  height: 100%;

  .top {
    display: flex;

    margin-bottom: 10px;
    width: 100%;
    height: 27px;

    .top-item {
      display: grid;
      place-items: center;

      width: 64px;
      height: 100%;
      margin-right: 5px;
      background-image: url('../assets/images/command-center/block4.png');
      cursor: pointer;
      &.active {
        background-image: url('../assets/images/command-center/block4-active.png');
      }
    }
  }

  .bottom.list {
    width: 100%;
    height: calc(100% - 27px);
   
    display: flex;
    flex-direction: column;
    color: #fff;
    // overflow-y: scroll;

    .list-item {
      position: relative;
      display: flex;
      box-sizing: border-box;
      border-left: 4px solid #66d3d8;
      margin-bottom: 5px;
      padding: 8px 0;
      width: 100%;
      background-image: linear-gradient(to right, #3b7589, #182337);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      white-space: nowrap;

      &:hover {
        padding: 20px 0;
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 8px;
          display: inline-block;
          transform: translate(0, -50%);
          width: 6.6px;
          height: 11.6px;
          background-image: url('../assets/images/command-center/triangle.png');
          background-size: 100% 100%;
          transition: all .3s;
        }
      }

      &:hover .value {
        color: #c2805f;
      }

      &:last-child {
        margin-bottom: 0;
      }

      .label,
      .value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .label {
        box-sizing: border-box;
        width: 100%;
        padding-left: 20px;
      }

      .value {
        width: 60%;
      }
    }
  }
}
</style>
