<template>
	<lay-container fluid="true" style="padding: 10px">
		<lay-card>
			<lay-form :model="searchObj" class="search-box">
				<lay-row class="search-items">
					<lay-form-item label="包规代码" prop="FPlmCode">
						<lay-input v-model="searchObj.FCode"></lay-input>
					</lay-form-item>
					<lay-form-item label="备注" prop="FRemark">
						<lay-input v-model="searchObj.FRemark"></lay-input>
					</lay-form-item>
				</lay-row>
				<lay-form-item class="search-btn">
					<lay-button size="sm" type="primary" @click="_clickSearch">搜索</lay-button>
					<lay-button size="sm" @click="_clickReset">重置</lay-button>
				</lay-form-item>
			</lay-form>
			<lay-table :columns="dataColumn" id="id" :dataSource="dataList" v-model:selectedKeys="selectedKeys"
				:checkbox="checkbox" :default-toolbar="defaultToolbar" :page="dataList.length>0?pageInfo:null"
				@change="changePage">
				<template v-slot:toolbar>
					<lay-button size="sm" @click="_getPageList(false,true)">刷新</lay-button>
					<lay-button size="sm" type="normal" @click="_newPackage()">新增</lay-button>
				</template>
				<template v-slot:operator="{ data }">
					<div v-if="data.FStatus == 1">
						<lay-button size="xs" type="primary" @click="_viewPackage(data)">查看</lay-button>
					</div>
					<div v-if="data.FStatus == 0">
						<lay-button size="xs" type="normal" @click="_editPackage(data)">编辑</lay-button>
						<!-- <lay-button size="xs" type="danger" @click="_deleteChildData(data)">删除</lay-button> -->
					</div>
				</template>
			</lay-table>
		</lay-card>
		<lay-layer area="70%" v-model="showEditBox[0]" :title="editBoxTitle">
			<ViewPackage :dataInfoObj="dataInfoObj" @cancelClick="cancelClick"></ViewPackage>
		</lay-layer>
		<lay-layer area="70%" v-model="showEditBox[1]" :title="editBoxTitle">
			<EditPackage :dataInfoObj="dataInfoObj" @cancelClick="cancelClick"></EditPackage>
		</lay-layer>
	</lay-container>
</template>
<script>
	import {
		ref
	} from "vue";
	import {
		getPageList,
		deleteDataById
	} from "/src/api/api/common";
	import '@layui/layui-vue/es/checkbox/index.css';
	import ViewPackage from './components/ViewPackage.vue';
	import EditPackage from './components/EditPackage.vue'
	export default {
		components: {
			ViewPackage,
			EditPackage
		},
		setup() {
			let dataColumn = [{
					type: "number",
					title: "序号",
					width: "56"
				}, {
					title: "系列",
					key: "FFactoryCode"
				},
				{
					title: "包规代码",
					key: "FCode"
				},
				{
					title: "标准BOM数量(KG)",
					key: "FBomUnit"
				},
				{
					title: "包装规格",
					key: "FSpecs"
				}, {
					title: "净重（KG）",
					key: "FNetWeight"
				},
				{
					title: "毛重（KG）",
					key: "FGrossWeight"
				},
				{
					title: "包装外形尺寸(MM)",
					key: "FSize"
				},
				{
					title: "体积(m³)",
					key: "FVolume"
				},
				{
					title: "备注",
					key: "FRemark",
					hide: true
				},
				{
					title: "创建时间",
					key: "FAddDate",
					width: "182px",
					hide: true
				},
				{
					title: "最后修改时间",
					key: "FEditDate",
					width: "182px",
					hide: true
				},
				{
					title: "状态",
					key: "FStatusName",
					width: "80px"
				},
				{
					title: "操作",
					key: "operator",
					width: "110px",
					fixed: "right",
					customSlot: "operator"
				}
			];
			dataColumn.forEach((item) => {
				item.align = "center";
			});
			const selectedKeys = ref(["1"]);
			const checkbox = ref(false);
			const defaultToolbar = ref(true);
			const showEditBox = ref([false, false]);
			const editBoxTitle = ref("");
			const dataInfoObj = ref({});
			const pageInfo = ref({
				total: 0,
				limit: 10,
				current: 1
			});
			const dataList = ref([]);
			const searchObj = ref({});
			const postData = ref({});
			return {
				dataInfoObj,
				showEditBox,
				editBoxTitle,
				selectedKeys,
				checkbox,
				defaultToolbar,
				dataColumn,
				dataList,
				pageInfo,
				searchObj,
				postData
			};
		},
		mounted() {
			this._getPageList(true);
		},
		methods: {
			changePage(obj) {
				this.pageInfo.current = obj.current;
				this.pageInfo.limit = obj.limit;
				this._getPageList();
			},
			//获取分页
			async _getPageList(isFirst) {
				this.pageInfo.total = 0;
				if (isFirst) {
					this.pageInfo.current = 1;
					this.pageInfo.total = 0;
				}
				this.postData.FPageIndex = this.pageInfo.current;
				this.postData.FPageSize = this.pageInfo.limit;
				this.postData.FPageOrderBy = "FID";
				let result = await getPageList(this.postData, "Package");
				result.Data.List = result.Data.List || [];
				result.Data.List.forEach((item) => {
					item.FAddDate = item.FAddDate == null ? "" : this.dateFormat(item.FAddDate);
					item.FEditDate = item.FEditDate == null ? "" : this.dateFormat(item.FEditDate);
					item.FStatusName = item.FStatus == 1 ? "可用" : "待提交";
				});
				this.pageInfo.total = result.Data.Total || 0;
				this.dataList = result.Data.List;
			},
			//日期处理
			dateFormat(dataStr) {
				return dataStr.replace('T', ' ').split('.')[0];
			},
			//检索-检索
			_clickSearch() {
				this.postData = {};
				for (let key in this.searchObj) {
					let val = this.searchObj[key];
					if (val != null && val != "") this.postData[key] = val;
				}
				this._getPageList(true);
			},
			//检索-重置
			_clickReset() {
				this.searchObj = {};
				this._clickSearch();
			},
			//数据-编辑
			_editPackage(data) {
				this.dataInfoObj = data || {};
				this.editBoxTitle = "编辑包材";
				this.showEditBox = [false, true];
			},
			//数据-查看
			_viewPackage(data) {
				this.dataInfoObj = data || {};
				this.editBoxTitle = "查看包材";
				this.showEditBox = [true, false];
			},
			//数据-新增
			_newPackage() {
				this.dataInfoObj = {};
				this.editBoxTitle = "新增包材";
				this.showEditBox = [false, true];
			},
			//数据-删除·假
			_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 deleteDataById(dataId, 'Package');
				layer.close(layId);
				if (result && result > 0) {
					layer.msg("操作成功", {
						time: 1000,
						icon: 1
					})
				} else {
					layer.msg("操作失败", {
						time: 1000,
						icon: 2
					})
				}
				this._getPageList(true);
			},
			//数据-取消
			cancelClick(isRefresh) {
				this.showEditBox = [false, false];
				if (isRefresh) {
					this._getPageList(true);
				}
			}
		}
	}
</script>
