<template>
    <div class='order-list'>
        <van-sticky>
            <div class="top-banner kitbox fs-14 ptb10 pl15">
                <div @click="pickDate(1)" class="date-item">{{$moment(startDate).format('YYYY-MM-DD')}}</div>
                <div class="ptb5 plr10">至</div>
                <div @click="pickDate(2)" class="date-item">{{$moment(endDate).format('YYYY-MM-DD')}}</div>
                <div class="pl15 pt2">
                    <van-button @click="onSearch" type="info" size="mini">搜索</van-button>
                </div>
                <div class="fs-25 pr15 tr box-flex-1 pt3 c-pr">
                    <van-dropdown-menu>
                        <van-dropdown-item ref="dropdown" v-model="value1" :options="option1" />
                    </van-dropdown-menu>
                    <van-icon class="block" @click.stop="$refs.dropdown.toggle()" name="filter-o" />
                </div>
            </div>
        </van-sticky>
        <CustomList 
			ref="customList"
            :searchfun="false"
			@onLoad="onLoad">
			<div class="list plr15">
                <div v-for="(item, i) in list" :key="i" class="item plr15 c-333 fs-14">
                    <div class="kitbox ptb10 bb-e1e1e1">
                        <div class="box-flex-1 fs-14">D2021090811040440280122</div>
                        <div class="">待取货</div>
                        <!-- <div class="c-17b3ec">取货成功</div> -->
                    </div>
                    <div class="lh20 ptb10">
                        <div>订单类型：取货订单</div>
                        <div>开方时间：2021-09-08 11:04</div>
                        <div>存取信息：取药码 43057502</div>
                    </div>
                    <div class="ptb10 bt-e1e1e1">￥120</div>
                </div>
            </div>
		</CustomList>

        <van-popup v-model="datePickerShow" position="bottom"  >
            <van-datetime-picker
                v-model="currentDate"
                @confirm="onPick"
                @cancel="datePickerShow=false"
                type="date"
                title=""
                :max-date="maxDate"
            />
        </van-popup>

        <div class="filter-panel">

        </div>
    </div>
</template>
<script>
    export default{
        name: 'orderList',
        data(){
            return {
                list: [],
                currentDate: new Date(),
                maxDate: new Date(),
                datePickerShow: false,
                startDate: new Date(),
                endDate: new Date(),
                pickType: 1,

                value1: '',
                option1: [
                    { text: '全部商品', value: 0 },
                    { text: '新款商品', value: 1 },
                    { text: '活动商品', value: 2 },
                ],
            }
        },
        created() {
            
        },
        methods:{
            onLoad({page, pageSize, searchText}){
                setTimeout(()=>{
                    for(var i=0; i<pageSize; i++){
                        this.list.push((page-1)*pageSize + i)
                    }
                    console.log(this.list)
                    debugger
                    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)
                    })
            },
            pickDate(pickType){
                this.pickType = pickType
                this.currentDate = pickType ==1? this.startDate : this.endDate
                this.datePickerShow = true
            },
            onPick(){
                var date = this.$moment(this.currentDate).toDate()
                if(this.pickType ==1){
                    this.startDate = date
                } else {
                    this.endDate = date
                }
                this.datePickerShow = false
            },
            onSearch(){
                this.list = []
                this.$refs.customList.refresh(true)
            }
        },
    }
</script>
<style lang='scss' scoped>
.order-list{
    .top-banner{
        background: #f2f3f5;
        .date-item{
            padding: 5px 10px;
            border: 1px solid #ccc;
            background: #fff;
            color: #333;
            border-radius: 30px;
            // line-height: 21px;
        }
        .van-button--mini{
            height: 28px;
            width: 60px;
        }
        ::v-deep .van-dropdown-menu__bar{
            position: absolute;
            bottom: -10px;
            .van-dropdown-menu__item{
                display: none;
            }
        }
    }
    .list{
        .item{
            border: 1px solid #e1e1e1;
            background: #fff;
            margin-bottom: 10px;
            &:last-child{
                margin-bottom: 0;
            }
        }
    }
}
</style>