<template>
	<el-container>
		<el-header>
			<el-steps
				:active="active"
				style="width: 100%"
				:align-center="true"
				finish-status="success"
			>
				<el-step
					v-for="(item, index) of stepTitle"
					:key="index"
					:title="item"
					style="50%"
					@click="handleStep(index)"
				>
				</el-step>
			</el-steps>
		</el-header>
		<!--基本信息!-->
		<el-main class="nopadding" v-show="active === 0">
			<el-form
				v-show="active === 0"
				ref="dialogForm"
				:model="form"
				:rules="rules"
				label-width="110px"
				style="margin: 40px 40px 0px 40px"
			>
				<el-row>
					<el-col :md="12" :sm="12" :xs="24">
						<el-form-item label="关联作业">
							<el-input
								v-model="form.name"
								type="text"
								:disabled="true"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :md="12" :sm="12" :xs="24">
						<el-form-item label="作业许可种类">
							<el-input
								v-model="pagtitle"
								type="text"
								:disabled="true"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :md="12" :sm="12" :xs="24">
						<el-form-item label="作业开始时间" prop="start_time">
							<el-date-picker
								v-model="form.start_time"
								type="datetime"
								placeholder="选择开始时间"
							/>
						</el-form-item>
					</el-col>
					<el-col :md="12" :sm="12" :xs="24">
						<el-form-item label="作业结束时间" prop="end_time">
							<el-date-picker
								v-model="form.end_time"
								type="datetime"
								placeholder="选择开始时间"
							/>
						</el-form-item>
					</el-col>
					<el-col :md="12" :sm="12" :xs="24" >
						<el-form-item label="作业部门" prop="dept_do">
							<el-cascader
								placeholder="选择作业部门"
								getCheckedNodes="true"
								v-model="form.dept_do"
								:options="deptoptions"
								:props="{
                  expandTrigger: 'hover', // 次级菜单的展开方式
                  label: 'label', //
                  value: 'value', //
                  emitPath: false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
				  checkStrictly: true
                }"
								clearable
							/>
						</el-form-item>
					</el-col>
					<el-col :md="12" :sm="12" :xs="24">
						<el-form-item label="作业负责人" prop="charger">
							<el-input
								v-model="form.charger_name"
								style="width:200px"
								disabled
								></el-input>
							<!-- <el-select v-model="form.charger_name" placeholder="选择作业负责人">
								<el-option
									v-for="item in useroptions"
									:key="item.id"
									:label="item.name"
									:value="item.id"
								/>
							</el-select> -->
							<ehsUserSelect :multiple="false" @submit="getCharger"/>
						</el-form-item>
					</el-col>
					<el-col :md="12" :sm="12" :xs="24">
						<el-form-item label="作业监护人" prop="monitor">
							<el-input
								v-model="form.monitor_name"
								style="width:200px"
								disabled
								></el-input>
							<ehsUserSelect :multiple="false" @submit="getMonitor"/>
						</el-form-item>
					</el-col>
					<el-col :md="24" :sm="12" :xs="24">
						<el-form-item label="风险选择" prop="risks_checked">
							<el-checkbox-group v-model="form.risks_checked">
								<el-checkbox
									v-for="(item, index) in risklist"
									:key="index"
									:label="item.id"
								>{{ item.name }}
								</el-checkbox
								>
							</el-checkbox-group>
						</el-form-item>
					</el-col>
					<el-col :md="24" :sm="12" :xs="24">
						<el-form-item label="其他风险">
							<el-input
								v-model="form.other_risk"
								type="text"
								clearable
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :md="24" :sm="12" :xs="24">
						<el-form-item label="措施选择" prop="measures_checked">
							<el-checkbox-group v-model="form.measures_checked">
								<el-checkbox
									v-for="(item, index) in measurelist"
									:key="index"
									:label="item.id"
								>{{ item.name }}
								</el-checkbox
								>
							</el-checkbox-group>
						</el-form-item>
					</el-col>
					<el-col :md="24" :sm="12" :xs="24">
						<el-card header="应急处置">
							<div class="content">
								<p>1、施救人员必须穿戴好耐高温防护用品方可进入篦冷机内进行救援。</p>
								<p>2、将受伤人员托起或使用担架将伤者抬出篦冷机。</p>
								<p>3、发生人员窒息、中毒，将其转移到空气新鲜流通的场所，插入氧气袋或进行心肺复苏术，情况严重拨打120。
								</p>
								<p>4、发生人员烫伤时用冷清水对烫伤部位进行冲洗或用浸泡，用干净的纱布或衣物盖住被烫伤部位，伤势严重时立即拨打120送医。若贴身衣服与伤口粘在一起时，可用剪刀剪开，然后缓慢剥离衣物。</p>
							</div>
						</el-card>
						<el-form-item label="其他应急处置">
							<el-input
								v-model="form.other_emr"
								type="text"
								clearable
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div style="margin-bottom: 20px; text-align:center">
				<el-button type="primary" plain @click="handleNextStep"
							>下一步
							</el-button>
			</div>
		</el-main>

		<!--作业人员!-->
		<el-main class="nopadding" v-show="active === 1">
			<div class="left-panel" style="margin: 10px">
				<el-button
					type="primary"
					icon="el-icon-plus"
					@click="addworker"
				></el-button>
			</div>
			<scTable
				ref="workerTable"
				:data="apiworkerObj"
				row-key="id"
				hidePagination
				stripe
				hideDo
				style="height: 300px;"
			>
				<el-table-column
					label="#"
					fixed="left"
					type="index"
					width="50"
				></el-table-column>
				<el-table-column label="姓名" prop="name" width="150">
					<template #default="scope">
						{{ scope.row.worker_.name }}
					</template>
				</el-table-column>
				<el-table-column label="工作职责" prop="duty" width="150">
				</el-table-column>
				<el-table-column label="证书" prop="certificates" width="150">
					<template #default="scope">
						<el-tag v-for="item in scope.row.certificates_"
								:key="item.number"
								:label="item.name"
								:value="item.number">{{item.name}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					label="创建时间"
					prop="create_time"
					width="150"
				></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="200">
					<template #default="scope">

						<el-popconfirm
							title="确定删除该作业人员吗？"
							@confirm="delWorker(scope.row)"
						>
							<template #reference>
								<el-button text type="danger" size="small">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</scTable>
			<el-dialog v-model="workerdialog" draggable title="选择作业人员">
				<el-form
					ref="workerForm"
					:model="formworker"
					:rules="rules"
					:disabled="mode == 'show'"
					label-width="80px"
					width="70%"
					style="margin: 40px 40px 40px 40px"
				>
					<el-row>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="作业人员">
								<el-input
								v-model="formworker.worker_name"
								style="width:200px"
								disabled
								></el-input>
							<ehsUserSelect :multiple="false" @submit="getWorker"/>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="工作职责">
								<el-select
									v-model="formworker.duty"
									filterable
									allow-create
									default-first-option
									:reserve-keyword="false"
								>
									<el-option
										v-for="item in dutyOptions"
										:key="item.value"
										:label="item.label"
										:value="item.label"
									/>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="证书">
								<el-select
									v-model="formworker.certificates"
									multiple
									placeholder="选择证书"
								>
									<el-option
										v-for="item in certificatesOptions"
										:key="item.id"
										:label="item.name"
										:value="item.id"
									/>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<template #footer>
					<el-button @click="dialogcart = false">取 消</el-button>
					<el-button type="primary" @click="submitWorker">确 定</el-button>
				</template>
			</el-dialog>
			<div style="margin-top:20px;text-align:center">
			<el-button style="margin-right: 4px" @click="handleLastStep"
			>上一步
			</el-button>
			<el-button type="primary" plain @click="handleNextStep"
			>下一步
			</el-button>
			</div>
		</el-main>
		<!--气体检测记录!-->
		<el-main class="nopadding" v-show="active === 2">
			<div class="left-panel" style="margin: 10px">
				<el-button
					type="primary"
					icon="el-icon-plus"
					@click="addgas"
				></el-button>
			</div>
			<scTable
				ref="gasTable"
				:data="apigasObj"
				row-key="id"
				hidePagination
				hideDo
				stripe
				style="height: 300px;"
			>
				<el-table-column
					label="#"
					fixed="left"
					type="index"
					width="50"
				></el-table-column>
				<el-table-column
					label="检测时间"
					prop="check_time"
					width="150"
				></el-table-column>
				<el-table-column
					label="检测部位"
					prop="check_place"
					width="150"
				></el-table-column>
				<el-table-column label="O2(%)" prop="o2" width="150"></el-table-column>
				<el-table-column label="CO" prop="co" width="150"></el-table-column>
				<el-table-column
					label="45℃"
					prop="f5"
					width="150"
				></el-table-column>
				<el-table-column
					label="检验结论"
					prop="is_ok"
					width="150"
				>
					<template #default="scope">
						{{ is_ok_[scope.row.is_ok] }}
					</template>
				</el-table-column>
				<el-table-column
					label="检测人"
					prop="checker"
					width="150"
				>
					<template #default="scope">
						{{ scope.row.checker_.name }}
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="200">
					<template #default="scope">

						<el-popconfirm
							title="确定删除该条气体检测记录吗？"
							@confirm="delgas(scope.row)"
						>
							<template #reference>
								<el-button text type="danger" size="small">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</scTable>
			<el-dialog v-model="gasdialog" draggable title="气体检测记录">
				<el-form
					ref="gasForm"
					:model="formgas"
					:rules="rules"
					:disabled="mode == 'show'"
					label-width="80px"
					width="70%"
					style="margin: 40px 40px 40px 40px"
				>
					<el-row>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="检测时间">
								<el-date-picker
									v-model="formgas.check_time"
									type="datetime"
									placeholder="选择检测时间"
								/>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="检测部位">
								<el-input
									v-model="formgas.check_place"
									type="text"
									clearable
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="O2(%)">
								<el-input v-model.number="formgas.o2" type="text" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="CO">
								<el-input
									v-model.number="formgas.co"
									type="text"
									clearable
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="45℃">
								<el-input
									v-model.number="formgas.f5"
									type="text"
									clearable
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="检验结论">

								<el-radio-group v-model="formgas.is_ok">
									<el-radio l :label="true">正常</el-radio>
									<el-radio :label="false">不正常</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="检测人">
								<el-input
								v-model="formgas.checker_name"
								style="width:200px"
								disabled
								></el-input>
								<ehsUserSelect :multiple="false" @submit="getChecker"/>
								<!-- <el-select
									v-model="formgas.checker"
									placeholder="选择作业人员"
								>
									<el-option
										v-for="item in useroptions"
										:key="item.id"
										:label="item.name"
										:value="item.id"
									/>
								</el-select> -->
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<template #footer>
					<el-button @click="dialoggase = false">取 消</el-button>
					<el-button type="primary" @click="submitgas">确 定</el-button>
				</template>
			</el-dialog>
			<div style="margin-top:20px;text-align:center">
			<el-button @click="handleLastStep" style="margin-right:4px">上一步</el-button>
			<el-button
				:loading="tLoading"
				v-for=" item in initForm.transitions"
				:key="item.id"
				type="primary"
				@click="submitTicketCreate(item.id)"
				style="margin-right:4px"
			>{{item.name}}
			</el-button>
			<el-button @click="submitOut" type="warning">退出</el-button>
			</div>
		</el-main>
	</el-container>
</template>
<style scoped>
	.clearfix {
		font-size: 20px;
	}

	.box-card p {
		line-height: 20px;
	}

	.content {
		margin-top: 10px;
	}

	.stepSuc:hover {
		cursor: pointer;
	}

	.stepErr:hover {
		cursor: not-allowed;
	}
</style>
<script>
	import {genTree} from "@/utils/verificate";

	const defaultformworker = {
		id: "",
		worker: null,
		duty: "作业人员",
		certificates: [],
		opl: "",
	};
	const defaultformgas = {
		id: "",
		is_ok: true,
		check_time: null,
		opl: "",
	};
	export default {
		name: "fire",
		components: {},
		data() {
			return {
				active: 0,
				stepSuc: [0],
				stepTitle: ["基本信息", "作业人员", "气体检测记录"],
				query: {},
				selection: [],
				issave: false, //控制基本信息提交
				search: {
					keyword: null,
				},
				form: {
					id: "",
					start_time: null,
					end_time: null,
					operation: "",
					cate: "",
					risks_checked: [],
				},
				initForm: {},
				operationId: "",
				oplcateId: "",
				oplcateCode: "",
				oplId: "",
				leveloptions: [
					{id: 10, name: "特殊动火"},
					{id: 20, name: "一级动火"},
					{id: 30, name: "二级动火"},
				],
				deptoptions: [],
				useroptions: [],
				risklist: [],
				measurelist: [],
				pagtitle: "",
				dutyOptions: [
					{value: 10, label: "作业人员"},
					{value: 20, label: "起重司机"},
					{value: 30, label: "司索人员"},
					{value: 40, label: "起重指挥"},
					{value: 40, label: "电工"},
				],
				certificatesOptions: [],
				formworker: defaultformworker,
				apiworkerObj: [],
				workerdialog: false,
				gasdialog: false,
				formgas: defaultformgas,
				apigasObj: [],
				is_ok_: {
					true: "正常",
					false: "不正常",
				},
				tLoading: false,
				rules: {
					start_time: [
						{required: true, message: '请选择'}
					],
					end_time: [
						{required: true, message: '请选择'}
					],
					level: [
						{required: true, message: '请选择'}
					],
					dept_do: [
						{required: true, message: '请选择'}
					],
					charger: [
						{required: true, message: '请选择'}
					],
					monitor: [
						{required: true, message: '请选择'}
					],
					risks_checked: [
						{required: true, message: '请选择'}
					],
					measures_checked: [
						{required: true, message: '请选择'}
					],
				}
			};
		},
		mounted() {
			this.operationId = this.$route.query.operationid; //作业ID
			this.oplcateId = this.$route.query.oplcateId; //作业许可证种类ID
			this.oplId = this.$route.query.oplId; //许可证ID
			this.getoplData();
			this.getInit();
			this.getDept();
			// this.getUser();
		},
		methods: {
			getCharger(data) {
				this.form.charger=data.id;
      			this.form.charger_name=data.name
			},
			getChecker(data){
				this.formgas.checker=data.id;
      			this.formgas.checker_name=data.name
			},
			getMonitor(data) {
				this.form.monitor=data.id;
				this.form.monitor_name=data.name
			},
			getWorker(data) {
				this.formworker.worker=data.id,
				this.formworker.worker_name=data.name
				this.selectWorker()
			},
			getoplData() {
				if (this.oplId == "") {
					this.getOperation();
					this.getOplcates();
				} else {
					this.getData();
				}
			},
			//根据oplId，查许可证
			getData() {
				this.$API.opm.opl.read.req(this.oplId).then((res) => {
					this.form = res;
					this.oplId = res.id;
					this.oplcateId = res.cate;
					this.operationId = res.operation;
					this.getOperation();
					this.getOplcates();
				});
			},
			//根据operationId，查作业信息

			getOperation() {
				this.$API.opm.operation.read.req(this.operationId).then((res) => {
					this.form.start_time = res.start_time; //作业开始时间
					this.form.end_time = res.end_time; //作业结束时间
					this.form.name = res.name; //作业结束时间

					console.log(res);
				});
			},
			//作业部门
			getDept() {
				this.$API.system.dept.list.req({page: 0}).then((res) => {
					this.deptoptions = genTree(res);
				});
			},

			//作业负责人、作业监护人
			//作业

			//根据作业许可证类别ID获取，风险、措施===>作业许可证类别详情
			getOplcates() {
				this.$API.opm.oplcate.read.req(this.oplcateId).then((res) => {
					console.log(res); //
					this.pagtitle = res.name;
					this.oplcateCode = res.code;
					this.risklist = res.risk_options_; //风险缝隙
					this.measurelist = res.measure_options_; //控制措施
				});
			},
			handleStep(val) {
				//点击步骤条
				if (this.stepSuc.includes(val) === true) {
					this.active = val;
				}
			},
			//组件点击上一步
			handleLastStep() {
				if (--this.active === 0) {
					this.active = 0;
				}
			},
			//组件点击下一步
			handleNextStep() {

				if (this.active == 0) {
					this.$refs.dialogForm.validate((valid) => {
					if (valid) {
											//如果是创建许可证书
					if (this.oplId == "") {
						//基本信息提交
						debugger;
						this.form.cate = this.oplcateId;
						this.form.operation = this.operationId;
						console.log(this.form);
						this.$API.opm.opl.create
							.req(this.form)
							.then((res) => {
								this.$emit("success", this.form);
								this.$message.success("创建成功");
								this.issave = true;
								this.active = 1;

								this.oplId = res.id;
								this.getworkerList();
								this.getgasList();
								return res;
							})
							.catch((err) => {
								return err;
							});
					} else if (this.oplId != "") {

						this.$API.opm.opl.update.req(this.oplId, this.form).then(() => {
							this.$message.success("基本修改成功！");
							this.issave = true;
							this.active = 1;
							this.getgasList();
							this.getworkerList();

						});
					} else {
						this.active = 1;
					}
					}
				})
				} else {
					if (this.active==1){
						if(this.apiworkerObj.length==0){
							this.$message.warning("请添加作业人员");
							return
						}
					}
					this.active = 2;

				}
				// this.stepSuc.push(++this.active)
			},

			//选择人员后，调出该人员的所有证书
			selectWorker() {
				this.$API.hrm.certificate.list
					.req({employee__user: this.formworker.worker, page: 0})
					.then((res) => {
						this.certificatesOptions = res;
						console.log(res);
					});
			},
			//作业人员列表

			getworkerList() {
				this.$API.opm.worker.list.req({opl: this.oplId, page: 0}).then((res) => {
					this.apiworkerObj = res;
					console.log(res);
				});
			},
			//创建作业人员，显示Form
			addworker() {
				this.workerdialog = true;

				this.formworker = Object.assign({}, defaultformworker);
			},

			//删除作业人员
			delWorker(row) {
				this.$API.opm.worker.delete
					.req(row.id)
					.then((res) => {
						this.$message.success("作业人员删除成功");
						this.getworkerList()
						return res;
					})
					.catch((err) => {
						return err;
					});
			},
			//提交作业人员信息
			submitWorker() {
				this.formworker.opl = this.oplId;
				this.$refs.workerForm.validate(async (valid) => {

					this.$API.opm.worker.create
						.req(this.formworker)
						.then((res) => {
							this.$message.success("创建作业人员成功");
							this.getworkerList();
							this.workerdialog = false;
						})
						.catch((err) => {
							return err;
						});
				});
			},

			//气体检测记录列表
			getgasList() {
				this.$API.opm.gas.list.req({opl: this.oplId, page: 0}).then((res) => {
					this.apigasObj = res;
					console.log(res);
				});
			},

			//创建气体检测记录，显示Form
			addgas() {
				this.gasdialog = true;
				this.formgas = Object.assign({}, defaultformgas);
			},

			//提交气体检测记录
			submitgas() {
				this.formgas.opl = this.oplId;
				this.$refs.gasForm.validate(async (valid) => {

					this.$API.opm.gas.create
						.req(this.formgas)
						.then((res) => {
							this.$message.success("创建气体检测记录成功");
							this.getgasList();
							this.gasdialog = false;

						})
						.catch((err) => {
							return err;
						});

				});
			},

			//删除气体检测记录
			delgas(row) {
				this.$API.opm.gas.delete
					.req(row.id)
					.then((res) => {
						this.$message.success("气体检测记录删除成功");
						this.getgasList()
						return res;
					})
					.catch((err) => {
						return err;
					});
			},

			//渲染工单提交按钮
			getInit() {
				this.$API.wf.workflow.initkey.req('opl_cooler').then((res) => {
					this.initForm = res;
				});
			},

			//提交,创建工单
			submitTicketCreate(id) {
				let ticket = {};
				ticket.workflow = this.initForm.workflow;
				ticket.ticket_data = {opl: this.oplId};
				ticket.transition = id;
				ticket.title = this.form.name + '-申请';
				this.tLoading = true
				this.$API.wf.ticket.create.req(ticket).then((res) => {
					this.tLoading = false
					this.$message.success("提交成功");
					this.submitOut()
				}).catch(e=>{this.tLoading=false});
			},

			//退出界面
			submitOut() {
				this.$router.push({
					name: "opl",
					query: {
						id: this.operationId,//作业ID

					},
				});
			}
		},
	};
</script>
