{$layout}

{$var "header"}
<script type="text/javascript" src="/js/sortable.min.js"></script>
{$end}

{$template "../settings_menu"}
{$template "/left_menu_with_menu"}

<div class="left-right-box-container">

	<div class="right-box">
		{$template "menu"}

		<b-empty v-if="locations.length == 0">{{t('locations_index@暂时还没有路由规则')}}</b-empty>

		<b-sortable-table
			v-if="locations.length > 0"
			:columns="[
				{
					title: '',
					key: 'handle',
					scopedSlots: { customRender: 'handleSlot' },
					width: '50px',
					align: 'center'
				},
				{ title: t('locations_index@匹配规则'), key: 'pattern', scopedSlots: { customRender: 'patternSlot' } },
				{ title: t('locations_index@匹配类型'), dataIndex: 'patternTypeName', key: 'patternType', width: '10em' },
				{ title: t('locations_index@状态'), key: 'status', width: '6em', scopedSlots: { customRender: 'statusSlot' } },
				{ title: t('locations_index@操作'), key: 'action', width: '10em', scopedSlots: { customRender: 'actionSlot' } }
			]"
			:data-source="locations"
			:row-key="'id'"
			:pagination="false"
			:on-sort="handleSort"
		>
			<template slot="handleSlot" slot-scope="{ record }">
				<i class="icon bars handle grey"></i>
			</template>

			<template slot="patternSlot" slot-scope="{ text, record }">
				<a :href="'/servers/server/settings/locations/location?serverId=' + serverId + '&locationId=' + record.id">{{record.pattern}}</a>
				<http-location-labels :v-location-config="record" :v-server-id="serverId"></http-location-labels>
			</template>

			<template slot="statusSlot" slot-scope="{ text, record }">
				<label-on :v-is-on="record.isOn"></label-on>
			</template>

			<template slot="actionSlot" slot-scope="{ text, record }">
				<a-button type="link" :href="'/servers/server/settings/locations/location?serverId=' + serverId + '&locationId=' + record.id">{{t('locations_index@详情')}}</a-button>
				<a-button type="link" danger @click.prevent="deleteLocation(record.id)">{{t('locations_index@删除')}}</a-button>
			</template>
		</b-sortable-table>

		<p class="comment" v-if="locations.length > 0" v-html="t('locations_index@排序提示')"></p>
	</div>
</div>