<template>
	<ObjectList class="p-5" :options="logsOptions" />
</template>

<script>
import { h } from 'vue';
import LucideSparkleIcon from '~icons/lucide/sparkle';
import { date } from '../../utils/format';
import ObjectList from '../ObjectList.vue';

export default {
	name: 'SiteLogs',
	props: {
		name: {
			type: String,
			required: true
		},
		type: {
			type: String,
			required: false
		}
	},
	components: {
		ObjectList
	},
	resources: {
		logs() {
			return {
				url: 'jcloud.api.site.logs',
				params: {
					name: this.name
				},
				auto: true,
				initialData: [],
				cache: ['ObjectList', 'jcloud.api.site.logs', this.name]
			};
		}
	},
	computed: {
		logs() {
			const knownTypes = [
				'jingrow',
				'scheduler',
				'database',
				'pdf',
				'wkhtmltopdf',
				'ipython'
			];

			if (this.type && !knownTypes.includes(this.type)) {
				return this.$resources.logs.data.filter(
					d => !knownTypes.includes(d.name.split('.')[0])
				);
			}

			// 特定类型的日志
			return this.$resources.logs.data.filter(
				d => d.name.split('.')[0] === this.type
			);
		},
		logsOptions() {
			if (this.type) {
				return {
					data: () => this.logs,
					route(row) {
						return {
							name: '站点日志',
							params: { logName: row.name }
						};
					},
					columns: [
						{
							label: '名称',
							fieldname: 'name'
						},
						{
							label: '大小',
							fieldname: 'size',
							class: 'text-gray-600',
							format(value) {
								return `${value} kB`;
							}
						},
						{
							label: '修改时间',
							fieldname: 'modified',
							format(value) {
								return value ? date(value, 'lll') : '';
							}
						}
					],
					actions: () => [
						{
							slots: {
								prefix: () => h(LucideSparkleIcon)
							},
							label: '在日志浏览器中查看',
							onClick: () => {
								this.$router.push({
									name: '日志浏览器',
									params: { mode: 'site', docName: this.name }
								});
							}
						},
						{
							label: '刷新',
							icon: 'refresh-ccw',
							loading: this.$resources.logs.loading,
							onClick: () => this.$resources.logs.reload()
						}
					]
				};
			} else {
				return {
					data: () => [
						{
							title: '调度器日志',
							route: {
								name: '站点日志',
								params: {
									name: this.name,
									type: 'scheduler'
								}
							}
						},
						{
							title: '数据库日志',
							route: {
								name: '站点日志',
								params: {
									name: this.name,
									type: 'database'
								}
							}
						},
						{
							title: 'Jingrow 日志',
							route: {
								name: '站点日志',
								params: {
									name: this.name,
									type: 'jingrow'
								}
							}
						},
						{
							title: 'PDF 日志',
							route: {
								name: '站点日志',
								params: {
									name: this.name,
									type: 'pdf'
								}
							}
						},
						{
							title: 'IPython 日志',
							route: {
								name: '站点日志',
								params: {
									name: this.name,
									type: 'ipython'
								}
							}
						},
						{
							title: 'Wkhtmltopdf 日志',
							route: {
								name: '站点日志',
								params: {
									name: this.name,
									type: 'wkhtmltopdf'
								}
							}
						},
						{
							title: '其他日志',
							route: {
								name: '站点日志',
								params: {
									name: this.name,
									type: 'other'
								}
							}
						}
					],
					columns: [
						{
							label: '标题',
							fieldname: 'title',
							width: 0.3
						},
						{
							label: '',
							fieldname: 'action',
type: 'Button',
							align: 'right',
							Button: ({ row }) => {
								return {
									label: '查看',
									type: 'primary',
									iconRight: 'arrow-right',
									onClick: () => {
										this.$router.push(row.route);
									}
								};
							}
						}
					],
					actions: () => [
						{
							slots: {
								prefix: () => h(LucideSparkleIcon)
							},
							label: '在日志浏览器中查看',
							onClick: () => {
								this.$router.push({
									name: 'Log Browser',
									params: { mode: 'site', docName: this.name }
								});
							}
						}
					]
				};
			}
		}
	}
};
</script>