<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="姓名" prop="username">
				<el-input v-model="queryParams.username" placeholder="请输入姓名" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="身份证号" prop="usercord">
				<el-input v-model="queryParams.usercord" placeholder="请输入身份证" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-table v-loading="loading" :data="qyBiangengList" @selection-change="handleSelectionChange">
			<el-table-column label="序号" align="center" type="index" :index="indexMethod" />
			<el-table-column label="姓名" align="center" prop="username" >
				<template slot-scope="scope">
					{{scope.row.username}}
					<img v-if="scope.row.oldshenhe != '1' && parseTime(new Date(),'{y}-{m}-{d}') > scope.row.stopTime" src="../../../assets/images/iw_mail_7.gif" style="width: 14px;" alt="" />
				</template>
			</el-table-column>
			<el-table-column label="身份证号" width="200" align="center" prop="usercord" />
			<el-table-column label="申请聘用单位" align="center" width="300" prop="newdeptname" />
			<el-table-column label="申请日期" align="center" prop="addtime" >
				<template slot-scope="scope">
					{{scope.row.zhuanchusqbtime == "" || scope.row.zhuanchusqbtime == null ? scope.row.addtime :scope.row.zhuanchusqbtime }}
				</template>
			</el-table-column>
			<el-table-column label="截止审核日期"  align="center" prop="stopTime"> 
				<!-- <template slot-scope="scope">
					{{}}
				</template> -->
			</el-table-column>
			<el-table-column label="转出单位审核" align="center" width="160" prop="oldshenhe">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.oldshenhe == '1'">审核通过</el-tag> 
					<el-popover v-else-if="scope.row.oldshenhe == '2'" placement="left"  width="200" trigger="hover" >
						<template slot="reference">
							<el-tag type="danger">不通过(原因)</el-tag>
						</template> 
						<div v-html="scope.row.oldshyj"></div>
					</el-popover>
					<el-tag v-else-if="scope.row.oldshenhe == '3'">已查看</el-tag>
					<el-tag type="warning"
						v-else-if="scope.row.oldshenhe == '4' && (scope.row.zhuanchusqbtime == '' || scope.row.zhuanchusqbtime == null)">审核通过，请上传申请表</el-tag>
					<el-tag type="warning"
						v-else-if="scope.row.oldshenhe == '4' && (scope.row.zhuanchusqbtime == '' || scope.row.zhuanchusqbtime != null)">等待提交转出申请表</el-tag>
					<el-tag v-else type="info">未查看</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="监理委员会员审核" width="130" align="center" prop="glyshenhe">
				<template slot-scope="scope"> 
					<el-popover v-if="scope.row.glyshenhe == '2'" placement="left"  width="200" trigger="hover" >
						<template slot="reference">
							<el-tag type="danger">不通过(原因)</el-tag>
						</template> 
						<div v-html="scope.row.glyshyj"></div>
					</el-popover>
					
					<el-tag v-else-if="scope.row.glyshenhe == '0'" type="warning">未审核</el-tag>
					<el-tag type="warning" v-else-if="scope.row.glyshenhe == '1' && scope.row.bgflg == '0'">审核通过,未变更</el-tag>
					<el-tag type="success" v-else-if="scope.row.glyshenhe == '1' && scope.row.bgflg == '1'">审核通过,已变更</el-tag>
					<el-tag type="danger" v-else-if="scope.row.glyshenhe == '1' && scope.row.bgflg == '2'">已撤回</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button v-if="scope.row.oldshenhe == 0 || scope.row.oldshenhe == 3" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">审 核</el-button>
					<el-button v-else-if="scope.row.oldshenhe == 4 && (scope.row.zhuanchusqbtime != null && scope.row.zhuanchusqbtime != '') " size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">上传转出申请表</el-button>
					<el-button v-else size="mini" type="text" icon="el-icon-view" @click="handleUpdate(scope.row)">查 看</el-button>
					<!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['jlry:qyBiangeng:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['jlry:qyBiangeng:remove']"
          >删除</el-button> -->
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />
		<el-dialog :visible.sync="addShow" top="2vh" width="1200px" append-to-body>
			<div style="height:80vh;overflow-y: auto;" v-if="addShow">
				<bgForm ref="bgForm" :id="bgId" @success="guanbi"></bgForm>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		searchZcqr,
		getQyBiangeng,
		delQyBiangeng,
		addQyBiangeng,
		updateQyBiangeng,
		changeStatus
	} from "@/api/xiehui/jlrybg/qyBiangeng";

	import bgForm from "../../components/jlrybg/bgForm.vue"
	export default {
		name: "QyBiangeng",
		dicts: ['jxjy_shsftg', 'jxjy_bgsfcg'],
		components: {
			bgForm
		},
		data() {
			return {
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 企业变更表格数据
				qyBiangengList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					username: null,
					usercord: null,
					olddeptid: null
				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {},
				//新增弹窗
				addShow: false,
				//变更id
				bgId: null,
			};
		},
		created() {
			this.queryParams.olddeptid = this.$store.getters.userInfo.id
			this.getList();
		},
		methods: {
			/** 查询企业变更列表 */
			getList() {
				this.loading = true;
				searchZcqr(this.queryParams).then(response => {
					this.qyBiangengList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					id: null,
					username: null,
					usercord: null,
					zhengshu: null,
					newdeptid: null,
					newdeptname: null,
					newphone: null,
					olddeptid: null,
					olddeptname: null,
					oldphone: null,
					zhuanruImg: null,
					zhuanchuImg: null,
					zhuanchusqbtime: null,
					gcszh: null,
					zjzh: null,
					jlyzh: null,
					addtime: null,
					newgt: null,
					oldgt: null,
					oldshenhe: null,
					oldshtime: null,
					oldshyj: null,
					glyshenhe: null,
					glyshtime: null,
					glyshyj: null,
					bgflg: null,
					bgtime: null,
					wgflg: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加企业变更";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.bgId = row.id
				if (row.oldshenhe == 0) {
					changeStatus({
						id: row.id,
						olddeptid: this.queryParams.olddeptid
					}).then(res => {
						this.addShow = true
						this.getList()
					})
				} else {
					this.addShow = true
				}

			},
			/** 提交按钮 */
			submitForm() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.id != null) {
							updateQyBiangeng(this.form).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							addQyBiangeng(this.form).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$modal.confirm('是否确认删除企业变更编号为"' + ids + '"的数据项？').then(function() {
					return delQyBiangeng(ids);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('jlry/qyBiangeng/export', {
					...this.queryParams
				}, `qyBiangeng_${new Date().getTime()}.xlsx`)
			},
			guanbi() {
				this.addShow = false
				this.getList()
			},
			//计算索引
			indexMethod(index) {
				return ((this.queryParams.pageNum - 1) * this.queryParams.pageSize) + (index + 1)
			},
		}
	};
</script>