<template>
    <div class="applyRecord">
        <!-- 头部 -->
        <van-nav-bar fixed title="申请记录">
            <template #left>
                <img src="../../assets/images/back.png" alt="" @click="goBack" />
            </template>
        </van-nav-bar>

        <!-- 领取记录 -->
        <div class="height_44"></div>
        <template v-if="detailList.length != 0">
            <div class="apply_block" v-for="(item, index) in detailList" :key="item.id">
                <div class="top">
                    <div :class="item.status === 1 ? 'orange' : (item.status === 2 ? 'green' : 'gray')">{{item.statusName}}</div>
                    <span>{{item.parentDate}}</span>
                </div>
                <div class="center">
                    <div class="content">
                        <span>女方姓名</span>
                        <span>{{item.womanName}}</span>
                    </div>
                    <div class="content margin_b8">
                        <span>证件号码</span>
                        <span>{{item.womenIdCard}}</span>
                    </div>
                    <div class="content margin_b8">
                        <span>联系电话</span>
                        <span>{{item.telephone}}</span>
                    </div>
                </div>
                <div class="bottom">
                    <span @click="handleClick(item)">查看详情</span>
                </div>
                <div class="bottom_back" v-if="index != detailList.length-1"></div>
            </div>

        </template>
        <van-empty v-else description="暂无申请记录" />
    </div>
</template>
<script>
import {getApplyRecord} from '@/axios/api'
export default {
    data() {
        return {
            detailList: [],
            scrollPosition: 0,
        }
    },
    created() {
        // this.getApplyRecordList();
    },
    activated() {
        if (!this.$route.meta.isBack) {
            this.getApplyRecordList();
        } else {
            window.scrollTo(0, this.scrollPosition);
        };
    },
    methods: {
        getApplyRecordList() {
            let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
            this.$toast.open();
            getApplyRecord(userInfo.userId).then(res => {
                if (res.code === 'SUCCESS') {
                    this.detailList = res.data;
                };
            }).finally(() => {
                this.$toast.close();
            });
        },
        // 查看详情
        handleClick(val) {
            this.$router.push({
                path: 'provideDetail',
                query: {
                    id: val.id,
                },
            });
        },
        // 返回
        goBack() {
            this.$router.push('provideUnit');
        },
    },

    beforeRouteLeave(to, from, next) {
        this.scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
        next();
    },

    beforeRouteEnter(to, from, next) {
        if (from.name === 'provideDetail') {
            to.meta.isBack = true;
        } else {
            to.meta.isBack = false;
        };
        next();
    },
}
</script>
<style lang="less" scoped>
.applyRecord {
    height: 100%;
    // height: calc(100% - 50px);
    background-color: #F1F1F1;

    .apply_block {
        margin-top: 8px;
        height: 180px;
        background-color: #fff;
        padding: 0 16px;
        box-sizing: border-box;


        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #F0F0F0;
            margin-bottom: 8px;
            height: 40px;
            :first-child {
                width: 49px;
                height: 19px;
                color: #fff;
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 4px;
                margin: 13px 0 8px 0;
            }
            .green {

                background-color: #79BC7F;
            }
            .orange {
                background-color: #FBC068;
            }
            .gray:first-child {
                width: 62px;
                color: #262626;
            }
            .gray {
                background-color: #E5E5E5;
            }
            span {
                font-size: 12px;
                color: #BFBFBF;
            }
        }

        .center {
            font-size: 12px;
            line-height: 22px;
            border-bottom: 1px solid #F0F0F0;

            .content {
                height: 22px;
                margin-bottom: 4px;
                :first-child {
                    color: #8C8C8C;
                }
                :last-child {
                    color: #262626;
                    margin-left: 15px;
                }
            }
            .margin_b8 {
                margin-bottom: 8px;
            }
        }

        .bottom {
            display: flex;
            justify-content: center;
            align-items: center ;
            height: 38px;
            font-size: 14px;
            letter-spacing: 1px;
            color: #E35946;
        }

        .bottom_back {
            margin: 0 -16px;
            height: 8px;
            background-color: #F1F1F1;
        }
    }
}
</style>