<!--
 * 机台列表轮播图
  -->
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { machineList1 } from '../../config';
import EquipmentPage from './EquipmentPage.vue';

const state = reactive({
  list: [] as any,
  autoplay: 10000,
});

onMounted(() => {
  state.list = handleMachineList(machineList1);
  state.autoplay = 3000;
});

function handleMachineList(data: any) {
  const step = 3;
  const length = data.length;
  const divisionRes = division(length, step);
  console.log(divisionRes);

  let DATA = JSON.parse(JSON.stringify(data));
  let arr = [] as any;
  for (let i = 0; i < divisionRes.int; i++) {
    return;
  }

  return DATA;
}

// 取整 取余
function division(n: number, m: number) {
  const yu = n % m;
  const int = parseInt(String(n / m));
  return {
    yu,
    int,
  };
}
</script>
<template>
  <div>机台列表</div>
  <div class="my-warp-box">
    <equipment-page :list="state.list" :autoplay="state.autoplay" />
  </div>
</template>

<style lang="scss" scoped>
.my-warp-box {
  width: 500px;
  height: 300px;
  border: 1px solid red;
  background-color: yellowgreen;
}
</style>
