<template>
    <div class='update-record'>
        <van-nav-bar title='说明书更新记录' left-arrow @click-left='backPage' />
        <van-dropdown-menu active-color='#1989fa'>
            <van-dropdown-item v-model='objType' :options='option' />
        </van-dropdown-menu>
        <div class='record'>
            <!-- 引入list,触底更新 -->
            <van-list class='record-list' v-model='loading' :finished='finished' finished-text='没有更多了' @load='onLoad'>
                <div class='info' v-for='i in list' :key='i'>
                    <div class='left'>
                        <div class='dot'></div>
                        <div class='line'></div>
                    </div>
                    <div class='right'>
                        <div class='title'>
                            <span class='date'>2020.08.19 {{i}}</span>
                        </div>
                        <div class='content' @click='goToDetailInfo'>
                            <p class='type'>重要维保</p>
                            <p>电梯系统-货梯-3-报停后的维保管理建筑-3#直梯光幕更换</p>
                        </div>
                        <div class='content' v-if='i===1'>
                            <p class='type'>重要维修</p>
                            <p>电梯系统-货梯-3-报停后的维保管理建筑-3#直梯光幕更换</p>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>
<script>
/**
 * 说明书更新记录
 */
import Vue from 'vue'
import { NavBar, DropdownMenu, DropdownItem, List } from 'vant'
Vue.use(NavBar)
Vue.use(DropdownMenu).use(DropdownItem)
Vue.use(List)
import { mapGetters } from 'vuex'
// import { getChangeList } from '@/api/homePage'
import { queryEventypes } from '@/api/overview'
import { querySelect } from '@/api/public'

export default {
    name: 'UpdateRecord',
    props: {},
    components: {},
    data() {
        return {
            objType: 0,
            option: [
                { text: '全部', value: 0 },
                { text: '重要维保', value: 1 },
                { text: '重要维修', value: 4 },
                { text: '其他事项', value: 5 },
                { text: '综合事项', value: 3 },
            ],
            // 1: '重要维保',
            // 3: '综合事项',
            // 4: '重要维修',
            // 5: '其他事项',
            list: [],
            loading: false,
            finished: false,
        }
    },
    computed: {
        ...mapGetters(['plazaId']),
    },
    created() {
        let params = {
            getParams: {
                plazaId: this.plazaId,
                page: 1,
                size: 100,
            },
        }
        getChangeList(params).then((res) => {
            console.log(res)
        })
        this.querySelect()
    },
    beforeMount() {},
    mounted() {},
    methods: {
        /**
         *
         */
        async querySelect() {
            let data = {
                    plazaId: this.plazaId,
                },
                postParams = [
                    {
                        tableName: 'rpt_change_record',
                        columnName: {
                            objtype: 'objtype',
                        },
                    },
                ]
            let resData = await queryEventypes({ data, postParams })
            console.log('%c======', 'color:blue')
            console.log(resData)
        },
        // 返回上一个页面(项目概况)
        backPage() {
            this.$router.go(-1)
        },
        goToDetailInfo() {
            this.$router.push({ name: 'UpdateRecordDetail', params: { a: 1 } })
        },
        onLoad() {
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            setTimeout(() => {
                for (let i = 0; i < 5; 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>
.update-record {
    width: 100%;
    height: 100%;
    // background-color: lightblue;
    // 下拉菜单
    /deep/.van-dropdown-menu__item {
        justify-content: flex-start !important;
        padding-left: 8px;
    }
    // 主体内容
    .record {
        width: 100%;
        height: calc(100% - 95px);
        padding: 15px;
        background-color: #f5f6f7;
        overflow: auto;
        .record-list {
            width: 100%;
            height: 100%;
        }
        .info {
            width: 100%;
            height: auto;
            display: flex;
            .left {
                width: 8px;
                height: auto;
                display: flex;
                flex-direction: column;
                .dot {
                    margin-top: 6px;
                    width: 8px;
                    height: 8px;
                    background-color: #025baa;
                    border-radius: 50%;
                }
                .line {
                    margin: 0 auto;
                    width: 2px;
                    flex: 1;
                    margin-top: 6px;
                    background: #dcdcdc;
                    // background-color: red;
                }
            }
            .right {
                flex: 1;
                padding-left: 10px;
                padding-bottom: 30px;
                .title {
                    width: 100%;
                    height: 20px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #666666;
                    .type {
                        margin-left: 15px;
                    }
                }
                .content {
                    width: 100%;
                    height: 95px;
                    margin-top: 8px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #333333;
                    line-height: 25px;
                    background-color: #fff;
                    padding: 12px 10px;
                    .type {
                        font-weight: 500;
                        color: #333333;
                    }
                }
            }
        }
    }
}
</style>