<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:250px;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 }}</p>
                        <p>性别：{{ formData.gender == 1 ? '男' : '女' }}</p>
                        <p>身份证号：{{ formData.idCard }}</p>
                        <p>手机号：{{ formData.phone }}</p>
                        <p>状态： <a-tag>{{ dicsStore.getDictLabel('STAFF_STATUS', formData.status) }}</a-tag></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.birthday || '-' }}</div>
                        </a-col>
                        <!-- 基本信息 -->
                        <a-col :span="8">
                            <div><span class="label">参保情况:</span> {{ dicsStore.getDictLabel('INSURANCE_STATUS',
                                formData.insuranceStatus) || '-' }}</div>
                        </a-col>
                        <a-col :span="8">
                            <div><span class="label">学历:</span> {{ dicsStore.getDictLabel('Level_Education',
                                formData.education) || '-' }}</div>
                        </a-col>
                        <a-col :span="8">
                            <div><span class="label">护理人员类型:</span> {{
                                dicsStore.getDictLabel('STAFF_TYPE', formData.serviceType) }}</div>
                        </a-col>

                        <a-col :span="8">
                            <div><span class="label">用工形式:</span> {{ dicsStore.getDictLabel('USE_TYPE',
                                formData.workType) || '-' }}</div>
                        </a-col>


                        <a-col :span="8">
                            <div><span class="label">提成比例:</span> {{ formData.commissionRate + '%' || '-' }}</div>
                        </a-col>

                        <a-col :span="8">
                            <div><span class="label">入职日期:</span> {{ dayjs(formData.joinAt).format('YYYY-MM-DD') || '-'
                            }}</div>
                        </a-col>
                        <a-col :span="8">
                            <div><span class="label">资格证照名称:</span> {{ formData.qualificationName || '-' }}</div>
                        </a-col>
                        <a-col :span="8">
                            <div><span class="label">资格证照等级:</span> {{ dicsStore.getDictLabel('QUA_LV',
                                formData.qualificationLV) || '-' }}</div>
                        </a-col>
                        <a-col :span="8">
                            <div><span class="label">银行卡号:</span> {{ formData.bankNo || '-' }}</div>
                        </a-col>
                        <a-col :span="8">
                            <div><span class="label">开户行名称:</span> {{ formData.bankName || '-' }}</div>
                        </a-col>
                        <a-col :span="8">
                            <div><span class="label">补贴类型:</span> {{ dicsStore.getDictLabel('SUBSIDY_TYPE',
                                formData.subsidyType) || '-' }}</div>
                        </a-col>
                        <a-col :span="24">
                            <div><span class="label">负责区域:</span> {{ formData.sAreaLabels ?
                                formData.sAreaLabels.join('/')
                                : '-' }}</div>
                        </a-col>
                        <a-col :span="24">
                            <div><span class="label">家庭住址:</span> {{ formData.areaLabels ? formData.areaLabels.join('/')
                                :
                                '-' }}</div>
                        </a-col>
                        <a-col :span="24">
                            <div><span class="label">备注:</span> {{ formData.remark || '-' }}</div>
                        </a-col>
                        <a-col :span="24">
                            <div>
                                <span class="label">附件:</span>
                                <div>
                                    <a v-for="value in formData.attachments" :key="value" :href="value"
                                        target="_blank">{{ value }}</a>

                                </div>
                            </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 dayjs from 'dayjs'
import { useDicsStore } from '@/store'
const emit = defineEmits(['ok'])
const activeKey = ref('1')
const dicsStore = useDicsStore()
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: '服务人员详情',
    })
}

/**
 * 编辑
 */
async function handleEdit(record = {}) {
    showModal({
        type: 'edit',
        title: '服务人员详情',
    })
    const { data, success } = await apis.serviceStaffList.getItem(record.id).catch()
    if (!success) {
        hideModal()
        return
    }
    formData.value = data
    formData.value.imgList = data.imgs ? data.imgs.map(item => config('http.apiUpload') + item) : []
    formData.value.attachments = (data.attachments && data.attachments.length > 0) ? data.attachments.map(item => config('http.apiUpload') + item) : []
}
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()
    formData.value = {}
    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>
