<template>
    <div class="content">
        <div class="header">
            <u-navbar
                :background="{backgroundColor: '#ffcb57'}"
                :border-bottom="false"
                title="申请管理"
                title-color="#472d21"
            ></u-navbar>
        </div>
        <view class="wrap">
            <view class="u-tabs-box">
                <view class="pl">
                    <u-tabs-swiper
                        activeColor="#ffcb57"
                        font-size="26"
                        ref="tabs"
                        :list="list"
                        :current="current"
                        @change="change"
                    ></u-tabs-swiper>
                </view>
            </view>
            <swiper
                class="swiper-box"
                :current="swiperCurrent"
                @transition="transition"
                @animationfinish="animationfinish"
            >
                <swiper-item class="swiper-item" v-for="(tablist, index) in tabLists" :key="index">
                    <scroll-view scroll-y style="height: 100%;width: 100%;">
                        <view class="page-box">
                            <view class="u-flex u-row-center u-margin-top-24" v-show="showLoading">
                                <u-loading mode="flower"></u-loading>
                            </view>
                            <u-empty
                                text="没有数据"
                                mode="list"
                                margin-top="80"
                                v-if="tablist.length === 0 && !showLoading"
                            ></u-empty>
                            <u-card
                                v-for="item in tablist"
                                :key="item.FBillNo"
                                :title="item.FApplyName"
                                :sub-title="item.FBillNo"
                                :show-foot="index === 0"
                                thumb="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"
                            >
                                <view slot="body">
                                    <view class="line">
                                        <span class="title">手机：</span>
                                        <span class="content">{{item.FApplyPhone}}</span>
                                    </view>
                                    <view class="line">
                                        <span class="title">备注：</span>
                                        <span class="content">{{item.FNote || '无'}}</span>
                                    </view>
                                </view>
                                <view slot="foot">
                                    <u-button
                                        size="mini"
                                        type="error"
                                        hover-class="defaultBtnhover"
                                        @click="handleRefuse(item)"
                                    >拒绝</u-button>
                                    <u-button
                                        size="mini"
                                        hover-class="defaultBtnhover"
                                        :custom-style="{marginLeft: '48rpx'}"
                                        @click="pass(item)"
                                    >通过</u-button>
                                </view>
                            </u-card>
                        </view>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>
        <u-toast ref="uToast" />
    </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import request from '../../common/service';
export default {
    data() {
        return {
            list: [{ name: '待审核' }, { name: '已通过' }, { name: '已拒绝' }],
            current: 0,
            swiperCurrent: 0,
            tabsHeight: 0,
            dx: 0,
            tabLists: [[], [], []],
            showLoading: false,
        };
    },
    computed: {},
    onLoad() {},
    onShow() {
        this.getMembers();
    },
    methods: {
        async getMembers(id) {
            this.showLoading = true;
            const response = await request.get('/api/Business/GetApplyJoin');
            this.showLoading = false;
            const { code, message, result } = response;
            if (code === 0) {
                this.tabLists[0] = result.filter((x) => !['TG', 'BTG'].includes(x.FCHECKRESULT));
                this.tabLists[1] = result.filter((x) => x.FCHECKRESULT === 'TG');
                this.tabLists[2] = result.filter((x) => x.FCHECKRESULT === 'BTG');
            } else {
                this.$refs.uToast.show({
                    title: message,
                });
            }
        },
        handleRefuse(data) {
            this.$u.route('/pages/applyjoin/refuse/index', { billNo: data.FBillNo });
        },
        async pass(data) {
            const response = await request.post('/api/Business/ApplyJoinAudit', {
                FNumber: data.FBillNo,
                FCheckResult: 'TG',
            });
            const { code, message, result } = response;
            if (code === 0) {
                this.$refs.uToast.show({
                    title: '已审核',
                });
            } else {
                this.$refs.uToast.show({
                    title: message,
                });
            }
            this.getMembers();
        },
        // tab栏切换
        change(index) {
            this.swiperCurrent = index;
        },
        transition({ detail: { dx } }) {
            this.$refs.tabs.setDx(dx);
        },
        animationfinish({ detail: { current } }) {
            this.$refs.tabs.setFinishCurrent(current);
            this.swiperCurrent = current;
            this.current = current;
        },
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '京台分享更多精彩',
            path: '/pages/index/index',
            imageUrl: '/static/images/share/WechatIMG96.png'
        };
    },
};
</script>

<style lang="scss" scoped>
.content {
    .header {
        background-color: #ffcb57;
    }
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        .search {
            padding: 30rpx 16rpx;
        }
        .swiper-box {
            flex: 1;
        }
        .swiper-item {
            height: 100%;
        }
        .gdtemplate {
            display: flex;
            align-items: flex-start;
            .left {
                margin-right: 20rpx;
                image {
                    width: 200rpx;
                    height: 200rpx;
                    border-radius: 10rpx;
                }
            }
            .right {
                .title {
                    font-size: 28rpx;
                    line-height: 50rpx;
                }
                .type {
                    margin: 10rpx 0;
                    font-size: 24rpx;
                    color: $u-tips-color;
                }
                .extra {
                    .exitem {
                        .title {
                            color: #595959;
                            font-size: 24rpx;
                        }
                    }
                }
            }
        }
        .action {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            /deep/.u-btn {
                margin-left: 12rpx;
            }
        }
    }
    .fixed-bottom-button {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffcb57;
        font-size: 28rpx;
        color: #472d21;
        padding-top: 24rpx;
        padding-bottom: 24rpx;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
    }
    .fixBtn {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 32rpx;
        bottom: 180rpx;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background-color: #ffcb57;
        color: #472d21;
        box-shadow: 0 0 6rpx #595959;
        z-index: 200000;
    }
    .line {
        margin-bottom: 12rpx;
        &:last-child {
            margin-bottom: 0;
        }
        .title {
            display: inline-block;
            width: 120rpx;
        }
    }
}
</style>
