<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" class="demo-form-inline">
				<el-form-item label="行政区">
					<el-select
						v-model="xzqValue"
						value-key="xzqbsm"
						placeholder="行政区"
						@change="changeXzq(xzqValue)"
						style="width:130px;"
					>
						<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 label="地籍区">
					<el-select
						v-model="djqValue"
						placeholder="地籍区"
						@change="changeDjq(djqValue)"
						style="width:130px;"
					>
						<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 label="地籍子区">
					<el-select
						v-model="djzqValue"
						placeholder="地籍子区"
						style="width:130px;"
					>
						<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="项目名称">
					<el-input
						v-model="zdProjectName"
						placeholder="项目名称"
						style="width:400px;"
					></el-input>
				</el-form-item>
				<el-form-item label="所有权类型">
					<el-select
						v-model="syqlx.value"
						placeholder="所有权类型"
						@change="changeSyqlx(syqlx.value)"
						style="width:400px;"
					>
						<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="特征码">
					<el-select
						v-model="tzmCode"
						placeholder="地籍子区"
						style="width:200px;"
					>
						<el-option
							v-for="item in zdtzm"
							:key="item.bsm"
							:label="item.mc"
							:value="item.bsm"
						>
						</el-option>
					</el-select>
				</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" class="zrzProject">
				<el-form-item label="项目名称">
					<el-input
						v-model="zrzProjectName"
						placeholder="项目名称"
						style="width:400px;"
					></el-input>
				</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="newZrz">创建</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="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",
			zdProjectName: "",
			zrzProjectName: "",
			tzmCode: "",
			syqlxCode: "",
			xzqValue: "",
			djqValue: "",
			djzqValue: "",
			xzq: [],
			djq: [],
			djzq: [],
			syqlx: [
				{
					label: "国家所有",
					value: "G",
				},
				{
					label: "集体所有",
					value: "J",
				},
				{
					label: "土地所有权未确定或有争议",
					value: "Z",
				},
			],
			zdtzm: [],
		};
	},
	created() {
		this.getXzqList();
		this.getDdicByMC();
	},
	mounted() {},
	methods: {
		handleClick(tab, event) {
			console.log(tab, event);
			console.log(tab.name);
		},
		newZd() {
			var data = {
				xzqbsm: this.xzqValue,
				djqbsm: this.djqValue,
				djzqbsm: this.djzqValue,
				syqlxbsm: this.syqlxCode,
				xmmc: this.zdProjectName,
				zdtzmbsm: this.tzmCode,
			};
			console.log(data);
			insertQjZdjbxx(data)
				.then((res) => {
					console.log(res.result);
					if (res.code == "200") {
						this.$message({
							message: "创建成功！",
							type: "success",
						});
            //todo 跳转到宗地基本信息内容表页面  (预留)
            this.close()
						this.$router.push('/zd');
					} else {
						this.$message.error("创建失败！");
					}
				})
				.catch((error) => {});
		},
		newZrz() {
			//todo 在新增时，如果是点击顶部新建里面的自然幢则不传zdbsm 如果是点击右键里面的添加定着物则传zdbsm
			var data = {
				userbsm: "",
				xmmc: this.zrzProjectName,
				zdbsm: "",
			};
			console.log(data);
			insertZrzjbxx(data)
				.then((res) => {
					console.log(res.result);
					if (res.code == "200") {
						this.$message({
							message: "创建成功！",
							type: "success",
						});
						//todo 跳转到自然幢基本信息内容表页面  (预留)
            this.close()
						this.$router.push('/zrz');
					} else {
						this.$message.error("创建失败！");
					}
				})
				.catch((error) => {});
		},
		getXzqList() {
			getAllList()
				.then((res) => {
					console.log(res.result);
					this.xzq = res.result;
				})
				.catch((error) => {});
		},
		getDdicByMC() {
			getDdicByMC("宗地（宗海）特征码")
				.then((res) => {
					console.log(res.result);
					this.zdtzm = res.result;
				})
				.catch((error) => {});
		},
		changeXzq(id) {
			this.djq = [];
			this.djzq = [];
			this.djqValue = "";
			this.djzqValue = "";
			getListByXzqbsm(id)
				.then((res) => {
					if (res.result == null) {
						this.djq = null;
					} else {
						this.djq = res.result;
					}
				})
				.catch((error) => {});
		},
		changeDjq(item) {
			this.djzq = [];
			this.djzqValue = "";
			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;
						}
					})
					.catch((error) => {});
			}
		},
		changeSyqlx(id) {
			this.syqlxCode = id;
			console.log(this.syqlxCode);
		},
		close() {
			this.$emit("closeDialog");
		},
	},
	computed: {},
	watch: {},
};
</script>
<style>
.eltabs {
	height: 366px;
	width: 100%;
}
.eltabspane {
	height: 100%;
	width: 100%;
	padding: 20px;
}

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