<script lang="ts">
export default {
    name: "audit",
};
</script>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElForm, ElMessage } from "element-plus";
import { Search, Refresh, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import router from "@/router";
import {
    memberRealNameList,
    memberCheckPass,
    memberCheckNotPass,
} from "@/api/member/audit";
import {
    AuditQueryParam,
    AuditItem,
    CheckNotPassForm,
} from "@/types/api/member/audit";
import { fa } from "element-plus/es/locale";

const emit = defineEmits(["memberClick"]);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);

const applyStatusMap = {
    "0": "待审核",
    "1": "审核失败",
    "2": "审核成功",
    "": "全部",
};

const state = reactive({
    loading: true,
    id: 0,
    active: 0,
    searchBox: {
        title: "展开搜索",
        expand: false,
    },
    queryParams: {
        pageNo: 1,
        pageSize: 15,
        account: "",
        cardNo: "",
        auditStatus: "",
    } as AuditQueryParam,
    auditList: [] as AuditItem[],
    total: 0,
    memberCheckMask: false,
    authImg: {
        front: "",
        inHand: "",
        reverse: "",
    },
    dialog: {
        title: "",
        visible: false,
    },
    formData: {} as CheckNotPassForm,
});

const {
    loading,
    active,
    searchBox,
    queryParams,
    auditList,
    total,
    memberCheckMask,
    authImg,
    dialog,
    formData,
} = toRefs(state);

function handleQuery() {
    emit("memberClick", {});
    state.loading = true;
    memberRealNameList(state.queryParams).then(({ data }) => {
        state.auditList = data.content;
        state.total = data.totalElements;
        state.loading = false;
    });
}

/**
 * 排序
 */
function handleSortChange(column: any) {
    var sortingType = column.order;
    state.queryParams.property = column.prop;
    if (sortingType === "ascending") {
        state.queryParams.direction = "1";
    } else if (sortingType === "descending") {
        state.queryParams.direction = "0";
    } else {
        state.queryParams.property = null;
        state.queryParams.direction = null;
    }
    handleQuery();
}

/**
 * 查询重置
 */
function resetQuery() {
    queryFormRef.value.resetFields();
    handleQuery();
}

const goAuditdetail = (row: any) => {
    emit("memberClick", row);
    router.push({ path: "memberauditdetail", query: { id: row.id } });
};

const showMemberCheckMask = (row: any) => {
    state.memberCheckMask = true;
    state.id = row.id;
    state.active = 0;
    state.authImg = {
        front: row.identityCardImgFront,
        inHand: row.identityCardImgInHand,
        reverse: row.identityCardImgReverse,
    };
};

const hideMemberCheckMask = () => {
    state.memberCheckMask = false;
    state.active = 0;
};

const preStep = () => {
    if (active.value-- < 0) active.value = 0;
};

const nextStep = () => {
    if (active.value++ > 2) active.value = 2;
};

const memberPass = (bol: boolean) => {
    if (bol) {
        memberCheckPass(state.id)
            .then((res: any) => {
                if (!res.code) {
                    ElMessage.success(res.message);
                    hideMemberCheckMask();
                    handleQuery();
                } else {
                    ElMessage.error(res.message);
                }
            })
            .catch((err: any) => {
                console.log(err);
            });
    } else {
        hideMemberCheckMask();
        state.dialog = {
            title: "请备注失败原因(选填)",
            visible: true,
        };
    }
};

/**
 * 提交
 */
function submitFormData() {
    dataFormRef.value.validate((valid: any) => {
        if (valid) {
            loading.value = true;
            memberCheckNotPass(state.id, state.formData)
                .then((res: any) => {
                    if (!res.code) {
                        ElMessage.success(res.message);
                        cancel();
                        loading.value = false;
                        handleQuery();
                    } else {
                        ElMessage.error(res.message);
                        cancel();
                        loading.value = false;
                    }
                })
                .catch(() => {
                    loading.value = false;
                });
        }
    });
}

/**
 * 取消
 */
function cancel() {
    dialog.value.visible = false;
    formData.value.rejectReason = "";
    dataFormRef.value.resetFields();
    dataFormRef.value.clearValidate();
}

const closeSearch = () => {
    state.searchBox.expand = !state.searchBox.expand;
    state.searchBox.title = !state.searchBox.expand ? "展开搜索" : "收起搜索";
};

onMounted(() => {
    handleQuery();
});
</script>

<template>
    <div class="app-container">
        <!-- 搜索表单 -->
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item prop="account">
                <el-tooltip
                    content="请输入用户名或姓名搜索"
                    placement="bottom"
                    effect="light"
                >
                    <el-input
                        v-model="queryParams.account"
                        placeholder="请输入用户名或姓名搜索"
                        style="width: 300px"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-tooltip>
            </el-form-item>
            <el-form-item prop="cardNo" v-show="searchBox.expand">
                <el-tooltip
                    content="请输入身份证号搜索"
                    placement="bottom"
                    effect="light"
                >
                    <el-input
                        v-model="queryParams.cardNo"
                        placeholder="请输入身份证号搜索"
                        style="width: 300px"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-tooltip>
            </el-form-item>
            <el-form-item prop="auditStatus" v-show="searchBox.expand">
                <el-select
                    v-model="queryParams.auditStatus"
                    class="filter-item"
                    placeholder="请选择"
                    style="width: 100px"
                >
                    <el-option
                        v-for="(key, value) in applyStatusMap"
                        :key="key"
                        :label="key"
                        :value="value"
                    />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" :icon="Search" @click="handleQuery"
                    >搜索</el-button
                >
                <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
                <el-button
                    link
                    @click="closeSearch"
                    style="border: 0"
                    size="small"
                >
                    {{ searchBox.title }}
                    <template v-if="searchBox.expand"
                        ><el-icon class="el-icon--right"><ArrowUp /></el-icon
                    ></template>
                    <template v-else
                        ><el-icon class="el-icon--right"><ArrowDown /></el-icon
                    ></template>
                </el-button>
            </el-form-item>
        </el-form>

        <!-- 数据表格 -->
        <el-table
            ref="dataTableRef"
            v-loading="loading"
            :data="auditList"
            @sort-change="handleSortChange"
            highlight-current-row
            border
        >
            <el-table-column
                label="编号"
                prop="id"
                min-width="60"
                align="center"
            />
            <el-table-column label="会员ID" min-width="80" align="center">
                <template #default="scope">
                    {{ scope.row.member.id }}
                </template>
            </el-table-column>
            <el-table-column label="用户名" min-width="130" align="center">
                <template #default="scope">
                    {{ scope.row.member.username }}
                </template>
            </el-table-column>
            <el-table-column
                label="真实姓名"
                prop="name"
                min-width="110"
                align="center"
            />
            <el-table-column
                label="身份证号码"
                prop="idCard"
                min-width="180"
                align="center"
            />
            <el-table-column
                label="注册时间"
                prop="member.registrationTime"
                min-width="160"
                align="center"
                sortable="custom"
            >
                <template #default="scope">
                    {{ scope.row.member.registrationTime }}
                </template>
            </el-table-column>
            <el-table-column
                label="状态"
                prop="auditStatus"
                min-width="100"
                align="center"
                sortable="custom"
            >
                <template #default="scope">
                    <span v-if="scope.row.auditStatus == 0">待审核</span>
                    <span v-else-if="scope.row.auditStatus == 1">审核失败</span>
                    <span v-else-if="scope.row.auditStatus == 2">审核成功</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="160"
                fixed="right"
            >
                <template #default="scope">
                    <el-button
                        v-if="scope.row.auditStatus == 0"
                        type="primary"
                        size="small"
                        @click.stop="showMemberCheckMask(scope.row)"
                    >
                        待审核
                    </el-button>
                    <el-button
                        v-else
                        type="success"
                        size="small"
                        @click.stop="goAuditdetail(scope.row)"
                    >
                        查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页工具条 -->
        <pagination
            v-if="total > 0"
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
        />

        <div class="memberCheckMask" v-show="memberCheckMask">
            <div class="wrapper">
                <el-steps
                    :active="active"
                    finish-status="success"
                    :align-center="true"
                >
                    <el-step title="身份证正面" />
                    <el-step title="身份证手持" />
                    <el-step title="身份证反面" />
                </el-steps>
                <el-row class="img">
                    <div
                        style="
                            width: 100%;
                            height: 100%;
                            border: 1px solid #000;
                        "
                    >
                        <img :src="Object.values(authImg)[active]" />
                    </div>
                    <span class="preStep" v-show="!!active" @click="preStep"
                        >上一步 &lt;
                    </span>
                    <span
                        class="nextStep"
                        v-show="!(active === 2)"
                        @click="nextStep"
                    >
                        &gt; 下一步</span
                    >
                </el-row>
                <el-row v-show="!(active === 2)">
                    <el-button
                        type="primary"
                        class="audit-check-cancel"
                        @click="hideMemberCheckMask"
                        >取消</el-button
                    >
                </el-row>
                <el-row v-show="active === 2">
                    <el-button
                        type="success"
                        class="audit-check-cancel"
                        @click="memberPass(true)"
                        >审核通过</el-button
                    >
                    <el-button
                        type="danger"
                        class="audit-check-cancel"
                        @click="memberPass(false)"
                        >审核不通过</el-button
                    >
                </el-row>
            </div>
        </div>

        <!-- 用户平仓弹窗 -->
        <el-dialog
            :title="dialog.title"
            v-model="dialog.visible"
            width="500px"
            destroy-on-close
        >
            <el-form ref="dataFormRef" :model="formData" label-width="100px">
                <el-form-item label-width="0" prop="rejectReason">
                    <el-input
                        type="textarea"
                        v-model="formData.rejectReason"
                        placeholder="请输入失败原因"
                    />
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button
                        type="primary"
                        :loading="loading"
                        @click="submitFormData"
                        >确 定</el-button
                    >
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss">
.el-step__title.is-process {
    color: #2d8cf0;
}
.el-step__title.is-wait {
    color: #fff;
}
.is-process .el-step__icon {
    background-color: #2d8cf0;
    color: #fff;
}
.el-step__line {
    background-color: #fff;
}
.el-step__icon.is-text {
    border: 0;
}
.dropdown-text {
    margin-left: 12px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
}
.memberCheckMask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    .wrapper {
        width: 800px;
        height: 450px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform: translate(-37.5%, -50%);
        background-color: gray;
        padding: 50px;
        .img {
            margin: 0 auto;
            width: 60%;
            height: 60%;
            .ivu-spin {
                position: absolute;
                width: 100%;
                height: 100%;
                background: #fff;
                text-align: center;
                .ivu-spin-main {
                    position: absolute;
                    transform: translate(-50%, -50%);
                    top: 50%;
                    left: 50%;
                }
            }
            img {
                width: 100%;
                height: 100%;
            }
            .nextStep,
            .preStep {
                position: absolute;
                top: 50%;
                left: 105%;
                display: inline-block;
                width: 100px;
                font-size: 18px;
                color: #fff;
                cursor: pointer;
            }
            .preStep {
                left: unset;
                right: 100%;
            }
        }
        .btns {
            margin-top: 15px;
        }
    }
}
.audit-check-cancel {
    width: 100px;
    margin: 10px auto 0 auto;
}
</style>
