<template>
    <div class="mix-options">
	    <div class="mix-options-item left-item" :style="{'width': leftWidth}">
		    <slot name="left"></slot>
	    </div>
	    <div class="mix-options-item right-item" :style="{'width': `calc(100% - ${leftWidth})`}">
		    <slot name="right"></slot>
	    </div>
    </div>
</template>
<script>
	export default {
		name: "MixOptions",
		components: {},
		data() {
			return {

			};
		},
		props: {
			leftWidth:{
				type: String,
				default: '100px'
			}
		},
		mounted () {
		},
		watch: {
		},
		methods: {

		}
	};
</script>

<style scoped  lang="less">
	.mix-options {
		width: 100%;
		display: flex;
		align-items: center;
		.mix-options-item {
			/deep/ .el-input--mini {
				.el-input__inner {
					width: 100%;
                    box-sizing: border-box;
				}
			}
			/deep/ .el-select {
                .el-input--mini {
                    .el-input__inner {
                        padding-right: 25px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
				.el-select__tags {
					.el-tag {
						margin-left: 3px;
						padding: 0 5px;
					}
					.el-tag:first-child {
						 .el-select__tags-text {
							 display: inline-block;
							 max-width: 40px;
							 overflow: hidden;
							 white-space: nowrap;
							 text-overflow: ellipsis;
						 }
						.el-tag__close.el-icon-close {
							top: -4px;
						}
					 }
					.el-select__input {
						display: inline-block;
						width: 10px;
						min-width: 10px;
						font-size: 12px;
					}
					> span + .el-select__input {
						margin-left: 3px;
					}

				}
			}
			/deep/ .el-cascader {
				.el-cascader__tags {
					display: flex;
					flex-flow: nowrap;
					align-items: center;
					.el-tag {
						margin-left: 3px;
						padding: 0 5px;
					}
					.el-tag:first-child {
						 span {
							 display: inline-block;
							 max-width: 40px;
							 overflow: hidden;
							 white-space: nowrap;
							 text-overflow: ellipsis;
						 }
					 }
					.el-cascader__search-input {
						display: inline-block;
						width: 10px;
						min-width: 10px;
						font-size: 12px;
					}
					.el-tag + .el-cascader__search-input {
						margin-left: 0;
					}

				}
			}

			/deep/ .el-input__suffix {
				z-index: 1;
			}
		}

		.left-item {
			/deep/ .el-input--mini {
				.el-input__inner {
					border-top-right-radius: 0;
					border-bottom-right-radius: 0;
					border-right: none;
				}
			}
		}
		.right-item {
			/deep/ .el-input--mini {
				.el-input__inner {
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
                    box-sizing: border-box;
                    padding-right: 30px;
				}
			}
		}
	}
</style>
