<template>
    <div>
        <efly-popover top="32px" left="-392px" @change="popoverChange($event)" trigger="click">
			<efly-tooltip :content="'自定义列表'" slot="reference"  top="-42px" left="-23px" placement="top" type="white">
				<efly-button size="small" class="efly-button-icon mar-l-xs">
					<i class="icon icon-custom-list font-default"></i>
				</efly-button>
    		</efly-tooltip>

			<div class="custom-content" style="width: 430px;cursor: default;">
				<p class="title text-color-regular pad-lr-mini box flex-justify-between"><span>自定义列表</span><i class="icon icon-cancel cursor-pointer" @click="cancel()"></i></p>
				<div class="custom-list">
					<ul class="box flex-wrap">
						<template v-for="(item, index) in optionsList">
							<li class="custom-item" :key="index" :title="item.name" v-if="item.show">
								<efly-checkbox class="custom-checkbox" size="small" :active="item.selected" v-if="!item.disabled" @click="selectCheckbox(item,index)"><span class="text-color-regular">{{item.name}}</span></efly-checkbox>
								<i class="icon icon-checkbox font-small color-999 no-click" v-if="item.disabled"><span class="text-color-regular mar-l-xs">{{item.name}}</span></i>
							</li>
						</template>
					</ul>
				</div>
				<div class="custom-btn">
					<efly-button size="mini" class="btn-primary" @click="confirm()">确定</efly-button>
				</div>
			</div>
		</efly-popover>
    </div>
</template>

<script lang="ts">
    import CustomList from './custom-list';
    export default CustomList;
</script>
<style lang="scss">
	.color-999{
		color:#999999;
	}
	.no-click{
		cursor: not-allowed;
	}
	.custom-content .custom-list .custom-checkbox,
	.custom-content .custom-list .efly-checkbox-label {
		display:inline;
	}
</style>
<style lang="scss" scoped>
	.custom-content {
		border: 1px solid #ccc;
		.title {
			line-height: 30px;
			background: #f8fafe;
			border-bottom: 1px solid #ddd;
			font-size: 12px;
		}
		.custom-list {
			padding: 15px 0 15px 20px;
			border-bottom: 1px solid #ddd;

			.custom-item {
				overflow: hidden;
				line-height: 30px;
				width: 99px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding-right: 2px;
			}
		}

		.custom-btn {
			padding: 15px 20px;
			text-align: right;
		}
	}
</style>
