<template>
    <div class="item" @click="show">
        <div class="icon">
            <!-- <van-icon color="#FFFFFF" :name="icon" /> -->
            <img :src="url" alt="" srcset="">
        </div>
        <div class="name">{{name}}</div>
    </div>
</template>

<script>
import ICON_NORMAL from '@/assets/home_normal.png'
import ICON_REPORT from '@/assets/home_report.png'
import ICON_SPECIAL from '@/assets/home_special.png'
import ICON_APPROVE from '@/assets/home_approve.png'
import ICON_TOWN from '@/assets/home_town.png'
import ICON_RECORD from '@/assets/home_record.png'
import ICON_DEVICE from '@/assets/home_device.png'
import ICON_VIDEO from '@/assets/home_voice.png'
import ICON_CAR from '@/assets/home_car.png'
import ICON_OTHER from '@/assets/home_other.png'

export default {
    props: ['icon', 'name', 'path'],
    computed: {
        url() {
            if (this.icon) {
                return this.obj[this.icon]
            }
            return ''
        }
    },
    data () {
        return {
            obj: {
                normal: ICON_NORMAL,
                report: ICON_REPORT,
                special: ICON_SPECIAL,
                approve: ICON_APPROVE,
                town: ICON_TOWN,
                record: ICON_RECORD,
                voice: ICON_VIDEO,
                device: ICON_DEVICE,
                car: ICON_CAR,
                other: ICON_OTHER,
            }
        }
    },
    methods: {
        show() {
            if (this.path) {
                this.$router.push(this.path)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/style/variable.scss';

.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 5px;
    .icon {
        width: 70px;
        height: 70px;
        &>img {
            width: 100%;
        }
    }
    .name {
        margin-top: 8px;
        font-size: 14px;
        color: #303030;
    }
}
</style>