<template>
    <view class="visitOrderList"> 
        <view class="card" v-for="item in listData" :key="item.id" @click.native="goToVisitDetails(item)">
            <view class="card-body">
                <view class="card-header">
                    <text>{{formatGMT(item.bookingTime,'D')}}</text>
                    <text 
                        class="header-tag tag-checking" 
                        :class="{'tag-reject':item.statusLabel == '已拒绝','tag-checked':item.statusLabel == '已审核待入场'}">
                        {{item.statusLabel}}</text>
                </view>
                <u-line color="#E5E5E5" margin="20rpx 0" />
                <view class="card-content">
                    <view class="mt-24 flex">
                        <u-icon name="map-fill" color="#2E75E6"></u-icon>
                        <text class="address overflowOmitRow">{{item['address.name']}}</text>
                    </view>
                    <view class="mt-24">{{item.visitedDepartment}}</view>
                    <view>{{item.driverName}}</view>
                </view>
            </view>
        </view>
        <!-- 空状态 -->
		<view class="emptyImg flex_col" v-if="!listData.length">
			<image mode="aspectFit" src="../../static/img/empty/shipmentEmpty.png" />
			<text class="empty-text">暂时没有拜访单</text>
		</view>
        <bs-tabbar value="visitOrder"></bs-tabbar>
    </view>
</template>

<script>
    import {getVisitOrder} from '@/api/apiList.js'
    import {formatGMT} from "@/utils/util"
    import { TokenPrefix } from '@/publicConfig/config.js'
    export default{
        data() {
            return {
                formatGMT,
                listData:[],
                pageNum:1,
                pageSize:20,
                loadMore:true,
                queryUrl:""
            }
        },
        onShow(){
            uni.setStorageSync('showTabbars', true)
            let XSRFToken = uni.getStorageSync(`${TokenPrefix}_XSRFToken`)
            if(!XSRFToken){
                uni.setStorageSync('backUrl', '/subpkg/visitOrderList/visitOrderList')
                uni.navigateTo({url:'/pages/login/login'})
            }
            uni.hideHomeButton()
            uni.setNavigationBarTitle({ title: '运匠运输管理系统' })
            this.onRefresh()
        },
        onPullDownRefresh(){
            this.onRefresh();
        },
        onReachBottom() {
            if(this.loadMore){
                this.initData();
                this.loadMore = false;
            }
        },
        methods: {
            initData(){
                this.getVisitOrderList();
            },
            getVisitOrderList(){
                const { pageNum, pageSize } = this  
                let params = {
                    "args": { pageNum, pageSize},
                }	
                getVisitOrder(params).then(res=>{
                    uni.stopPullDownRefresh()
                    const data = res.data.data.datas
                    if (data.length > 0) {
                        this.listData = this.listData.concat(data)
                        this.pageNum += 1
                        this.loadMore = true
                    }
                })
            },
            onRefresh() {
                this.pageNum = 1
                this.listData = []
                this.initData()
            },
            goToVisitDetails(item){
                uni.navigateTo({url:"/subpkg/visitOrderDetail/visitOrderDetail?id="+item.id})
            }
        },
    }
</script>

<style lang="scss" scoped>
.visitOrderList{
    padding-bottom: 24rpx;
    background-color: #fafafa;
    .emptyImg {
            height: 100vh;
			align-items: center;

			image {
				width: 609rpx;
			}

			.empty-text {
				font-size: 28rpx;
				text-align: center;
				color: #BFBFBF;
			}
		}
}
.card{
    padding: 24rpx;
    background-color: #fafafa;
    padding-bottom: 0rpx;
    .card-body{
        background-color: #fff;
        border-radius: 24rpx;
        padding: 24rpx;
        font-size: 28rpx;
        box-shadow: 1px 3px 12px 0px rgba(0, 0, 0, 0.04);
    }
    .card-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #c8c8c8;
        .header-tag{
            font-size: 24rpx;
            border-radius: 8rpx;
            padding: 8rpx 16rpx;
            border-radius: 8rpx;
        }
        .tag-checked{
            color:rgba(102, 204, 204, 1) !important; 
            background: rgba(102, 204, 204, 0.1) !important;
        }
        .tag-checking{
            color:rgba(247, 166, 74, 1); 
            background: rgba(247, 166, 74, 0.1);
        } 
        .tag-reject{
            color:rgba(235, 47, 72, 1); 
            background: rgba(235, 47, 72, 0.1);
        }
    }
    .card-content{
        .mt-24{
            margin-bottom: 24rpx;
        }
        .address{
            font-size: 32rpx;
            font-weight: bold;
            margin-left: 16rpx;
        }
    }
}

</style>