<template>
	<div :class="item.rowClass || ''">
		<div v-if="item.mode === 'index'">
			{{ scope.$index + 1 }}
		</div>
		<div v-else-if="item.mode === 'icon'">
			<i :class="scope.row[item.prop] ? item.icon : ''"></i>
		</div>
		<div v-else-if="item.mode === 'tag'">
			<el-tag
				v-if="scope.row[item.prop]"
				:type="onType(item.type, scope.row) || 'primary'"
			>
				{{ scope.row[item.prop] }}
			</el-tag>
		</div>
		<div v-else-if="item.mode === 'function'">
			{{ item.fn && item.fn(scope.row) }}
		</div>
		<div v-else-if="item.apearation">
			<template v-for="(v, btnIndex) in item.apearation">
				<el-button
					v-if="v.show ? v.show(scope.row) : true"
					:key="btnIndex"
					:type="v.type || 'text'"
					:size="v.size || 'small'"
					:disabled="v.disabled ? v.disabled(scope.row) : false"
					@click.native="btnClick(scope.row, btnIndex, v)"
				>
					{{ v.label }}
				</el-button>
			</template>
		</div>
		<div v-else-if="Array.isArray(item.prop)">
			<span v-for="item3 in item.prop" :key="item3">
				{{ scope.row[item3] }}
			</span>
		</div>
		<div v-else-if="item.popover">
			<el-popover
				v-if="!item.popoverType"
				class="item"
				trigger="click"
				placement="left-start"
			>
				<div
					style="
						padding: 15px 5px;
						background-color: #eee;
						font-size: 12px;
						color: #000000;
						max-width: 400px;
					"
				>
					{{ scope.row[item.prop] }}
					<div
						style="
							text-align: right;
							margin-top: 15px;
							margin-right: 5px;
							font-size: 12px;
						"
					>
						<el-link
							type="primary"
							style="margin-right: 10px"
							@click.stop="copy(scope.row[item.prop], 0)"
						>
							复制全部
						</el-link>
						<el-link type="primary" @click.stop="copy(scope.row, 1)">
							复制手机号码
						</el-link>
					</div>
				</div>
				<div slot="reference">{{ scope.row[item.prop] }}</div>
			</el-popover>
			<el-popover
				v-if="item.popoverType == 1"
				class="item ellipsis-col2"
				trigger="hover"
				placement="left-start"
			>
				<div class="popover">{{ scope.row[item.prop] }}</div>
				<div slot="reference" class="popover">{{ scope.row[item.prop] }}</div>
			</el-popover>
		</div>
		<div v-else-if="item.html">
			<span v-html="scope.row[item.prop]"></span>
		</div>
		<div v-else>
			<span>{{ scope.row[item.prop] }}</span>
		</div>
	</div>
</template>
<script>
export default {
	name: 'TableColumn',
	props: {
		item: {
			type: Object,
			default() {
				return {};
			},
		},
		scope: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {};
	},
	methods: {
		btnClick(item, index, btnItem) {
			this.$emit('rowBtnClick', item, index, btnItem);
		},
		// 快捷复制
		copy(val, type) {
			let target = '';
			if (type == 0) {
				// all
				target = val;
			} else if (type == 1) {
				// mobile
				target = val.match(/1[0-9]{10}/g);
			}
			if (target) {
				this.$copyText(target).then(
					() => {
						this.$message.success('复制成功');
					},
					() => {
						this.$message.error('复制失败');
					},
				);
			}
		},
		onType(type, item) {
			if (typeof type === 'function') {
				return type(item);
			} else {
				return type;
			}
		},
	},
};
</script>
<style scoped lang="scss">
.popover {
	font-size: 12px;
	max-width: 300px;
}
</style>
