<!-- 
    filename: PlanConfig--addContent.vue
    author: liubin
    date: 2024-02-04 09:40:04
    description: 计划配置-添加内容
-->

<template>
	<el-drawer
		:visible.sync="visible"
		:show-close="false"
		:wrapperClosable="true"
		:close-on-click-modal="true"
		:before-close="handleConfirmClose"
		class="drawer"
		custom-class="mes-drawer"
		size="60%"
		@closed="$emit('destroy')">
		<SmallTitle slot="title">
			{{
				mode.includes('detail')
					? '详情'
					: mode.includes('edit')
					? '添加内容'
					: '新增'
			}}
		</SmallTitle>

		<div class="drawer-body flex">
			<div class="drawer-body__content">
				<section>
					<div class="form-part" style="margin-bottom: 32px">
						<el-skeleton v-if="!showForm" animated />
						<el-form
							v-else
							ref="form"
							:model="form"
							label-position="top"
							v-loading="formLoading">
							<el-row :gutter="20">
								<el-col :span="8">
									<el-form-item label="保养计划名称" prop="name">
										<span>{{ form.name || '---' }}</span>
									</el-form-item>
								</el-col>

								<el-col :span="8">
									<el-form-item label="部门" prop="departmentName">
										<span>{{ form.departmentName || '---' }}</span>
									</el-form-item>
								</el-col>

								<el-col :span="8">
									<el-form-item label="产线名" prop="lineName">
										<span>{{ form.lineName || '---' }}</span>
									</el-form-item>
								</el-col>

								<el-col :span="8">
									<el-form-item label="保养频率" prop="maintenancePeriod">
										<span>{{ form.maintenancePeriod || '---' }}</span>
									</el-form-item>
								</el-col>

								<el-col :span="8">
									<el-form-item label="保养时长" prop="maintainDuration">
										<span>{{ form.maintainDuration || '---' }}</span>
									</el-form-item>
								</el-col>

								<el-col :span="8">
									<el-form-item label="计划保养人员" prop="maintainer">
										<span>{{ form.maintainer || '---' }}</span>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</section>

				<section>
					<SmallTitle>保养详情</SmallTitle>
					<div style="margin-top: 12px; position: relative">
						<div
							v-if="!mode.includes('detail')"
							style="position: absolute; top: -40px; right: 0">
							<el-button @click="handleAddDetail" type="text">
								<i class="el-icon-plus"></i>
								添加详情
							</el-button>
						</div>
						<base-table
							v-loading="detailLoading"
							:table-props="detailTableProps"
							:page="detailTableQuery.pageNo || 1"
							:limit="detailTableQuery.pageSize || 10"
							:table-data="detailList"
							@emitFun="handleDetailTableAction">
							<method-btn
								slot="handleBtn"
								label="操作"
								width="100"
								:method-list="detailTableBtns"
								@clickBtn="handleDetailTableBtnClicked" />
						</base-table>

						<!-- 分页组件 -->
						<pagination
							v-show="detailTotal > 0"
							:total="detailTotal"
							:page.sync="detailTableQuery.pageNo"
							:limit.sync="detailTableQuery.pageSize"
							@pagination="refreshDetailList" />
					</div>
				</section>
			</div>
		</div>

		<div class="drawer-body__footer">
			<el-button style="" @click="cancel">取消</el-button>
			<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
				编辑
			</el-button>
			<el-button v-else type="primary" @click="confirm">保存</el-button>
		</div>

		<!-- 属性对话框 -->
		<base-dialog
			dialogTitle="保养详情"
			:dialogVisible="detailAddVisible"
			width="35%"
			:append-to-body="true"
			custom-class="baseDialog"
			@close="detailAddVisible = false"
			@cancel="detailAddVisible = false"
			@confirm="submitDetailForm">
			<DialogForm
				v-if="detailAddVisible"
				ref="detailForm"
				v-model="detailForm"
				:rows="detailRows" />
		</base-dialog>
	</el-drawer>
</template>

<script>
import DialogForm from '@/components/DialogForm';
import BaseDialogWrapper from '../components/BaseDialogWrapper.vue';
import SmallTitle from '../components/SmallTitle.js';

export default {
	name: 'PlanConfig--addContent',
	components: { SmallTitle, DialogForm, BaseDialog: BaseDialogWrapper },
	props: ['maintainData'],
	data() {
		return {
			visible: false,
			mode: 'edit',
			showForm: false,
			form: {
				departmentName: null,
				id: null,
				lineName: null,
				maintainDuration: null,
				maintainer: null,
				maintenancePeriod: null,
				name: null,
			},
			formLoading: false,
			equipmentOptions: [],
			detailList: [],
			detailAddVisible: false,
			detailPageProps: ['equipmentName', 'program'],
			detailForm: {
				planId: null,
				equipmentId: null,
				program: '',
				maintenanceDes: '',
				remark: '',
			},
			detailRows: [
				[
					{
						select: true,
						label: '设备',
						prop: 'equipmentId',
						options: [],
						rules: [
							{ required: true, message: '设备不能为空', trigger: 'blur' },
						],
					},
				],
				[
					{
						input: true,
						label: '保养项目',
						prop: 'program',
						rules: [
							{ required: true, message: '保养项目不能为空', trigger: 'blur' },
						],
					},
				],
				[
					{
						input: true,
						label: '保养描述',
						prop: 'maintenanceDes',
						rules: [
							{ required: true, message: '包养描述不能为空', trigger: 'blur' },
						],
					},
				],
			],
			detailLoading: false,
			detailTableProps: [
				{ prop: 'equipmentName', label: '设备名称' },
				{ prop: 'program', label: '保养项目' },
				// { prop: 'remark', label: '备注' },
			],
			detailTableQuery: {
				pageNo: 1,
				pageSize: 10,
			},
			detailTableBtns: [
				{
					type: 'edit',
					btnName: '编辑',
				},
				{
					type: 'delete',
					btnName: '删除',
				},
			],
			detailTotal: 0,
			detailList: [],
			equipmentList: [],
		};
	},
	computed: {},
	mounted() {
		this.loadEquipments();
	},
	methods: {
		/** 确认是否关闭 */
		async handleConfirmClose() {
			if (this.mode.includes('detail')) return this.cancel();
			if (document.querySelector('.small-title').innerText.includes('添加内容')) return this.cancel();
			try {
				if (
					await this.$confirm(
						<div style="position: relative; margin-bottom: 26px; overflow: visible;">
							<h1 style="font-size: 16px; font-weight: bold; color: #000c;">
								确认要关闭页面吗?
							</h1>
							<p style="font-size: 14px; color: #0008; position: absolute; top: 24px;">
								确定关闭将不保留编辑内容
							</p>
						</div>,
						{
							confirmButtonText: '确 定',
							cancelButtonText: '取 消',
							type: 'warning',
						}
					)
				) {
					this.cancel();
				}
			} catch (err) {
				return false;
			}
		},

		show({
			departmentName,
			id,
			lineName,
			maintainDuration,
			maintainer,
			maintenancePeriod,
			name,
		}) {
			this.form = Object.assign(
				{},
				{
					departmentName,
					id,
					lineName,
					maintainDuration,
					maintainer,
					maintenancePeriod,
					name,
				}
			);
			this.$nextTick(() => {
				this.refreshDetailList();
			});
			this.visible = true;
			this.showForm = true;
		},
		cancel() {
			this.visible = false;
			setTimeout(() => {
				this.$emit('closed');
			}, 500);
		},
		confirm() {
			this.cancel();
		},
		toggleEdit() {
			this.mode == 'edit' ? 'detail' : 'edit';
		},
		async loadEquipments() {
			// TODO: 很有可能此处要改成动态刷新/获取/加载设备列表，当总的特殊设备数量大于100的时候...
			const res = await this.$axios('/base/core-equipment/page', {
				params: {
					pageNo: 1,
					pageSize: 100,
					special: true,
				},
			});
			this.equipmentList = res.data?.list || [];
			this.detailRows[0][0].options = (res.data?.list || []).map((item) => ({
				label: item.name,
				value: item.id,
			}));
		},

		resetForm() {
			this.detailForm = {
				planId: null,
				equipmentId: null,
				program: '',
				maintenanceDes: '',
				remark: '',
			};
		},

		closeDetailForm() {
			this.detailAddVisible = false;
		},

		async submitDetailForm() {
			// validation
			this.$refs.detailForm.validate(async (valid) => {
				if (!valid) return;
				const res = await this.$axios[this.detailForm.id ? 'put' : 'post'](
					`/base/equipment-maintain-plan-det/${
						this.detailForm.id ? 'update' : 'create'
					}`,
					{
						...this.detailForm,
						planId: this.form.id,
					}
				);
				if (res.code == 0) {
					this.detailAddVisible = false;
					this.$message.success('添加成功');
					this.refreshDetailList();
				} else {
					this.detailAddVisible = false;
					this.$message.error('出错');
				}
			});
		},
		async refreshDetailList() {
			this.detailLoading = true;
			if (!this.form.id)
				return this.$message.info('没有找到保养计划相关信息...');
			const res = await this.$axios('/base/equipment-maintain-plan-det/page', {
				params: {
					pageNo: this.detailTableQuery.pageNo,
					pageSize: this.detailTableQuery.pageSize,
					planId: this.form.id,
				},
			});
			this.detailList = res.data?.list || [];
			this.detailTotal = res.data?.total || 0;
			this.detailLoading = false;
		},
		//
		handleDetailTableAction() {},
		handleDetailTableBtnClicked({ data, type }) {
			switch (type) {
				case 'edit':
					const { id, equipmentId, planId, program, maintenanceDes, remark } =
						data;
					this.detailAddVisible = true;
					this.$nextTick(() => {
						this.detailForm = Object.assign(
							{},
							{
								id,
								equipmentId,
								planId,
								program,
								maintenanceDes,
								remark,
							}
						);
					});
					break;
				case 'delete':
					if (!data.id) return;
					this.$confirm('确认移除该详情吗？', '提示', {
						confirmButtonText: '确 认',
						cancelButtonText: '取 消',
					})
						.then(async () => {
							const res = await this.$axios.delete(
								'/base/equipment-maintain-plan-det/delete',
								{
									params: {
										id: data.id,
									},
								}
							);
							if (res.code == 0) {
								this.$message.success('删除成功!');
								this.refreshDetailList();
							}
						})
						.catch(console.error);
					break;
				case 'detail':
					this.handleDetail(data);
					break;
				default:
					this.handleTableActions({ data, type });
			}
		},
		handleAddDetail() {
			this.resetForm();
			this.$nextTick(() => {
				this.detailAddVisible = true;
			});
		},
	},
};
</script>

<style scoped>
.drawer >>> .el-drawer {
	border-radius: 8px 0 0 8px;
}

.drawer >>> .el-drawer__header {
	margin: 0;
	padding: 32px 32px 24px;
	border-bottom: 1px solid #dcdfe6;
	margin-bottom: 0px;
}

.small-title::before {
	content: '';
	display: inline-block;
	vertical-align: top;
	width: 4px;
	height: 22px;
	border-radius: 1px;
	margin-right: 8px;
	background-color: #0b58ff;
}

.drawer-body {
	display: flex;
	flex-direction: column;
	height: calc(100% - 72px);
}

.drawer-body__content {
	flex: 1;
	/* background: #eee; */
	padding: 20px 30px;
	overflow-y: auto;
}

.drawer-body__footer {
	display: flex;
	justify-content: flex-end;
	padding: 18px;
}
</style>
