<template>
	<lay-container fluid="true" style="padding: 10px">
		<lay-row space="10">
			<lay-col span="24">
				<lay-card>
					<lay-form :model="searchObj" class="search-box">
						<lay-row class="search-items">
							<lay-form-item label="模式名称" prop="FName">
								<lay-input v-model="searchObj.FName"></lay-input>
							</lay-form-item>
							<lay-form-item label="编号" prop="FCode">
								<lay-input v-model="searchObj.FCode"></lay-input>
							</lay-form-item>
							<lay-form-item label="模式类型" prop="FType">
								<lay-select v-model="searchObj.FType">
									<lay-select-option v-for="(tIdv,tIdx) in typeList" :key="tIdx" :value="tIdv.FValue"
										:label="tIdv.FName"></lay-select-option>
								</lay-select>
							</lay-form-item>
							<lay-form-item label="状态" prop="FState">
								<lay-select v-model="searchObj.FState">
									<lay-select-option v-for="(tIdv,tIdx) in stateList" :key="tIdx" :value="tIdv.FValue"
										:label="tIdv.FName"></lay-select-option>
								</lay-select>
							</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="_changeFactory()">新增</lay-button>
						</template>
						<template v-slot:FName="{ data }">
							{{ data.FName }}
						</template>
						<template v-slot:FCode="{ data }">
							{{ data.FCode }}
						</template>
						<template v-slot:FTypeName="{ data }">
							{{ data.FTypeName }}
						</template>
						<template v-slot:FFactoryName="{ data }">
							{{ data.FFactoryName }}
						</template>
						<template v-slot:FStateName="{ data }">
							{{ data.FStateName }}
						</template>
						<template v-slot:FAddDate="{ data }">
							{{ data.FAddDate }}
						</template>
						<template v-slot:FEditDate="{ data }">
							{{ data.FEditDate }}
						</template>
						<template v-slot:operator="{ data }">
							<lay-button size="xs" type="primary" @click="_changeFactory(data)"> 编辑 </lay-button>
							<lay-button size="xs" type="danger" @click="_deleteFactory(data.FID)">删除</lay-button>
						</template>
					</lay-table>
				</lay-card>
			</lay-col>
		</lay-row>
		<lay-layer area="50%" v-model="showEditBox" :title="editBoxTitle">
			<EditFactory :factoryInfoObj="factoryInfoObj" :typeList="typeList" :stateList="stateList"
				:factoryList="factoryList" @cancelClick="cancelClick"></EditFactory>
		</lay-layer>
	</lay-container>
</template>
<script>
	import {
		ref,
		watch
	} from "vue";
	import {
		getBasicList,
		deleteDataById,
		getPageList
	} from "/src/api/api/common";
	import {
		getFactoryList
	} from "/src/api/api/factory";
	import EditFactory from './components/EditFactory.vue';
	import '@layui/layui-vue/es/checkbox/index.css';
	export default {
		components: {
			EditFactory
		},
		setup() {
			let dataColumn = [{
					title: "模式名称",
					key: "FName"
				},
				{
					title: "编号",
					key: "FCode"
				},
				{
					title: "模式类型",
					key: "FTypeName"
				},
				{
					title: "委托工厂",
					key: "FFactoryName"
				},
				{
					title: "状态",
					key: "FStateName",
					width: "90px"
				},
				{
					title: "创建时间",
					key: "FAddDate",
					width: "126px"
				},
				{
					title: "最后修改时间",
					key: "FEditDate",
					width: "186px"
				},
				{
					title: "操作",
					key: "operator",
					width: "148px"
				}
			];
			dataColumn.forEach((item) => {
				item.customSlot = item.key;
				item.align = "center";
			});
			const selectedKeys = ref(["1"]);
			const checkbox = ref(false);
			const defaultToolbar = ref(true);
			const showEditBox = ref(false);
			const factoryInfoObj = ref({});
			const pageInfo = ref({
				total: 0,
				limit: 10,
				current: 1
			});
			const dataList = ref([]);
			const typeList = ref([]);
			const stateList = ref([]);
			const factoryList = ref([]);
			const editBoxTitle = ref("");
			const searchObj = ref({});
			const postData = ref({});
			return {
				factoryInfoObj,
				editBoxTitle,
				showEditBox,
				selectedKeys,
				checkbox,
				defaultToolbar,
				dataColumn,
				dataList,
				typeList,
				factoryList,
				stateList,
				pageInfo,
				searchObj,
				postData
			};
		},
		mounted() {
			this._getBasicList1();
			this._getBasicList2();
			this._getFactoryList();
			this._getPageList(true);
		},
		methods: {
			changePage(obj) {
				this.pageInfo.current = obj.current;
				this.pageInfo.limit = obj.limit;
				this._getPageList();
			},
			//获取状态集合
			async _getBasicList1() {
				this.stateList = await getBasicList(42) || [];
			},
			//获取类型集合
			async _getBasicList2() {
				this.typeList = await getBasicList(31) || [];
			},
			//获取工厂集合
			async _getFactoryList() {
				this.factoryList = await getFactoryList() || [];
			},
			//获取工厂集合
			async _getPageList(isFirst, showOk) {
				//this.dataList = [];
				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;
				let result = await getPageList(this.postData, "Factory");
				result.Data.List = result.Data.List || [];
				result.Data.List.forEach((item) => {
					let state = this.stateList.find(s => s.FValue == item.FState);
					item.FStateName = state == null ? "" : state.FName;
					let type = this.typeList.find(s => s.FValue == item.FType);
					item.FTypeName = type == null ? "" : type.FName;
					if (item.FType == "1" || item.FType == 1) {
						let factory = this.factoryList.find(s => s.FID == item.FFactoryID);
						item.FFactoryName = factory == null ? "" : factory.FName;
					} else {
						item.FFactoryName = "/";
					}
					item.FAddDate = item.FAddDate == null ? "" : this.dateFormat(item.FAddDate).split(' ')[0];
					item.FEditDate = item.FEditDate == null ? "" : this.dateFormat(item.FEditDate);
				});
				this.pageInfo.total = result.Data.Total || 0;
				this.dataList = result.Data.List;
			},
			//日期处理
			dateFormat(dataStr) {
				return dataStr.replace('T', ' ').split('.')[0];
			},
			//删除工厂弹窗
			_deleteFactory(factoryId) {
				let $this = this;
				layer.confirm("你确定要删除此工厂吗？", {
					btn: [{
							text: '确定',
							callback: function(id) {
								$this.__deleteFactory(id, factoryId);
							}
						},
						{
							text: '取消',
							callback: function(id) {
								layer.close(id);
							}
						}
					]
				});
			},
			//实际删除工厂
			async __deleteFactory(layId, factoryId) {
				let result = await deleteDataById(factoryId, "Factory");
				layer.close(layId);
				if (result && result > 0) {
					layer.msg("操作成功", {
						time: 1000,
						icon: 1
					})
				} else {
					layer.msg("操作失败", {
						time: 1000,
						icon: 2
					})
				}
				this._getFactoryList();
				this._getPageList(true);
			},
			//操作工厂信息
			_changeFactory(factoryObj) {
				if (factoryObj) this.editBoxTitle = "修改工厂";
				else this.editBoxTitle = "添加工厂";
				this.showEditBox = true;
				this.factoryInfoObj = factoryObj || {};
			},
			cancelClick(isRefresh) {
				this.showEditBox = false;
				if (isRefresh) {
					this._getFactoryList();
					this._getPageList(true);
				}
			},
			//检索-检索
			_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();
			}
		}
	}
</script>
