<template>
    <ul class="box-zl" v-loading="loading">
        <li class="items" v-for="(it,idx) in list" :key="idx">
            <div>{{ it.num }}</div>
            <div>{{ it.label }}</div>
        </li>
    </ul>
  
</template>

<script setup>
import { qcckPost } from "@/api/qcckApi.js";
import { onMounted , ref} from "vue";
const list = ref([
    { label:'线索数量', num :0 ,type:'xs'},
    { label:'线索转指令数量', num :0,type:'zlxx' },
    { label:'关联群体数量', num :0 ,type:'zdqt'},
    { label:'关联人员数量', num :0,type:'zdry' },
])

const loading = ref(false)
const searchData = ref({})
onMounted(()=>{
  getDate()
})

const init = (val) =>{
  searchData.value = val;
  getDate()
}

function getDate (){
  let params = { ...searchData.value }
  delete params.dateRange;
  loading.value = true;
  qcckPost(params,'/mosty-gsxt/qbcj/getXscjTjForZs').then(res=>{
    for(let key in res){
        let index = list.value.findIndex(v=>v.type == key);
        if(index!= -1) list.value[index].num = res[key];
    }
    loading.value = false;
  }).catch(()=>{
    loading.value = false;
  })
}

defineExpose({init})

</script>

<style lang="scss" scoped>
.box-zl{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 0;
    width: 100%;
    height: 100%;
    padding: 10px 4px;
    box-sizing: border-box;
    .items{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 16px;
        width: 48%;
        border-radius: 6px;
        background: linear-gradient(to top,#ff9585,#ffffff);
        border: 2px solid;
        border-image: linear-gradient(to top, #fc6750, #ffffff) 1;
        &:nth-child(2){
            background: linear-gradient(to top,#ffcc8d,#ffffff);
            border-image: linear-gradient(to top, #e09c27, #ffffff) 1;
        }
        &:nth-child(3){
            background: linear-gradient(to top,#81eefe,#ffffff);
            border-image: linear-gradient(to top, #27dce0, #ffffff) 1;
        }
        &:nth-child(4){
            background: linear-gradient(to top,#96ccfe,#ffffff);
            border-image: linear-gradient(to top, #407fba, #ffffff) 1;
        }
    }
}

</style>