<template>
	<div class="energyQuantityManualAddTable">
		<el-table
			:data="renderData"
			border
			style="width: 100%"
			:header-cell-style="{
				background: '#F2F4F9',
				color: '#606266',
			}">
			<el-table-column
				prop="tableName"
				label="表名*">
				<template slot-scope="scope">
					<div class="tableInner">
						<el-select
							v-model="scope.row.tableName"
							placeholder="请选择"
							style="width: 100%"
							@change="changeSelect(scope.row, 'tableName')">
							<el-option
								v-for="item in tableNameList"
								:key="item.value"
								:label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</div>
				</template>
			</el-table-column>
			<el-table-column
				prop="readingQuantity"
				label="抄表数*">
				<template slot-scope="scope">
					<div class="tableInner">
						<el-input-number
							v-model="scope.row.readingQuantity"
							:min="0"
							:max="999999999"
							style="width: 100%"
							:controls="false"
							@change="changeInput(scope.row, 'readingQuantity')"
							:precision="2"></el-input-number>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-button
			class="addButton"
			icon="el-icon-plus"
			@click="emitButtonClick">
			新增
		</el-button>
	</div>
</template>
<script>
export default {
	name: 'AddTable',
	props: {
		tableData: {
			type: Array,
			required: true,
			default: () => {
				return [];
			},
		},
		tableNameList: {
			type: Array,
			required: true,
			default: () => {
				return [];
			},
		},
	},
	data() {
		return {};
	},
	computed: {
		renderData() {
			return this.tableData.map((item, index) => {
				return {
					...item,
					_pageIndex: index + 1,
				};
			});
		},
	},
	methods: {
		emitButtonClick() {
			this.$emit('emitButtonClick');
		},
		changeInput(val1, val2) {
			val1.prop = val2;
			this.$emit('emitFun', val1);
		},
		changeSelect(val1, val2) {
			val1.prop = val2;
			this.$emit('emitFun', val1);
		},
	},
};
</script>
<style lang='scss' scoped>
.energyQuantityManualAddTable {
	.el-table .el-table__cell {
		padding: 0;
		height: 35px;
	}
	.addButton {
		width: 100%;
		height: 35px;
		border-top: none;
		color: #0b58ff;
		border-color: #ebeef5;
		border-radius: 0;
	}
	.addButton:hover {
		color: #0b58ff;
		border-color: #ebeef5;
		background-color: #fff;
	}
	.addButton:focus {
		border-color: #ebeef5;
		background-color: #fff;
	}
	.tableInner .el-input__inner {
		border: none;
		padding: 0;
		height: 33px;
	}
}
</style>
<style lang='scss'>
.energyQuantityManualAddTable {
	.el-table .el-table__cell {
		padding: 0;
		height: 35px;
	}
}
</style>