<template>
	<el-tabs
		:tab-position="tabPosition"
		v-model="activeName"
		id="tabs"
		type="card"
		class="eltabs"
		@tab-click="handleClick">
		<el-tab-pane class="eltabspane" v-if="!auth" label="宗地" name="zd">
			<el-form :inline="true" :rules="rules" :model="ruleForm" ref="ruleForm" class="demo-form-inline">
				<el-form-item label="行政区划" class="w100"  prop="xzqbsm">
				 <el-col :span="7">
					<el-form-item  prop="xzqbsm">
						<el-select v-model="ruleForm.xzqbsm"  value-key="xzqbsm" placeholder="行政区" @change="changeXzq(ruleForm.xzqbsm)">
							<el-option
								v-for="item in xzq"
								:key="item.bsm"
								:label="item.mc"
								:value="item.bsm">
							</el-option>
						</el-select>
					</el-form-item>
				 </el-col>
				 <el-col :span="1">&nbsp;</el-col>
				 <el-col :span="7">
					<el-form-item prop="djqbsm">
						<el-select v-model="ruleForm.djqbsm"  placeholder="地籍区" @change="changeDjq(ruleForm.djqbsm)">
							<el-option
								v-for="item in djq"
								:key="item.bsm"
								:label="item.mc"
								:value="item.bsm">
							</el-option>
						</el-select>
					</el-form-item>
				 </el-col>
				 <el-col :span="1">&nbsp;</el-col>
				 <el-col :span="8">
					<el-form-item prop="djzqbsm" style="margin-right:0">
						<el-select v-model="ruleForm.djzqbsm"  placeholder="地籍子区">
							<el-option
								v-for="item in djzq"
								:key="item.bsm"
								:label="item.mc"
								:value="item.bsm">
							</el-option>
						</el-select>
					</el-form-item>
				 </el-col>
				</el-form-item>
				<el-form-item label="项目名称" class="w100"  prop="xmmc">
					<el-input
						v-model="ruleForm.xmmc"
						placeholder="项目名称"
					></el-input>
				</el-form-item>
				<el-form-item label="所有权类型" class="w100"  prop="syqlxbsm">
					<el-select
						v-model="ruleForm.syqlxbsm"
						placeholder="所有权类型"
					>
						<el-option
							v-for="item in syqlx"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="特征码" class="w100"  prop="zdtzmbsm">
					<el-select
						v-model="ruleForm.zdtzmbsm"
						placeholder="宗地特征码"
					>
						<el-option
							v-for="item in $store.state.zdtzmList"
							:key="item.bsm"
							:label="item.mc"
							:value="item.bsm"
						>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div class="handleBtn">
				<el-button type="primary" class="w98 import">导入图形</el-button>
				<el-button type="primary" class="w98 creat" @click="newZd">创建</el-button>
				<el-button type="primary" class="w98 cancel" @click="close">取消</el-button>
			</div>
		</el-tab-pane>
		<el-tab-pane class="eltabspane" v-if="!auth" label="宗海" name="zh">
			<div class="handleBtn">
				<el-button type="primary" class="w98 import">导入图形</el-button>
				<el-button type="primary" class="w98 creat" @click="todo">创建</el-button>
				<el-button type="primary" class="w98 cancel" @click="close">取消</el-button>
			</div>
		</el-tab-pane>
		<el-tab-pane class="eltabspane" label="自然幢" name="zrz">
			<el-form :inline="true" :rules="rules1" :model="ruleForm1" ref="ruleForm1" class="demo-form-inline">
				<el-form-item label="项目名称" class="w100" prop="xmmc">
					<el-input
						v-model="ruleForm1.xmmc"
						placeholder="项目名称"
					></el-input>
				</el-form-item>
			</el-form>
			<div class="handleBtn">
				<el-button type="primary" class="w98 import">导入图形</el-button>
				<el-button type="primary" class="w98 creat" @click="newZrz">创建</el-button>
				<el-button type="primary" class="w98 cancel" @click="close">取消</el-button>
			</div>
		</el-tab-pane>
		<el-tab-pane class="eltabspane" v-if="!createZrz" label="多幢" name="dz">
			<el-form :inline="true" :rules="rules2" :model="ruleForm2" ref="ruleForm2" class="demo-form-inline">
				<el-form-item label="项目名称" class="w100" prop="xmmc">
					<el-input
							v-model="ruleForm2.xmmc"
							placeholder="项目名称"
					></el-input>
				</el-form-item>
			</el-form>
			<div class="handleBtn">
				<el-button type="primary" class="w98 import">导入图形</el-button>
				<el-button type="primary" class="w98 creat" @click="newDz">创建</el-button>
				<el-button type="primary" class="w98 cancel" @click="close">取消</el-button>
			</div>
		</el-tab-pane>
		<el-tab-pane class="eltabspane" v-if="!createZrz" label="林权" name="lq">
			<div class="handleBtn">
				<el-button type="primary" class="w98 import">导入图形</el-button>
				<el-button type="primary" class="w98 creat" @click="todo">创建</el-button>
				<el-button type="primary" class="w98 cancel" @click="close">取消</el-button>
			</div>
		</el-tab-pane>
		<el-tab-pane class="eltabspane" label="构筑物" name="gzw">
			<el-form :inline="true" :rules="rules4" :model="ruleForm4" ref="ruleForm4" class="demo-form-inline">
				<el-form-item label="项目名称" class="w100" prop="xmmc">
					<el-input
							v-model="ruleForm4.xmmc"
							placeholder="项目名称"
					></el-input>
				</el-form-item>
			</el-form>
			<div class="handleBtn">
				<el-button type="primary" class="w98 import">导入图形</el-button>
				<el-button type="primary" class="w98 creat" @click="newGzw">创建</el-button>
				<el-button type="primary" class="w98 cancel" @click="close">取消</el-button>
			</div>
		</el-tab-pane>
	</el-tabs>
</template>
<script>
import {
	getAllList,
	getListByXzqbsm,
	getListByPbsm,
	getDdicByMC,
} from "@api/common";
import { insertQjZdjbxx } from "@api/zd";
import { insertZrzjbxx } from "@api/zrz";
import { insertDzjbxx } from "@api/dz";
import { insertGzwjbxx } from "@api/gzw";

export default {
	name: "",
	components: {},
    inject:['getRightTree','getTreeByBsm'],
	props: {
		auth: {
			type: Boolean,
			default: function () {
				return false
			}
		},
		createZrz: {
			type: Boolean,
			default: function () {
				return false
			}
		},
	},
	data() {
		return {
			tabPosition: "left",
			//默认第一个选项卡
			activeName: "",
			zrzProjectName: "",
			xzq: [],
			djq: [],
			djzq: [],
			ruleForm:{
				djqbsm: "",
				djzqbsm: "",
				syqlxbsm: "",
				userbsm: "",
				xmmc: "",
				xzqbsm: "",
				zdtzmbsm: ""
			},
			ruleForm1:{
				zdbsm:'',
				xmmc:'',
				userbsm:''
			},
			ruleForm2:{
				zdbsm:'',
				xmmc:'',
				userbsm:''
			},
			ruleForm4:{
				zdzhbsm:'',
				xmmc:'',
				userbsm:''
			},
			rules: {
				xzqbsm: [
					{ required: true, message: '请选择行政区', trigger: 'change' }
				],
				djqbsm: [
					{ required: true, message: '请选择地籍区', trigger: 'change' }
				],
				djzqbsm: [
					{ required: true, message: '请选择地籍子区', trigger: 'change' }
				],
				xmmc: [
					{ required: true, message: '请输入项目名称', trigger: 'blur' },
				],
				syqlxbsm: [
					{ required: true, message: '请选择所有权类型', trigger: 'change' }
				],
				zdtzmbsm: [
					{ required: true, message: '请选择宗地特征码', trigger: 'change' }
				]
			},
			rules1: {
				xmmc: [
					{ required: true, message: '请输入项目名称', trigger: 'blur' },
				],
			},
			rules2: {
				xmmc: [
					{ required: true, message: '请输入项目名称', trigger: 'blur' },
				],
			},
			rules4: {
				xmmc: [
					{ required: true, message: '请输入项目名称', trigger: 'blur' },
				],
			},
			syqlx: [
				{
					label: "国家所有",
					value: "G",
				},
				{
					label: "集体所有",
					value: "J",
				},
				{
					label: "土地所有权未确定或有争议",
					value: "Z",
				},
			],
		};
	},
	created() {
		this.getXzqList();
	},
	mounted() {
		//判断是新建流程还是添加定着物唤起的弹框
		this.activeName = this.auth ? 'zrz':'zd'
	},
	methods: {
	    // 重置
	    reset(){
			if(this.$refs['ruleForm']){
            	this.$refs['ruleForm'].resetFields();
			}
			if(this.$refs["ruleForm1"]){
            	this.$refs["ruleForm1"].resetFields();
			}
			if (this.$refs["ruleForm2"]) {
            	this.$refs["ruleForm2"].resetFields();
			}
		},
		handleClick(tab, event) {
			console.log(tab, event);
			console.log(tab.name);
		},
		newZd() {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					insertQjZdjbxx(this.ruleForm)
						.then((res) => {
							console.log(res.result);
							if (res.code == "200") {
								this.getRightTree(res.result,'0,1,2');
								this.$message({
									message: "创建成功！",
									type: "success",
								});
								this.$store.state.zdbsm = res.result;
								//todo 跳转到宗地基本信息内容表页面  (预留)
								this.close();
								this.$router.push({
									path: '/zd', query:{
										source: 2,
										bsm:res.result
									}
								});
							} else {
								this.$message.error(res.message);
							}
						})
						.catch((error) => {});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		newZrz() {
			//todo 在新增时，如果是点击顶部新建里面的自然幢则不传zdbsm 如果是点击右键里面的添加定着物则传zdbsm
			this.$refs['ruleForm1'].validate((valid) => {
				if (valid) {
					this.ruleForm1.zdbsm = this.auth ? this.$store.state.zdbsm : '';
					this.ruleForm1.dzbsm = this.auth ? this.$store.state.dzbsm : '';
					insertZrzjbxx(this.ruleForm1)
						.then((res) => {
							if (res.code == "200") {
								//获取左侧树数据
								this.getTreeByBsm(res.result.bsm,'zrz','0,1,2');
								this.$message({
									message: "创建成功！",
									type: "success",
								});
								//todo 跳转到自然幢基本信息内容表页面  (预留)
								this.$store.state.zdbsm=res.result.zdbsm;
								this.$store.state.zrzbsm=res.result.bsm;
								this.$store.state.xmmc=res.result.xmmc;
								this.$store.state.newZdbsm = res.result.zdbsm;
								this.close();
								this.$router.push({
									path: '/zrz', query:{
										source: 1,
										bsm:res.result.bsm,
                        				auth: '0,1,2'
									}
								});
							} else {
								this.$message.error("创建失败！");
							}
						})
						.catch((error) => {});
				} else {
					console.log('error submit!!');
					return false;
				}
			});

		},
		newGzw(){
			this.$refs['ruleForm4'].validate((valid) => {
				if (valid) {
					if(1>0){
						this.ruleForm4.zdzhbsm = this.$store.state.zdbsm != '' ? this.$store.state.zdbsm : '';
						insertGzwjbxx(this.ruleForm4)
								.then((res)=>{
									if(res.code === 200){
										//获取左侧树数据
										this.getTreeByBsm(res.result.bsm,'gzw','0,1,2');
										this.close();
										this.$router.push({
											path: '/gzw', query:{
												source: 1,
												bsm:res.result.bsm,
												auth: '0,1,2'
											}
										});
									}
								})
					}else {
						this.close();
						this.$router.push({
							path: '/gzw', query:{
								source: 1,
								bsm:"12345678901234567890",
								auth: '0,1,2'
							}
						});
					}
				}
			})
		},
		newDz() {
			//todo 在新增时，如果是点击顶部新建里面的自然幢则不传zdbsm 如果是点击右键里面的添加定着物则传zdbsm
			this.$refs['ruleForm2'].validate((valid) => {
				if (valid) {
					this.ruleForm2.zdbsm = this.$store.state.zdbsm != '' ? this.$store.state.zdbsm : '';
					insertDzjbxx(this.ruleForm2)
							.then((res) => {
								if (res.code == "200") {
									this.getTreeByBsm(res.result.bsm,'dz','0,1,2');
									this.$message({
										message: "创建成功！",
										type: "success",
									});
									this.$store.state.zdbsm=res.result.zdbsm;
									this.$store.state.dzbsm=res.result.bsm;
									this.$store.state.xmmc=res.result.xmmc;
									this.$store.state.newZdbsm = res.result.zdbsm;
									this.close();
									this.$router.push({
										path: '/dz', query:{
											source: 1,
											bsm:res.result.bsm,
                        					auth: '0,1,2'
										}
									});
								} else {
									this.$message.error("创建失败！");
								}
							})
							.catch((error) => {});
				} else {
					console.log('error submit!!');
					return false;
				}
			});

		},
		todo(){
			this.$message({
				message: "待开发",
				type: "warning",
			});
		},
		getXzqList() {
			getAllList()
				.then((res) => {
					console.log(res.result);
					this.xzq = res.result;
					this.$store.state.xzqList = res.result;
				})
				.catch((error) => {});
		},
		changeXzq(id) {
			this.djq = [];
			this.djzq = [];
			this.ruleForm.djqbsm = "";
			this.ruleForm.djzqbsm = "";
			getListByXzqbsm(id)
				.then((res) => {
					if (res.result == null) {
						this.djq = null;
					} else {
						this.djq = res.result;
						this.$store.state.djqList = res.result;
					}
				})
				.catch((error) => {});
		},
		changeDjq(item) {
			this.djzq = [];
			this.ruleForm.djzqbsm = "";
			if (item == null) {
				console.log("llllllllllasdas");
			} else {
				console.log(item);
				getListByPbsm(item)
					.then((res) => {
						console.log(res.result);
						if (res.result == null) {
							this.djzq = null;
						} else {
							this.djzq = res.result;
							this.$store.state.djzqList = res.result;
						}
					})
					.catch((error) => {});
			}
		},
		close() {
			this.reset();
			this.$emit("closeDialog");
		},
	},
	computed: {},
	watch: {},
};
</script>
<style  lang="less">
.eltabs {
	height: 366px;
	width: 100%;
	position: relative;
    margin-left: 20px;
    margin-top: 20px;
	.eltabspane {
		height: 100%;
		width: 100%;
		.el-form--inline .el-form-item__label{
			width: 100px;
		}
		.el-form-item{
			margin-bottom: 20px;
		}
		.w100{
			width: calc(100% - 40px);
			.el-form-item{
				margin-bottom: 0!important;
				.el-form-item__content{
					width: 100%;
				}
			}
			.el-form-item__content{
				width: calc(100% - 100px);
				.el-select{
					width: 100%;
				}
			}
		}
		.handleBtn{
			width: 314;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -250px;
			.w98{
				width: 98px;
			}
		}
		.el-form{
			margin-top: 10px;
			box-sizing: border-box;
			padding-left: 40px;
		}
	}
	.el-tabs__content{
		height: 100%;
	}
	/deep/.el-tabs__item {
		font-size: 16px !important;
		color: #333;
		width: 140px;
		height: 50px;
		line-height: 50px;
		text-align: center!important;
		border-color: #E4E4E4!important;
	}
	/deep/ .is-active{
		background-color: #E5F4FF;
		color: #358BFF;
	}
}

</style>