<template>
    <!-- 工作台 -->
    <view>
        <up-grid :col="4" class="work-grid" gap="20px">
            <up-grid-item v-for="(item, index) in workList" :key="index" @tap="handleTap(item)">
                <view class="icon-box" :style="{ backgroundColor: item.bgc_color }">
                    <image :src="item.icon" mode="widthFix" class="icon-img" />
                </view>
                <text class="grid-text">{{ item.title }}</text>
            </up-grid-item>
        </up-grid>
    </view>
</template>

<script setup name="work">
import EntryIcon from '@/static/image/work/entry.png'
import ExitIcon from '@/static/image/work/exit.png'
import CheckIcon from '@/static/image/work/check.png'
import CountIcon from '@/static/image/work/count.png'
import MachineSettingIcon from '@/static/image/work/machine-setting.png'

const workList = [
    {
        name: 'personEntry',
        title: '人员入场',
        icon: 'personEntry',
        bgc_color: '#fee9e9',
        icon: EntryIcon,
        url: '/pages/person-entry/index',
    },
    {
        name: 'personExit',
        title: '人员出场',
        icon: 'personExit',
        bgc_color: '#e6f9f2',
        icon: ExitIcon,
        url: '/pages/person-exit/index',
    },
    {
        name: 'personCheck',
        title: '人员检查',
        icon: 'personCheck',
        bgc_color: '#fff6df',
        icon: CheckIcon,
        url: '/pages/person-check/index',
    },
    {
        name: 'attendance',
        title: '考勤统计',
        icon: 'attendance',
        bgc_color: '#fee9f8',
        icon: CountIcon,
        url: '/pages/att-count/index',
    },
    {
        name: 'machineSetting',
        title: '考勤机设置',
        icon: 'machineSetting',
        bgc_color: '#eaf4d9',
        icon: MachineSettingIcon,
        url: '/pages/machine-setting/index',
    },
]

// 点击跳转
const handleTap = (item) => {
    uni.navigateTo({
        url: item.url,
    })
}
</script>

<style scoped lang="scss">
.work-grid {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 60rpx 10rpx;
}
.icon-box {
    width: 120rpx;
    height: 120rpx;
    background-color: #007aff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon-img {
        width: 60rpx;
        height: 60rpx;
    }
}

.grid-text {
    margin-top: 20rpx;
    color: #666464;
    font-size: 28rpx;
    font-family: PingFang SC;
}
</style>
