<template>
	<lay-container>
		<lay-form :model="editDataInfo" class="search-box edit-info color999">
			<lay-form-item label-width="140" label="系列" prop="FFactoryCode">
				<lay-input v-model="editDataInfo.FFactoryCode" :disabled="isDisabled"></lay-input>
			</lay-form-item>
			<lay-form-item label-width="140" label="包规代码" prop="FCode">
				<lay-input v-model="editDataInfo.FCode" :disabled="isDisabled"></lay-input>
			</lay-form-item>
			<lay-form-item label-width="140" label="标准BOM数量(KG)" prop="FBomUnit">
				<lay-input v-model="editDataInfo.FBomUnit" :disabled="isDisabled"></lay-input>
			</lay-form-item>
			<lay-form-item label-width="140" label="包装规格" prop="FSpecs">
				<lay-input v-model="editDataInfo.FSpecs" :disabled="isDisabled"></lay-input>
			</lay-form-item>
			<lay-form-item label-width="140" label="净重(KG)" prop="FNetWeight">
				<lay-input v-model="editDataInfo.FNetWeight" :disabled="isDisabled"></lay-input>
			</lay-form-item>
			<lay-form-item label-width="140" label="毛重(KG)" prop="FGrossWeight">
				<lay-input v-model="editDataInfo.FGrossWeight" :disabled="isDisabled"></lay-input>
			</lay-form-item>
			<lay-form-item label-width="140" label="包装外形尺寸(MM)" prop="FSize">
				<lay-input v-model="editDataInfo.FSize" :disabled="isDisabled"></lay-input>
			</lay-form-item>
			<lay-form-item label-width="140" label="体积(m³)" prop="FVolume">
				<lay-input v-model="editDataInfo.FVolume" :disabled="isDisabled"></lay-input>
			</lay-form-item>
			<lay-form-item label-width="140" label="备注" prop="FCode">
				<lay-input v-model="editDataInfo.FRemark" :disabled="isDisabled"></lay-input>
			</lay-form-item>
		</lay-form>
		<view class="empty-small2">
			<lay-table class="table-box240" :columns="dataColumn" id="FID" :dataSource="dataList">
				<template v-slot:FMaterialID="{ data }">
					<span v-if="data.FMaterialID>0" style="color:#1E9FFF">存在</span>
					<span v-else style="color:#FF5722">不存在</span>
				</template>
				<template v-slot:operator="{ data }">
					<lay-button size="xs" type="danger" @click="_deleteData(data.FID)">删除</lay-button>
				</template>
			</lay-table>
		</view>
	</lay-container>
</template>
<style scoped>
	.edit-info {
		padding-right: 30px;
		margin: 20px auto;
		overflow: hidden;
	}

	.empty-small2 {
		margin: 0 auto 20px;
		display: block;
	}

	.layui-form-item {
		margin-bottom: 16px;
		width: 46%;
		float: left;
		display: block;
		clear: initial;
	}

	.layui-form-item:nth-child(even) {
		float: right;
	}
</style>
<script>
	import {
		ref
	} from 'vue';
	import {
		getPackageChildList,
		deletePackageChild
	} from "/src/api/api/package";

	export default {
		setup() {
			let dataColumn = [{
					type: "number",
					title: "序号",
					width: "56"
				}, {
					title: "子项代码",
					key: "FCode",
					width: "170px"
				}, {
					title: "名称",
					key: "FName",
				},
				{
					title: "包材外形尺寸(长*宽*高)(mm)",
					key: "FOutSize"
				},
				{
					title: "包材重量(kg)",
					key: "FWeight",
					width: "130px"
				},
				{
					title: "数量",
					key: "FCount",
					width: "100px"
				},
				{
					title: "单位",
					key: "FUnit",
					width: "100px"
				},
				{
					title: "物料状态",
					key: "FMaterialID",
					width: "120px",
					customSlot: "FMaterialID"
				},
				// {
				// 	title: "操作",
				// 	key: "operator",
				// 	width: "90px"
				// }
			];
			dataColumn.forEach((item) => {
				item.align = "center";
			});
			const dataList = ref([]);
			const editDataInfo = ref({});
			const isDisabled = ref(true);
			return {
				editDataInfo,
				dataColumn,
				dataList,
				isDisabled
			}
		},
		props: {
			dataInfoObj: {
				type: Object,
				default: () => {},
			}
		},
		mounted() {
			this.editDataInfo = JSON.parse(JSON.stringify(this.dataInfoObj));
			this._getChildList();
		},
		methods: {
			cancelClick(isRefresh) {
				this.$emit('cancelClick', isRefresh != undefined ? isRefresh : false);
			},
			_deleteData(dataId) {
				let $this = this;
				layer.confirm("你确定要删除此子项吗？", {
					btn: [{
							text: '确定',
							callback: function(id) {
								$this.__deleteData(id, dataId);
							}
						},
						{
							text: '取消',
							callback: function(id) {
								layer.close(id);
							}
						}
					]
				});
			},
			async __deleteData(layId, dataId) {
				let result = await deletePackageChild(dataId);
				layer.close(layId);
				if (result && result > 0) {
					layer.msg("操作成功", {
						time: 1000,
						icon: 1
					})
				} else {
					layer.msg("操作失败", {
						time: 1000,
						icon: 2
					})
				}
				this._getChildList();
			},
			async _getChildList() {
				let result = await getPackageChildList({
					FPageIndex: 1,
					FPageSize: 999,
					FPageOrderBy: "FID",
					FPackageID: this.editDataInfo.FID
				});
				this.dataList = result.Data.List || [];
			}
		}
	}
</script>
