<template>
	<el-drawer title="查看" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')"
		:close-on-click-modal="false">
		<el-container v-loading="loading">
			<el-main>
				<el-card shadow="hover">
					<el-descriptions :column="3" title="基本信息">
						<el-descriptions-item label="入厂项目:">{{ form.name }}</el-descriptions-item>
						<el-descriptions-item label="项目类型:">{{ types_[form.type] }}</el-descriptions-item>
						<el-descriptions-item label="合同编号:">{{ form.contract_number }}</el-descriptions-item>
						<el-descriptions-item label="状态:">{{ state_[form.state] }}</el-descriptions-item>
						<el-descriptions-item label="入厂时间:">{{ form.come_time }}</el-descriptions-item>
						<el-descriptions-item label="离厂时间:">{{ form.leave_time }}</el-descriptions-item>
						<el-descriptions-item label="所属部门:">{{ form.belong_dept_name }}</el-descriptions-item>
						<el-descriptions-item label="相关方:">{{ form.rparty_name }}</el-descriptions-item>
					</el-descriptions>
					<el-button type="primary" size="small" v-if="form.state == 30 || form.state == 40"
						@click="addWorker('add')">添加成员
					</el-button>
				</el-card>
				<el-card style="margin-top:8px" shadow="hover">
					<scTable ref="fileTable" :data="rpjFileList" row-key="id" hidePagination stripe hideDo
						style="height:200px">
						<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 in scope.row.files_" :key="item.id">
									<el-link style="font-size:12px" type="primary" :href="item.path" target="_blank">
										{{ item.name }}</el-link>
								</div>
							</template>
						</el-table-column>
					</scTable>
				</el-card>
				<el-card style="margin-top:8px" shadow="hover">
					<scTable ref="table" :data="memeberList" row-key="id" height='auto' stripe hideDo hidePagination>
						<el-table-column label="#" fixed="left" type="index" width="50"></el-table-column>
						<el-table-column label="姓名" prop="remployee_.name" width="80">
							<template #default="scope">
								{{ scope.row.remployee_.name }}
							</template>
						</el-table-column>
						<el-table-column label="工作职责" prop="duty" width="100"></el-table-column>
						<el-table-column label="证书" prop="rcertificates">
							<template #default="scope">
								<span v-for="cer in scope.row.rcertificates_"
									:key="cer.id">{{ cer.name }}-{{ cer.number }}/</span>
							</template>
						</el-table-column>
						<el-table-column label="负责人" prop="is_manager" width="80">
							<template #default="scope">
								<el-space v-if="scope.row.is_manager === true">是</el-space>
								<el-space v-else>否</el-space>
							</template>
						</el-table-column>
						<el-table-column label="备注" prop="note" width="100"></el-table-column>
						<el-table-column label="操作" width="150">
							<template #default="scope">
								<el-button link type="primary" size="small" v-if="form.state !== 50 && form.state !== 60"
									@click="addWorker('edit', scope.row)" v-auth="'blt_bind.create'">编辑
								</el-button>
								<el-button link v-if="scope.row.blt_ == null && (form.state == 30 || form.state == 40)"
									type="primary" size="small" @click="bindCard(scope.row, 10)"
									v-auth="'blt_bind.create'">绑卡
								</el-button>
								<el-button link type="warning" size="small" v-if="form.state == 30 || form.state == 40"
									@click="leaveDialog(scope.row)">提前离厂
								</el-button>
							</template>
						</el-table-column>
					</scTable>
				</el-card>
				<el-card style="margin-top:8px" shadow="hover">
					<scTable ref="table" :data="logLists" row-key="id" style="height:300px" stripe hideDo hidePagination>
						<el-table-column label="#" fixed="left" type="index" width="50"></el-table-column>
						<el-table-column label="变动人" prop="remployee_">
							<template #default="scope">
								{{ scope.row.remployee_.name }}
							</template>
						</el-table-column>
						<el-table-column label="变动类型" prop="operation">
							<template #default="scope">
								<el-space v-if="scope.row.operation === 'member_leave'">提前离厂</el-space>
								<el-space v-else>新入厂</el-space>
							</template>
						</el-table-column>
						<el-table-column label="变动时间" prop="create_time"></el-table-column>
						<el-table-column label="处理人" prop="create_by_">
							<template #default="scope">
								{{ scope.row.create_by_.name }}
							</template>
						</el-table-column>
					</scTable>
				</el-card>
			</el-main>
			<ScBind v-model="showBindBlt" :bindBtl="bindBtl" :bindType="bindType" :bindName="bindName"
				:bindEmployee="bindEmployee" @success="showBindBltSuccess" @closed="showBindBltClose"></ScBind>
			<el-dialog append-to-body title="提前离厂" v-model="leaveVisible" width="30%">
				<el-form ref="dialogForm" label-width="80px">
					<el-form-item label="离厂原因">
						<el-input v-model="reason" type="text" clearable></el-input>
					</el-form-item>
				</el-form>
				<template #footer>
					<el-button @click="leaveVisible = false">取 消</el-button>
					<el-button type="primary" @click="preLeave" :loading="btnloading" :disabled="btnloading">确 定</el-button>
				</template>
			</el-dialog>
			<!-- 人员添加编辑 -->
			<el-dialog append-to-body v-model="workerVisible" :title="workDialogTitle">
				<el-form ref="workerForm" :model="formworker" label-width="120px">
					<el-row>
						<el-col :md="24" :sm="12" :xs="24">
							<el-form-item label="项目成员">
								<el-select v-if="workDialogType == 'add'" v-model="formworker.remployee"
									@change="selectWorker" filterable placeholder="选择项目成员">
									<el-option v-for="item in remployeeoptions" :key="item.id" :label="item.name"
										:value="item.id" />
								</el-select>
								<el-input v-else v-model="formworker.remployee_name" type="text" disabled
									style="width:200px"></el-input>
							</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" :disabled="workDialogType == 'edit'">
									<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 :disabled="workDialogType == 'edit'" 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-col :md="24" :sm="12" :xs="24">
							<el-form-item label="原因">
								<el-input :disabled="workDialogType == 'edit'" v-model="formworker.reason" type="text"
									clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<template #footer>
					<el-button @click="workerdialog = false">取 消</el-button>
					<el-button type="primary" @click="submitWorker" :loading="btnloading" :disabled="btnloading">确
						定</el-button>
				</template>
			</el-dialog>
		</el-container>
	</el-drawer>
</template>
<script>
import ScBind from "@/components/scBind/index.vue";
export default {
	emits: ["success", "closed"],
	props: {
		rpjId: {
			type: String,
			default: ""
		}
	},
	components: {
		ScBind
	},
	data() {
		return {
			certificatesOptions: [],
			leaveVisible: false,
			workerVisible: false,
			loading: false,
			visible: false,
			isSaveing: false,
			showBindBlt: false,
			btnloading: false,
			state_: {
				10: "创建中",
				20: "审批中",
				30: "待入厂",
				40: "进行中",
				50: "已完成",
			},
			types_: {
				10: "建筑施工",
				20: "设备设施检维修",
				30: "保安保洁服务",
				40: "其他",
			},
			formworker: {
				duty: "",
				rcertificates: [],
				rpj: "",
			},
			form: {},
			bindName: "",
			bindType: 10,
			bindBtl: null,
			bindEmployee: '',
			logLists: [],
			rpjFileList: [],
			memeberList: [],
			remployeeoptions: [],
			reason: "",
			leaveId: "",
			workDialogType: "add",
			workDialogTitle: "添加项目成员"

		};
	},
	mounted() {
		/*	this.getRpjfileList();
			this.getMemberList();*/
	},
	methods: {
		//访客绑卡
		bindCard(row, type) {
			debugger;
			if (row.remployee == null) {
				this.$message.success("请审批通过后再进行绑卡操作");
			} else {
				debugger;
				this.bindName = row.remployee_.name;
				this.bindType = type;
				this.bindEmployee = row.remployee;
				if (type === 20) {
					this.bindBtl = row.blt_.mac;
				}
				this.showBindBlt = true;
			}
		},
		showBindBltSuccess(data) {
			debugger;
			this.showBindBlt = data
			this.$refs.table.refresh();
		},
		showBindBltClose(data) {
			debugger;
			this.showBindBlt = data
		},
		//显示
		open() {
			this.visible = true;
			return this;
		},
		//表单注入数据
		setData(data) {
			this.loading = true
			this.$API.rpm.rpj.item.req(data.id).then((res) => {
				this.loading = false
				this.form = res;
				this.getRpjfileList();
				this.getMemberList();
				this.getLogs();
				this.visible = true;
			}).catch(e => { this.loading = false });
		},
		//文件列表加载
		getRpjfileList() {
			this.$API.rpm.rpjfile.list.req({ page: 0, rpj: this.form.id }).then((res) => {
				this.rpjFileList = res;
			});
		},
		//作业成员列表
		getMemberList() {
			this.$API.rpm.member.list.req({ rpj: this.form.id, page: 0 }).then((res) => {
				this.memeberList = res;
				// console.log(res);
			});
		},
		//成员变动操作日志
		getLogs() {
			this.$API.rpm.rpj.logs.req({ rpj: this.form.id, page: 0 }).then((res) => {
				debugger;
				this.logLists = res;
			});
		},
		//调出项目成员列表
		getremployee() {
			this.$API.rpm.remployee.list.req({ page: 0, rparty: this.form.rparty }).then((res) => {
				this.remployeeoptions = res;
			});
		},
		//选择成员后，调出该成员的所有证书
		selectWorker() {
			this.$API.rpm.rcertificate.list
				.req({ remployee: this.formworker.remployee, page: 0 })
				.then((res) => {
					this.certificatesOptions = res;
				});
		},
		addWorker(type, row) {
			let that = this;
			that.workDialogType = type;
			if (type == 'add') {
				that.workDialogTitle = "添加项目成员";
				that.getremployee();
			} else {
				that.workDialogTitle = "项目成员编辑";
				that.formworker = row;
				that.formworker.remployee_name = row.remployee_.name;
				debugger;
				console.log(that.formworker)
				that.selectWorker();
			}
			that.workerVisible = true;
		},
		//提交作业成员信息
		submitWorker() {
			let that = this;
			that.btnloading = true;
			that.formworker.rpj = that.form.id;
			if (that.workDialogType == "add") {
				that.$refs.workerForm.validate(async (valid) => {
					that.$API.rpm.member.create
						.req(that.formworker)
						.then((res) => {
							that.$message.success("项目成员添加成功");
							that.workerVisible = false;
							that.btnloading = false;
							that.getMemberList();
						})
						.catch((err) => {
							this.btnloading = false;
							return err;
						});
				});
			} else {
				let formworker = {};
				formworker.is_manager = that.formworker.is_manager;
				formworker.rcertificates = that.formworker.rcertificates;
				that.$API.rpm.member.update
					.req(that.formworker.id, formworker)
					.then((res) => {
						that.$message.success("项目成员证书添加成功");
						that.workerVisible = false;
						that.btnloading = false;
						that.getMemberList();
					})
					.catch((err) => {
						that.btnloading = false;
						return err;
					});
			}

		},
		leaveDialog(row) {
			// debugger;
			this.leaveVisible = true;
			this.leaveId = row.id;
			console.log(this.leaveId)
		},
		preLeave() {
			// debugger;
			this.btnloading = true;
			if (this.reason != '') {
				this.$API.rpm.member.leave.req(this.leaveId, { reason: this.reason }).then(res => {
					this.leaveVisible = false;
					this.btnloading = false;
					this.getMemberList();
					this.getLogs();
				}).catch(e => {
					this.btnloading = false;
				})
			} else {
				this.btnloading = false;
				this.$message.error("请填写离厂原因");
			}

		},
	},
};
</script>

<style scoped>
.el-transfer {
	--el-transfer-panel-width: 345px !important;
}
</style>
