<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />

			<!-- 删除按钮 -->
			<cl-multi-delete-btn />

			<cl-filter label="状态">
				<cl-select :options="options.status" prop="status" :width="140" />
			</cl-filter>

			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="搜索标题" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table" :autoHeight="false" />
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>
	</cl-crud>
</template>

<script lang="ts" name="assembly-fixtures" setup>
import { useCrud, useTable } from "@cool-vue/crud";
import { useCool } from "/@/cool";
import { reactive } from "vue";

const { service } = useCool();

const props = defineProps({
	multiple: Boolean
});

const options = reactive({
	status: [
		{
			label: "已上架",
			value: 1
		},
		{
			label: "已下架",
			value: 0
		}
	]
});
const emit = defineEmits(["change"]);

// cl-table
const Table = useTable({
	columns: [
		{ type: "selection" },
		{ label: "页面名称", prop: "name", minWidth: 140 },

		{
			label: "是否首页",
			prop: "isHome",
			minWidth: 140,
			dict: [
				{
					label: "是",
					value: 1,
					type: "primary"
				},
				{
					label: "否",
					value: 0,
					type: "info"
				}
			]
		},
		{ label: "状态", prop: "status", minWidth: 100, component: { name: "cl-switch" } },

		{
			label: "更新时间",
			prop: "updateTime",
			minWidth: 160,
			component: { name: "cl-date-text" }
		},
		{
			type: "op",
			width: 160,
			buttons: [
				{
					label: "选择TA",
					type: "success",
					onClick({ scope }) {
						select(scope.row);
					}
				}
			]
		}
	]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.fixtures.mould,
		dict: {
			label: {
				multiDelete: "多选/确定"
			}
		},
		onDelete(selection, { next }) {
			choice(selection);
		}
	},
	(app) => {
		app.refresh();
	}
);
// 多选
function choice(items: any[]) {
	if (props.multiple) {
		emit("change", items);
	}
}
// 单选
function select(item: any) {
	emit("change", item);
}
</script>
