<template>
    <div class="main">
        <div class="button">
            <el-button type="primary" @click="newAdd">新增</el-button>
        </div>
        <div class="table">
            <table border="1">
                <tr>
                    <td>序号</td>
                    <td>宗地代码</td>
                    <td>不动产单元号</td>
                    <td>项目名称</td>
                    <td>不动产权证号</td>
                    <td>权利人</td>
                    <td>坐落</td>
                </tr>
                <tr v-if="Object.keys(bgqData)==0">
                    <td colspan="7">
                        <span class="noData">暂无数据</span>
                    </td>
                </tr>
                <tr v-else>
                    <!--<tr v-else v-for="(item,index) in bgqData" :key="index">-->
                    <td>1</td>
                    <td><input type="text" class="formInput" v-model="bgqData.zddm" readonly="readonly"/></td>
                    <td><input type="text" class="formInput" v-model="bgqData.bdcdyh" readonly="readonly"/></td>
                    <td><input type="text" class="formInput" v-model="bgqData.xmmc" readonly="readonly"/></td>
                    <td><input type="text" class="formInput" v-model="bgqData.bdcqzh" readonly="readonly"/></td>
                    <td><input type="text" class="formInput" v-model="bgqData.qlr" readonly="readonly"/></td>
                    <td><input type="text" class="formInput" v-model="bgqData.zl" readonly="readonly"/></td>
                </tr>
            </table>
        </div>
        <div class="fgh">
            <span>分割后宗地:</span>
            <table border="1">
                <tr>
                    <td>操作</td>
                    <td>行政区</td>
                    <td>地籍区</td>
                    <td>地籍子区</td>
                    <td>土地特征码</td>
                    <td>项目名称</td>
                    <td>幢信息</td>
                </tr>
                <tr v-for="(item,index) in fghData" :key="index">
                    <td @click="delRow(index)">-</td>
                    <td>
                        <el-select v-model="item.xzqbsm" @change="changeXzq(item.xzqbsm)">
                            <el-option
                                    v-for="i in xzq"
                                    :key="i.bsm"
                                    :label="i.mc"
                                    :value="i.bsm"
                            ></el-option>
                        </el-select>
                    </td>
                    <td>
                        <el-select v-model="item.djqbsm" @change="changeDjq(item.djqbsm)">
                            <el-option
                                    v-for="i in djq"
                                    :key="i.bsm"
                                    :label="i.mc"
                                    :value="i.bsm"
                            ></el-option>
                        </el-select>
                    </td>
                    <td>
                        <el-select v-model="item.djzqbsm">
                            <el-option
                                    v-for="i in djzq"
                                    :key="i.bsm"
                                    :label="i.mc"
                                    :value="i.bsm"
                            ></el-option>
                        </el-select>
                    </td>
                    <td>
                        <el-select v-model="item.zdtzmbsm">
                            <el-option
                                    v-for="i in tdtzm"
                                    :key="i.bsm"
                                    :label="i.mc"
                                    :value="i.bsm"
                            ></el-option>
                        </el-select>
                    </td>
                    <td>
                        <input type="text" v-model="item.xmmc" class="formInput"/>
                    </td>
                    <td>
                        <input type="text" v-model="item.zxx" class="formInput"/>
                    </td>
                </tr>
                <tr>
                    <td @click="addRow">+</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>

        <query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible" @close="close"></query-data>
        <div class="header-button">
            <el-button type="primary" @click="save">保存</el-button>
        </div>
    </div>
</template>

<script>
    import {
        getAllList,
        getListByXzqbsm,
        getListByPbsm,
        getDdicByMC
    } from "./../../../../api/common";
    import {getQjZdjbxxDetailById} from './../../../../api/zd'
    import QueryData from './../../../../components/queryData/queryData'

    export default {
        name: "",
        components: {QueryData},
        props: {},
        data() {
            return {
                centerDialogVisible: false,
                bgqData: {},
                xzq: [],
                djq: [],
                djzq: [],
                tdtzm: [],
                Data: {
                    xzqbsm: '',
                    djqbsm: '',
                    djzqbsm: '',
                    zdtzmbsm: '',
                    zmmc: '',
                    zxx: ''
                },
                fghData: [],

            }
        },
        created() {
        },
        mounted() {
            this.getXzqList();
            this.getzdtzm();
        },
        methods: {
            save() {
                console.log("save........")
            },
            getJbxx(id) {
                getQjZdjbxxDetailById(id).then(res => {
                    this.Data = res.result
                })
            },
            getzdtzm() {
                getDdicByMC('宗地（宗海）特征码').then(res => {
                    this.tdtzm = res.result
                })
            },
            getXzqList() {
                getAllList()
                    .then((res) => {
                        console.log(res)
                        this.xzq = res.result;
                    })
                    .catch((error) => {
                    });
            },
            changeXzq(id) {
                this.djq = [];
                this.djzq = [];
                getListByXzqbsm(id)
                    .then((res) => {
                        if (res.result == null) {
                            this.djq = null;
                        } else {
                            this.djq = res.result;
                        }
                    })
                    .catch((error) => {
                    });
            },
            changeDjq(item) {
                this.djzq = [];
                if (item == null) {
                } else {
                    console.log(item);
                    getListByPbsm(item)
                        .then((res) => {
                            if (res.result == null) {
                                this.djzq = null;
                            } else {
                                this.djzq = res.result;
                            }
                        })
                        .catch((error) => {
                        });
                }
            },
            addRow() {
                this.fghData.push(this.Data)
            },
            delRow(index) {
                this.fghData.splice(index, 1)
            },
            close: function () {
                this.centerDialogVisible = false;
            },
            newAdd: function () {
                this.centerDialogVisible = true;
            },
            addData: function (val) {
                this.centerDialogVisible = false;
                this.bgqData = val
            },
            getData: function (data) {
                this.bgqData = data
            },
        },
        computed: {},
        watch: {
            bgqData: {
                handler: function (item) {
                    this.getJbxx(item.glbsm)
                },
                deep: true
            }
        },
    }
</script>
<style scoped lang="less">
    .main {
        box-sizing: border-box;
        padding: 18px;
        height: auto;
        width: 80%;
        table {
            margin-top: 10px;
            background-color: #fff;
            font-size: 14px;
            width: 100%;

            .formInput {
                margin: 0;
                height: 36px;
                outline: none;
                border: none;
                color: #606764;
                overflow: visible;
                text-align: center;
                cursor: text;
            }

        }

        td {
            text-align: center;
            height: 36px;
            min-width: 50px;
        }

        table:hover {
            cursor: pointer;
        }

        .noData {
            color: #b2b2b2;
        }
        .fgh{
            margin-top: 20px;
        }
        .header-button {
            margin-top: 20px;
            text-align: center;
        }
    }
</style>