<!--
 * @Author: 倚楼听风雨 18408246387@163.com
 * @Date: 2022-09-27 18:25:51
 * @LastEditors: 倚楼听风雨 18408246387@163.com
 * @LastEditTime: 2022-09-28 09:29:07
 * @FilePath: \cool-admin-3.x\cool-admin-vue-vue3-ts-vite\src\cool\modules\shuyou\components\adv-search-computer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="demo-adv-computer-search">
		<cl-adv-btn>筛选</cl-adv-btn>
		<cl-adv-search :items="items" :op-list="opList" />
	</div>
</template>

<script lang="ts">
import { AdvSearchItem } from "cl-admin-crud-vue3/types";
import { defineComponent, ref } from "vue";

export default defineComponent({
	setup() {
		const items = ref<AdvSearchItem[]>([
			{
				prop: "shop_id",
				label: "供应商",
				span: 12,
				component: {
					name: "shuyouRentComputerShopSelect",
					props: {
						placeholder: "请选择供应商"
					}
				}
			},
			{
				label: "是否到期",
				prop: "is_expire",
				value: 0,
				component: {
					name: "el-radio-group",
					options: [
						{
							label: "到期未续",
							value: 1
						},
						{
							label: "在租期中",
							value: 0
						},
						{
							label: "即将到期",
							value: 2
						}
					]
				}
			}
		]);

		const opList = ref<string[]>(["search", "reset", "clear", "close"]);

		return {
			items,
			opList
		};
	}
});
</script>

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