<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
				ref="dialogForm"
				:model="rpjform"
				label-width="110px"
				style="margin: 40px 40px 40px 40px"
			>
				<el-row>
					<el-col :md="24" :sm="12" :xs="24">
						<el-form-item label="名称">
							<el-input v-model="rpjform.name" type="text" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :md="24" :sm="12" :xs="24">
						<el-form-item label="项目类型">
							<el-select v-model="rpjform.type" style="width: 100%">
								<el-option
									v-for="item in typeOptions"
									:key="item.id"
									:label="item.name"
									:value="item.id"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :md="24" :sm="12" :xs="24">
						<el-form-item label="合同编号">
							<el-input
								v-model="rpjform.contract_number"
								type="text"
								clearable
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :md="24" :sm="12" :xs="24">
						<el-form-item label="进场时间">
							<el-date-picker
								v-model="rpjform.come_time"
								type="datetime"
								placeholder="选择结束时间"
							/>
						</el-form-item>
					</el-col>
					<el-col :md="24" :sm="12" :xs="24">
						<el-form-item label="离场时间">
							<el-date-picker
								v-model="rpjform.leave_time"
								type="datetime"
								placeholder="选择结束时间"
							/>
						</el-form-item>
					</el-col>
					<el-col :md="24" :sm="12" :xs="24">
						<el-form-item label="所属部门">
							<el-cascader
								v-model="rpjform.belong_dept"
								:options="deptoptions"
								:props="{
                  expandTrigger: 'hover', // 次级菜单的展开方式
                  label: 'label', //
                  value: 'value', //
                  emitPath: false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
                }"
								clearable
								style="width: 100%"
							>
							</el-cascader>
						</el-form-item>
					</el-col>

					<el-col :md="24" :sm="12" :xs="24">
						<el-form-item label="相关方">
							<el-select v-model="rpjform.rparty" style="width: 100%">
								<el-option
									v-for="item in rpartyOptions"
									:key="item.id"
									:label="item.name"
									:value="item.id"
								/>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :md="24" :sm="12" :xs="24">
						<el-form-item>
							<el-button style="margin-top: 12px" @click="handleNextStep"
							>下一步
							</el-button
							>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-main>

		<!--安全审核项目!-->
		<el-main class="nopadding" v-show="active === 1">
			<scTable
				ref="fileTable"
				:data="rpjfileList"
				row-key="id"
				hidePagination
				stripe
			>
				<el-table-column
					label="#"
					fixed="left"
					type="index"
					width="50"
				></el-table-column>
				<el-table-column label="资质内容" prop="name">
					<template #default="scope">
						{{ scope.row.file_cate_.name }}
					</template>
				</el-table-column>
				<el-table-column label="文件资料" prop="name">
					<template #default="scope">
						<div v-for="(item, index) in scope.row.files_" :key="index">
							<el-link :href="item.file">
								{{ item.name }}
							</el-link>
						</div>
					</template>
				</el-table-column>

				<el-table-column label="操作" fixed="right" align="center" width="200">
					<template #default="scope">
						<el-button
							text
							type="primary"
							size="small"
							@click="upload(scope.row, scope.$index)"
						>上传
						</el-button
						>
						<el-popconfirm
							title="确定删除吗？"
							@confirm="del_rpjfile(scope.row)"
						>
							<template #reference>
								<el-button text type="danger" size="small">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</scTable>
			<el-button style="margin-top: 12px" @click="handleLastStep"
			>上一步
			</el-button
			>
			<el-button style="margin-top: 12px" @click="handleNextStep"
			>下一步
			</el-button
			>
			<sc-dialog v-model="dialogupload" draggable title="上传文件">
				<el-form ref="dialogfileForm" :model="fileform" label-width="120px">
					<el-row>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="上传文件">
								<sc-upload-file
									v-model="fileform.files"
									:on-success="success"
									:multiple="true"
									:limit="10"
									tip="最多上传10个文件,单个文件不要超过10M,请上传xlsx/docx格式文件"
								>
									<el-button type="primary" icon="el-icon-upload"
									>上传附件
									</el-button
									>
								</sc-upload-file>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<template #footer>
					<el-button @click="dialogupload = false">取 消</el-button>
					<el-button type="primary" @click="submitFile">确 定</el-button>
				</template>
			</sc-dialog>
		</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="addworker"
				></el-button>
			</div>
			<scTable
				ref="workerTable"
				:data="apiworkerObj"
				row-key="id"
				hidePagination
				stripe
			>
				<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.remployee_.name }}
					</template>
				</el-table-column>
				<el-table-column label="工作职责" prop="duty" width="150">
				</el-table-column>
				<el-table-column label="证书" prop="rcertificates" width="150">
					<template #default="scope">
						<el-tag
							v-for="item in scope.row.rcertificates_"
							:key="item.number"
							:label="item.name"
							:value="item.number"
						>{{ item.name }}
						</el-tag
						>
					</template>
				</el-table-column>
				<el-table-column label="是否项目负责人" prop="is_manager" width="150">
				</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>
			<sc-dialog v-model="workerdialog" draggable title="选择项目人员">
				<el-form
					ref="workerForm"
					:model="formworker"
					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-select
									v-model="formworker.remployee"
									@change="selectWorker"
									placeholder="选择项目人员"
								>
									<el-option
										v-for="item in remployeeoptions"
										:key="item.id"
										:label="item.name"
										:value="item.id"
									/>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="是否项目负责人">
								<el-radio-group v-model="formworker.is_manager">
									<el-radio :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="formworker.duty"
									type="text"
									clearable
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="证书">
								<el-select
									v-model="formworker.rcertificates"
									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="workerdialog = false">取 消</el-button>
					<el-button type="primary" @click="submitWorker">确 定</el-button>
				</template>
			</sc-dialog>
			<el-button @click="handleLastStep">上一步</el-button>
				<el-button
					v-for=" item in initForm.transitions"
					:key="item.id"
					type="primary"
					@click="submitTicketCreate(item.id)"
				>{{item.name}}</el-button>
			<el-button @click="submitOut">退出</el-button>
		</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 = {

		duty: "",
		rcertificates: [],
		rpj: "",
	};
	export default {
		name: "rpjadd",
		components: {},
		data() {
			return {
				active: 0,
				stepSuc: [0],
				stepTitle: ["基本信息", "安全审核项目", "选择人员"],
				query: {},
				selection: [],
				issave: false, //控制基本信息提交
				search: {
					keyword: null,
				},
				rpjId: "",
				rpjform: {},
				rpartyOptions: [],
				deptoptions: [],
				typeOptions: [
					{id: 10, name: "建筑施工"},
					{id: 20, name: "设备设施检维修"},
					{id: 30, name: "保安保洁服务"},
					{id: 40, name: "其他"},
				],
				rpjfileList: [],
				dialogupload: false,
				fileform: {
					id: "",
					files: [],
				},
				filelist: [],
				remployeeoptions: [],
				certificatesOptions: [],
				formworker: defaultformworker,
				apiworkerObj: [],
				workerdialog: false,
				initForm: {},
			};
		},
		mounted() {
			this.rpjId = this.$route.query.rpjid; //作业ID
			this.getRpj();
			this.getRpartyOptions();
			this.getDept();
			this.getInit();
		},
		methods: {
			//入场项目基本信息
			getRpj() {
				console.log(this.$route.query.rpjid);
				this.$API.rpm.rpj.read.req(this.rpjId).then((res) => {
					this.rpjform = res;
				});
			},
			//所属部门
			getDept() {
				this.$API.system.dept.list.req({page: 0}).then((res) => {
					this.deptoptions = genTree(res);
				});
			},
			//文件列表加载
			getRpjfileList(id) {
				this.$API.rpm.rpjfile.list.req({page: 0, rpj: id}).then((res) => {
					this.rpjfileList = res;
				});
			},
			//相关方
			getRpartyOptions() {
				this.$API.rpm.rparty.list.req({page: 0}).then((res) => {
					this.rpartyOptions = res;
				});
			},
			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.$API.rpm.rpj.update
						.req(this.rpjId, this.rpjform)
						.then((res) => {
							this.$message.success("基本信息更新成功！");

							return res;
						})
						.catch((err) => {
							return err;
						});
					this.getRpjfileList(this.rpjId);
					this.getmemberList(this.rpjId);
					this.getremployee();
					this.active = 1;
				} else if (this.active == 1) {
					this.active = 2;
				} else {
					this.active = 2;
				}
				// this.stepSuc.push(++this.active)
			},
			//退出界面
			submitOut() {
				this.$router.push("rpj");
			},
			//删除文件项
			del_rpjfile(row) {
				this.$API.rpm.rpjfile.delete
					.req(row.id)
					.then((res) => {
						this.$message.success("删除成功!");

						return res;
					})
					.catch((err) => {
						return err;
					});
			},
			//上传文件
			upload(row) {
				this.dialogupload = true;
				this.fileform.id = row.id;
			},

			success(res) {
				this.filelist.push(res.id);
			},

			//提交上传
			submitFile() {
				this.fileform.files = this.filelist;
				this.$API.rpm.rpjfile.update
					.req(this.fileform.id, this.fileform)
					.then((res) => {
						this.$message.success("提交成功!");
						this.dialogupload = false;

						return res;
					})
					.catch((err) => {
						return err;
					});
			},
			//调出项目人员列表
			getremployee() {
				this.$API.rpm.remployee.list.req({page: 0}).then((res) => {
					this.remployeeoptions = res;
				});
			},

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

			getmemberList(id) {
				this.$API.rpm.member.list.req({rpj: id, 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("作业人员删除成功");

						return res;
					})
					.catch((err) => {
						return err;
					});
			},
			//提交作业人员信息
			submitWorker() {
				this.formworker.rpj = this.rpjId;
				this.$refs.workerForm.validate(async (valid) => {
					this.$API.rpm.member.create.req(this.formworker).then((res) => {
						this.$message.success("创建项目人员成功");
						this.workerdialog = false;
					})
						.catch((err) => {
							return err;
						});
				});
			},

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

			//提交,创建工单
			submitTicketCreate(id){
				let ticket={};
				ticket.workflow=this.initForm.workflow;
				ticket.ticket_data={rpj:this.rpjId};
				ticket.transition=id;
				this.$API.wf.ticket.create.req(ticket).then((res) => {
					this.$message.success("提交成功");
					this.$router.push({
						name: "rpj",
						query: {},
					});
				});
			}
		},
	};
</script>
