<template>
    <a-modal :open="modal.open" :title="modal.title" :width="1000" :confirm-loading="modal.confirmLoading"
        :after-close="onAfterClose" :cancel-text="cancelText" @ok="handleOk" @cancel="handleCancel">
        <a-card class="">
        <div style="display: flex;justify-content: space-around;">
            <div style="width:200px;margin-top: 20px;border-right: 1px solid #f0f0f0;display: flex;flex-direction: column;align-items: center;">
                <gx-upload v-model="formData.imgList" accept-types=".jpg,.png,.webp" :fileNumber="1" />
                <div>
           <p>{{ formData.name }}{{ formData.gender }}{{ formData.age }}</p>
                <p>身份证号：{{ formData.idNumber }}</p>
                <p>手机号：{{ formData.contact1 }}</p>
                <p>联系人：{{ formData.contactman }}</p>
                <p>联系方式：{{ formData.contact1 }}</p>
                </div>
     
              
            </div>
            <div style="width: calc(100% - 200px);padding: 20px;">
                <a-row :gutter="20">
                    <!-- 基本信息 -->
                    <a-col :span="8">
                        <div><span class="label">参保情况:</span> {{ formData.socialSecurityCardNumber || '-' }}</div>
                    </a-col>
                    <a-col :span="8">
                        <div><span class="label">护理人员类型:</span> {{ formData.identityType || '-' }}</div>
                    </a-col>
                    <a-col :span="8">
                        <div><span class="label">身份证号码:</span> {{ formData.idNumber || '-' }}</div>
                    </a-col>
                    <a-col :span="8">
                        <div><span class="label">学历:</span> {{ formData.idNumber || '-' }}</div>
                    </a-col>
                     <a-col :span="8">
                        <div><span class="label">用工形式:</span> {{ formData.idNumber || '-' }}</div>
                    </a-col>
                  

                    <a-col :span="8">
                        <div><span class="label">负责区域:</span> {{ formData.nursingLevel || '-' }}</div>
                    </a-col>
                    <a-col :span="8">
                        <div><span class="label">提成比例:</span> {{ formData.healthStatus || '-' }}</div>
                    </a-col>

                    <a-col :span="8">
                        <div><span class="label">入职日期:</span> {{ formData.survivalStatus || '-' }}</div>
                    </a-col>
                    <a-col :span="8">
                        <div><span class="label">资格证照名称:</span> {{ formData.serviceStatus || '-' }}</div>
                    </a-col>

                    <a-col :span="8">
                        <div><span class="label">资格证照等级:</span> {{ formData.serviceForm || '-' }}</div>
                    </a-col>
                      <a-col :span="8">
                        <div><span class="label">银行卡号:</span> {{ formData.serviceForm || '-' }}</div>
                    </a-col>
                      <a-col :span="8">
                        <div><span class="label">开户行名称:</span> {{ formData.serviceForm || '-' }}</div>
                    </a-col>
                      <a-col :span="8">
                        <div><span class="label">补贴类型:</span> {{ formData.serviceForm || '-' }}</div>
                    </a-col>
                      <a-col :span="8">
                        <div><span class="label">家庭住址:</span> {{ formData.serviceForm || '-' }}</div>
                    </a-col>
                    
                    <!-- 数组类字段 -->
                    <a-col :span="24" v-if="formData.idCardPhotos && formData.idCardPhotos.length > 0">
                        <div>
                            <span class="label">证件照:</span>
                            <div style="margin-top: 8px;">
                                <a-image v-for="(url, index) in formData.idCardPhotos" :key="index" :src="url"
                                    fit="cover" style="width: 100px; height: 60px; margin-right: 8px;"
                                    :preview-src-list="formData.idCardPhotos" />
                            </div>
                        </div>
                    </a-col>
                     <a-col :span="8">
                        <div><span class="label">附件:</span> {{ formData.serviceForm || '-' }}</div>
                    </a-col>
                     <a-col :span="8">
                        <div><span class="label">备注:</span> {{ formData.serviceForm || '-' }}</div>
                    </a-col>
                </a-row>
            </div>
        </div>
        </a-card>
    </a-modal>
</template>

<script setup>
import GxUpload from '@/components/GxUpload/index.vue'
import { cloneDeep } from 'lodash-es'
import { ref, computed, defineAsyncComponent, defineExpose, getCurrentInstance, nextTick } from 'vue'
import { config } from '@/config'
import apis from '@/apis'
import { useForm, useModal } from '@/hooks'
import { useDicsStore } from '@/store'
const emit = defineEmits(['ok'])
const activeKey = ref('1')
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formRecord, formData, formRef, formRules, resetForm } = useForm()
const cancelText = ref('取消')
const imgList = ref([])

// 兼容 setup 中使用 $refs
const { proxy } = getCurrentInstance();
/**
 * 新建
 */
function handleCreate() {
    showModal({
        type: 'create',
        title: '服务人员详情',
    })
}

/**
 * 编辑
 */
function handleEdit(record = {}) {
    console.log('record', record)
    showModal({
        type: 'edit',
        title: '服务人员详情',
    })
    formRecord.value = record
    formData.value = cloneDeep(record)
}
const callback = (val) => {
    console.log(val);
};
/**
 * 确定
 */
function handleOk() {
    formRef.value
        .validateFields()
        .then(async (values) => {
            try {
                showLoading()
                const params = {
                    ...formData.value,
                }
                let result = null
                switch (modal.value.type) {
                    case 'create':
                        result = await apis.serverObj.createItem(params).catch(() => {
                            throw new Error()
                        })
                        break
                    case 'edit':
                        result = await apis.serverObj.updateItem(params).catch(() => {
                            throw new Error()
                        })
                        break
                }
                hideLoading()
                if (config('http.code.success') === result?.code) {
                    hideModal()
                    emit('ok')
                }
            } catch (error) {
                hideLoading()
            }
        })
        .catch(() => {
            hideLoading()
        })
}

/**
 * 取消
 */
function handleCancel() {
    hideModal()
}

/**
 * 关闭后
 */
function onAfterClose() {
    resetForm()
    hideLoading()
}

defineExpose({
    handleCreate,
    handleEdit,
})
</script>

<style lang="less" scoped>
.customer-detail {
    padding: 20px;
    font-size: 14px;
    color: #333;
}

.field-item {
    margin-bottom: 12px;
    line-height: 1.6;
}

.label {
    display: inline-block;
    line-height: 45px;
}

.cursor-pointer {
    cursor: pointer;
}

:deep(.el-tag) {
    cursor: pointer;
}
</style>
