<template>
    <div class="report">
        <van-sticky :offset-top="barHeight">
            <van-tabs
                swipeable
                v-model:active="active"
                @change="changeTab"
                shrink
                line-width="28"
                line-height="2"
                scrollspy
            >
                <van-tab title="全部"> </van-tab>
                <van-tab title="待反馈"></van-tab>
                <van-tab title="已反馈"></van-tab>
            </van-tabs>
        </van-sticky>
        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <div class="report-info" v-for="(item, index) in list" :key="index" @click="goDetail(item.id)">
                <div class="report-top">
                    <div class="status">{{ getLabelName(item.status, statusOptions) }}</div>
                    <div class="text1">{{ item.title }}</div>
                </div>
                <div class="time">提交时间:{{ item.createdAt }}</div>
            </div>
            <van-empty
                v-if="empty"
                description="当前没有申报纪录哦～"
                :image="require('../../assets/kong-pimg-zhanji.png')"
            />
        </van-list>
    </div>
</template>

<script>
import list from '../../mixins/list.js';
export default {
    data() {
        return {
            active: 0,
            url: '/report/my',
            httpType: 'get',
            statusOptions: [
                { label: '待反馈', value: 'OPEN' },
                { label: '已反馈', value: 'CLOSED' }
            ]
        };
    },
    inject: ['barHeight'],
    mixins: [list],
    methods: {
        changeTab() {
            this.$nextTick(() => {
                this.getData(true);
            });
        },
        goDetail(id) {
            this.$router.push({
                path: '/report',
                query: {
                    reportId: id
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
/deep/.van-tabs__nav {
    padding: 0 0 14px;
    justify-content: space-between;
}
/deep/.van-tab {
    padding: 0 16px;
}
.van-list {
    padding: 16px;
}

.report-info {
    background: #25283d;
    border-radius: 8px;
    padding: 12px 10px;

    .report-top {
        .flex();
        overflow: hidden;
        .status {
            font-size: 12px;
            color: #ffce2d;
            line-height: 20px;
            border-radius: 4px;
            border: 1px solid #ffce2d;
            padding: 0 10px;
            margin-right: 10px;
            flex-shrink: 0;
        }
        .text1 {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    .time {
        font-size: 12px;
        color: #6a6d83;
        line-height: 17px;
        margin-top: 10px;
    }
}

.report-info + .report-info {
    margin-top: 16px;
}
</style>
