<template>
	<div :id="id">
		<ul class="item">
			<li>
				<p>基础用法</p>
				<div>
					<poi-select v-model="value" placeholder="请选择" @optionCallback="handlerChange">
						<poi-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:itemOption="item"
							:value="item.value">
						</poi-option>
					</poi-select>
				</div>
				<p>禁用选项</p>
				<div>
					<poi-select v-model="value1" placeholder="请选择">
						<poi-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
      						:disabled="item.disabled">
						</poi-option>
					</poi-select>
				</div>
				<p>禁用状态</p>
				<div>
					<poi-select v-model="value" disabled placeholder="请选择">
						<poi-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</poi-option>
					</poi-select>
				</div>
				<p>可清空</p>
				<div>
					<poi-select v-model="value" clearable placeholder="请选择" @optionCallback="handlerChange" @change="changeFun">
						<poi-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
							:itemOption="item"
						>
						</poi-option>
  					</poi-select>
				</div>
			</li>
			<li>
				<p>自定义模板</p>
				<div>
					<poi-select v-model="value2" placeholder="请选择">
						<poi-option
							v-for="item in cities"
							:key="item.value"
							:label="item.label"
							:value="item.value">
							<span style="float: left">{{ item.label }}</span>
							<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
						</poi-option>
					</poi-select>
				</div>
			</li>
			<li>
				<p>分组</p>
				<div>
					<poi-select v-model="value3" placeholder="请选择" @optionCallback="handlerChange">
						<poi-option-group
							v-for="group in optionsGroup"
							:key="group.label"
							:label="group.label">
							<poi-option
								v-for="item in group.options"
								:key="item.value"
								:label="item.label"
								:itemOption="item"
								:value="item.value">
							</poi-option>
						</poi-option-group>
					</poi-select>
				</div>
			</li>
			<li>
				<p>基础多选</p>
				<div>
					<poi-select v-model="value4" multiple clearable placeholder="请选择" @optionCallback="handlerChange" @change="changeFun">
						<poi-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:itemOption="item"
							:value="item.value">
						</poi-option>
					</poi-select>

					<poi-select
						v-model="value5"
						multiple
						collapse-tags 
						@optionCallback="handlerChange"
						style="margin-left: 20px;"
						placeholder="请选择">
						<poi-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:itemOption="item"
							:value="item.value">
						</poi-option>
					</poi-select>
				</div>
			</li>
			<li>
				<p>可搜索</p>
				<div>
					<poi-select style="margin-left: 20px;" v-model="value" filterable placeholder="请选择" @optionCallback="handlerChange">
						<poi-option 
							label="全部"
							itemOption=""
							value=""></poi-option>
						<poi-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:itemOption="item"
							:value="item.value">
						</poi-option>
					</poi-select>


					<poi-select v-model="valMul" multiple filterable placeholder="请选择" @optionCallback="handlerChange">
						<poi-option 
							label="全部"
							itemOption=""
							value=""></poi-option>
						<poi-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:itemOption="item"
							:value="item.value">
						</poi-option>
					</poi-select>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
export default {
	data(){
		return{
			id:'selectText',
			
			value: '',
			value1: '',
			value2: '',
			value3: '',
			value4: '',
			value5: '',
			valMul:[],

			options: [{
				value: '选项1',
				label: '黄金糕',
				id:'1234123234'
			}, {
				value: '选项2',
				label: '双皮奶',
				id:'1234153234'
			}, {
				value: '选项3',
				label: '蚵仔煎',
				disabled: true,
				id:'123411234'
			}, {
				value: '选项4',
				label: '龙须面',
				id:'12341234'
			}, {
				value: '选项41',
				label: '龙须面1',
				id:'123412534'
			},{
				value: '选项5',
				label: '北京烤鸭',
				id:'123412234'
			}],

			cities: [{
				value: 'Beijing',
				label: '北京'
			}, {
				value: 'Shanghai',
				label: '上海'
			}, {
				value: 'Nanjing',
				label: '南京'
			}, {
				value: 'Chengdu',
				label: '成都'
			}, {
				value: 'Shenzhen',
				label: '深圳'
			}, {
				value: 'Guangzhou',
				label: '广州'
			}],

			optionsGroup: [{
				label: '热门城市',
				options: [{
					value: 'Shanghai',
					label: '上海'
				}, {
					value: 'Beijing',
					label: '北京'
				}]
			}, {
				label: '城市名',
				options: [{
					value: 'Chengdu',
					label: '成都'
				}, {
					value: 'Shenzhen',
					label: '深圳'
				}, {
					value: 'Guangzhou',
					label: '广州'
				}, {
					value: 'Dalian',
					label: '大连'
				}]
			}],
		}
	},	

	methods:{
		handlerChange(option){
			console.log(1111111,option)
		},
		changeFun(){
			// console.log(2222222,arguments)
		},
	},
}
</script>
<style scoped>
#selectText{

}
.item>li{
	margin-bottom: 15px;
}
</style>
