<template>
    <view class="manage-check">
        <view class="mc-num-bar">
            <view class="mc-txt">审核 3 人</view>
        </view>
        <view class="mc-list">
            <view class="ml-item" v-for="i in 10" :key="i">
                <view class="mi-icon">
                    <trigger-icon :selected="isSelect" @click="isSelect = !isSelect"></trigger-icon>
                </view>
                <view class="mi-content">
                    <view class="mc-line">姓名：周小雨</view>
                    <view class="mc-line">登录账号：yaigigi</view>
                    <view class="mc-line">手机号码：18316362586</view>
                    <view class="mc-line">申请时间：2024-12-09 11:21:40</view>
                </view>
            </view>
        </view>
        <view class="mc-fixed">
            <view class="mf-selector">
                <view class="ms-icon">
                    <trigger-icon :selected="isSelect"></trigger-icon>
                </view>
                <view class="ms-view">全选</view>
            </view>
            <view class="mf-btn green" @click="passBtn">审核通过</view>
            <view class="mf-btn" @click="unPassBtn">不通过</view>
        </view>
        <not-pass-modal ref="notPassModal"></not-pass-modal>
        <pass-modal ref="passModal"></pass-modal>
    </view>
</template>

<script>
import not_pass_modal from "./modules/check/not_pass_modal.vue";
import pass_modal from "./modules/check/pass_modal.vue";
import trigger_icon from "../../components/trigger_icon.vue";
export default {
    components: {
        'not-pass-modal': not_pass_modal,
        'pass-modal': pass_modal,
        'trigger-icon': trigger_icon
    },
    data(){
        return {
            isSelect: false
        }
    },
    onLoad(){
        
    },
    methods: {
        passBtn(){
            this.$refs.passModal.show();
        },
        unPassBtn(){
            this.$refs.notPassModal.show();
        }
    }
}
</script>

<style lang="scss">
page{
    background: #fff;
}
.manage-check{
    @include isPd(384upx);
    .mc-num-bar{
        padding: 44upx 26upx;
        border-bottom: 1px solid #E1E1E1;
        .mc-txt{
            @include flcw(32upx, 44upx, #1A1A1A);
            @include tHide;
        }
    }
    .mc-list{
        padding: 0 24upx;
        .ml-item{
            display: flex;
            padding: 30upx 0upx;
            border-bottom: 1upx solid #D8D8D8;
            .mi-icon{
                flex-shrink: 0;
                margin-right: 36upx;
            }
            .mi-content{
                .mc-line{
                    @include flcw(28upx, 52upx, #333333);
                    @include tHide;
                }
            }

        }
    }
    .mc-fixed{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 10upx 24upx;
        @include isPd(10upx);
        background: #fff;
        .mf-selector{
            @include ctf;
            .ms-icon{
                margin-right: 20upx;
                flex-shrink: 0;
            }
            .ms-view{
                @include flcw(28upx, 40upx, #9C9C9F);
            }
        }
        .mf-btn{
            margin-top: 40upx;
            height: 112upx;
            text-align: center;
            border: 2upx solid $mColor;
            border-radius: 10upx;
            background: #fff;
            @include flcw(32upx, 108upx, $mColor, 500);
            &.green{
                background: $mColor;
                color: #fff;
            }
        }
    }
}
</style>