<template>
    <view class="device-card">
        <view class="title">
            <text>黄埔凤凰城充电站-1号桩</text>
            <text class="status" :style="{ background: parseStatus('color') }">
                {{ parseStatus('text') }}
            </text>
        </view>
        <view class="info">
            <view>
                <text>设备编号</text>
                <text>001-000001</text>
            </view>
            <view>
                <text>设备型号</text>
                <text>CD1000-7KW</text>
            </view>
            <view>
                <text>设备规格</text>
                <text>7KW</text>
            </view>
            <view>
                <text>设备厂家</text>
                <text>广东XX新能源电子有限公司</text>
            </view>
            <view>
                <text>设备地址</text>
                <text>广东省广州市黄埔区凤凰城1001号</text>
            </view>
            <view>
                <text>创建时间</text>
                <text>2024-07-27 17:38:00</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

type TStatus = {
    text: string
    color: string
}
const props = defineProps({
    item: {
        type: Object,
        default: () => ({})
    }
})
const deviceStatusMap: Record<number, TStatus> = {
    1: { text: '正常', color: '#46b97b' },
    2: { text: '报修中', color: '#0e66fb' },
    3: { text: '检修中', color: '#fdba33' },
    4: { text: '停用', color: '#df6351' }
}
const parseStatus = computed(() => (type: string) => {
    return deviceStatusMap[props.item.status][type]
})
</script>

<style lang="scss" scoped>
.device-card {
    margin: 0 32rpx 20rpx;
    padding: 24rpx;
    background-color: $white-1;
    border-radius: 16rpx;
    .title {
        @include flex-justify;
        .status {
            padding: 8rpx 24rpx;
            font-size: 24rpx;
            color: $white-1;
            border-radius: 8rpx;
        }
    }
    .info {
        margin-top: 24rpx;
        @include flex-direction;
        gap: 20rpx;
        font-size: 30rpx;
        color: $gray-2;
        > view {
            display: flex;
            gap: 48rpx;
        }
    }
}
</style>
