<template>
    <div class="container">
        <div class="topbg">
            <div class="search-input-wrap" @click="goSearch">
                <md-input-item
                        class="search-input"
                        placeholder="请输入关键词"
                >
                    <md-icon name="search" slot="left"></md-icon>
                </md-input-item>
            </div>
        </div>
        <div  class="my-scroll-view">
            <md-scroll-view
                    ref="scrollView"
                    :bouncing="false"
                    :scrolling-x="false"
                    :auto-reflow="true"
                    @end-reached="$_onEndReached"

            >
                <ul class="ulbox">
                    <li class="list" v-for="(item, index) in renyuanDataList" :key="index" @click="goRenyuanDetail(item.userId)">
                        <img v-if="item.sysAccountPic" :src="item.sysAccountPic">
                        <img v-else src="../../assets/job_ticket/zuoyepiao_img_zuoyeshenqing.png">
                        <div class="list-right">
                            <h4>{{item.sysAccountRealName}}</h4>
                            <p>{{item.sGroupName}}/{{item.position}}</p>
                        </div>
                    </li>
                </ul>
                <md-scroll-view-more
                        slot="more"
                        :is-finished="isFinished"
                >
                </md-scroll-view-more>
            </md-scroll-view>
        </div>

    </div>
</template>

<script>
    import {
        TabBar,
        Swiper,
        SwiperItem,
        ScrollView,
        ScrollViewRefresh,
        ScrollViewMore,
        Button,
        InputItem,
        Icon,
        Tag,
        Toast,
    } from 'mand-mobile'
    import {personnelArchivesList} from '@/api/personnel_files';
    import {mapGetters} from 'vuex';
    export default {
        name: "index_list",
        components: {
            [TabBar.name]: TabBar,
            [Swiper.name]: Swiper,
            [SwiperItem.name]: SwiperItem,
            [ScrollView.name]: ScrollView,
            [ScrollViewRefresh.name]: ScrollViewRefresh,
            [ScrollViewMore.name]: ScrollViewMore,
            [Button.name]: Button,
            [InputItem.name]: InputItem,
            [Icon.name]: Icon,
            [Tag.name]: Tag,
        },
        data() {
            return {
                renyuanDataList: [],
                page: 0,
                isFinished: false,
            }
        },
        created() {
        },
        updated(){
            console.log('updated');
        },
        computed: {
            ...mapGetters([
                'job_ticket_aId',
                'job_ticket_cId',
            ])
        },
        mounted(){
            if(this.$route.query.fromUrl){
                this.$store.dispatch('request_config/setBaseUrl', this.$route.query.fromUrl)
            }else{
                this.$store.dispatch('request_config/setBaseUrl', location.host)
            }
            // 所以接口传 aId=294，cId=1
            if(this.$route.query.aId && this.$route.query.cId){
                this.$store.dispatch('job_ticket/setReqConfig', {
                    aId: this.$route.query.aId,
                    cId: this.$route.query.cId
                })
                this.$_onEndReached()
                // this.getRenyuanList()
            }else{
                this.$store.dispatch('job_ticket/setReqConfig', {
                    aId: '',
                    cId: ''
                })
            }
        },
        methods: {
            // 滚动触底事件
            $_onEndReached(){
                // console.log('daodi')
                this.getRenyuanList()
            },
            async getRenyuanList(){
                console.log(this.isFinished)
                if(this.isFinished){
                    return
                }
                this.page +=1
                // Toast.loading('加载中...')
                await personnelArchivesList({
                    aId: this.job_ticket_aId,
                    cId: this.job_ticket_cId,
                    keyword: '',
                    page: this.page,
                    limit: 10
                }).then(res => {
                    const {code, data, count, limit, page} = res;
                    if (code === 200) {
                        const lastPage = Math.ceil(count / limit);
                        if (page >= lastPage) {
                            this.isFinished = true
                        }
                        this.renyuanDataList = this.renyuanDataList.concat(data);
                        console.log(res)
                    }
                }).catch(err => {
                })
                /*setTimeout(function () {
                    Toast.hide()
                }, 300)*/
                this.$refs.scrollView.finishLoadMore()
            },
            goRenyuanDetail(id){
                this.$router.push({
                    path: '/personnel_info',
                    query: {
                        ...this.$route.query,
                        id: id
                    }
                })
            },
            goSearch(){
                this.$router.push({
                    path: '/personnel_search',
                    query: {
                        ...this.$route.query,
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
.container{
    height: 100vh;
    background: #ffffff;
    .topbg{
        background: #F2F2F2;
    }
    .search-input-wrap{
        padding: 15px;
        .search-input {
            border-radius: 10px;
            background: #FFF;
            padding: 0 15px;
        }
    }
    .my-scroll-view{
        height: calc(100vh - 1.3rem);
    }
    .md-scroll-view {
        height: 100%;
    }
    .ulbox{
        /*margin-top:1rem;*/
        .list{
            padding: 0.2rem 0 0 0.15rem;
            overflow:hidden;
            img{
                width: 1rem;
                height: 1rem;
                float: left;
                border-radius: 0.06rem;
            }
            .list-right{
                padding-bottom: 0.15rem;
                border-bottom: solid 1px #CECECE;
                width: 82vw;
                float: right;
                h4{
                    font-size: 0.34rem;
                    margin-top: 0.12rem;
                }
                p{
                    margin: 0.12rem 0 0.08rem 0;
                    font-size: 0.28rem;
                    color: #999999;
                }
            }
        }
        .list:last-of-type{
            .list-right{
                border-bottom: none;
            }
        }
    }
}
</style>