<template>
    <div style="display: flex;flex-wrap: wrap;justify-content: space-between;">

        <el-card style="width: 49.9%;">
            <template #header>
                <div class="card-header">
                    <span>我的客户</span>
                </div>
            </template>
            <div style="display: flex;justify-content: space-around;">
                <div v-for=" item in customList" :key="item" style="text-align: center;">
                    <div>{{ item.value }}</div>
                    <div>{{ item.name }}</div>
                </div>
            </div>
            <div id="customNum" class="chart"></div>
        </el-card>

        <el-card style="width: 49.9%;">
            <template #header>
                <div class="card-header">
                    <span>我的立项</span>
                </div>
            </template>
            <div style="display: flex;justify-content: space-around;">
                <div v-for=" item in customList" :key="item" style="text-align: center;">
                    <div>{{ item.value }}</div>
                    <div>{{ item.name }}</div>
                </div>
            </div>
            <div id="projectApproved" class="chart"></div>
        </el-card>

        <el-card style="width: 49.9%;">
            <template #header>
                <div class="card-header">
                    <span>我的投标</span>
                </div>
            </template>
            <div style="display: flex;justify-content: space-around;">
                <div v-for=" item in customList" :key="item" style="text-align: center;">
                    <div>{{ item.value }}</div>
                    <div>{{ item.name }}</div>
                </div>
            </div>
            <div id="main"></div>
        </el-card>
        <el-card style="width: 49.9%;">
            <template #header>
                <div class="card-header">
                    <span>项目合同</span>
                </div>
            </template>
            <div style="display: flex;justify-content: space-around;">
                <div v-for=" item in customList" :key="item" style="text-align: center;">
                    <div>{{ item.value }}</div>
                    <div>{{ item.name }}</div>
                </div>
            </div>
            <div id="main2"></div>
        </el-card>
        <el-card style="width: 49.9%;">
            <template #header>
                <div class="card-header">
                    <span>项目回款</span>
                </div>
            </template>
            <div style="display: flex;justify-content: space-around;">
                <div v-for=" item in customList" :key="item" style="text-align: center;">
                    <div>{{ item.value }}</div>
                    <div>{{ item.name }}</div>
                </div>
            </div>
            <div id="main3"></div>
        </el-card>
        <el-card style="width: 49.9%;">
            <template #header>
                <div class="card-header">
                    <span>采购合同</span>
                </div>
            </template>
            <div style="display: flex;justify-content: space-around;">
                <div v-for=" item in customList" :key="item" style="text-align: center;">
                    <div>{{ item.value }}</div>
                    <div>{{ item.name }}</div>
                </div>
            </div>
            <div id="main4" class="chart"></div>
        </el-card>

        <el-card style="width: 49.9%;">
            <template #header>
                <div class="card-header">
                    <span>分包合同</span>
                </div>
            </template>
            <div style="display: flex;justify-content: space-around;">
                <div v-for=" item in customList" :key="item" style="text-align: center;">
                    <div>{{ item.value }}</div>
                    <div>{{ item.name }}</div>
                </div>
            </div>
            <div id="main5" class="chart"></div>
        </el-card>
        <el-card style="width: 49.9%;">
            <template #header>
                <div class="card-header">
                    <span>项目付款</span>
                </div>
            </template>
            <div style="display: flex;justify-content: space-around;">
                <div v-for=" item in customList" :key="item" style="text-align: center;">
                    <div>{{ item.value }}</div>
                    <div>{{ item.name }}</div>
                </div>
            </div>
            <div id="main6" class="chart"></div>
        </el-card>
        <el-card style="width: 49.9%;">
            <template #header>
                <div class="card-header">
                    <span>我的报销</span>
                </div>
            </template>
            <div style="display: flex;justify-content: space-around;">
                <div v-for=" item in customList" :key="item" style="text-align: center;">
                    <div>{{ item.value }}</div>
                    <div>{{ item.name }}</div>
                </div>
            </div>
            <div id="main7" class="chart"></div>
        </el-card>
        <el-card style="width: 49.9%;">
            <template #header>
                <div class="card-header">
                    <span>应收统计</span>
                </div>
            </template>
            <div style="display: flex;justify-content: space-around;">
                <div v-for=" item in customList" :key="item" style="text-align: center;">
                    <div>{{ item.value }}</div>
                    <div>{{ item.name }}</div>
                </div>
            </div>
            <el-table :data="pager.lists" @selection-change="handleSelectionChange" style="margin-top: 20px;">
                <el-table-column type="selection" width="55" />
                <el-table-column label="序号" type="index" width="55" />
                <el-table-column label="项目名称" prop="project_name" show-overflow-tooltip />
                <el-table-column label="技术人员" prop="technician" show-overflow-tooltip />
                <el-table-column label="商务人员" prop="business_people" show-overflow-tooltip />
                <el-table-column label="跨部门人员" prop="cross_departmental_personnel" show-overflow-tooltip />
                <el-table-column label="添加人" prop="add_user" show-overflow-tooltip />
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <el-card style="width: 49.9%;">
            <template #header>
                <div class="card-header">
                    <span>应付统计</span>
                </div>
            </template>
            <div style="display: flex;justify-content: space-around;">
                <div v-for=" item in customList" :key="item" style="text-align: center;">
                    <div>{{ item.value }}</div>
                    <div>{{ item.name }}</div>
                </div>
            </div>
            <el-table :data="pager.lists" @selection-change="handleSelectionChange" style="margin-top: 20px;">
                <el-table-column type="selection" width="55" />
                <el-table-column label="序号" type="index" width="55" />
                <el-table-column label="项目名称" prop="project_name" show-overflow-tooltip />
                <el-table-column label="技术人员" prop="technician" show-overflow-tooltip />
                <el-table-column label="商务人员" prop="business_people" show-overflow-tooltip />
                <el-table-column label="跨部门人员" prop="cross_departmental_personnel" show-overflow-tooltip />
                <el-table-column label="添加人" prop="add_user" show-overflow-tooltip />
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>



<script setup>
import * as echarts from 'echarts';
import { onMounted } from "vue"
import { reactive, ref } from "vue"
import { usePaging } from '@/hooks/usePaging'
import { apiProjectPreSalesMembersLists, } from '@/api/project_pre_sales_members'
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiProjectPreSalesMembersLists,
    // params: queryParams
})
getLists()
const customList = reactive([
    {
        name: "客户总数",
        value: 3
    },
    {
        name: "客户总数",
        value: 3
    }, {
        name: "客户总数",
        value: 3
    }, {
        name: "客户总数",
        value: 3
    }, {
        name: "客户总数",
        value: 3
    },
])

const customLists = reactive([
    {
        name: "客户总数",
        value: 3
    },
    {
        name: "客户总数",
        value: 3
    }, {
        name: "客户总数",
        value: 3
    }, {
        name: "客户总数",
        value: 3
    }, {
        name: "客户总数",
        value: 3
    },
])


var app = {};
const posList = [
    'left',
    'right',
    'top',
    'bottom',
    'inside',
    'insideTop',
    'insideLeft',
    'insideRight',
    'insideBottom',
    'insideTopLeft',
    'insideTopRight',
    'insideBottomLeft',
    'insideBottomRight'
];
app.configParameters = {
    rotate: {
        min: -90,
        max: 90
    },
    align: {
        options: {
            left: 'left',
            center: 'center',
            right: 'right'
        }
    },
    verticalAlign: {
        options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
        }
    },
    position: {
        options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
        }, {})
    },
    distance: {
        min: 0,
        max: 100
    }
};
app.config = {
    rotate: 90,
    align: 'left',
    verticalAlign: 'middle',
    position: 'insideBottom',
    distance: 15,
    onChange: function () {
        const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
        };
        myChart.setOption({
            series: [
                {
                    label: labelOption
                },
                {
                    label: labelOption
                },
                {
                    label: labelOption
                },
                {
                    label: labelOption
                }
            ]
        });
    }
};
const labelOption = {
    show: true,
    rich: {
        name: {}
    }
};
var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['Forest', 'Steppe', 'Desert', 'Wetland']
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',

    },
    xAxis: [
        {
            type: 'category',
            axisTick: { show: false },
            data: ['2012', '2013', '2014', '2015', '2016', '2012', '2013', '2014', '2015', '2016']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '名称',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: [320, 332, 301, 334, 390]
        },
        // {
        //     name: 'Steppe',
        //     type: 'bar',
        //     label: labelOption,
        //     emphasis: {
        //         focus: 'series'
        //     },
        //     data: [220, 182, 191, 234, 290]
        // },
        // {
        //     name: 'Desert',
        //     type: 'bar',
        //     label: labelOption,
        //     emphasis: {
        //         focus: 'series'
        //     },
        //     data: [150, 232, 201, 154, 190]
        // },
        // {
        //     name: 'Wetland',
        //     type: 'bar',
        //     label: labelOption,
        //     emphasis: {
        //         focus: 'series'
        //     },
        //     data: [98, 77, 101, 99, 40]
        // }
    ]
};


let customoption = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['Forest', 'Steppe', 'Desert', 'Wetland']
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',

    },
    xAxis: [
        {
            type: 'category',
            axisTick: { show: false },
            data: ['2012', '2013', '2014', '2015', '2016', '2012', '2013', '2014', '2015', '2016']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '名称',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: [320, 332, 301, 334, 390]
        },
        // {
        //     name: 'Steppe',
        //     type: 'bar',
        //     label: labelOption,
        //     emphasis: {
        //         focus: 'series'
        //     },
        //     data: [220, 182, 191, 234, 290]
        // },
        // {
        //     name: 'Desert',
        //     type: 'bar',
        //     label: labelOption,
        //     emphasis: {
        //         focus: 'series'
        //     },
        //     data: [150, 232, 201, 154, 190]
        // },
        // {
        //     name: 'Wetland',
        //     type: 'bar',
        //     label: labelOption,
        //     emphasis: {
        //         focus: 'series'
        //     },
        //     data: [98, 77, 101, 99, 40]
        // }
    ]
};
var option4 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['名称', 'Steppe', 'Desert', 'Wetland']
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',

    },
    xAxis: [
        {
            type: 'category',
            axisTick: { show: false },
            data: ['2012', '2013', '2014', '2015', '2016', '2012', '2013', '2014', '2015', '2016']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '名称',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: [320, 332, 301, 334, 390],
            itemStyle: {
                normal: {
                    label: {
                    }
                }
            }
        },
        {
            name: 'Steppe',
            type: 'bar',
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: [220, 182, 191, 234, 290],
            itemStyle: {
                normal: {
                    label: {
                    }
                }
            }
        },
        {
            name: 'Desert',
            type: 'bar',
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: [150, 232, 201, 154, 190],
            itemStyle: {
                normal: {
                    label: {
                    }
                }
            }
        },
        // {
        //     name: 'Wetland',
        //     type: 'bar',
        //     label: labelOption,
        //     emphasis: {
        //         focus: 'series'
        //     },
        //     data: [98, 77, 101, 99, 40]
        // }
    ]
};

let option2 = {
    title: {
        text: '',
        subtext: '',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },

    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

let value = 58; //图上角度数据
let option3 = {
    title: {
        text: '{a|' + value + '}{c|%}',
        x: 'center',
        y: 'center',
        textStyle: {
            rich: {
                a: {
                    fontSize: 20,
                    color: 'black',
                    fontWeight: 'bold'
                },
                c: {
                    fontSize: 20,
                    color: 'black',
                    fontWeight: 'normal'
                }
            }
        }
    },
    series: [
        //外环
        {
            name: "外环",
            type: 'pie',
            silent: true,
            clockwise: true,
            radius: ['70%', '75%'],
            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
            itemStyle: {
                color: 'white',
            },
            data: [0]
        },
        //内环
        {
            name: "内环",
            type: 'pie',
            silent: true,
            clockwise: true,
            radius: ['45%', '46%'],
            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
            itemStyle: {
                color: '#414f63',
            },
            data: [0]
        },
        //外环
        {
            name: '',
            type: 'pie',
            radius: ['55%', '65%'],
            silent: true,
            clockwise: true,
            startAngle: 90,
            label: {
                show: false,
            },
            data: [
                {
                    value: value,
                    itemStyle: {
                        normal: {
                            //外环发光
                            borderWidth: 0.5,
                            shadowBlur: 20,
                            borderColor: '#4bf3f9',
                            shadowColor: '#9bfeff',
                            color: { // 圆环的颜色
                                colorStops: [{
                                    offset: 0,
                                    color: '#15caff', // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#159bfe', // 100% 处的颜色
                                }]
                            },
                        }
                    }
                },
                {
                    value: 100 - value,
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: "#364662"
                        }
                    }
                }
            ]
        },
    ]
};








const initChart = (id, opt) => {
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    myChart.setOption(opt);
}
onMounted(() => {
    initChart("customNum", customoption)
    initChart("projectApproved", option2)

    initChart("main", option3)
    initChart("main2", option2)
    initChart("main3", option)
    initChart("main4", option)
    initChart("main5", option)
    initChart("main6", option4)
    initChart("main7", option2)
})
</script>
<style lang="scss" scoped>
#main,
#main2,
#main3 {
    width: 100%;
    height: 300px;
}

.chart {
    width: 100%;
    height: 300px;
}
</style>