<template>
	<div class="temp">
		<table class="tempTable" cellspacing="0" cellpadding="0" border="1">
			<tr>
				<td colspan="2" width="50px">权利</td>
				<td colspan="2">共有方式</td>
				<td colspan="8">
					<el-row>
						<el-col :span="12" class="fl">
							<el-radio v-model="gyfs" label="1">单独所有</el-radio>
							<el-radio v-model="gyfs" label="2">共同所有</el-radio>
							<el-radio v-model="gyfs" label="3">按份共有</el-radio>
							<el-radio v-model="gyfs" label="4">其他共有</el-radio>
						</el-col>
						<el-col :span="4" class="fr">
							<span class="span" @click="addRow">新增</span>
							<span class="span" @click="changeRow">修改</span>
							<span class="span" @click="delRow">删除</span>
						</el-col>
					</el-row>
				</td>
			</tr>
		</table>

		<el-table
			class="qlrTable"
			:data="tableData"
			style="width: 100%"
			@selection-change="handleSelectionChange"
			border
		>
			<el-table-column type="selection" width="40" align="center">
			</el-table-column>
			<el-table-column prop="qlrmc" label="权利人名称" align="center">
			</el-table-column>
			<el-table-column prop="qlrlx" label="权利人类型" align="center">
			</el-table-column>
			<el-table-column prop="zjzl" label="证件种类" align="center">
			</el-table-column>
			<el-table-column prop="zjh" label="证件号" align="center">
			</el-table-column>
			<el-table-column prop="txdz" label="通讯地址" align="center">
			</el-table-column>
			<el-table-column prop="lxdh" label="联系电话" align="center">
			</el-table-column>
		</el-table>
		<el-dialog
			title="权利人信息"
			:visible.sync="dialogVisible"
			width="50%"
			center
		>
			<el-form :model="formData">
				<table class="zdjbxxTable" cellspacing="0" cellpadding="0" border="1">
					<tr>
						<td colspan="2">权利人名称<i class="requisite">*</i></td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.qlrmc" />
						</td>
						<td colspan="2">权利人类型<i class="requisite">*</i></td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.qlrlx" />
						</td>
					</tr>
					<tr>
						<td colspan="2">证件类型<i class="requisite">*</i></td>
						<td colspan="3">
							<el-select class="formSelect" v-model="formData.qlrzjlx">
								<el-option
									v-for="item in qllxList"
									:key="item.bsm"
									:label="item.mc"
									:value="item.bsm"
								>
								</el-option>
							</el-select>
						</td>
						<td colspan="2">证件号<i class="requisite">*</i></td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.qlrzjh" />
						</td>
					</tr>
					<tr>
						<td colspan="2">电话<i class="requisite">*</i></td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.qlrdh" />
						</td>
						<td colspan="2">地址<i class="requisite">*</i></td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.dz" />
						</td>
					</tr>
					<tr>
						<td colspan="2">国家</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.gj" />
						</td>
						<td colspan="2">户籍所在省市</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.hjszss" />
						</td>
					</tr>
					<tr>
						<td colspan="2">性别</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.xb" />
						</td>
						<td colspan="2">邮编</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.yb" />
						</td>
					</tr>
					<tr>
						<td colspan="2">所属行业</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.sshy" />
						</td>
						<td colspan="2">电子邮件</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.dzyj" />
						</td>
					</tr>
					<tr>
						<td colspan="10">法人信息</td>
					</tr>
					<tr>
						<td colspan="2">法定代表人或负责人姓名</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.frxm" />
						</td>
						<td colspan="2">证件类型</td>
						<td colspan="3">
							<el-select class="formSelect" v-model="formData.frzjlx">
								<el-option
									v-for="item in qllxList"
									:key="item.bsm"
									:label="item.mc"
									:value="item.bsm"
								>
								</el-option>
							</el-select>
						</td>
					</tr>
					<tr>
						<td colspan="2">证件号码</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.xzq" />
						</td>
						<td colspan="2">电话</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.dzyj" />
						</td>
					</tr>
					<tr>
						<td colspan="10">代理人信息</td>
					</tr>
					<tr>
						<td colspan="2">代理人姓名</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.xzq" />
						</td>
						<td colspan="2">证件类型</td>
						<td colspan="3">
							<el-select class="formSelect" v-model="formData.dlrzjlx">
								<el-option
									v-for="item in qllxList"
									:key="item.bsm"
									:label="item.mc"
									:value="item.bsm"
								>
								</el-option>
							</el-select>
						</td>
					</tr>
					<tr>
						<td colspan="2">证件号码</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.xzq" />
						</td>
						<td colspan="2">电话</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.dzyj" />
						</td>
					</tr>
					<tr>
						<td colspan="10">权利信息</td>
					</tr>
					<tr>
						<td colspan="2">共有方式</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.xzq" />
						</td>
						<td colspan="2">权利比例(%)</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.dzyj" />
						</td>
					</tr>
					<tr>
						<td colspan="2">房产证号</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.xzq" />
						</td>
						<td colspan="2">土地证号</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.dzyj" />
						</td>
					</tr>
					<tr>
						<td colspan="2">共有情况</td>
						<td colspan="8">
							<input type="text" class="formInput" v-model="formData.xzq" />
						</td>
					</tr>
				</table>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisible = false"
					>确 定</el-button
				>
				<el-button @click="dialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		widtd: {
			type: String,
			default: "70%",
		},
		title: {
			type: String,
			default: "",
		},
		topHeight: {
			type: String,
			default: "15vh",
		},
	},
	data() {
		return {
			gyfs: "1",
			tableData: [],
			//表格选中项
			multipleSelection: {},
			dialogVisible: false,
			formData: {
				xzq: "",
				djq: "",
				djzq: "",
				qllx: "",
				zdtzm: "",
				qlsdfs: "",
				zddm: "",
				djh: "",
				bdcdyh: "",
				zl: "",
				tdqslyzmcl: "",
				gmjjhyfl: "",
				jg: "",
				blc: "",
				tfh: "",
				rjl: "",
				rjsm: "",
				jzmd: "",
				jzmdsm: "",
				jzxg: "",
				jzxgsm: "",
				bz: "",
				dz: "",
				nz: "",
				xz: "",
				pzmj: "",
				zdmj: "",
				jzzdmj: "",
				jzmj: "",
				gyqlrqk: "",
				sm: "",
			},
			qllxList:[],
		};
	},
	methods: {
		//新增行数据
		addRow() {
			if (this.gyfs == "1") {
				this.$message({
					message: "当前共有方式不可新增权利人",
					type: "warning",
				});
			} else {
				this.dialogVisible = true;
			}
		},
		//修改行数据
		changeRow() {
			if (this.multipleSelection.length == 1) {
				this.dialogVisible = true;
			} else {
				this.$message({
					message: "请选择一条信息后继续操作",
					type: "warning",
				});
			}
		},
		//删除行数据
		delRow() {
			if (this.multipleSelection.length > 0) {
				for (var i = 0; i < this.multipleSelection.length; i++) {
					this.deleteArrOption(this.tableData, this.multipleSelection[i].id);
				}
				//调用删除接口  TO DO
			} else {
				this.$message({
					message: "请至少选择一条信息后继续操作",
					type: "warning",
				});
			}
		},
		//选中表格某一项
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},

		//根据id删除多重数组中的某一项
		deleteArrOption(arr, id) {
			for (var i = arr.length; i > 0; i--) {
				if (arr[i - 1].id == id) {
					arr.splice(i - 1, 1);
				}
			}
		},

		//供父组件调用来获取共有方式
		getQlgyfsData() {
			return this.gyfs;
		},
		//供父组件调用来获取权利人表格数据
		getQlrxxData() {
			return this.tableData;
		},
	},
};
</script>
<style lang="less">
.temp {
	width: 100%;
	table {
		border-bottom: 0;
		background-color: #fff;
		font-size: 14px;
		width: 100%;
		.span {
			color: #409eff;
			margin-right: 10px;
			cursor: pointer;
		}
		.el-radio {
			margin-right: 20px !important;
		}
		td {
			text-align: center;
			padding: 10px 0;
		}
	}
	.el-table th {
		background-color: #fff !important;
	}
	el-table td,
	.el-table th.is-leaf,
	.el-table--border,
	.el-table--group {
		border-color: black;
	}
	.el-table--border::after,
	.el-table--group::after,
	.el-table::before {
		background-color: black;
	}
	.el-table--border td,
	.el-table--border th,
	.el-table__body-wrapper
		.el-table--border.is-scrolling-left
		~ .el-table__fixed {
		border-right: 1px solid #000;
	}
	.el-table td,
	.el-table th {
		padding: 6px 0;
		color: #333 !important;
		font-weight: normal;
	}
	.el-table td,
	.el-table th.is-leaf {
		border-bottom: 1px solid #000;
	}
	.qlrTable {
		.el-input__inner {
			height: 20px;
			margin: 0;
			line-height: 20px;
			outline: none;
			border: none;
			color: #606764;
			overflow: visible;
			cursor: text;
			text-align: center;
		}
	}
	.zdjbxxTable {
		margin: 10px 0;
		background-color: #fff;
		font-size: 14px;
		width: 100%;
		border-bottom: 1px solid #000;
		th {
			height: 36px;
			line-height: 36px;
			font-size: 16px;
		}
		td {
			width: 60px;
			text-align: center;
			height: 36px;
			padding: 0;
		}
		/deep/.el-input__inner {
			margin: 0;
			height: 36px;
			outline: none;
			border: none;
			color: #606764;
			overflow: visible;
			text-align: center;
			cursor: text;
		}
		.percent78 {
			width: 78%;
			float: left;
		}
		.percent68 {
			width: 68% !important;
			float: left;
			position: relative;
			top: 7px;
		}
		.percent30 {
			width: 30% !important;
			float: left;
		}
		.createBtn {
			position: absolute;
			width: 50px;
			padding: 6px 4px;
			right: 4px;
			top: 4px;
		}
		.el-input__icon {
			line-height: 37px;
		}
		.el-select {
			width: 100%;
		}
	}
}
</style>