<template>
    <div class='engine-room-picture'>
        <van-nav-bar :title='title' left-arrow @click-left='backPage' @click-right='handleRightClick'>
            <template #right>
                <i class='iconfont wanda-scan'></i>
            </template>
        </van-nav-bar>
        <van-list class='room-list' v-model='loading' :finished='finished' finished-text='已经到底了' @load='onLoad'>
            <van-cell v-for='item in list' :key='item' :title='item' />
        </van-list>
    </div>
</template>
<script>
/**
 * 机房平面布置图
 */
import Vue from 'vue'
import { NavBar, List, Cell } from 'vant'
Vue.use(NavBar).use(List).use(Cell)
export default {
    name: 'EngineRoomPicture',
    props: {},
    data() {
        return {
            title: '机房平面布置图',
            list: [],
            loading: false,
            finished: false,
        }
    },
    components: {},
    beforeMount() {},
    mounted() {},
    methods: {
        backPage() {
            this.$router.go(-1)
        },
        handleRightClick() {
            console.log(1111)
        },
        onLoad() {
            console.log('onload')
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            setTimeout(() => {
                for (let i = 0; i < 10; i++) {
                    this.list.push(this.list.length + 1)
                }

                // 加载状态结束
                this.loading = false

                // 数据全部加载完成
                if (this.list.length >= 40) {
                    this.finished = true
                }
            }, 1000)
        },
    },
}
</script>
<style lang='less' scoped>
.engine-room-picture {
    width: 100%;
    height: 100%;
    // 返回箭头修改
    /deep/ .van-nav-bar .van-icon {
        color: #000;
    }
    .room-list {
        height: calc(100% - 45px);
        overflow: auto;
    }
}
</style>