<template>
	<div class="main">
		<div class="formMenu">
			<Qlr ref="qlrxxModule" :bsm="$store.state.zdbsm"  :qszt="formData.qszt"></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-form :rules="rules" ref="ruleForm" :inline="true" >
							<el-form-item >
								<el-select
										:disabled="formData.qszt!='0'"
										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>
							</el-form-item>
						</el-form>
					</td>
					<td colspan="2">地籍区</td>
					<td colspan="2">
						<el-select
							class="formSelect"
							:disabled="formData.qszt!='0'"
							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" :disabled="formData.qszt!='0'" 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" :disabled="formData.qszt!='0'" 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" :disabled="formData.qszt!='0'" 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" :disabled="formData.qszt!='0'" 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 :disabled="formData.qszt!='0'"
							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" :disabled="formData.qszt!='0'" placeholder="请输入" class="formInput" v-model="formData.djh" />
					</td>

					<td colspan="2">不动产单元号<i class="requisite">*</i></td>
					<td colspan="4" class="psr">
						<input
							type="text" :disabled="formData.qszt!='0'"
							class="formInput percent78"
							v-model="formData.bdcdyh"
						/>
						<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" :disabled="formData.qszt!='0'" placeholder="请输入" class="formInput" v-model="formData.zl" />
					</td>
					<td colspan="2">项目名称</td>
					<td colspan="4" class="psr">
						<input :disabled="formData.qszt!='0'"
							type="text" placeholder="请输入"
							class="formInput "
							v-model="formData.xmmc"
						/>
					</td>
				</tr>
				<tr>
					<td colspan="2">国民经济行业分类</td>
					<td colspan="4">
						<el-select class="formSelect" :disabled="formData.qszt!='0'" 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" :disabled="formData.qszt!='0'" 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" :disabled="formData.qszt!='0'" placeholder="请输入" class="formInput" v-model="formData.blc" />
					</td>
				</tr>
				<tr>
					<td colspan="2">图幅号</td>
					<td colspan="8" class="psr">
						<input type="text" :disabled="formData.qszt!='0'" placeholder="请输入" class="formInput" v-model="formData.tfh" />
					</td>
				</tr>
				<tr>
					<td colspan="2">容积率</td>
					<td colspan="2">
						<el-select class="formSelect" :disabled="formData.qszt!='0'" 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="请输入" :disabled="formData.qszt!='0'"
							v-model="rjl"
							v-show="isInterval(formData.jyrjl)"
							class="formInput percent47"
						/>
						<span class="percent4" v-show="isInterval(formData.jyrjl)">-</span>
						<input
							type="text" placeholder="请输入" :disabled="formData.qszt!='0'"
							v-model="formData.rjl"
							:class="isInterval(formData.jyrjl) ? 'formInput percent47' : 'formInput'"
						/>
					</td>
					<td colspan="2">容积说明</td>
					<td colspan="4" class="psr">
						<input type="text" :disabled="formData.qszt!='0'" placeholder="请输入" class="formInput" v-model="formData.rjsm" />
					</td>
				</tr>
				<tr>
					<td colspan="2">建筑密度</td>
					<td colspan="2">
						<el-select class="formSelect" :disabled="formData.qszt!='0'" 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" :disabled="formData.qszt!='0'"
							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" :disabled="formData.qszt!='0'"
							:class="isInterval(formData.jyjzmd) ? 'formInput percent47' : 'formInput'"
						/>
					</td>
					<td colspan="2">建筑密度说明</td>
					<td colspan="4" class="psr">
						<input type="text" :disabled="formData.qszt!='0'" placeholder="请输入" class="formInput" v-model="formData.jzmdsm" />
					</td>
				</tr>
				<tr>
					<td colspan="2">建筑限高</td>
					<td colspan="2">
						<el-select class="formSelect" :disabled="formData.qszt!='0'" 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="请输入" :disabled="formData.qszt!='0'"
							v-model="jzxg"
							v-show="isInterval(formData.jyjzxg)"
							class="formInput percent47"
						/>
						<span class="percent4" v-show="isInterval(formData.jyjzxg)">-</span>
						<input
							type="text" placeholder="请输入" :disabled="formData.qszt!='0'"
							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="请输入" :disabled="formData.qszt!='0'" 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="请输入" :disabled="formData.qszt!='0'" 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="请输入" :disabled="formData.qszt!='0'" 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="请输入" :disabled="formData.qszt!='0'" 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="请输入" :disabled="formData.qszt!='0'" class="formInput" v-model="formData.zdszx" />
					</td>
				</tr>
				<tr>
					<td colspan="12">
						<Qlxz ref="qlxzModule" :formData="formData"></Qlxz>
					</td>
				</tr>
				<tr>
					<td colspan="2" rowspan="2">批准面积(㎡)</td>
					<td colspan="2" rowspan="2">
						<input type="text" placeholder="请输入" :disabled="formData.qszt!='0'" class="formInput" v-model="formData.pzmj" />
					</td>
					<td colspan="2" rowspan="2">宗地面积(㎡)</td>
					<td colspan="2" rowspan="2">
						<input type="text" placeholder="请输入" :disabled="formData.qszt!='0'" class="formInput" v-model="formData.zdmj" />
					</td>
					<td colspan="2">建筑占地总面积</td>
					<td colspan="2">
						<input type="text" placeholder="请输入" :disabled="formData.qszt!='0'" class="formInput" v-model="formData.jzzdzmj" />
					</td>
				</tr>
				<tr>
					<td colspan="2">建筑面积(㎡)</td>
					<td colspan="2">
						<input type="text" placeholder="请输入" :disabled="formData.qszt!='0'" class="formInput" v-model="formData.jzzmj" />
					</td>
				</tr>
				<tr>
					<td colspan="2">共有/共用权利人情况</td>
					<td colspan="10">
						<input type="text" placeholder="请输入" :disabled="formData.qszt!='0'" class="formInput" v-model="formData.gygyqlrqk" />
					</td>
				</tr>
				<tr>
					<td colspan="2" rowspan="2">说明</td>
					<td colspan="10" rowspan="2">
						<input type="text" placeholder="请输入" :disabled="formData.qszt!='0'" 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 {
            rules: {
                hdmc: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                xzq: [
                    { required: true, message: '请选择活行政区', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            },
			rjl:'',
			jzmd:'',
			jzxg:'',
			compareList: [
				{ label: "<", value: "<" },
				{ label: ">", value: ">" },
				{ label: "=", value: "=" },
				{ label: "<=", value: "<=" },
				{ label: ">=", value: ">=" },
				{ label: "-", value: "-" },
			],
			formData: {},
		};
	},
	created() {			 
		
	},
	mounted() {
		this.getZdjbxxData(this.$store.state.zdbsm);
	},
	methods: {
		//根据zdbsm查询基本信息
		getZdjbxxData(bsm) {
			getQjZdjbxxDetailById(bsm)
				.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) => {});
		},

        //不动产单元号再次生成提示框
        open() {
            this.$confirm('已经存在不动产单元号或者自然幢号, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                getBdcdyh("860101555888GB", "zd")
                    .then((res) => {
                        console.log(res);
                        this.formData.zddm = res.result.substring(0, 19);
                        this.formData.bdcdyh = res.result;
                    })
                    .catch((error) => {});
                this.$message({
                    type: 'success',
                    message: '生成成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },

		//生成宗地代码
		generatorCode() {

            if((this.formData.zddm!=null&&this.formData.zddm!=='')||(this.formData.bdcdyh!=null&&this.formData.bdcdyh!=='')){
                this.open();
                return;
            }

			//前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.bdcdyh = res.result;
				})
				.catch((error) => {});
		},
		//修改宗地基本信息
		updateZDxx(formData) {
			//获取权利性质数据
			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;


            // FIXME:表单验证错误
            /*  this.$refs['ruleForm'].validate((valid) => {
                  debugger
                  if (valid) {
                      alert('submit!');

                  } else {
                      alert("error submit")
                      return false;
                  }
              });*/
            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 {
			text-align: center;
			height: 36px;
		}
		/deep/ .el-input__inner {
			margin: 0;
			height: 36px;
			outline: none;
			border: none;
			color: #606764;
			overflow: visible;
			text-align: center;
		}
		.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>