<template>
    <div class='replenishment-picking-list'>
        <van-sticky>
            <van-tabs v-model="active" >
                <van-tab title="全部"></van-tab>
                <van-tab title="备货中"></van-tab>
                <van-tab title="">
                    <div slot="title">

                        <van-badge :content="5">
                        待领料
                        </van-badge>
                    </div>
                </van-tab>
                <van-tab title="已领料"></van-tab>
                <van-tab title="已驳回"></van-tab>
            </van-tabs>
        </van-sticky>
        <CustomList 
			ref="customList"
            :searchfun="false"
			@onLoad="onLoad">
			<div class="list plr15 pt10">
                <div v-for="(item, i) in list" :key="i" class="item bgc-fff plr15 c-333 fs-14">
                    <div class=" ptb10 kitbox bb-e1e1e1">
                        <div class="box-flex-1 fs-14">备货单号:Q1090811559890001</div>
                        <div class="">
                            <span class="c-ff9526">备货中</span>
                            <!-- <span class="c-17b3ec">待领料</span>
                            <span class="c-999">已领料</span>
                            <span class="c-ff5e6c">已驳回</span> -->
                        </div>
                    </div>
                    <div class="lh20 ptb10 kitbox">
                        <div class="box-flex-1">
                            <div class="row">
                                <div>补货员</div>
                                <div>张三</div>
                            </div>
                            <div class="row">
                                <div>待补设备</div>
                                <div>总健信联1号</div>
                            </div>
                            <div class="row">
                                <div>待补品类</div>
                                <div>10</div>
                            </div>
                            <div class="row">
                                <div>待补库存</div>
                                <div>60</div>
                            </div>
                            <div class="row">
                                <div>单据日期</div>
                                <div>2021-09-10 15:00:41</div>
                            </div>
                        </div>
                        <div class="fs-20 c-pr">
                            <van-icon name="arrow" />
                        </div>
                    </div>
                </div>
            </div>
		</CustomList>
    </div>
</template>
<script>
    export default{
        name: 'replenishmentDeviceList',
        data(){
            return {
                list: [],
            }
        },
        created() {
            
        },
        methods:{
            onLoad({page, pageSize, searchText}){
                setTimeout(()=>{
                    for(var i=0; i<pageSize; i++){
                        this.list.push((page-1)*pageSize + i)
                    }
                    this.$refs.customList.endLoad(page==5, this.list.length)
                }, 1000)
                return
                var that = this, 
                    params = {
                        orgCode: this.$store.getters.orgCode,
                        doctorNameKey: searchText,
                        dept: this.routerParam.dept,
                        diseaseKey: this.routerParam.disease,
                        page: page,
                        pagesize: pageSize
                    };
                
                zhuanjiazixunApi
                    .findDoctorByHospitalAndDiseaseAndDept(params)
                    .then(res=>{
                        if(res.status == 200){
                            var list = res.detailModelList.map(item=>{
                                var data = item
                                data.photo = this.$root.setDocPhoto(data.photo)
                                return data
                            })
                            this.list = page==1? list : this.list.concat(list)
                            this.$refs.customList.endLoad(!res.detailModelList || res.detailModelList.length==0, this.list.length)
                        } else {
                            this.$refs.customList[this.active].endLoad(false, true)
                        }
                    }).catch(err=>{
                        console.error(err)
                        this.$refs.customList[this.active].endLoad(false, true)
                    })
            },
        },
    }
</script>
<style lang='scss' scoped>
.replenishment-picking-list{
    ::v-deep .van-tab{
        &:nth-child(3){
            .van-tab__text{
                overflow: visible;
            }
        }
    }
    .list{
        .item{
            margin-bottom: 10px;
            border-radius: 5px;
            &:last-child{
                margin-bottom: 0;
            }
            .van-icon{
                position: absolute;
                top: 50%;
                transform: translateY(calc(-50% - 15px));
                right: 0;
                color: #ccc;
            }

            .row{
                display: -webkit-box;
                div{
                    &:first-child{
                        width: 60px;
                        position: relative;
                        text-align: justify;
                        text-align-last: justify;
                        margin-right: 12px;
                        &::after{
                            content: "：";
                            display: inline-block;
                            position: absolute;
                            right: -14px;
                            top: 0;
                        }
                    }
                }
            }
        }
    }  

}
</style>