<template>
    <el-card class="!border-none" shadow="never">
        <el-page-header content="师傅认证资料详情" @back="$router.back()" />
    </el-card>
    <el-card shadow="never" class="mt-4 card !border-none" :body-style="{ padding: '20px 0px' }">
        <template #header>
            <span class="text-lg font-semibold">基本资料</span>
        </template>

        <div class="top-container">
            <div class="avatar">
                <div class="mb-2 ml-3">用户头像</div>
                <el-image style="width: 80px; height: 80px; border-radius: 50%" :src="userInfo?.headPortrait"
                    :preview-src-list="[userInfo.headPortrait!]" :fit="'cover'" hide-on-click-modal />
            </div>
        </div>

        <el-form label-position="right" label-width="auto" :model="userInfo" class="px-2 mt-6">
            <el-form-item label="真实姓名:">
                <div class="flex">
                    {{ parseEmpty(userInfo, 'name') }}
                </div>
            </el-form-item>
            <el-form-item label="年龄:">
                <div class="flex">
                    {{ parseEmpty(userInfo, 'age') }}
                </div>
            </el-form-item>
            <el-form-item label="性别:">
                <div class="flex">
                    {{ SexEnumMap[parseEmpty(userInfo, 'sex')] }}
                </div>
            </el-form-item>
            <el-form-item label="详细地址:">
                <div class="flex">
                    {{ parseAddress }}
                </div>
            </el-form-item>
            <el-form-item label="联系电话:">
                <div class="flex">
                    {{ parseEmpty(userInfo, 'mobile') }}
                </div>
            </el-form-item>
            <el-form-item label="身份证号码:">
                <div class="flex">
                    {{ parseEmpty(userInfo, 'idCard') }}
                </div>
            </el-form-item>
            <el-form-item label="身份证正反面照片:">
                <div class="flex gap-x-8">
                    <div class="idCardImg" v-for="(image, index) in idCardImageList" :key="index">
                        <span>{{ image.label }}</span>
                        <div class="img-wrapper">
                            <el-image class="img" :src="image.path" :preview-src-list="previewSrcList" fit="cover"
                                hide-on-click-modal />
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="服务类别:">
                <div class="flex category">
                    <div v-for="tag in tags" :key="tag.id">
                        <el-tag>{{ tag.name }}</el-tag>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="体检报告:" v-if="!isUploadPhysicalExamination">
                <div class="flex gap-[30px]">
                    <div class="flex flex-col" v-if="physicalByPdf.length > 0">
                        <span>pdf</span>
                        <el-button type="primary" @click="handlePreviewPdf">预览体检报告</el-button>
                    </div>
                    <div class="flex flex-col" v-if="physicalByImages.length > 0">
                        <span>图片</span>
                        <div class="flex gap-[10px]">
                            <el-image v-for="image in physicalByImages" style="width: 100px; height: 100px" :src="image"
                                fit="cover" :preview-src-list="physicalByImages" hide-on-click-modal />
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="拒绝理由:" v-if="authFailed">
                <div class="flex">
                    {{ parseEmpty(userInfo, 'refuseReason') }}
                </div>
            </el-form-item>
        </el-form>
    </el-card>
    <footer-btns v-if="isApplyPedding(userInfo.status!)">
        <el-button type="danger" @click="handleOperation(userInfo, 'fail')">拒绝</el-button>
        <el-button type="primary" @click="handleOperation(userInfo, 'success')">通过</el-button>
    </footer-btns>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import reasonDialog from './components/reasonDialog.vue'
import FooterBtns from '@/components/footer-btns/index.vue'
import { useAuthStaffOperation } from '@/hooks/useCommon'
import { apiMasterWorkerAuthDetail } from '@/api/master_worker'
import { ApplyStatusEnum, SexEnumMap } from '@/enums/modeEnum'
import { parseEmpty } from '@/utils/util'

interface UserInfoProps {
    headPortrait: string
    name: string
    sex: number
    age: number
    mobile: string
    idCard: number
    idCardImg: string
    status: ApplyStatusEnum
    goodsList: any[]
    physicalExamination: string
    province: string
    city: string
    district: string
    address: string
    goodsDetailVos: any[]
}
const route = useRoute()
const router = useRouter()

const userInfo = ref<Partial<UserInfoProps>>({})
const idCardImageList = computed(() => {
    return unref(userInfo)
        .idCardImg?.split(',')
        .map((item, index) => ({ label: index === 0 ? '正面' : '反面', path: item }))
})
const previewSrcList = computed(() => unref(userInfo).idCardImg?.split(','))
const isApplyPedding = computed(() => (status: ApplyStatusEnum) => status === ApplyStatusEnum.APPLY)
const authFailed = computed(() => unref(userInfo).status === ApplyStatusEnum.FAILED)
const tags = computed(() => unref(userInfo).goodsDetailVos?.map(good => ({ id: good.id, name: good.name })))
const isUploadPhysicalExamination = computed(() => !unref(userInfo).physicalExamination)
const physicalByImages: any = computed(
    () =>
        !unref(isUploadPhysicalExamination) &&
        unref(userInfo)
            .physicalExamination?.split(',')
            .filter(item => !item.includes('pdf'))
)
const physicalByPdf: any = computed(
    () =>
        !unref(isUploadPhysicalExamination) &&
        unref(userInfo)
            .physicalExamination?.split(',')
            .filter(item => item.includes('pdf'))
)
const parseAddress: any = computed(() => {
    const info = unref<Partial<UserInfoProps>>(userInfo)
    return `${info?.province}${info?.city}${info?.district}${info?.address}`
})

/**获取认证详情 */
const initUserInfoFunc = async (): Promise<void> => {
    try {
        const res: any = await apiMasterWorkerAuthDetail({ id: route.query.id })
        userInfo.value = res
    } catch (error) { }
}
initUserInfoFunc()

const goBack = () => {
    router.back()
}
/**预览体检报告 */
const handlePreviewPdf = () => {
    const url = router.resolve({
        path: '/report/pdf',
        query: {
            path: unref(userInfo)
                .physicalExamination?.split(',')
                .filter(item => item.includes('pdf'))
        }
    })
    window.open(url.href)
}
const { handleOperation } = useAuthStaffOperation(reasonDialog, true, goBack)
</script>

<style lang="scss">
.card {
    padding: 0 20px;

    .top-container {
        display: flex;
        background-color: #f6f6f6;
        padding: 20px 80px;

        .avatar {
            flex: 0 0 350px;
        }

        .account {
            flex: 0 0 20%;
            text-align: center;
            padding-left: 12px;
        }
    }

    .idCardImg {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;

        .img-wrapper {
            width: 220px;
            height: 220px;

            .img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .category {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
}
</style>
