<template>
    <div class="main">
        <SearchHead @getSearchCondition="getData"></SearchHead>
        <div class="dataGrid" ref="dataGrid">
            <el-table
                    :data="tableData"
                    :height="tableHeight"
                    :row-class-name="tableRowClassName"
            >
                <el-table-column type="index" width="80" align="center" label="序号">
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small"
                        >办理
                        </el-button
                        >
                        <el-button type="text" size="small">定位</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="bdcdyh" align="left" label="不动产单元号">
                </el-table-column>
                <el-table-column prop="xmmc" align="left" width="150" label="项目名称">
                </el-table-column>
                <el-table-column prop="bdcqzh" align="left" label="不动产权证号">
                </el-table-column>
                <el-table-column prop="lx" align="left" width="120" label="类型">
                </el-table-column>
                <el-table-column prop="qlr" align="left" width="120" label="权利人">
                </el-table-column>
                <el-table-column prop="zl" align="left" label="坐落"></el-table-column>
                <el-table-column prop="zrsj" align="left" width="120" label="转入时间">
                </el-table-column>
                <el-table-column prop="cjr" align="left" width="120" label="创建人">
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import SearchHead from "../../../components/searchHead/searchHead";

    export default {
        name: "",
        components: {SearchHead},
        props: {},
        data() {
            return {
                formData: {
                    user: "",
                    region: "",
                    type: [],
                },
                tableData: [
                    {
                        bdcdyh: "610101001001GB00001W",
                        xmmc: "万科集团万科城",
                        bdcqzh: "陕（2017）西安市不动产权第00000",
                        lx: "宗地",
                        qlr: "李子新",
                        zl: "灞桥－田家湾-咸宁东路,近浐河西路",
                        zrsj: "2020.09.07 ",
                        cjr: "李子新",
                    },
                ],
                tableHeight: "",
            };
        },
        created() {
        },
        mounted() {
            for (let i = 0; i < 11; i++) {
                let obj = {
                    bdcdyh: "610101001001GB00001W",
                    xmmc: "万科集团万科城",
                    bdcqzh: "陕（2017）西安市不动产权第00000",
                    lx: "自然幢",
                    qlr: "李子新",
                    zl: "灞桥－田家湾-咸宁东路,近浐河西路",
                    zrsj: "2020.09.07 ",
                    cjr: "李子新",
                };
                this.tableData.push(obj);
            }
            this.tableHeight = this.$refs.dataGrid.offsetHeight - 68;
        },
        methods: {
            onSubmit() {
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 !== 0) {
                    return "even-row";
                } else {
                    return "";
                }
            },

            //获取子组件点击查询触发的事件
            getData(obj) {
                console.log(obj);
            },
            //点击办理
            handleClick(row) {
                let path = "";
                switch (row.lx) {
                    case "自然幢":
                        path = "/zrz";
                        break;
                    case "宗地":
                        path = "/zd";
                        break;
                    default:
                        break;
                }
                this.$router.push(path);
            },
        },
        computed: {},
        watch: {},
    };
</script>
<style scoped lang="less">
    .main {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0 18px;
        display: flex;
        flex-direction: column;
        background-color: #fcfdff;
        .demo-form-inline {
            margin-top: 18px;
            .moreSearchBtn {
                background-color: #1ad6e1;
                border-color: #1ad6e1;
            }
            .moreSearchBtn:focus,
            .moreSearchBtn:hover {
                background-color: rgba(28, 200, 229, 0.6);
            }
        }
        .dataGrid {
            flex: 1;
            margin-top: 20px;
            .pagination {
                padding: 18px 0;
            }
        }
    }
</style>