<template>
	<div class="container">
		<div class="d-table">
			<!-- type="selection"  @selection-change="selectionChange" -->
			<el-table ref="oneJobQualityBom" class="table_content" :max-height="600" :data="tableData"
				tooltip-effect="dark" style="width: 100%" stripe border>

				<el-table-column label="序号" type="index" width="55">
					<template slot-scope="{ row, $index }">
						{{ $index + 1 }}
					</template>
				</el-table-column>

				<el-table-column label="序列号" prop="code" minWidth="110">
					<template slot-scope="{ row, $index }">
						{{ row.code }}
					</template>
				</el-table-column>

				<el-table-column label="刻码" prop="name" minWidth="110">
					<template slot-scope="{ row, $index }">
						<el-input size="mini" class="content_num" v-model="row.extInfo.heatNumber"
							placeholder="请输入炉次号" />
					</template>
				</el-table-column>

				<el-table-column label="投料数量" prop="modelType">
					<template slot-scope="{ row, $index }">
						{{ row.modelType }}
					</template>
				</el-table-column>

				<el-table-column label="是否合格" width="110" prop="isQualified">
					<template slot-scope="{ row, $index }">
						<el-select size="mini" class="content_num" v-model="row.extInfo.isQualified" filterable
							placeholder="请选择">
							<el-option v-for="item in areaList" :label="item.name" :value="item.code" :key="item.code">
							</el-option>
						</el-select>

					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		tableData: {
			type: Array,
			default: () => []
		},
		itemData: {
			type: Object,
			default: () => { }
		},

	},

	data() {
		return {
			pickerIndex: 0,
			isAllChecked: true,
			areaList: [
				{
					name: '合格',
					value: 1,
				},
				{
					name: '不合格',
					value: 2,
				},

			],
			listArr: [],
			selectedIndexs: []
		};
	},
	watch: {
		tableData: {
			handler(v) {
				console.log(v);
				this.listArr = v;
			},
			immediate: true,
			deep: true
		}
	},

	methods: {
		handlerCheckedTow(e, index, item) {
			console.log(item);
			if (e.detail.value.length) {
				// this.$set(this.tableData[index], 'selected', true);
				item.selected = true;
			} else {
				// this.$set(this.tableData[index], 'selected', false);
				item.selected = false;
			}
			this.listArr[index] = item;
			// this.$emit('tableDataFn', this.tableData);
			this.$nextTick(() => {
				let a = this.listArr.filter(v => v.selected);
				if (a.length && a.length == this.listArr.length) {
					this.isAllChecked = true;
				} else {
					this.isAllChecked = false;
				}
			})


		},

		//全选
		handlerChecked(e) {


			console.log(this.listArr);
			if (e.detail.value.length) {
				// 全选

				this.listArr.map(item => {
					item.selected = true;
				})


			} else {
				// 未选中
				this.listArr.map(item => {
					item.selected = false;
				})

			}
			this.listArr = [];

			this.$set(this, 'listArr', this.listArr);

			this.listArr = this.tableData;

			this.$emit('tableDataFn', this.tableData);
		},


		blurNum(workReportInfo) {

			this.$emit('tableDataFn', this.tableData);
		},
		handlerChange(item, index) {
			// this.$emit('tableDataFn', this.tableData);
			console.log(item, index);
		},

		selectionChange(e) {

			this.selectedIndexs = e.detail.index;
		},
	}

}
</script>

<style lang="scss" scoped>
::v-deep .uni-select--mask {
	position: relative !important;
}

.container {
	padding: 10rpx;
	overflow: auto;

	checkbox {
		transform: scale(0.8);
	}
}

.uni-input {
	width: 150rpx;
	border: 1px solid #F0F8F2;
	background: #F0F8F2;
	color: #157A2C;
}
</style>
