@extends('layout')
@section('title')
    个人中心
@endsection
@section('content')
    <div class="container">
        <div class="card my-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <img src="https://via.placeholder.com/64x64.png?A" alt="a" class="rounded-circle" width="48" height="48" />
                    <b>姓名</b>
                </div>
                <span class="badge bg-danger rounded-pill">党支部</span>
            </div>
            <div class="list-group list-group-flush">
                <div class="list-group-item d-flex justify-content-center">
                    <div id="echart" style="height: 250px;width: 330px;"></div>
                </div>
                <div class="list-group-item d-flex justify-content-between align-items-center">
                    <b>当前得星: 10</b>
                    <span class="badge bg-danger rounded-pill">排名: 12</span>
                </div>
                <div class="list-group-item">
                    <b>历史得星: 20</b>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <a href="{{ url('score/select') }}" class="btn btn-primary">考核填报</a>
                <a href="" class="btn btn-secondary">意见反馈</a>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.js"></script>
    <script>
        var element = document.getElementById('echart');
        var chart = echarts.init(element);
        var option = {
            radar: {
                indicator: [
                    { name: '政治忠诚', max: 50 },
                    { name: '政治定力', max: 50 },
                    { name: '政治担当', max: 50 },
                    { name: '政治能力', max: 50 },
                    { name: '政治自律', max: 50 },
                ]
            },
            series: [
                {
                    type: 'radar',
                    areaStyle: {
                        opacity: 0.9
                    },
                    data: [
                        {
                            value: [33, 14, 28, 26, 42],
                        }
                    ]
                }
            ]
        };
        chart.setOption(option)
    </script>
@endsection