<template>
    <van-pull-refresh
        success-text="加载成功"
        success-duration="500"
        class="page"
        v-model="isLoading"
        @refresh="onRefresh"
    >
        <van-sticky>
            <van-tabs v-model:active="status" line-width="16" line-height="2" @change="getData(true)">
                <van-tab title="全部" name=""></van-tab>
                <van-tab title="待反馈" name="NO_REPLY"></van-tab>
                <van-tab title="已反馈" name="REPLIED"></van-tab>
                <van-tab title="处理中" name="PROCESSING"></van-tab>
                <van-tab title="已完成" name="COMPLETED"></van-tab>
            </van-tabs>
        </van-sticky>
        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <router-link
                class="message"
                :to="{
                    path: '/' + $route.params.companyId + 'messageDetail',
                    query: {
                        id: item.id
                    }
                }"
                v-for="(item, index) in list"
                :key="index"
            >
                <div class="top">
                    <div class="status" v-if="item.status" :class="{ prim: item.status === 'COMPLETED' }">
                        {{ getLabelName(item.status, statusOptions) }}
                    </div>
                    <div class="status" v-else :class="{ prim: item.reply }">
                        {{ item.reply ? '已反馈' : '待反馈' }}
                    </div>
                    <div class="text van-ellipsis">{{ item.detail }}</div>
                </div>
                <div class="time">
                    {{ item.createdAt }}
                </div>
            </router-link>
            <van-empty v-if="empty" description="什么留言都没有哦~" :image="require('@assets/kong.png')" />
        </van-list>
        <div class="bottom">
            <van-button type="primary" @click="$router.push('/' + $route.params.companyId + '/messageAdd')" round block
                >新建反馈</van-button
            >
        </div>
    </van-pull-refresh>
</template>

<script>
import list from '../../mixins/list';
export default {
    mixins: [list],
    data() {
        return {
            reply: '',
            list: [],
            empty: false,
            url: '/message/my',
            statusOptions: [
                { label: '已完成', value: 'COMPLETED' },
                { label: '处理中', value: 'PROCESSING' },
                { label: '已反馈', value: 'REPLIED' },
                { label: '未反馈', value: 'NO_REPLY' }
            ],
            status: ''
        };
    },
    methods: {
        beforeData() {
            return {
                query: {
                    status: this.status
                }
            };
        },
        onRefresh() {
            this.getData(true).then(() => {
                this.isLoading = false;
            });
        }
    }
};
</script>

<style lang="less" scoped>
.page {
    background-color: @bg3;
    --van-tab-active-text-color: var(--primlight);
    --van-tabs-bottom-bar-color: var(--primlight);
    --van-button-primary-background-color: var(--primlight);
}

/deep/.van-tab {
    margin-right: 0 !important;
    flex-grow: 1 !important;
}

.van-list {
    padding: 16px;
    box-sizing: border-box;
    min-height: calc(100vh - 94px);
}

.bottom {
    padding: 9px 52px;
    .bottom(9px);
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
.message {
    background: #ffffff;
    border-radius: 8px;
    padding: 12px 10px;
    // margin: 8px;
    display: block;
    .top {
        .flex();
        .status {
            background: rgba(255, 127, 31, 0.1);
            border-radius: 4px;
            padding: 0 10px;
            font-size: 12px;
            color: #ff7f1f;
            line-height: 20px;
            white-space: nowrap;

            &.prim {
                color: #3ab200;
                background: rgba(58, 178, 0, 0.1);
            }
        }

        .text {
            font-size: 14px;
            color: #000000;
            line-height: 24px;
            margin-left: 10px;
        }
    }

    .time {
        font-size: 12px;
        color: #c8c9cc;
        line-height: 17px;
        margin-top: 10px;
    }
}
.message + .message {
    margin-top: 16px;
}
</style>
