<template>
    <div>
        <!--https://youzan.github.io/vant/#/zh-CN/grid-->
        <div class="layout-cont home-cont">
            <!--todo  首页布局 颜色-->
            <div class="box-c box-c-1" @click="_goto('/sampling_plan/sampling_plan')">
                <div>
                    <img src="@/assets/home/plan.png"></div>
                <div>
                    <div class="title">抽样计划执行双随机</div>
                    <div class="num">3</div>
                </div>
            </div>
            <div class="box-c box-c-2">
                <div @click="_goto('/sampling_task/sampling_task')">
                    <div class="box-img">
                        <img src="@/assets/home/task.png"></div>
                    <div class="cont">
                        <div class="title">我的任务</div>
                        <div class="num">4</div>
                    </div>
                </div>
                <div @click="_goto('/sampling_list/sampling_task')">
                    <div class="box-img">
                        <img src="@/assets/home/task-edit.png"></div>
                    <div class="cont">
                        <div class="title">抽样信息录入</div>
                        <div class="num">4</div>
                    </div>
                </div>
            </div>
            <div class="box-c box-c-3">
                <div @click="_goto('/message')">
                    <div class="box-img">
                        <img src="@/assets/home/message.png"></div>
                    <div class="cont">
                        <div class="title">消息</div>
                        <div class="num">4</div>
                    </div>
                </div>
                <div @click="_goto('/history_sampling/sampling_list')">
                    <div class="box-img">
                        <img src="@/assets/home/history-data.png"></div>
                    <div class="cont">
                        <div class="title">历史任务</div>
                    </div>
                </div>
            </div>
            <div class="box-c box-c-4" @click="_goto('/flow_chart')">
                <div>
                    <img src="@/assets/home/flow.png"></div>
                <div>
                    <div class="title">双随机实现流程</div>
                </div>
            </div>
            <!--<van-grid :gutter="10" :column-num="3" :icon-size="40">-->
            <!--&lt;!&ndash;1、icon参数引入使用，否则不显示&ndash;&gt;-->
            <!--<van-grid-item v-for="item in menuList" :key="item.title" :icon="item.img"-->
            <!--:text="item.title" @click="_goto(item)"></van-grid-item>-->
            <!--&lt;!&ndash;2、require使用  详见：https://youzan.github.io/vant/#/zh-CN/image#chang-jian-wen-ti&ndash;&gt;-->
            <!--&lt;!&ndash;<van-grid-item v-for="item in menuList" :key="item.title" :icon="require('../assets/index/1.png')"&ndash;&gt;-->
            <!--&lt;!&ndash;:text="item.title" ></van-grid-item>&ndash;&gt;-->
            <!--&lt;!&ndash;3、使用该组件的icon插槽 详见：https://youzan.github.io/vant/#/zh-CN/grid#api&ndash;&gt;-->
            <!--</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(uri) {
                this.$router.push(uri)
            }
        }
    }
</script>

<style scoped lang="less">
    .home-cont {
        padding: 20px 30px;
        color: #ffffff;
        height: calc(100% - 50px);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .home-cont > div {
        width: 100%;
        height: 23%;
    }

    img {
        width: 100%;
    }

    .box-c {
        display: flex;
        border-radius: 20px;
    }

    .box-c:nth-child(1) {
        background: #589dff;
    }

    .box-c:nth-child(4) {
        background: #9B9C9D;
    }

    .box-c-1, .box-c-4 {
        display: flex;
        align-items: center;
        justify-content: center;

        > div:nth-child(1) {
            width: 20%;
            display: flex;
            align-items: center;
            padding-left: 50px;
            margin-left: -5%;
        }

        > div:nth-child(2) {
            width: auto;
            margin-left: 30px;

        }

        img {
            width: 80%;
        }
    }

    .box-c-2, .box-c-3 {
        > div {
            width: 50%;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box-img {
            width: 20%;
        }

        .cont {
            margin-left: 30px;
        }
    }

    .box-c-2 {
        > div:nth-child(1) {
            background: #b562bb;
        }

        > div:nth-child(2) {
            background:  #e8835e;
            margin-left: 30px;
        }
    }

    .box-c-3 {
        > div:nth-child(1) {
            background: #E24343;
        }

        > div:nth-child(2) {
            background: #a1aeca;
            margin-left: 30px;
        }
    }

    .title {
        font-weight: bold;
        font-size: 24px
    }

    .num {
        text-align: center;
        font-weight: bold;
        margin-top: 5px;
    }

</style>
