<script setup lang="ts">
import ContainerBox from '@/components/ContainerBox'
import { defineColumns, defineTableScroll, RowData } from '@twoke/seamless-scroll'

const columns = defineColumns([
  {
    title: '装备名称',
    key: 'name',
    width: '40%',
    style: { // 定义某列的单独样式
      textAlign: 'left',
      paddingLeft: '.5vw'
    },
  },
  {
    title: '总数',
    key: 'total',    
    width: '20%'
  },
  {
    title: '出动',
    key: 'out',
    width: '20%',
  },
  {
    title: '待命',
    key: 'wait',
    width: '20%',
  },
  {
    title: '其他',
    key: 'other',
    width: '20%',
  }
] as const)

type TableData = RowData<typeof columns>

const tableData:TableData[] = [
  {
    name: '化学洗消防车',
    total: 2,
    out: 0,
    wait: 2,
    other: 0,
  },
  {
    name: '举高喷射消防车',
    total: 35,
    out: 0,
    wait: 20,
    other: 15,
  },
  {
    name: '排烟消防车',
    total:9,
    out: 0,
    wait: 7,
    other: 2,
  },
  {
    name: '排烟照明消防车',
    total: 1,
    out: 0,
    wait: 1,
    other: 0,
  },
  {
    name: '水带赋设消防车',
    total: 1,
    out: 0,
    wait:0,
    other: 1,
  },
  {
    name: '涡喷消防车',
    total: 4,
    out: 0,
    wait: 4,
    other: 0,
  },
  {
    name: '云梯消防车',
    total: 28,
    out: 0,
    wait: 19,
    other: 9,
  }
]

const TableScroll = defineTableScroll<TableData>(columns)

</script>

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

<style scoped lang="less">
:deep(.table-scroll) {
  border: .1vw solid #99999960;
  overflow: hidden;
  .table-scroll-header {
    background-color: #0D4D96;
    font-size: 1vw;
  }

  .table-scroll-row {
    border-top: .05vw solid #99999960;
  }

  .table-scroll-cell {
    padding: .8vh 0;
    text-align: center;
  }

}
</style>
