<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="16" class="fl">
							<el-radio-group v-model="gyfs">
								<el-radio :label="item.bsm" :disabled="qszt!='0'" :key="item.bsm" v-for="item in $store.state.gyfsList">{{item.mc}}</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="4" class="fr" v-show="qszt=='0'">
							<span class="span" @click="addRow">新增</span>
							<span class="span" @click="changeRow">修改</span>
							<span class="span" @click="delRow">删除</span>
						</el-col>
						<el-col :span="4" class="fr" v-show="qszt!='0'">
							<span class="noEdit" @click="addRow">新增</span>
							<span class="noEdit" @click="changeRow">修改</span>
							<span class="noEdit" @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="qlrlxbsm_dictText" label="权利人类型" align="center">
			</el-table-column>
			<el-table-column prop="zjzlbsm_dictText" label="证件种类" align="center">
			</el-table-column>
			<el-table-column prop="zjh" label="证件号" align="center">
			</el-table-column>
			<el-table-column prop="dz" label="通讯地址" align="center">
			</el-table-column>
			<el-table-column prop="dh" label="联系电话" align="center">
			</el-table-column>
		</el-table>
		<el-dialog
			title="权利人信息"
			:visible.sync="dialogVisible"
			custom-class="insetDialog"
			append-to-body
			width="50%"
			center
		>
			<el-form :model="formData" class="qlrForm">
				<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">
							<el-select class="formSelect" v-model="formData.qlrlxbsm">
								<el-option
									v-for="item in $store.state.qlrlxList"
									:key="item.bsm"
									:label="item.mc"
									:value="item.bsm"
								>
								</el-option>
							</el-select>
						</td>
					</tr>
					<tr>
						<td colspan="2">证件类型<i class="requisite">*</i></td>
						<td colspan="3">
							<el-select class="formSelect" v-model="formData.zjzlbsm">
								<el-option
									v-for="item in $store.state.zjzlList"
									: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.zjh" />
						</td>
					</tr>
					<tr>
						<td colspan="2">电话<i class="requisite">*</i></td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.dh" />
						</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">
							<el-select class="formSelect" v-model="formData.gjbsm">
								<el-option
									v-for="item in $store.state.gjList"
									:key="item.bsm"
									:label="item.mc"
									:value="item.bsm"
								>
								</el-option>
							</el-select>
						</td>
						<td colspan="2">户籍所在省市</td>
						<td colspan="3">
							<el-select class="formSelect" v-model="formData.hjszssbsm">
								<el-option
									v-for="item in $store.state.ssList"
									:key="item.bsm"
									:label="item.mc"
									:value="item.bsm"
								>
								</el-option>
							</el-select>
						</td>
					</tr>
					<tr>
						<td colspan="2">性别</td>
						<td colspan="3">
							<el-select class="formSelect" v-model="formData.xbbsm">
								<el-option
									v-for="item in $store.state.xbList"
									:key="item.bsm"
									:label="item.mc"
									:value="item.bsm"
								>
								</el-option>
							</el-select>
						</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">
							<el-select class="formSelect" v-model="formData.sshy">
								<el-option
									v-for="item in $store.state.sshyList"
									:key="item.bsm"
									:label="item.mc"
									:value="item.bsm"
								>
								</el-option>
							</el-select>
						</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.fr.dlrfrmc"
							/>
						</td>
						<td colspan="2">证件类型</td>
						<td colspan="3">
							<el-select class="formSelect" v-model="formData.fr.zjzlbsm">
								<el-option
									v-for="item in $store.state.zjzlList"
									: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.fr.zjh" />
						</td>
						<td colspan="2">电话</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.fr.dh" />
						</td>
					</tr>
					<tr>
						<td colspan="10">代理人信息</td>
					</tr>
					<template v-for="(item, index) in formData.dlrList">
						<tr :key="item.index">
							<td rowspan="2" class="btnCol">
								<el-button
									type="primary"
									class="changeBtn"
									@click="handleClick(item, index, 'add')"
									>+</el-button
								>
								<el-button
									type="primary"
									class="changeBtn"
									@click="handleClick(item, index, 'minus')"
									>-</el-button
								>
							</td>
							<td>代理人姓名</td>
							<td colspan="3">
								<input type="text" class="formInput" v-model="item.dlrfrmc" />
							</td>
							<td colspan="2">证件类型</td>
							<td colspan="3">
								<el-select class="formSelect" v-model="item.zjzlbsm">
									<el-option
										v-for="item in $store.state.zjzlList"
										:key="item.bsm"
										:label="item.mc"
										:value="item.bsm"
									>
									</el-option>
								</el-select>
							</td>
						</tr>
<!--						<tr :key="item.dh">-->
						<tr :key="'dh'+index">
							<td>证件号码</td>
							<td colspan="3">
								<input type="text" class="formInput" v-model="item.zjh" />
							</td>
							<td colspan="2">电话</td>
							<td colspan="3">
								<input type="text" class="formInput" v-model="item.dh" />
							</td>
						</tr>
					</template>

					<tr>
						<td colspan="10">权利信息</td>
					</tr>
					<tr>
						<td colspan="2">共有方式</td>
						<td colspan="3">
							<el-select class="formSelect" v-model="formData.gyfsbsm">
								<el-option
									v-for="item in $store.state.gyfsList"
									:key="item.bsm"
									:label="item.mc"
									:value="item.bsm"
								>
								</el-option>
							</el-select>
						</td>
						<td colspan="2">权利比例(%)</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.qlbl" />
						</td>
					</tr>
					<tr>
						<td colspan="2">房产证号</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.fczh" />
						</td>
						<td colspan="2">土地证号</td>
						<td colspan="3">
							<input type="text" class="formInput" v-model="formData.tdzh" />
						</td>
					</tr>
					<tr>
						<td colspan="2">共有情况</td>
						<td colspan="8">
							<input type="text" class="formInput" v-model="formData.gyqk" />
						</td>
					</tr>
				</table>
			</el-form>
			<div  class="dialog-footer">
				<el-button type="primary" @click="addNewQlrInfo"
					>确 定</el-button
				>
				<el-button @click="dialogVisible = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {getDdicByMC} from "../../api/common";
	import {insertQlrDlrFr,getQlrInfoByGlbsm,updateQlrDlrFr,deleteQlrDlrFrByQlrbsm} from "../../api/qlr";

	export default {
	props: {
		qszt: {
			type: String,
			default: "0",
		},
		title: {
			type: String,
			default: "",
		},
		topHeight: {
			type: String,
			default: "15vh",
		},
		'bsm':String
	},
	data() {
		return {
			update:false,
			// bsm:'',
			gyfs: '',
			tableData: [],
			//表格选中项
			multipleSelection: [],
			dialogVisible: false,
			formData: {
				addQjDlrFrRequest:[],
				dlrList: [
					{
						dh: "",
						dlrfrmc: "",
						qlrbsm: "",
						zjh: "",
						zjzlbsm: "",
					},
				],
				fr: {
					dh: "",
					dlrfrmc: "",
					qlrbsm: "",
					zjh: "",
					zjzlbsm: "",
				},
				bz: "",
				dh: "",
				dz: "",
				dzyj: "",
				fczh: "",
				fzjg: "",
				gjbsm: "",
				glbsm: "",
				gyfsbsm: "",
				gyqk: "",
				gzdw: "",
				hjszssbsm: "",
				isdel: 0,
				qlbl: "",
				qlrlxbsm: "",
				qlrmc: "",
				sshy: "",
				sxh: 0,
				tdzh: "",
				xbbsm: "",
				yb: "",
				zjh: "",
				zjzlbsm: "",
			},
			glbsm:'',
		};
	},
	methods: {
		//新增行数据
		addRow() {
			this.update=false;
			let flag=false;
			for(let i = 0;i<this.$store.state.gyfsList.length;i++){
				let item = this.$store.state.gyfsList[i];
				if(item.mc==="单独所有" && item.bsm===this.gyfs){
					flag=true;
				}
			}
			if(flag){
				if(this.tableData.length>0){
					this.$message({
						message: "当前方式不可再新增权利人",
						type: "warning",
					});
				}else {
					this.formData.gyfsbsm=this.gyfs;
					this.dialogVisible = true;
				}
			}else {
				this.formData.gyfsbsm=this.gyfs;
				this.dialogVisible = true;
			}
		},
		//确认权利人信息按钮；可以进行新增；可以进行更新；
		addNewQlrInfo(){
			//todo 权利人页面调整
			this.formData.addQjDlrFrRequest=[];
			this.formData.glbsm=this.bsm;
			this.formData.gyfsbsm=this.gyfs;
			//将代理人，法人数据合在一起，名称为addQjDlrFrRequest；
			//法人的type字段类型为0,
			this.formData.fr.type=0;
			this.formData.addQjDlrFrRequest.push(this.formData.fr);
			for(let k=0;k<this.formData.dlrList.length;k++){
				//代理人的type字段类型为1,
				this.formData.dlrList[k].type=1;
				this.formData.addQjDlrFrRequest.push(this.formData.dlrList[k]);
			}
			this.formData.gyfsbsm=this.gyfs;
			//如果是从更新按钮点击确定的则进行更新操作，如果不是，则进行添加操作
			if(this.update){
				console.log(this.formData)
				updateQlrDlrFr(this.formData).then((res)=>{
					if(res.code===200){
						this.$message.success("修改完成！");
						this.update=false;
						this.dialogVisible = false;
					}
				})
			}else {
				insertQlrDlrFr(this.formData).then((res)=>{
					if(res.code===200){
						this.tableData.push(this.formData);
						Object.assign(this.$data, this.$options.data())
						this.dialogVisible = false;
						this.getQlrInfo();
					}
				})
			}

		},
		//修改行数据
		changeRow() {
			if (this.multipleSelection.length === 1) {
				this.dialogVisible = true;
				this.update=true;
				this.formData=this.multipleSelection[0];
				if(this.multipleSelection[0].frList.length>0){
					this.formData.fr=this.multipleSelection[0].frList[0];
				}
			} else {
				this.$message({
					message: "请选择一条信息后继续操作",
					type: "warning",
				});
			}
		},
		//删除行数据
		delRow() {
			if (this.multipleSelection.length > 0) {
				let qlrbsms=[];
				for(let i=0;i<this.multipleSelection.length;i++){
					qlrbsms.push(this.multipleSelection[i].qlrbsm)
				}
				console.log(qlrbsms)
				deleteQlrDlrFrByQlrbsm(qlrbsms).then((res)=>{
					if(res.code===200){
						this.$message.success("删除完成！")
						this.getQlrInfo();
					}
				})
			} else {
				this.$message({
					message: "请至少选择一条信息后继续操作",
					type: "warning",
				});
			}
		},
		//选中表格某一项
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},

		//供父组件调用来获取共有方式
		getQlgyfsData() {
			return this.gyfs;
		},
		//供父组件调用来获取权利人表格数据
		getQlrxxData() {
			return this.tableData;
		},
		//增删代理人
		handleClick(obj, ind, type) {
			if (type === "add") {
				this.formData.dlrList.push({
					id: Math.random(),
					dh: "",
					dlrfrmc: "",
					qlrbsm: "",
					zjh: "",
					zjzlbsm: "",
				});
			} else {
				this.formData.dlrList.forEach((item, index) => {
					if (index == ind && this.formData.dlrList.length > 1) {
						this.formData.dlrList.splice(ind, 1);
					}
				});
			}
		},
		getQlrInfo(){
			getQlrInfoByGlbsm(this.bsm).then((res)=>{
				if(res.code){
					if(res.result!=null){
						this.tableData=res.result;
						if(this.tableData.length===0){
                            this.gyfs=this.$store.state.gyfsList[0].bsm;
                        }else {
                            this.gyfs=res.result[0].gyfsbsm;
                        }
					}
				}
			})
		}
	},
	created(){},
	mounted() {
		this.getQlrInfo();
		if(this.$store.state.gyfsList.length>0){
			this.gyfs=this.$store.state.gyfsList[0].bsm;
		}

	},
};
</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;
		}
		.noEdit {
			color:#606266;
			margin-right: 10px;
			cursor: not-allowed;
		}
		.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: #E6E6E6;
	}
	.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#E6E6E6;
	}
	.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#E6E6E6;
    	border-color: #E6E6E6 !important;
	}
	.qlrTable {
		border-color: #E6E6E6 !important;
		position: relative;
		top: -1px;
		.el-input__inner {
			height: 20px;
			margin: 0;
			line-height: 20px;
			outline: none;
			border: none;
			color: #606764;
			overflow: visible;
			cursor: text;
			text-align: center;
		}
	}
}
.insetDialog{
	.qlrForm{
		height: 500px;
		overflow-y: scroll;
	}
    .zdjbxxTable {
        margin: 10px 0;
        background-color: #fff;
        font-size: 14px;
        width: 100%;
        border-bottom: 1px solid #000;

        .btnCol {
            position: relative;
            width: 60px;
            .changeBtn {
                width: 30px;
                height: 30px;
                font-size: 25px;
                padding: 0px 0px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -32px;
                margin-left: -15px;
            }
            .el-button + .el-button {
                margin-left: -15px;
                margin-top: 2px;
            }
        }
        th {
            height: 36px;
            line-height: 36px;
            font-size: 16px;
        }
        td {
            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%;
        }
	}
	.dialog-footer{
		width: 160px;
		margin: 20px auto 0;
	}
}
</style>