<template>
    <div class="list" :style="{margin: clearBottom ? '' : '12px 0'}">
        <div class="list-header">
            <div class="title">
                <i></i>
                <p class="style-title">
                    <slot name="title">标题</slot>
                </p>
            </div>
            <div class="options">
                <div class="search">
                    <slot name="search"/>
				</div>
				<slot name="options"/>
			</div>
		</div>
		<div class="content" :style='{padding: clearPadding ? "0" : "10px 20px"}'>
			<slot name="content"/>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'todo-list',
		props: {
			clearBottom: {
				type: Boolean,
				required: false,
				default: () => {
					return false
				}
			},
			clearPadding: {
				type: Boolean,
				required: false,
				default: () => {
					return false
				}
			}
		},
		data() {
			return {}
		}
	}
</script>

<style lang="less" scoped>
	.list {
		width: 100%;

		.list-header {
			width: 100%;
			height: 44px;
			display: flex;
			justify-content: space-between;
			background-color: #e6f7ff;

			.title {
				height: 100%;
				display: flex;
				align-items: center;

				i {
					width: 4px;
					height: 14px;
					display: block;
					margin: 13px 7px 13px 20px;
					background-color: #1890ff;
				}

				.style-title {
					height: 100%;
					font-size: 15px;
					font-weight: 600;
					display: flex;
					align-items: center;
					margin-bottom: 0;
				}
			}

			.options {
				display: flex;
				align-items: center;

				.ant-btn {
					margin-right: 15px;
				}

				.search {
					height: 100%;
					display: flex;
					align-items: center;
					margin-right: 15px;
				}

				i {
					font-size: 20px;
					margin-right: 20px;
				}
			}
		}

		.content {
			width: 100%;
			background-color: #fff;
		}
	}
</style>
