<template>
	<!-- 组件根容器 -->
	<div class="cy-select-display-input">
		<!-- 显示区：已赋值时展示文本（可点击触发 info 事件），未赋值时展示占位提示 -->
		<div class="select_display_input_box" :class="{ text_active: cursor, cursor: cursor && value }" @click="handleInfo">
			<div class="text"><span>{{ value }}</span></div>
			<span v-if="!value" class="placeholder">{{ placeholder }}</span>
			<i v-if="showDelete" class="el-icon-circle-close delete" @click.stop="handleDelete"></i>
		</div>
		<!-- 选择按钮：showBtn 为 true 时显示，点击触发 click 事件 -->
		<el-button v-if="showBtn" type="primary" @click="handleClick">{{ btnText }}</el-button>
	</div>
</template>

<script>
export default {
	name: 'CySelectDisplayInput',
	props: {
		// 文本框需要显示的内容（Number 或 String）
		value: {
			type: [Number, String],
			default: ''
		},
		// 文本框未选择时的占位提示文本
		placeholder: {
			type: String,
			default: ''
		},
		// 选择按钮上的文字
		btnText: {
			type: String,
			default: '选择'
		},
		// 选择按钮的显示条件
		showBtn: {
			type: Boolean,
			default: true
		},
		// 是否显示删除按钮
		showDelete: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	},
	computed: {
		// 文本框是否需要点击，如果为 true，输入框中的字体会变蓝并将鼠标变为小手
		cursor() {
			return this.$listeners.info;
		}
	},
	created() {

	},
	methods: {
		/**
		 * 点击显示区：仅当已赋值时触发 info 事件
		 * @returns {void}
		 */
		handleInfo() {
			if (this.value) {
				this.$emit('info');
			}
		},

		/**
		 * 点击选择按钮：触发 click 事件
		 * @fires {Event} click
		 * @returns {void}
		 */
		handleClick() {
			this.$emit('click');
		},

		/**
		 * 点击删除按钮：触发 delete 事件
		 * @fires {Event} delete
		 * @returns {void}
		 */
		handleDelete() {
			this.$emit('delete');
		}
	}
};
</script>
