<template>
	<div class="main">
		<div class="formMenu">
			<Qlr ref="qlrxxModule" :bsm="$store.state.zdbsm"></Qlr>
			<!-- <el-button
                    type="primary"
                    class="changeBtn"
                    @click="getQlrxxData"
                    >获取权利人信息数据</el-button
                >
                <el-button
                    type="primary"
                    class="changeBtn"
                    @click="getQlxzData"
                    >获取权利性质组件数据</el-button
                > -->
			<table class="zdjbxxTable" cellspacing="0" cellpadding="0" border="1">
				<tr>
					<th colspan="12">宗地基本信息</th>
				</tr>
				<tr>
					<td colspan="2">行政区</td>
					<td colspan="2">
						<el-select
							class="formSelect"
							v-model="formData.xzqbsm"
							@change="changeXzq(formData.xzqbsm)"
						>
							<el-option
								v-for="item in $store.state.xzqList"
								:key="item.bsm"
								:label="item.mc"
								:value="item.bsm"
							>
							</el-option>
						</el-select>
					</td>
					<td colspan="2">地籍区</td>
					<td colspan="2">
						<el-select
							class="formSelect"
							v-model="formData.djqbsm"
							@change="changeDjq(formData.djqbsm)"
						>
							<el-option
								v-for="item in $store.state.djqList"
								:key="item.bsm"
								:label="item.mc"
								:value="item.bsm"
							>
							</el-option>
						</el-select>
					</td>
					<td colspan="2">地籍子区</td>
					<td colspan="2">
						<el-select class="formSelect" v-model="formData.djzqbsm">
							<el-option
								v-for="item in $store.state.djzqList"
								:key="item.bsm"
								:label="item.mc"
								:value="item.bsm"
							>
							</el-option>
						</el-select>
					</td>
				</tr>
				<tr>
					<td colspan="2">权利类型</td>
					<td colspan="4">
						<el-select class="formSelect" v-model="formData.qllxbsm">
							<el-option
								v-for="item in $store.state.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="4">
						<el-select class="formSelect" v-model="formData.zdtzmbsm">
							<el-option
								v-for="item in $store.state.zdtzmList"
								:key="item.bsm"
								:label="item.mc"
								:value="item.bsm"
							>
							</el-option>
						</el-select>
					</td>
				</tr>
				<tr>
					<td colspan="2">权利设定方式</td>
					<td colspan="4">
						<el-select class="formSelect" v-model="formData.qlsdfs">
							<el-option
								v-for="item in $store.state.qlsdfsList"
								:key="item.bsm"
								:label="item.mc"
								:value="item.bsm"
							>
							</el-option>
						</el-select>
					</td>
					<td colspan="2">宗地代码<i class="requisite">*</i></td>
					<td colspan="4" class="psr">
						<input
							type="text" placeholder="请输入"
							class="formInput percent78"
							v-model="formData.zddm"
						/>
						<el-button type="primary" class="createBtn" @click="generatorCode"
							>生成
						</el-button>
					</td>
				</tr>
				<tr>
					<td colspan="2">地籍号</td>
					<td colspan="4">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.djh" />
					</td>

					<td colspan="2">不动产单元号<i class="requisite">*</i></td>
					<td colspan="4" class="psr">
						<input
							type="text"
							class="formInput percent78"
							v-model="formData.dyhbsm"
						/>
						<el-button type="primary" class="createBtn">生成</el-button>
					</td>
				</tr>
				<tr>
					<td colspan="2">坐落<i class="requisite">*</i></td>
					<td colspan="4">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.zl" />
					</td>
					<td colspan="2">项目名称</td>
					<td colspan="4" class="psr">
						<input
							type="text" placeholder="请输入"
							class="formInput "
							v-model="formData.xmmc"
						/>
					</td>
				</tr>
				<tr>
					<td colspan="2">国民经济行业分类</td>
					<td colspan="4">
						<el-select class="formSelect" v-model="formData.gmjjhyflbsm">
							<el-option
								v-for="item in $store.state.gmjjhyflbsmList"
								:key="item.bsm"
								:label="item.mc"
								:value="item.bsm"
							>
							</el-option>
						</el-select>
					</td>
					<td colspan="2">价格(元)</td>
					<td colspan="4" class="psr">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.jg" />
					</td>
				</tr>
				<tr>
					<td colspan="2" rowspan="2">所在图幅号</td>
					<td colspan="2">比例尺</td>
					<td colspan="8" class="psr">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.blc" />
					</td>
				</tr>
				<tr>
					<td colspan="2">图幅号</td>
					<td colspan="8" class="psr">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.tfh" />
					</td>
				</tr>
				<tr>
					<td colspan="2">容积率</td>
					<td colspan="2">
						<el-select class="formSelect" v-model="formData.jyrjl">
							<el-option
								v-for="item in compareList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</td>
					<td colspan="2">
						<input
							type="text" placeholder="请输入"
							v-model="rjl"
							v-show="isInterval(formData.jyrjl)"
							class="formInput percent47"
						/>
						<span class="percent4" v-show="isInterval(formData.jyrjl)">-</span>
						<input
							type="text" placeholder="请输入"
							v-model="formData.rjl"
							:class="isInterval(formData.jyrjl) ? 'formInput percent47' : 'formInput'"
						/>
					</td>
					<td colspan="2">容积说明</td>
					<td colspan="4" class="psr">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.rjsm" />
					</td>
				</tr>
				<tr>
					<td colspan="2">建筑密度</td>
					<td colspan="2">
						<el-select class="formSelect" v-model="formData.jyjzmd">
							<el-option
								v-for="item in compareList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</td>
					<td colspan="2">
						<input
							type="text" placeholder="请输入"
							v-model="jzmd"
							v-show="isInterval(formData.jyjzmd)"
							class="formInput percent47"
						/>
						<span class="percent4" v-show="isInterval(formData.jyjzmd)">-</span>
						<input
							type="text" placeholder="请输入"
							v-model="formData.jzmd"
							:class="isInterval(formData.jyjzmd) ? 'formInput percent47' : 'formInput'"
						/>
					</td>
					<td colspan="2">建筑密度说明</td>
					<td colspan="4" class="psr">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.jzmdsm" />
					</td>
				</tr>
				<tr>
					<td colspan="2">建筑限高</td>
					<td colspan="2">
						<el-select class="formSelect" v-model="formData.jyjzxg">
							<el-option
								v-for="item in compareList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</td>
					<td colspan="2">
						<input
							type="text" placeholder="请输入"
							v-model="jzxg"
							v-show="isInterval(formData.jyjzxg)"
							class="formInput percent47"
						/>
						<span class="percent4" v-show="isInterval(formData.jyjzxg)">-</span>
						<input
							type="text" placeholder="请输入"
							v-model="formData.jzxg"
							:class="isInterval(formData.jyjzxg) ? 'formInput percent47' : 'formInput'"
						/>
					</td>
					<td colspan="2">建筑限高说明</td>
					<td colspan="4" class="psr">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.jzxgsm" />
					</td>
				</tr>
				<tr>
					<td colspan="2" rowspan="4">宗地四至</td>
					<td colspan="2">北至<i class="requisite">*</i></td>
					<td colspan="8" class="psr">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.zdszb" />
					</td>
				</tr>
				<tr>
					<td colspan="2">东至<i class="requisite">*</i></td>
					<td colspan="8" class="psr">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.zdszd" />
					</td>
				</tr>
				<tr>
					<td colspan="2">南至<i class="requisite">*</i></td>
					<td colspan="8" class="psr">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.zdszn" />
					</td>
				</tr>
				<tr>
					<td colspan="2">西至<i class="requisite">*</i></td>
					<td colspan="8" class="psr">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.zdszx" />
					</td>
				</tr>
				<tr>
					<td colspan="12">
						<Qlxz ref="qlxzModule"></Qlxz>
					</td>
				</tr>
				<tr>
					<td colspan="2" rowspan="2">批准面积(㎡)</td>
					<td colspan="2" rowspan="2">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.pzmj" />
					</td>
					<td colspan="2" rowspan="2">宗地面积(㎡)</td>
					<td colspan="2" rowspan="2">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.zdmj" />
					</td>
					<td colspan="2">建筑占地总面积</td>
					<td colspan="2">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.jzzdzmj" />
					</td>
				</tr>
				<tr>
					<td colspan="2">建筑面积(㎡)</td>
					<td colspan="2">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.jzzmj" />
					</td>
				</tr>
				<tr>
					<td colspan="2">共有/共用权利人情况</td>
					<td colspan="10">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.gygyqlrqk" />
					</td>
				</tr>
				<tr>
					<td colspan="2" rowspan="2">说明</td>
					<td colspan="10" rowspan="2">
						<input type="text" placeholder="请输入" class="formInput" v-model="formData.sm" />
					</td>
				</tr>
			</table>

			<div style="min-height: 40px;text-align: center;margin-top: 10px">
				<el-button type="success" @click="updateZDxx">保存</el-button>
				<el-button type="primary" @click="submitZDxx">提交</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import Qlr from "../../../components/formMenu/qlr";
import Qlxz from "../../../components/formMenu/qlxz";
import {submit} from "../../../api/common"
import {
	getAllList,
	getDdicByMC,
	getListByXzqbsm,
	getListByPbsm,
} from "../../../api/common";
import {
	getBdcdyh,
	getQjZdjbxxDetailById,
	updateQjZdjbxx,
} from "../../../api/zd";

export default {
	name: "",
	components: {
		Qlr,
		Qlxz,
	},
	props: {},
	data() {
		return {
			rjl:'',
			jzmd:'',
			jzxg:'',
			compareList: [
				{ label: "<", value: "<" },
				{ label: ">", value: ">" },
				{ label: "=", value: "=" },
				{ label: "<=", value: "<=" },
				{ label: ">=", value: ">=" },
				{ label: "-", value: "-" },
			],
			formData: {},
		};
	},
	created() {
		this.getZdjbxxData();
	},
	mounted() {},
	methods: {
		//根据zdbsm查询基本信息
		getZdjbxxData() {
			getQjZdjbxxDetailById(this.$store.state.zdbsm)
				.then((res) => {
					if (res.result) {
						this.formData = res.result;
						console.log(res.result,'res.result');
						this.getXzqData(res.result.xzqbsm,res.result.djqbsm);
						//判断容密高是否为区间值，如果是区间值，则将校验值置为'-'并给rjl，jzmd，jzxg赋值
						this.rjl = this.isInterval(this.formData.jyrjl) ? this.formData.jyrjl : '';
						this.formData.jyrjl = this.isInterval(this.formData.jyrjl) ? '-' : this.formData.jyrjl;
						this.jzmd = this.isInterval(this.formData.jyjzmd) ? this.formData.jyjzmd : '';
						this.formData.jyjzmd = this.isInterval(this.formData.jyjzmd) ? '-' : this.formData.jyjzmd;
						this.jzxg = this.isInterval(this.formData.jyjzxg) ?  this.formData.jyjzxg : '';
						this.formData.jyjzxg = this.isInterval(this.formData.jyjzxg) ? '-' : this.formData.jyjzxg;
						if(res.result.list.length>0){
							if(res.result.list[0].list.length<1){
								res.result.list[0].list.push({
									"pzdjbsm": "",
									"pzdjmc": "",
									"pzytdm": "",
									"pzytmc": "",
									"pzytmj": 0,
									"qlxzbsm": "",
									"sjdjbsm": "",
									"sjdjmc": "",
									"sjytdm": "",
									"sjytmc": "",
									"sjytmj": 0,
									"syqx": "",
									"tdsyjssj": "",
									"tdsyqssj": "",
									"tdzh": ""
								})
							}
							//权利性质数据传给子组件
							this.$refs.qlxzModule.countList = res.result.list
						}
					}
				})
				.catch((error) => {});
		},
		//生成宗地代码
		generatorCode() {
			//前6位是xzqbsm，接着3位djqbsm，3位djzqbsm，最后2位是syqlxbsm  860101555888GB
			getBdcdyh("860101555888GB", "zd")
				.then((res) => {
					console.log(res);
					this.formData.zddm = res.result.substring(0, 19);
					this.formData.dyhbsm = res.result;
				})
				.catch((error) => {});
		},
		//修改宗地基本信息
		updateZDxx() {
			//获取权利性质数据
			this.formData.list = this.$refs.qlxzModule.getQlxzDataList();
			//判断容密高是否为区间值，如果是区间值，则将输入框的值赋予
			this.formData.jyrjl = this.isInterval(this.formData.jyrjl) ? this.rjl : this.formData.jyrjl;
			this.formData.jyjzmd = this.isInterval(this.formData.jyjzmd) ? this.jzmd : this.formData.jyjzmd;
			this.formData.jyjzxg = this.isInterval(this.formData.jyjzxg) ? this.jzxg : this.formData.jyjzxg;
			updateQjZdjbxx(this.formData)
				.then((res) => {
					if (res.code == 200) {
						console.log(res);
						this.$message({
							message: '保存成功',
							type: "success",
						});
						// 保存成功再次查询
						this.getZdjbxxData();
					} else {
						this.$message({
							message: res.message,
							type: "warning",
						});
					}
				})
				.catch((error) => {});
		},
		//提交宗地基本信息
		submitZDxx(){
			let data={
				glbsm:this.$store.state.zdbsm,
				status:1,
				type:"zd"
			}
			submit(data).then((res)=>{
				if(res.code===200){
					this.$message.success("提交完成！")
				}
			})
		},
		getQlrxxData() {
			console.log(this.$refs.qlrxxModule.getQlgyfsData()); //权利共有方式数据
			console.log(this.$refs.qlrxxModule.getQlrxxData()); //权利人表格数据
		},
		getQlxzData() {
			console.log(this.$refs.qlxzModule.getQlxzDataList()); //权利性质数据
		},
		//行政区划选择
		changeXzq(id) {
			getListByXzqbsm(id)
				.then((res) => {
					this.formData.djqbsm = "";
					this.formData.djzqbsm = "";
					this.djqList = res.result;
					this.$store.state.djqList = res.result;
				})
				.catch((error) => {});
		},
		changeDjq(item) {
			getListByPbsm(item)
				.then((res) => {
					this.formData.djzqbsm = "";
					this.djzqList = res.result;
					this.$store.state.djzqList = res.result;
				})
				.catch((error) => {});
		},
		//判断容密高是否为区间
		isInterval(val){
			if(val == '>' || val == '<' || val == '=' || val == '>=' || val == '<='|| val == null){
				return false
			}else{
				return true;
			}
		},
		//根据宗地信息的行政区代码查询行政区地籍区地籍子区的字典数据
		getXzqData(xzqdm,djqdm){
			getAllList()
				.then((res) => {
					this.$store.state.xzqList = res.result;
				})
				.catch((error) => {});
			getListByXzqbsm(xzqdm)
				.then((res) => {
					this.$store.state.djqList = res.result;
				})
				.catch((error) => {});
			getListByPbsm(djqdm)
				.then((res) => {
					this.$store.state.djzqList = res.result;
				})
				.catch((error) => {});
		}
	},
	computed: {
		zl() {
			return this.formData.zl;
		},
		mj() {
			return this.formData.zdmj;
		},
		zddm() {
			return this.formData.zddm;
		},
		zdbsm() {
			return this.$store.state.zdbsm;
		},
	},
	watch: {
		zl: function(val) {
			this.$store.state.zdzl = val;
		},
		mj: function(val) {
			this.$store.state.zdmj = val;
		},
		zddm: function(val) {
			this.$store.state.zddm = val;
		},
		zdbsm:function (val) {
			this.getZdjbxxData()
		}
	},
};
</script>
<style lang="less" scoped>
.main {
	box-sizing: border-box;
	padding: 18px;
	height: auto;
	.formMenu {
		width: 100%;
		margin: 0 auto;
	}
	.zdjbxxTable {
		margin: 10px 0;
		background-color: #fff;
		font-size: 14px;
		width: 100%;
		th {
			height: 36px;
			line-height: 36px;
			font-size: 16px;
		}
		td {
			width: 60px;
			text-align: center;
			height: 36px;
		}
		/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;
		}
		.percent47 {
			width: 45% !important;
			float: left;
		}
		.percent4 {
			height: 20px;
			line-height: 20px;
			width: 4% !important;
			float: left;
		}
		.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>