<template>
    <div>
        <!-- <div style="display:flex;align-items:center">   
            <div class="dvied"></div>
            <div style="font-weight: bold;color: #333333;font-size: 18px;margin-left:10px">我的工作台</div>
        </div> -->
        <div style="background: #FFFFFF;border-radius: 4px;margin-top:15px;">
            <div style="display:flex;justify-content:space-between;">
                <div class="contrl">
                    <div style="display:flex;margin:0 30px">
                        <img style="width:80px;object-fit:contain;margin-top:-10px" src="/assets/personal/zu1 (1).png" alt="">
                        <div style="margin-left:30px">   
                            <p style="color: #666666;margin:10px 0">我的测试工具</p>
                            <p style="font-weight: bold;color: #323333;font-size:50px;margin:0">{{toolCount}}</p>
                        </div>
                    </div>
                    <div style="background: #1676F4;border-radius: 0px 0px 4px 4px;height:36px;line-height:36px;display:flex;color:#FFFFFF;cursor:pointer">   
                        <div style="text-align:center;width:50%" @click="jumppage('/console/toolsmarket')">
                            查看工具市场
                        </div>
                        <el-divider direction="vertical"></el-divider>
                        <div style="text-align:center;width:50%" @click="jumppage('/console/mytools')">
                            查看我的工具
                        </div>
                    </div>
                </div>
                <div class="contrl">
                    <div style="display:flex;margin:0 30px">
                        <img style="width:80px;object-fit:contain;margin-top:-10px" src="/assets/personal/zu1 (2).png" alt="">
                        <div style="margin-left:30px">   
                            <p style="color: #666666;margin:10px 0">本周我的测试项目</p>
                            <p style="font-weight: bold;color: #323333;font-size:50px;margin:0">{{taskCount}}</p>
                        </div>
                    </div>
                    <div style="background: #F8922F;border-radius: 0px 0px 4px 4px;height:36px;line-height:36px;display:flex;color:#FFFFFF;cursor:pointer">   
                        <div style="text-align:center;width:50%" @click="jumppage('/console/mytools')">
                            查看我的工具
                        </div>
                        <el-divider direction="vertical"></el-divider>
                        <div style="text-align:center;width:50%" @click="jumppage('/console/mytasks')">
                            查看测试项目
                        </div>
                    </div>
                </div>
                <div class="contrl">
                    <div style="display:flex;margin:0 30px">
                        <img style="width:80px;object-fit:contain;margin-top:-10px" src="/assets/personal/zu1 (3).png" alt="">
                        <div style="margin-left:30px">   
                            <p style="color: #666666;margin:10px 0">我的购物车</p>
                            <p style="font-weight: bold;color: #323333;font-size:50px;margin:0">{{cartCount}}</p>
                        </div>
                    </div>
                    <div style="background: #F37468;border-radius: 0px 0px 4px 4px;height:36px;line-height:36px;display:flex;color:#FFFFFF;cursor:pointer">   
                        <div style="text-align:center;width:50%" @click="jumppage('/console/cart')">
                            查看我的购物车
                        </div>
                        <el-divider direction="vertical"></el-divider>
                        <div style="text-align:center;width:50%" @click="jumppage('/console/toolsmarket')">
                            查看工具添加商品
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div style="height:500px;margin-top:90vh">   
            占据内容
        </div> -->
    </div>
</template>
<script>
  import {getMyWeekTask,getMyShoppingCart,listMyTools} from "@/api/my/my";
  import {mapGetters} from "vuex";
    export default{
        data(){
            return{
                toolCount: 0,
                taskCount: 0,
                cartCount:0,
                // 查询参数
                queryParam: {
                    taskType:undefined,
                    projectName:undefined,
                    status:undefined,
                    pageNum: 1,
                    pageSize: 10
                }
            }
        },
        computed: {
            ...mapGetters(['token'])
        },
        mounted(){
            if(this.token){
                listMyTools().then(response => {
                    if (response.data != null) {
                        let validTools = response.data.filter(item=>{return item.status == 0;})
                        this.toolCount = validTools.length;
                    }
                });          
                getMyWeekTask(this.queryParam).then(response => {
                    if (response.myWeekTask != null){
                        this.taskCount = response.myWeekTask.length;
                    }
                })
                getMyShoppingCart().then(response => {
                    this.cartCount=response.total
                });
            }
        },
        methods:{
            jumppage(url){
                this.$router.push(url)
            }
        },

    }
</script>
<style scoped>
    .dvied{
        width: 4px;
        height: 18px;
        background: #0066EB;
    }
    .contrl{
        background: #FFFFFF;
        border: 1px solid #D9D9D9;
        border-radius: 4px;
        width:30%;
        /* display:inline-block; */
        padding-top:10px;
    }
    .contrl:hover{
        transform:translateY(-20px);
        transition: 1s;
    }
    .el-divider--vertical{
        margin-top:10px
    }
</style>