<script setup>

import {inject, ref} from "vue"
import LabelOn from "@/components/common/LabelOn.vue";
import HTTPRewriteLabelsLabel from "@/components/server/HTTPRewriteLabelsLabel.vue";
import ListTable from "@/components/common/ListTable.vue";
import Column from "primevue/column";

const utils = inject("$utils")
const Tea = inject("$Tea")
const props = defineProps(["v-web-id", "v-rewrite-rules"])

const {rewriteRules} = (function () {
	let rewriteRules = props.vRewriteRules
	if (rewriteRules == null) {
		rewriteRules = []
	}
	return {
		rewriteRules: ref(rewriteRules)
	}
})()

const updateRewriteRule = function (rewriteRuleId) {
	utils.popup("/servers/server/settings/rewrite/updatePopup?webId=" + props.vWebId + "&rewriteRuleId=" + rewriteRuleId, {
		height: utils.POPUP_HEIGHT_LG,
		callback: function () {
			window.location.reload()
		}
	})
}

const deleteRewriteRule = function (rewriteRuleId) {
	utils.confirm("确定要删除此重写规则吗？", function () {
		Tea.action("/servers/server/settings/rewrite/delete")
			.params({
				webId: props.vWebId,
				rewriteRuleId: rewriteRuleId
			})
			.post()
			.refresh()
	})
}

// 排序
const sortTable = function (rowIds) {
	Tea.action("/servers/server/settings/rewrite/sort")
		.post()
		.params({
			webId: props.vWebId,
			rewriteRuleIds: rowIds
		})
		.success(function () {
			utils.success("保存成功")
		})
}


</script>

<template>
	<div>
		<p class="comment" v-if="rewriteRules.length == 0">暂时还没有重写规则。</p>

		<div v-if="rewriteRules.length > 0">
			<ListTable :items="rewriteRules" @sort="sortTable">
				<Column rowReorder headerStyle="width: 3em"></Column>
				<Column header="匹配规则">
					<template #body="{data:rule}">
						{{ rule.pattern }}

						<div class="label-group mt-1">
							<HTTPRewriteLabelsLabel v-if="rule.isBreak">BREAK</HTTPRewriteLabelsLabel>
							<HTTPRewriteLabelsLabel v-if="rule.mode == 'redirect' && rule.redirectStatus != 307">{{ rule.redirectStatus }}</HTTPRewriteLabelsLabel>
							<HTTPRewriteLabelsLabel v-if="rule.proxyHost.length > 0">Host: {{ rule.proxyHost }}</HTTPRewriteLabelsLabel>
						</div>
					</template>
				</Column>
				<Column header="转发目标">
					<template #body="{data:rule}">
						{{ rule.replace }}
					</template>
				</Column>
				<Column header="转发方式">
					<template #body="{data:rule}">
						<span v-if="rule.mode == 'proxy'">隐式</span>
						<span v-if="rule.mode == 'redirect'">显示</span>
					</template>
				</Column>
				<Column header="状态" headerClass="two wide">
					<template #body="{data:rule}">
						<LabelOn :v-is-on="rule.isOn"></LabelOn>
					</template>
				</Column>
				<Column header="操作" headerClass="two op">
					<template #body="{data:rule}">
						<a href="" @click.prevent="updateRewriteRule(rule.id)">修改</a> &nbsp;
						<a href="" @click.prevent="deleteRewriteRule(rule.id)">删除</a>
					</template>
				</Column>
			</ListTable>
		</div>

		<p class="comment flex items-center" v-if="rewriteRules.length > 0">拖动左侧的<i class="icon bars grey"></i>图标可以对重写规则进行排序。
		</p>

	</div>
</template>

<style scoped>
</style>
