<template>
	<el-main>
		<el-card shadow="never" header="分类筛选器">
			<x-select-filter :data="data" :selected-values="selectedValues" :label-width="80" @on-change="change"></x-select-filter>
		</el-card>
		<el-card shadow="never" header="返回值" style="margin-top: 15px;">
			<pre>{{ filterData }}</pre>
		</el-card>
	</el-main>
</template>

<script>
	import xSelectFilter from '@/components/xSelectFilter'

	export default {
		name: 'selectFilter',
		components: {
			xSelectFilter
		},
		data() {
			return {
				data: [
					{
						title: "状态(单)",
						key: "state",
						options: [
							{
								label: "全部",
								value: ""
							},
							{
								label: "待审核",
								value: "1",
								icon: "el-icon-flag"
							},
							{
								label: "已退回",
								value: "2",
								icon: "el-icon-bottom-left"
							},
							{
								label: "已关闭",
								value: "3",
								icon: "el-icon-circle-close"
							},
							{
								label: "已完成",
								value: "4",
								icon: "el-icon-checked"
							}
						]
					},
					{
						title: "类型(多)",
						key: "type",
						multiple: true,
						options: [
							{
								label: "全部",
								value: ""
							},
							{
								label: "请假申请",
								value: "1"
							},
							{
								label: "加班申请",
								value: "2"
							}
						]
					}
				],
				selectedValues: {
					state: [""],
					type: [""]
				},
				filterData: {}
			}
		},
		mounted() {

		},
		methods: {
			change(selected){
				this.filterData = selected
			}
		}
	}
</script>

<style>
</style>
