<template>
    <div>
        <!--https://youzan.github.io/vant/#/zh-CN/grid-->
        <div class="layout-cont home-cont">
            <van-grid :gutter="10" :column-num="3" :icon-size="40">
                <!--1、icon参数引入使用，否则不显示-->
                <van-grid-item v-for="item in menuList" :key="item.title" :icon="item.img"
                               :text="item.title" @click="_goto(item)"></van-grid-item>
                <!--2、require使用  详见：https://youzan.github.io/vant/#/zh-CN/image#chang-jian-wen-ti-->
                <!--<van-grid-item v-for="item in menuList" :key="item.title" :icon="require('../assets/index/1.png')"-->
                <!--:text="item.title" ></van-grid-item>-->
                <!--3、使用该组件的icon插槽 详见：https://youzan.github.io/vant/#/zh-CN/grid#api-->
            </van-grid>
        </div>
        <FooterBar></FooterBar>
    </div>
</template>

<script>
    import indexImg10 from '../assets/index/10.png'
    import indexImg1 from '../assets/index/1.png'
    import indexImg11 from '../assets/index/11.png'
    import FooterBar from '@/components/FooterBar.vue'

    export default {
        name: "Home",
        components: {
            FooterBar
        },
        data() {
            return {
                menuList: [
                    {img: indexImg10, title: '抽样任务', uri: '/sampling_task/sampling_task'},
                    {img: indexImg1, title: '抽样单管理', uri: '/sampling_list/sampling_task'},
                    {img: indexImg11, title: '历史抽样单', uri: '/history_sampling/sampling_list'},
                ],
            }
        },
        methods: {
            _goto(item) {
                this.$router.push(item.uri)
            }
        }
    }
</script>

<style scoped>

</style>
