<script setup lang="tsx">
import { fetchGetStationsList } from '@/service/api/device/manage';
import { useTable } from '@/components/zt/Table/hooks/useTable';

const outColumns: NaiveUI.TableColumn<Api.device.manage>[] = [
  {
    key: 'stationId',
    title: '充电站ID',
    align: 'center'
  },
  {
    key: 'equipmentOwnerId',
    title: '设备所属方',
    align: 'center'
  },
  {
    key: 'stationName',
    title: '充电站名称',
    align: 'center'
  },
  {
    key: 'address',
    title: '详细地址',
    align: 'center'
  },
  {
    key: 'serviceTel',
    title: '服务电话',
    align: 'center'
  },
  {
    key: 'stationType',
    title: '站点类型',
    align: 'center',
    render: row => {
      return (
        <div>
          {row.stationType === 1 && <n-tag type="primary">公共</n-tag>}
          {row.stationType === 50 && <n-tag type="danger">个人</n-tag>}
          {row.stationType === 100 && <n-tag type="info">公交(专用)</n-tag>}
          {row.stationType === 101 && <n-tag type="primary">环卫(专用)</n-tag>}
          {row.stationType === 102 && <n-tag type="success">物流(专用)</n-tag>}
          {row.stationType === 103 && <n-tag type="warning">物流(专用)</n-tag>}
          {row.stationType === 255 && <n-tag type="info">物流(专用)</n-tag>}
        </div>
      );
    }
  },
  {
    key: 'stationStatus',
    title: '站点状态',
    align: 'center',
    render(rowData) {
      return (
        <div>
          {rowData.stationStatus === 0 && <n-tag type={'warning'}>未知</n-tag>}
          {rowData.stationStatus === 1 && <n-tag type={'danger'}>建设中</n-tag>}
          {rowData.stationStatus === 5 && <n-tag type={'info'}>关闭下线</n-tag>}
          {rowData.stationStatus === 6 && <n-tag type={'primary'}>维护中</n-tag>}
          {rowData.stationStatus === 50 && <n-tag type={'success'}>正常使用</n-tag>}
        </div>
      );
    }
  },
  {
    key: 'totalUserCount',
    title: '更新时间',
    align: 'center'
  }
];

const [registerTable] = useTable({
  searchFormConfig: {
    schemas: [
      {
        field: 'stationId',
        label: '充电站ID',
        component: 'NInput'
      },
      {
        field: 'stationName',
        label: '充电站名称',
        component: 'NInput'
      },
      {
        field: 'stationStatus',
        label: '站点状态',
        component: 'NSelect',
        componentProps: {
          options: [
            {
              label: '未知',
              value: 0
            },
            {
              label: '建设中',
              value: 1
            },
            {
              label: '关闭下线',
              value: 5
            },
            {
              label: '维护中',
              value: 6
            },
            {
              label: '正常使用',
              value: 50
            }
          ]
        }
      }
    ],
    inline: false,
    size: 'small',
    labelPlacement: 'left',
    isFull: false
  },
  tableConfig: {
    keyField: 'id',
    title: '充电站管理',
    showAddButton: false
  }
});
</script>

<template>
  <LayoutTable>
    <ZTable
      :show-table-action="false"
      :columns="outColumns"
      :immediate="true"
      :api="fetchGetStationsList"
      @register="registerTable"
    ></ZTable>
  </LayoutTable>
</template>

<style scoped></style>
