<template>
    <div>
        <div class="header">
            <el-input v-model="roomname" size="small" placeholder="房间名称" :clearable="true" @input="changesr($event)"
                class="handle-input mr10 width100">
            </el-input>
            <div class="d-inlie-block">
                <el-date-picker v-model="signingTime" size="small" type="datetime" class="width150 mb-1"
                    placeholder="选择开始日期" align="right" :picker-options="pickerOptions">
                </el-date-picker> -
                <el-date-picker v-model="contractTime" size="small" type="datetime" class="width150 mb-1"
                    placeholder="选择结束日期" align="right" :picker-options="pickerOptions">
                </el-date-picker>
            </div>
            <el-button type="primary" style="background: #FA8E00; border: none;" size="small"
                class=" mb-1 mx-1">查询</el-button>
        </div>
        <el-table :data="tableList" border stripe class="table mt-2" ref="multipleTable"
            @selection-change="handleSelectionChange" header-cell-class-name="table-header" height="650px" empty-text="无">
            <el-table-column prop="number" label="住户名" align="center"></el-table-column>
            <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
            <el-table-column prop="room" label="房间名称" align="center"></el-table-column>
            <el-table-column prop="time" label="报修时间" align="center"></el-table-column>
            <el-table-column prop="idnumber" label="维修单号" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" align="center"></el-table-column>
            <el-table-column prop="shuoming" label="报修说明" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="text">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: 'lockReport',
    data() {
        return {
            roomname: '',
            signingTime: '',
            contractTime: '',
            tableList: [
                {
                    number: '阿达',
                    phone: '13923647586',
                    room: '公寓/A栋/1单元/1层/109',
                    time: '2023-07-20 14:50',
                    idnumber: '145278569452',
                    status: '已维修',
                    shuoming: '锁防撬一直响',
                },
                {
                    number: '阿川',
                    phone: '13985647586',
                    room: '公寓/A栋/2单元/2层/209',
                    time: '2023-07-12 20:50',
                    idnumber: '145278512452',
                    status: '已维修',
                    shuoming: '钥匙开不了锁',
                },
                {
                    number: '徐涵',
                    phone: '13923785586',
                    room: '公寓/B栋/1单元/1层/101',
                    time: '2023-07-11 11:50',
                    idnumber: '145278856452',
                    status: '已维修',
                    shuoming: '密码正确但是开不了锁',
                },
                {
                    number: '刘坚',
                    phone: '13833647586',
                    room: '公寓/A栋/1单元/4层/409',
                    time: '2023-07-09 09:50',
                    idnumber: '145278569145',
                    status: '已维修',
                    shuoming: '面板不亮数字密码',
                }
            ]
        }
    }
}
</script>

<style scoped>
.header {
    display: flex;
    align-items: center;
}

.handle-input {
    width: 10%;
    margin-right: 10px;
}

.d-inlie-block {
    margin-top: 1px;
}</style>