<template>
    <div class="personnel-search">
        <div class="topbg">
            <div class="search-input-wrap">
                <div class="search-left">
                    <md-input-item
                            class="search-input"
                            placeholder="请输入"
                            v-model="searchVal"
                    >
                        <md-icon name="search" slot="left" @click="searchDetail"></md-icon>
                        <!--<span slot="right">取消</span>-->
                    </md-input-item>
                </div>
                <span class="cancel-btn" @click="cancelSearch">取消</span>
            </div>
        </div>

        <md-scroll-view
                ref="scrollView"
                :bouncing="false"
                :scrolling-x="false"
                :auto-reflow="true"
                @end-reached="$_onEndReached"
                class="my-scroll-view"
        >
            <ul class="ulbox" v-if="renyuanDataList.length > 0">
                <li class="list" v-for="(item, index) in renyuanDataList" @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>

            <div v-else>
                <empty-data-page></empty-data-page>
            </div>

        </md-scroll-view>
    </div>
</template>

<script>
    import {
        InputItem,
        Icon,
        ScrollView
    } from 'mand-mobile'
    import {personnelArchivesList} from '@/api/personnel_files';
    import {HeadBar, EmptyDataPage} from '@/components'


    export default {
        name: "",
        components: {
            [InputItem.name]: InputItem,
            [Icon.name]: Icon,
            [ScrollView.name]: ScrollView,
            [HeadBar.name]: HeadBar,
            [EmptyDataPage.name]: EmptyDataPage,
        },
        data() {
            return {
                aId: 0,
                cId: 0,
                renyuanDataList: [],
                searchVal: ''
            }
        },
        created() {
            this.aId = this.$route.query.aId
            this.cId = this.$route.query.cId
        },
        methods: {
            searchDetail(){
                personnelArchivesList({
                    aId: this.aId,
                    cId: this.cId,
                    keyword: this.searchVal
                }).then(res => {
                    const {code, data, count, limit, page} = res;
                    if (code === 200) {
                        this.renyuanDataList = data;
                        console.log(res)
                    }
                }).catch(err => {
                })
            },
            cancelSearch(){
              this.$router.go(-1)
            },
            $_onEndReached(){

            }
        }
    }
</script>

<style scoped lang="scss" type="text/scss">
.personnel-search{
    /*height: 100vh;*/
    background: #ffffff;
    .topbg{
        background: #F2F2F2;
        .search-input-wrap{
            padding: 15px;
            overflow:hidden;
            .search-left{
                width: 88%;
                float: left;
            }
            .cancel-btn{
                width: 12%;
                text-align: center;
                float: right;
                font-size: 0.28rem;
                margin-top: 0.3rem;
            }
            .search-input {
                border-radius: 10px;
                background: #FFF;
                padding: 0 15px;
            }
        }
    }
    .ulbox{
        /*margin-top:1rem;*/
        .list{
            padding: 0.2rem 0 0 0.15rem;
            overflow:hidden;
            img{
                width: 1rem;
                height: 1rem;
                float: left;
            }
            .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;
                }
            }
        }
    }

}
</style>