<script setup lang="ts">
import ContainerBox from "@/components/ContainerBox";
import {
  defineColumns,
  defineTableScroll,
  RowData,
} from "@twoke/seamless-scroll";
import {
  getSpecialVehicle
} from '@/api/home'
import {  data as TemplateData } from './data'


const carInfo = ref<any>([])

getSpecialVehicle().then(res => copeResponse(res.data, data => {
  carInfo.value = data.filter(item => TemplateData.includes(item.mc))
}))

const columns = defineColumns([
  {
    title: "装备名称",
    key: "mc",
    width: "40%",
    style: {
      // 定义某列的单独样式
      textAlign: "left",
      paddingLeft: ".5vw",
    },
  },
  {
    title: "总数",
    key: "total",
    width: "20%",
  },
  {
    title: "待命",
    key: "dm",
    width: "20%",
  },
  {
    title: "返队",
    key: "fd",
    width: "20%",
  },
] as const);

type TableData = RowData<typeof columns>;


const TableScroll = defineTableScroll<TableData>(columns);
</script>

<template>
  <container-box title="特种车辆" style="height: 32.1vh">
    <div>
      <TableScroll
        :data="carInfo"
        :columns="columns"
        height="20vh"
        width="20.6vw"
      />
    </div>
  </container-box>
</template>

<style scoped lang="less">
:deep(.table-scroll) {
  border: 0.1vw solid #99999960;
  overflow: hidden;
  // padding: 0 0.125rem;
  padding: 0 2px;
  .table-scroll-header {
    // background-color: #0d4d96;
    background-image: linear-gradient(
      90deg,
      #0a48a5 0%,
      rgba(10, 72, 165, 0.8) 100%
    );
    border-radius: 6px;
    border: solid 1px #07446f;
    font-size: 1vw;
  }

  .table-scroll-row {
    // border-top: 0.05vw solid #99999960;
    margin-top: 2px;
    margin-right: 2px;
    background-image: linear-gradient(
      90deg,
      #031340 0%,
      rgba(3, 19, 64, 0.8) 100%
    );
    border-radius: 6px;
    border: solid 1px #07446f;
  }

  .table-scroll-cell {
    padding: 0.8vh 0;
    text-align: center;
  }
}
</style>
