<template>
    <view>
        <view class="registration" v-for="(one, index) of list">
            <view class="calendar">
                <view class="month">{{ one.month }}月</view>
                <view class="day">{{ one.day }}日</view>
            </view>
            <view class="content">
                <view class="row">
                    <text class="deptSubName">{{ one.name }}（{{ one.job }}）</text>
                    <view class="more" @tap="moreHandle(one.id)">
                        <text>more</text>
                        <u-icon name="arrow-right" color="#aaa" size="14"></u-icon>
                    </view>
                </view>
                <view class="row">
                    <text class="address">地址：{{ one.location }}</text>
                </view>
                <view class="row">
                    <text class="datetime">时间：{{ one.date }} {{ one.time }}</text>
                </view>
                <view class="unpaid" v-if="one.paymentStatus == 1 && !one.discarded">
                    <u-button type="primary" size="small" @click="payHandle(one.id, index)">待支付</u-button>
                </view>
                <view class="paid" v-if="one.paymentStatus == 2">已支付</view>
                <view class="refund" v-if="one.paymentStatus == 3">已退款</view>
                <view class="discarded" v-if="one.paymentStatus == 4 || one.discarded">已过期</view>
            </view>
        </view>
    </view>
</template>

<script>
let dayjs = require('dayjs');
const isBetween = require('dayjs/plugin/isBetween');
dayjs.extend(isBetween);
export default {
    data() {
        return {
            list: [],
            page: 1,
            length: 50,
            json: {
                '1': '08:00',
                '2': '08:30',
                '3': '09:00',
                '4': '09:30',
                '5': '10:00',
                '6': '10:30',
                '7': '11:00',
                '8': '11:30',
                '9': '13:00',
                '10': '13:30',
                '11': '14:00',
                '12': '14:30',
                '13': '15:00',
                '14': '15:30',
                '15': '16:00'
            },
            reload: true
        };
    },
    methods: {
        loadData: function() {
            let that = this;
            let data = {
                page: that.page,
                length: that.length
            };
            that.ajax(
                that.api.searchRegistrationByPage,
                'POST',
                data,
                function(resp) {
                    let result = resp.data.result;
                    for (let one of result.list) {
                        if (['主任医师', '副主任医师'].includes(one.job)) {
                            one.job = '专家';
                        } else {
                            one.job = '普通';
                        }

                        let temp = dayjs(one.date);
                        one.month = temp.format('MM');
                        one.day = temp.format('DD');
                        one.time = that.json[one.slot];
                        let now = dayjs();
                        let rangeStart = dayjs(`${one.date} ${one.time}`);
                        let rangeEnd = rangeStart.add(30, 'minute');
                        //判断该挂号记录是否已过期
                        if (one.paymentStatus == 1 && (now.isBetween(rangeStart, rangeEnd) || now.isAfter(rangeEnd))) {
                            one.discarded = true;
                        } else {
                            one.discarded = false;
                        }
                    }
                    that.list = that.list.concat(result.list);
                },
                false
            );
        },
        moreHandle: function(id) {
            uni.navigateTo({
                url: '/registration/registration_info/registration_info?id=' + id
            });
        }
    },
    onShow: function() {
        if (this.reload) {
            this.page = 1;
            this.list.length = 0;
            this.loadData();
        }
    },
    onReachBottom: function() {
        that.page++;
        that.loadData();
    }
};
</script>

<style lang="less">
@import url(registration_list.less);
</style>
