<script setup lang="ts">
    import { reactive } from 'vue'
    import { onLoad } from '@dcloudio/uni-app'
    import { getCalculateAge } from '@/utils/date'
    import * as LinghuoyonggongAPI from '@/api/model/linghuoyonggong'
    import ConfirmDialog from '@/components/ConfirmDialog/index.vue'

    const pageData = reactive({
        loading: false,
        workersParam: [],
        contactMobile: '',
        contactName: '',
        showConfirmDialog: false,
    })
    // 字典值
    const DictData = reactive({
        sexArr: [], // 性别
        educationArr: [], // 学历
    })
    onLoad((options) => {
        const param = JSON.parse(decodeURIComponent(options.param))
        uni.setNavigationBarTitle({
            title: param.villageName,
        })
        getLaborAppDetail(param.id)
    })
    async function getLaborAppDetail(id: string) {
        await LinghuoyonggongAPI.gitListByCodeDict({ code: 'sex' }).then((res) => {
            DictData.sexArr = res
        })
        await LinghuoyonggongAPI.gitListByCodeDict({ code: 'education' }).then((res) => {
            DictData.educationArr = res
        })
        await LinghuoyonggongAPI.getLaborAppDetail({ id }).then((res) => {
            pageData.workersParam = res.workers
            pageData.contactMobile = res.contactMobile
            pageData.contactName =
                res.contactName.substring(0, 1) + Array.from({ length: res.contactName.length }).join('*')
        })
    }
    // 返回字典中的中文值
    function returnDictZhVel(type: any, val: any) {
        let valText = ''
        if (type == 'gender') {
            const arr = DictData.sexArr
            for (let i = 0; i < arr.length; i++) {
                if (val == Number.parseInt(arr[i].itemValue)) {
                    valText = arr[i].itemText
                    break
                }
            }
        }
        if (type == 'edu') {
            const arr = DictData.educationArr
            for (let i = 0; i < arr.length; i++) {
                if (val == Number.parseInt(arr[i].itemValue)) {
                    valText = arr[i].itemText
                    break
                }
            }
        }
        return valText
    }
    function makePhoneCall() {
        uni.makePhoneCall({
            phoneNumber: pageData.contactMobile,
        })
    }
</script>

<template>
    <view class="details_page">
        <view class="details-content">
            <view v-if="!pageData.workersParam || pageData.workersParam.length == 0" style="height: 700rpx">
                <fui-empty marginTop="100" src="/static/images/no-data.png" title="暂无数据" />
            </view>
            <view class="yr-person-item" v-for="(item, index) in pageData.workersParam" :key="index">
                <view class="yr-person-info">
                    <view class="person_name_attr"
                        >{{ item.name }}<text class="person_attr">{{ item.attr }}</text></view
                    >
                    <view class="person-info"
                        >{{ getCalculateAge(item.birthday) }}｜{{ returnDictZhVel('gender', item.gender) }}｜{{
                            returnDictZhVel('edu', item.edu)
                        }}</view
                    >
                    <view class="person-info text_overflow_ellipsis">技能：{{ item.skill }}</view>
                </view>
            </view>
        </view>
        <view v-if="pageData.workersParam.length" class="make-phone-view">
            <fui-button text="电话沟通" bold radius="96rpx" @click="pageData.showConfirmDialog = true" height="80rpx" />
        </view>
        <!-- 确认对话框 -->
        <ConfirmDialog
            v-model:show="pageData.showConfirmDialog"
            title="温馨提示"
            :content="`你将与${pageData.contactName}进行电话沟通，若继续，请点击确认按钮！`"
            cancelText="取消"
            confirmText="确认"
            @confirm="makePhoneCall"
        />
    </view>
    <fui-loading isFixed v-if="pageData.loading" backgroundColor="rgba(0, 0, 0, 0.4)" />
</template>

<style lang="scss" scoped>
    .details_page {
        background: rgba(230, 245, 232, 1);
        min-height: 100vh;
        width: 750rpx;
        padding-top: 24rpx;
        position: relative;
        .details-content {
            width: 694rpx;
            background-color: #ffffff;
            margin-left: 28rpx;
            border-radius: 12rpx;
            padding: 24rpx;

            .yr-person-item {
                border-bottom: 2rpx solid #eeeeee;
                margin-bottom: 24rpx;
                .yr-person-info {
                    .person_name_attr {
                        font-size: 28rpx;
                        font-weight: 500;
                        color: #333333;
                        .person_attr {
                            font-size: 24rpx;
                            font-weight: 400;
                            color: #5db66f;
                            margin-left: 12rpx;
                        }
                    }
                    .person-info {
                        font-size: 24rpx;
                        color: #999999;
                        vertical-align: middle;
                        margin-bottom: 24rpx;
                        margin-top: 24rpx;
                    }
                }
            }
            .yr-person-item:last-child {
                border-bottom: none;
            }
        }

        .make-phone-view {
            width: 690rpx;
            height: 80rpx;
            position: fixed;
            left: 30rpx;
            bottom: 62rpx;
        }
    }
</style>
