<template>
    <el-row :gutter="16" style="margin-top: 15px" >
        <el-col :span="12">
            <el-card shadow="never" class="index-header">
                <template #header>
                    <div class="card-header">
                        <span >业绩目标</span>
                        <div style="display: flex;">
<!--                            @ApiModelProperty(value = "指标类型（10新增客户、11新增线索、12跟进次数、30新增商机、40成交订单、41成交金额）")-->
<!--                            <el-select  v-model="countParam.type" @change="dataSummaryCount" style="width: 150px;margin-right: 10px">-->
<!--                                <el-option label="新增客户" :value="10"></el-option>-->
<!--                                <el-option label="新增线索" :value="11"></el-option>-->
<!--                                <el-option label="跟进次数" :value="12"></el-option>-->
<!--                                <el-option label="新增商机" :value="30"></el-option>-->
<!--                                <el-option label="成交订单" :value="40"></el-option>-->
<!--                                <el-option label="成交金额" :value="41"></el-option>-->
<!--                            </el-select>-->
<!--                            <el-select v-model="countParam.organizationalType" @change="dataSummaryCount" style="width: 150px;margin-right: 10px">-->
<!--                                <el-option label="全部" :value="1"></el-option>-->
<!--                                <el-option label="个人" :value="4"></el-option>-->
<!--                                <el-option label="部门" :value="3"></el-option>-->
<!--                                <el-option label="公司" :value="2"></el-option>-->
<!--                            </el-select>-->

<!--                            <SelectOrg clearable  :inputWidth="150" :inputHeight="32"-->
<!--                                       v-if="countParam.organizationalType == 3 || countParam.organizationalType == 2"-->
<!--                                       v-model="countParam.organizationalId"-->
<!--                                       :type="countParam.organizationalType"-->
<!--                                       @change="dataSummaryCount"-->
<!--                                       style="margin-right: 10px"-->
<!--                            ></SelectOrg>-->

<!--                            <SelectUser :inputWidth="150" v-if="countParam.organizationalType == 4"-->
<!--                                        v-model="countParam.userIdList" @change="dataSummaryCount">-->
<!--                            </SelectUser>-->
<!--                            <el-date-picker v-model="countParam.month" @change="totalTaskData" value-format="YYYY-MM"-->
<!--                                            style="width: 140px; margin-right: 15px;" type="month" placeholder="请选择月份" />-->

                            <router-link style="margin-right: 10px" tag="a" :to="{ path: '/target/person' }">
                                更多维度  <el-icon class="el-icon--right">
                                <ArrowRight />
                            </el-icon></router-link>
                        </div>
                    </div>
                </template>
                <div class="count-async-body">
                    <el-row justify="center" align="middle">
                        <el-col :span="12">
                            <div class="flex-row-c-c">
                                <el-progress color="#1874ff" type="circle" :width="250" :stroke-width="20" :percentage="userProgressData.progress" >
                                    <div class="flex-column-c-c ">
                                        <span class="ft-16">完成进度</span>
                                        <span class="ft-16 mt10">{{ userProgressData.progress }}%</span>
                                    </div>
                                </el-progress>
                            </div>


                        </el-col>
                        <el-col :span="12">
                            <div class="flex-column-s-c">
                                <div class="box-item">
                                    <lable>目标金额</lable>
                                    <span>{{ userProgressData.target }}</span>
                                </div>
                                <div class="box-item mt20">
                                    <lable>完成金额</lable>
                                    <span>{{ userProgressData.total }}</span>
                                </div>
                            </div>

                        </el-col>

                    </el-row>

                </div>

            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card shadow="never" class="index-header">
                <template #header>
                    <div class="card-header">
                        <span >业绩排行</span>
                        <div>

                            <router-link style="margin-right: 10px" tag="a" :to="{ path: '/target/targetRanking' }">
                                更多维度  <el-icon class="el-icon--right">
                                <ArrowRight />
                            </el-icon></router-link>
                        </div>
                    </div>
                </template>
                <div class="count-async-body">
                    <Echart :height="500" v-if="havData"  :options="echartsOption" />
                    <p style="text-align: center" v-else >暂无数据</p>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>


<script setup name="Index" lang="ts">
import * as echarts from 'echarts';
import { EChartsOption } from 'echarts'
import type { DatasetOption } from 'echarts/types/dist/shared';
import {uesrProgress,targetRink} from '@/api/home/index'


const value = ref(new Date())
const bindMonth = ref(new Date())
const countParam = reactive({
    organizationalType: 1, //
    organizationalId: undefined,//
    userIdList: undefined, //
    dataType: 2,//
    type: undefined
})

const echartsOption = reactive<EChartsOption>({
    legend: {},
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            crossStyle: {
                color: '#999'
            }
        },

    },
    dataset: {
        source: []
    } as DatasetOption,
    xAxis: {
        axisPointer: {
            type: 'shadow'
        },
        type: 'category',
        axisLabel: {
            interval: 0,
            rotate: 45 // 标签旋转45度
        },
    },
    yAxis: {},
    series: [{ type: 'bar',barWidth: 8 , itemStyle:{color: '#739FFA'}    },  { type: 'bar', barWidth: 8, itemStyle: { color: '#4ecb73' } }]
}) as EChartsOption

const havData = ref(true)
const targetRinkData = ()=>{
    targetRink({ isMySelf: 1}).then(res=>{
        if(res.success && res.result && res.result.data && res.result.data.length > 0) {
            havData.value = true
            let data  = res.result.data.slice(0, 10);
            let arr = data.map((item:any)=>{
                return [item.organizationalName, item.targetValue, item.totalNum     ]
            })
            // let dataSet : DatasetOption[] =  [ ['周杰伦', '2015'], ...arr]
            // console.log(dataSet, '>>>>>>>>>>>>>>>>>>>>>....')
            const dataSet: any[] = [['name', '目标金额', '成交金额'], ...arr]; // 如果 arr 符合结构，可以使用 any 简化
            (echartsOption.dataset as DatasetOption).source = dataSet;

            // echartsOption.dataset.source = dataSet
            return
        }

        (echartsOption.dataset as DatasetOption).source = []
        havData.value = false
    })
}

const userProgressData = ref({
    progress: 0,
    target: 0,
    total: 0

})
const uesrProgressApi = ()=>{
    uesrProgress({ isMySelf: 1}).then(res=>{
        if(res.success ){
            userProgressData.value = res.result
        }
    })

}


onMounted(() => {
    targetRinkData()
    uesrProgressApi()
});

</script>

<style  lang="scss">
.count-async-body{
    .el-calendar__header{
        justify-content: flex-end;
        padding-top: 0;
        border-bottom: none;
        padding-bottom: 0;

    }
    .el-calendar-table .el-calendar-day{
        height: 46px;
    }
}

.card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    span{
        font-size: 14px;
        font-weight: 600;
    }
}
.date-class-name{


}
</style>

<style scoped lang="scss">
.count-async{


}
.count-async-body{
    height: 325px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.box-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    span{
        color:  #262626;
        font-size: 24px;
        font-weight: 600;
    }
    lable{
        color: #999999;
        font-size: 14px;
        font-weight: 500;
    }
    &:hover{
        cursor: pointer;
    }

}
.fast-menu-body{
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    span{
        display: flex;
        flex-direction: column;
        align-items: center;
        .cicyle{
            width: 57px;
            height: 57px;
            border-radius: 50px;
            background: linear-gradient(180deg, #1874FF 0%, #A2C7FF 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
        }
        label{
            font-weight: 500;

        }
    }
}
</style>
