<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button
					type="primary"
					icon="el-icon-plus"
					@click="table_add"
					v-auth="'drain.create'"
				></el-button>
			</div>
			<div class="right-panel">
				<el-input
					style="margin-right: 5px"
					v-model="query.search"
					placeholder="名称"
					clearable
				></el-input>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="apiObj"
				row-key="id"
				:params="query"
				hidePagination
				@row-click="rowClick"
			>
				<el-table-column
					label="#"
					type="index"
					width="50"
				></el-table-column>
				<el-table-column label="名称" prop="name"></el-table-column>
				<el-table-column label="编号" prop="number"></el-table-column>
				<el-table-column
					label="所属工段"
					prop="mgroup_name"
				></el-table-column>
				<el-table-column label="等级" prop="level">
					<template #default="scope">
						<el-tag type="link">{{
							level_[scope.row.level]
						}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="类型" prop="cate">
					<template #default="scope"
						>{{ drainTypeEnum[scope.row.cate]?.text }}
					</template>
				</el-table-column>
				<el-table-column label="高度" prop="height"></el-table-column>
				<el-table-column
					label="处理量"
					prop="treatment_capacity"
				></el-table-column>
				<el-table-column
					label="最低限值"
					prop="pm_limit"
				></el-table-column>
				<el-table-column
					label="治理措施"
					prop="measure"
				></el-table-column>
				<el-table-column
					label="坐标"
					prop="coordinates"
				></el-table-column>
				<el-table-column label="关联设备">
					<template #default="scope">
						<el-tag
							v-for="item in scope.row.equipments_"
							:key="item.id"
							>{{ citem.name }}</el-tag
						>
					</template></el-table-column
				>
				<!-- <el-table-column
					label="创建时间"
					prop="create_time"
				></el-table-column> -->
				<el-table-column
					label="操作"
					fixed="right"
					align="center"
					width="150"
				>
					<template #default="scope">
						<el-button
							link
							size="small"
							@click.stop="table_equip(scope.row)"
							v-auth="'drain.update'"
							type="primary"
							>设备</el-button
						>
						<el-divider direction="vertical"></el-divider>
						<el-button
							link
							size="small"
							@click.stop="table_edit(scope.row)"
							v-auth="'drain.update'"
							type="primary"
							>编辑</el-button
						>
						<el-divider direction="vertical"></el-divider>
						<el-button
							link
							size="small"
							@click.stop="table_del(scope.row)"
							v-auth="'drain.update'"
							type="danger"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
	<save-dialog
		v-if="dialog.save"
		ref="saveDialog"
		@success="handleSaveSuccess"
		@closed="dialog.save = false"
	></save-dialog>
	<el-drawer
		title="关联设备"
		v-model="visibleEquip"
		:size="800"
		destroy-on-close
		@closed="visibleEquip = false"
	>
		<el-container>
			<el-button
				type="primary"
				icon="el-icon-plus"
				@click="equip_add"
				v-auth="'equipment'"
				style="position: absolute; z-index: 10; left: 110px; top: 16px"
				>新增</el-button
			>
			<el-main style="padding: 0 20px 20px 20px">
				<scTable
					ref="drawer_table"
					:apiObj="apiObj2"
					row-key="id"
					stripe
					hideDo
					hideSetting
					:params="query2"
					:query="query2"
				>
					<el-table-column type="index" width="50" />
					<el-table-column
						label="设备名称"
						prop="equipment_name"
						show-overflow-tooltip
					>
					</el-table-column>
					<el-table-column label="操作" align="center">
						<template #default="scope">
							<el-link
								type="danger"
								@click="equip_del(scope.row)"
								v-auth="'equipment.delete'"
							>
								删除
							</el-link>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
	</el-drawer>
	<el-drawer
		title="排放口及关联设备信息"
		v-model="visibleEquipDetail"
		:size="'90%'"
		destroy-on-close
		@closed="visibleEquipDetail = false"
	>
		<detail-drawer :detailItem="detailItem"></detail-drawer>
	</el-drawer>
	<el-dialog title="排放口设备" v-model="visible">
		<el-main style="padding: 0 20px 20px 20px">
			<el-form
				ref="dialogForm"
				:model="form"
				label-position="right"
				label-width="100px"
				style="padding: 0 10px"
			>
				<el-row>
					<el-col :md="12" :sm="24">
						<el-form-item label="排放口名称：">
							<span>{{ drain_name }}</span>
						</el-form-item>
					</el-col>
					<el-col :md="12" :sm="24">
						<el-form-item label="排放口编号：">
							<span>{{ drain_number }}</span>
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item label="关联设备：">
							<el-select
								v-model="form.equipment"
								placeholder="关联设备"
								clearable
								filterable
								style="width: 100%"
							>
								<el-option
									v-for="item in options"
									:key="item.id"
									:label="item.name"
									:value="item.id"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-main>
		<el-footer>
			<el-button type="primary" :loading="isSaveing" @click="submit"
				>保存</el-button
			>
			<el-button @click="visible = false">取消</el-button>
		</el-footer>
	</el-dialog>
</template>
<script>
import detailDrawer from "./pfk_detail.vue";
import saveDialog from "./pfk_form.vue";
import { drainTypeEnum } from "@/utils/enum.js";
export default {
	name: "dept",
	components: {
		saveDialog,
		detailDrawer,
	},
	data() {
		return {
			drainTypeEnum,
			apiObj: this.$API.enp.drain.list,
			apiObj2: null,
			query: {},
			query2: {
				drain: "",
				page: 0,
			},
			dialog: {
				save: false,
			},
			form: {
				drain: "",
				equipment: "",
			},
			drainId: "",
			drain_name: "",
			drain_number: "",
			selection: [],
			level_: { 10: "主要排放口", 20: "次要排放口" },
			visible: false,
			options: [],
			visibleEquip: false,
			visibleEquipDetail: false,
		};
	},
	mounted() {
		this.getOptions();
	},
	methods: {
		getOptions() {
			this.$API.em.equipment.list
				.req({ page: 0, type__in: "10,20,30" })
				.then((res) => {
					this.options = res;
				});
		},
		//添加
		table_add() {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("add");
			});
		},
		//编辑
		table_edit(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("edit").setData(row);
			});
		},
		//删除
		async table_del(row) {
			this.$confirm(`确定删除吗？`, "提示", {
				type: "warning",
			}).then(() => {
				this.$API.enp.drain.delete.req(row.id).then((res) => {
					if (res.err_msg) {
						this.$message.error(res.err_msg);
					} else {
						this.$refs.table.refresh();
						this.$message.success("删除成功");
					}
				});
			});
		},
		//搜索
		handleQuery() {
			this.$refs.table.queryData(this.query);
		},
		//本地更新数据
		handleSaveSuccess(data, mode) {
			this.dialog.save = false;
			this.$refs.table.refresh();
		},
		// 关联设备列表
		table_equip(row) {
			this.drainId = row.id;
			this.drain_name = row.name;
			this.drain_number = row.number;
			this.query2.drain = row.id;
			this.apiObj2 = this.$API.enp.drain_equip.list;
			this.visibleEquip = true;
		},
		//添加关联设备
		equip_add() {
			this.visible = true;
			this.form.drain = this.drainId;
		},
		// 关联设备提交
		submit() {
			let that = this;
			console.log(that.form);
			that.$refs.dialogForm.validate((valid) => {
				if (valid) {
					that.isSaveing = true;
					that.$API.enp.drain_equip.create
						.req(that.form)
						.then((res) => {
							that.visible = false;
							that.isSaveing = false;
							this.$refs.drawer_table.refresh();
						})
						.catch(() => {
							that.isSaveing = false;
						});
				}
			});
		},
		//删除关联设备
		equip_del(row) {
			this.$API.enp.drain_equip.delete.req(row.id).then((res) => {
				if (res.err_msg) {
					this.$message.error(res.err_msg);
				} else {
					this.$refs.drawer_table.refresh();
					this.$message.success("删除成功");
				}
			});
		},
		rowClick(row) {
			console.log(row);
			this.detailItem = row;
			this.visibleEquipDetail = true;
		},
	},
};
</script>
<style scoped></style>
