<template>
    <div class="istarted">
        <m-header />
        <m-search @onSearch="onSearch" />
        <div class="section">
            <van-list v-model="loading"  v-if="dataShow" key="data"
                :finished="finished"
                finished-text="- 没有更多数据了 -"
                @load="getBindList">
                <router-link :to="{ path: '/starteddetail' }" v-for="i in 6" :key="i" class="app-item">
                    <div class="hd">
                        <span class="orangeStatus">待处理</span>
                        <span>2019-09-01</span>
                    </div>
                    <div class="bd">
                        <p>申请人：黄青筝</p>
                        <p>审批事项：调休</p>
                        <p>开始时间：2019-09-01  9:00</p>
                        <p>结束时间：2019-09-01  18:00</p>
                        <p>备注：家中急事，调休一天</p>
                    </div>
                </router-link>
            </van-list>
            <m-empty v-else key="data" />
        </div>
    </div>
</template>
<script>
import MHeader from '@/components/MHeader'
import MSearch from '@/components/MSearch'
import MEmpty from '@/components/MEmpty'
import { queryMyCreatedList } from '@/api/teacher'
export default {
    name: 'istarted',
    components: { MHeader, MSearch, MEmpty },
    data() {
        return {
            loading: false,
            finished: false,
            params: {
                name: '',
                userId: this.$route.params.userId,
                pageNo: 1,
                pageSize: 10
            },
            dataShow: true, // 是否有数据
            dataList: []
        }
    },
    methods: {
        onSearch(value) {
            this.dataList = [] // 重置数据
            this.dataShow = true
            this.params.pageNo = 1
            this.params.name = value
            this.finished = false
        },
        getBindList() {
            let params = this.params
            queryMyCreatedList(params).then(res => {
                let result = res.data
                this.loading = false
                if(result.code == 200) {
                    params.pageNo = result.pageNo
                    this.dataList = this.dataList.concat(result.records)
                    if(params.pageNo >= result.totalPages) {
                        this.finished = true
                    }
                    this.params.pageNo++
                } else {
                    this.finished = true
                }
                // 判断是否有数据
                if(this.dataList.length <= 0) {
                    this.dataShow = false
                }
            })
        }
    }
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
.istarted {
    min-height: 100vh;
}
.app-item {
    margin: 0 .16rem .1rem;
    background: @whiteColor;
    border-radius: .1rem;
    font-size: .14rem;
    display: block;
    &:first-child {
        margin-top: .1rem;
    }
    .hd {
        padding: .1rem .15rem .1rem .19rem;
        border-bottom: 1px solid #f5f5f5;
        color: @tFontColor;
        display: flex;
        justify-content: space-between;
    }
    .bd {
        padding: .12rem .15rem .2rem .19rem;
        line-height: .2rem;
    }
}
</style>