<template>
  <div>
    <container1 title="人员管理">
      <div class="left3-content">
        <el-col :span="24" style="margin-bottom: 1px">
          <el-row
            style="
              height: 42px;
              line-height: 42px;
              background: rgba(0, 255, 255, 0.3);
            "
          >
            <el-col style="text-align: center" :span="4">班组名称</el-col>
            <el-col style="text-align: center" :span="4">人员数量</el-col>
            <el-col style="text-align: center" :span="4">班次数</el-col>
            <el-col style="text-align: center" :span="4">到岗人数</el-col>
            <el-col style="text-align: center" :span="8">到岗人员</el-col>
          </el-row>
        </el-col>
        <vue-seamless-scroll
          ref="seamlessScroll"
          :data="listData"
          class="warp-scroll"
          :class-option="{ singleHeight: 42 }"
        >
          <ul class="item">
            <li v-for="item in scrollList" :key="item.id">
              <el-row>
                <el-col style="text-align: center" :span="4">{{
                  item.teamName
                }}</el-col>
                <el-col style="text-align: center" :span="4"
                  >{{ item.peopleTotal }}人</el-col
                >
                <el-col style="text-align: center" :span="4"
                  >{{ item.shift }}
                </el-col>
                <el-col style="text-align: center" :span="4"
                  >{{ item.realWorkerTotal }}人</el-col
                >
                <el-col
                  style="text-align: center"
                  :span="8"
                  :title="item.peopleList"
                  >{{ item.peopleList }}</el-col
                >
              </el-row>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </container1>
  </div>
</template>

<script>
import container1 from "./components/container1/index.vue";

import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../../dashboard/mixins/resize";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  mixins: [resize],
  name: "left2",
  components: {
    container1,
    vueSeamlessScroll,
  },
  data() {
    return {
      listData: [1, 2, 3, 4, 5, 6, 7, 8],
      scrollList: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getData();
    });
  },
  methods: {
    getData() {
      this.request({
        url: "/hx/scientificProduction/getTeamAttendancePic",
        method: "get",
      }).then((res) => {
        if (200 == res.code) {
          this.scrollList = res.data;
          this.listData = Array(this.scrollList.length).fill(0);
          this.$refs.seamlessScroll.reset();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.left3-content {
  padding: 0 10px 0 20px;

  font-size: 14px;
}
.warp-scroll {
  height: 168px;
  width: 100%;
  margin: 10px auto 0 auto;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li,
    a {
      display: block;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
    li {
      font-weight: 400;
      color: #fff;
      display: block;
      height: 42px;
      line-height: 42px;
      background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
      img {
        vertical-align: sub;
        margin-right: 5px;
      }
    }

    .state {
      position: relative;
      display: inline-block;
      &::before {
        content: "";
        display: block;
        position: absolute;
        left: -16px;
        top: 18px;
        width: 8px;
        height: 8px;
        background: #a9b8c5;
        border-radius: 50%;
      }
      &.success::before {
        background: #6fd1b4;
      }

      &.fault::before {
        background: #f64f58;
      }
      &.progress::before {
        background: #fa8c16;
      }
    }
  }
}
</style>