<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./index.js"
import LabelOn from "@/components/common/LabelOn.vue";
import Column from "primevue/column";
import ListTable from "@/components/common/ListTable.vue";
import Menu from "./@menu.vue"
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<Menu :ctx="ctx" active-tab="index"></Menu>

	<div v-if="ctx.routes.length == 0">
		<NotFoundInfo disable-spacing>暂时还没有线路。</NotFoundInfo>
	</div>

	<div v-show="ctx.routes.length > 0">
		<ListTable :items="ctx.routes" @sort="ctx.sortTable">
			<Column row-reorder style="width: 3em" frozen></Column>
			<Column header="线路名称" class="name-column" frozen>
				<template #body="{data:route}">
					<a href="" @click.prevent="ctx.updateRoute(route.id)">{{ route.name }}
						<i class="icon expand small"></i> </a>
				</template>
			</Column>
			<Column header="代号" class="name-column">
				<template #body="{data:route}">
					id:{{ route.id }}
				</template>
			</Column>
			<Column header="状态" class="status-column">
				<template #body="{data:route}">
					<LabelOn :v-is-on="route.isOn"></LabelOn>
				</template>
			</Column>
			<Column header="操作" class="two op" align-frozen="right">
				<template #body="{data:route}">
					<a href="" @click.prevent="ctx.updateRoute(route.id)">修改</a> &nbsp;
					<a href="" @click.prevent="ctx.deleteRoute(route.id)">删除</a>
				</template>
			</Column>
		</ListTable>

		<p class="comment flex items-center" v-if="ctx.routes.length > 0">可以拖动左侧的<i class="icon bars"></i>排序。
		</p>
	</div>
</template>

<style lang="postcss" scoped>
</style>