<template>
  <view class="main-warp">
    <u-scroll-list :indicator="false">
      <view class="scroll-warp">
        <view
          v-for="(item, index) in titleList"
          :key="index"
          :class="{ active: item.code == activeCode }"
          class="scroll-item"
          @click="switchTitle(item)"
        >
          {{ item.name }}
        </view>
      </view>
    </u-scroll-list>
    <view class="box-wrap">
      <view
        class="box"
        v-for="[key, item] in Object.entries(boxList)"
        :key="key"
      >
        <view class="num">
          {{ item.num }}
        </view>
        <view class="text">
          {{ item.name }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { get } from '@/utils/api.js'
export default {
  data () {
    return {
      activeCode: null,
      titleList: [],
      boxList: {
        // 故障
        faultSum: {
          name: '故障',
          num: ''
        },
        // 维修
        stopSum: {
          name: '维修',
          num: ''
        },
        // 空闲
        freeSum: {
          name: '空闲',
          num: ''
        },
        // 运行
        runSum: {
          name: '运行',
          num: ''
        }
      }
    }
  },
  created () {
    this.getproductionLine()
  },
  watch: {
    activeCode: function (nval) {
      if (nval) {
        this.getequipmentStatusList()
      }
    }
  },
  methods: {
    switchTitle (item) {
      this.activeCode = item.code
    },
    // 获取产线
    getproductionLine () {
      get(this.apiUrl + '/base/line/getList').then(res => {
        if (res?.success) {
          this.titleList = res.data
          this.activeCode = this.titleList[0].code
        }
      })
    },
    // 获取设备状态
    getequipmentStatusList () {
      get(
        this.apiUrl +
          '/home/page/system/equipmentStatusList?lineCode=' +
          this.activeCode
      ).then(res => {
        if (res?.success) {
          for (let [key, item] of Object.entries(this.boxList)) {
            item.num = res.data[key]
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$cols: 4; // 列数
$marginWidth: 30rpx; // 间隔
.main-warp {
  background-color: #fff;
}

.scroll-warp {
  padding: 20rpx;
  display: flex;
  flex-direction: row;
  .scroll-item {
    color: #aaa;
    font-size: 30rpx;
    white-space: nowrap;
    position: relative;
    & + .scroll-item {
      margin-left: 30rpx;
    }
    &.active {
      color: #157a2c;
      &::before {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background-color: #157a2c;
        position: absolute;
        bottom: -6rpx;
        left: 0;
      }
    }
  }
}
.box-wrap {
  display: flex;
  padding: 0 20rpx 20rpx;
  .box {
    flex: 1;
    text-align: center;
    background-color: #f6f6f6;
    padding: 20rpx;
    width: calc((100% - #{($cols - 1) * $marginWidth}) / #{$cols});
    margin-left: $marginWidth;
    .text {
      color: #aaaaaa;
      font-size: 28rpx;
      height: 32rpx;
    }
    .num {
      color: #157a2c;
      font-size: 36rpx;
      font-weight: bold;
      height: 48rpx;
    }
  }
  .box:nth-of-type(#{$cols}n + 1) {
    margin-left: 0;
  }
}
</style>
