<template>
    <div class="main">
        <div class="header">
            <span>合并后项目名称:</span>
            <el-input></el-input>

            <el-button type="primary" @click="newAdd">新增</el-button>

            <el-button type="primary">保存</el-button>
        </div>

        <table border="1">
            <tr>
                <td>序号</td>
                <td>宗地代码</td>
                <td>不动产单元号</td>
                <td>项目名称</td>
                <td>不动产权证号</td>
                <td>权利人</td>
                <td>坐落</td>
            </tr>
            <tr v-if="bgqData.length==0">
                <td colspan="7">
                    <span class="noData">暂无数据</span>
                </td>
            </tr>
            <tr v-else v-for="(item,index) in bgqData" :key="index">
                <td>{{index+1}}</td>
                <td><input type="text" class="formInput" v-model="item.zddm" readonly="readonly"/></td>
                <td><input type="text" class="formInput" v-model="item.bdcdyh" readonly="readonly"/></td>
                <td><input type="text" class="formInput" v-model="item.xmmc" readonly="readonly"/></td>
                <td><input type="text" class="formInput" v-model="item.bdcqzh" readonly="readonly"/></td>
                <td><input type="text" class="formInput" v-model="item.qlr" readonly="readonly"/></td>
                <td><input type="text" class="formInput" v-model="item.zl" readonly="readonly"/></td>
            </tr>
        </table>
        <div>
            <el-dialog
                    title="新增"
                    :visible.sync="centerDialogVisible"
                    width="50%"
                    center>
                <div class="search">
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button type="primary" @click="result">重置</el-button>
                    <el-row :gutter="10" class="shop">
                        <el-col :span="4" class="inputtitle">
                            宗地编码:
                        </el-col>
                        <el-col :span="8" class="">
                            <el-input v-model="queryData.zddm"></el-input>
                        </el-col>
                        <el-col :span="4" class="inputtitle">
                            不动产权证号:
                        </el-col>
                        <el-col :span="8" class="">
                            <el-input v-model="queryData.bdcqzh"></el-input>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="4" class="inputtitle">
                            不动产权单元号:
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="queryData.bdcdyh"></el-input>
                        </el-col>
                        <el-col :span="4" class="inputtitle">
                            权利人:
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="queryData.qlrmc"></el-input>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="4" class="inputtitle">
                            坐落:
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="queryData.zl"></el-input>
                        </el-col>
                    </el-row>
                    <table border="1">
                        <tr>
                            <td>序号</td>
                            <td>操作</td>
                            <td>宗地代码</td>
                            <td>不动产单元号</td>
                            <td>项目名称</td>
                            <td>不动产权证号</td>
                            <td>权利人</td>
                            <td>坐落</td>
                        </tr>
                        <tr v-if="Data.length==0">
                            <td colspan="8">
                                <span class="noData">暂无数据</span>
                            </td>
                        </tr>
                        <tr v-else v-for="(item,index) in Data" :key="index">
                            <td>{{index+1}}</td>
                            <td @click="addData(item)" class="xz">
                                <span>选择</span>
                            </td>
                            <td>{{item.zddm}}</td>
                            <td>{{item.bdcdyh}}</td>
                            <td>{{item.xmmc}}</td>
                            <td>{{item.bdcqzh}}</td>
                            <td>{{item.qlr}}</td>
                            <td>{{item.zl}}</td>
                        </tr>

                    </table>
                </div>
                <span slot="footer" class="dialog-footer">
              </span>
            </el-dialog>

        </div>
    </div>
</template>

<script>
    import {getSearchList} from './../../../../api/search'

    export default {
        name: "",
        components: {},
        props: {},
        data() {
            return {
                centerDialogVisible: false,
                Data: [],
                queryData: {
                    bdcdyh: "",
                    bdcqzh: "",
                    dylxs: ['zd'],
                    qlrmc: "",
                    qszt: "2",
                    xmmc: "",
                    zddm: "",
                    zl: ""
                },
                bgqData: []
            }
        },
        created() {
        },
        mounted() {
        },
        methods: {
            newAdd: function () {
                this.centerDialogVisible = true;
                this.getData(
                    {dylxs: ['zd']}
                )
            },
            addData: function (val) {
                this.centerDialogVisible = false;
                this.bgqData.push(val)
            },
            search: function () {
                this.getData(this.queryData)
            },
            getData: function (data) {
                getSearchList(data).then(res => {
                    this.Data = res.result.records
                })
            },
            result: function () {
                this.queryData = {
                    bdcdyh: "",
                    bdcqzh: "",
                    dylxs: ['zd'],
                    qlrmc: "",
                    qszt: "2",
                    xmmc: "",
                    zddm: "",
                    zl: ""
                }
            }
        },
        computed: {},
        watch: {},
    }
</script>
<style scoped lang="less">
    .main {
        box-sizing: border-box;
        padding: 18px;
        height: auto;
        width: 80%;
        .header {
            display: flex;
            justify-items: left;
            span {
                width: 130px;
                line-height: 40px;
            }
            .el-input{
                width: 200px;
                margin-right: 20px;
            }
        }

        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;
        }

        .inputtitle {
            line-height: 40px;
        }
        .shop {
            margin-top: 20px;
        }
        .xz {
            color: blue;
        }
        .noData {
            color: #b2b2b2;
        }
    }
</style>