<template>
	<el-tabs
		:tab-position="tabPosition"
		v-model="activeName"
		id="tabs"
		type="card"
		class="eltabs"
		@tab-click="handleClick">
		<el-tab-pane class="eltabspane" label="宗地" name="zd">
			<el-form :inline="true" :rules="rules" :model="ruleForm" ref="ruleForm" class="demo-form-inline">
				<el-form-item label="行政区划" required prop="xzqbsm">
					<el-select v-model="ruleForm.xzqbsm" style="width:100px;" value-key="xzqbsm" placeholder="行政区" @change="changeXzq(ruleForm.xzqbsm)">
						<el-option
							v-for="item in xzq"
							:key="item.xzqbsm"
							:label="item.xzqmc"
							:value="item.xzqbsm">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="djqbsm">
					<el-select v-model="ruleForm.djqbsm" style="width:130px;" 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-form-item prop="djzqbsm">
					<el-select v-model="ruleForm.djzqbsm" style="width:150px;" 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-form-item label="项目名称" required prop="xmmc">
					<el-input
						v-model="ruleForm.xmmc"
						placeholder="项目名称"
						style="width:400px;"
					></el-input>
				</el-form-item>
				<el-form-item label="所有权类型" required prop="syqlxbsm">
					<el-select
						v-model="ruleForm.syqlxbsm"
						placeholder="所有权类型"
						style="width:300px;"
					>
						<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="特征码" required prop="zdtzmbsm">
					<el-select
						v-model="ruleForm.zdtzmbsm"
						placeholder="宗地特征码"
						style="width:200px;"
					>
						<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-item class="handleBtn">
					<el-button type="primary">导入图形</el-button>
					<el-button type="primary" @click="newZd">创建</el-button>
					<el-button type="primary" @click="close">取消</el-button>
				</el-form-item>
				<!-- <div>
					<el-form-item style="margin-left:300px;">
						<el-button type="primary">导入图形</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="newZd">创建</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="close">取消</el-button>
					</el-form-item>
				</div> -->
			</el-form>
		</el-tab-pane>
		<el-tab-pane class="eltabspane" label="宗海" name="zh">宗海</el-tab-pane>
		<el-tab-pane class="eltabspane" label="自然幢" name="zrz">
			<el-form :inline="true" :rules="rules1" :model="ruleForm1" ref="ruleForm1" class="zrzProject">
				<el-form-item label="项目名称" prop="xmmc">
					<el-input
						v-model="ruleForm1.xmmc"
						placeholder="项目名称"
						style="width:400px;"
					></el-input>
				</el-form-item>
				<el-form-item class="handleBtn">
					<el-button type="primary">导入图形</el-button>
					<el-button type="primary" @click="newZrz">创建</el-button>
					<el-button type="primary" @click="close">取消</el-button>
				</el-form-item>
			</el-form>
		</el-tab-pane>
		<el-tab-pane class="eltabspane" label="多幢" name="dz">多幢</el-tab-pane>
		<el-tab-pane class="eltabspane" label="林权" name="lq">林权</el-tab-pane>
		<el-tab-pane class="eltabspane" label="构筑物" name="gzw">构筑物</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";

export default {
	name: "",
	components: {},
	props: {},
	data() {
		return {
			tabPosition: "left",
			//默认第一个选项卡
			activeName: "zd",
			zrzProjectName: "",
			xzq: [],
			djq: [],
			djzq: [],
			ruleForm:{
				"djqbsm": "",
				"djzqbsm": "",
				"syqlxbsm": "",
				"userbsm": "",
				"xmmc": "",
				"xzqbsm": "",
				"zdtzmbsm": ""
			},
			ruleForm1:{
				zdbsm:'',
				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' },
				],
			},
			syqlx: [
				{
					label: "国家所有",
					value: "G",
				},
				{
					label: "集体所有",
					value: "J",
				},
				{
					label: "土地所有权未确定或有争议",
					value: "Z",
				},
			],
		};
	},
	created() {
		this.getXzqList();
	},
	mounted() {},
	methods: {
		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.$message({
									message: "创建成功！",
									type: "success",
								});
								this.$store.state.zdbsm = res.result;
								//todo 跳转到宗地基本信息内容表页面  (预留)
								this.close();
								this.$router.push("/zd");
							} 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) {
					insertZrzjbxx(this.ruleForm1)
						.then((res) => {
							if (res.code == "200") {
								this.$message({
									message: "创建成功！",
									type: "success",
								});
								//todo 跳转到自然幢基本信息内容表页面  (预留)
								this.close();
								this.$store.state.zdbsm=res.result.zdbsm;
								this.$store.state.zrzbsm=res.result.bsm;
								this.$store.state.xmmc=res.result.xmmc;
								this.$router.push({
									path: '/zrz', query:{
										source: 1,
										bsm:res.result.bsm
									}
								});
							} else {
								this.$message.error("创建失败！");
							}
						})
						.catch((error) => {});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
			
		},
		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.$emit("closeDialog");
		},
	},
	computed: {},
	watch: {},
};
</script>
<style  lang="less">
.eltabs {
	height: 366px;
	width: 100%;
}
.eltabspane {
	height: 100%;
	width: 100%;
	padding: 20px;
	.el-form--inline .el-form-item__label{
		width: 100px;
	}
	.el-form-item{
		margin-bottom: 20px;
	}
	.handleBtn{
		width: 90%;
		.el-form-item__content{
			float: right;
		}
	}
}

#tabs .el-tabs__item {
	font-size: 18px !important;
	color: #333;
	width: 100px;
	height: 60px;
	line-height: 80px;
}
.zrzProject {
	margin-top: 80px;
}
</style>