/**
 * 评价信息-上半部分-汇总
 */
import React from 'react';
import { useSetState } from 'ahooks';
import { Progress } from 'antd';
import moment from 'moment';
import { VMRangePicker } from '../../../vm-filter';
import Radar from './Radar';

import { AppraiseService } from '../../api';

interface SummaryTypeProps {
    id: string;
}

export default function Summary(props: SummaryTypeProps) {
    const { id } = props;
    const [state, setState] = useSetState({
        startDate: moment().format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD'),
    });
    const { startDate, endDate } = state;

    const { appraiseSummary } = AppraiseService.useAppraisSummary(id, startDate, endDate);
    const {
        valueEight,
        valueFour,
        valueFive,
        valueSeven,
        valueSix,
        assessCount,
        totalValue,
        goodItem,
        goodItemStr,
        badItem,
        badItemStr,
        exceedingRate,
    } = appraiseSummary;
    const handleDateChange = (start: string, end: string) => {
        setState({
            startDate: start,
            endDate: end,
        });
    };

    const radarData = {
        indicator: [
            { name: '容易找到', max: 10 },
            { name: '公众满意', max: 10 },
            { name: '服务管理', max: 10 },
            { name: '无需等待', max: 10 },
            { name: '干净卫生', max: 10 },
        ],
        value: [valueEight, valueFive, valueFour, valueSeven, valueSix],
    };

    return (
        <div className="appraise-summary">
            <div className="appraise-summary-head">
                <div className="appraise-summary-subscribtion">
                    该公厕近期综合评价领先{exceedingRate || '0'}%的公厕，继续保持！
                </div>
                <div>
                    <VMRangePicker
                        value={[moment(startDate), moment(endDate)]}
                        onChange={(dates: any) =>
                            dates &&
                            handleDateChange(
                                moment(dates[0]).format('YYYY-MM-DD'),
                                moment(dates[1]).format('YYYY-MM-DD'),
                            )
                        }
                    />
                </div>
            </div>
            <div className="appraise-summary-main">
                <div className="appraise-summary-main-radar">
                    <Radar {...radarData} />
                </div>
                <div className="appraise-summary-main-avg">
                    <div className="appraise-summary-main-avg-progress">
                        <Progress
                            type="circle"
                            percent={75}
                            strokeWidth={10}
                            strokeColor="#4AFFE6"
                            trailColor="#162123"
                            strokeLinecap="butt"
                            showInfo={false}
                            style={{ width: '100px', height: '100px', margin: '24px 0 0 24px' }}
                        />
                        <div className="appraise-summary-main-avg-progress-text">
                            <span>{totalValue}</span>
                            <div>平均总分</div>
                        </div>
                    </div>
                    <div className="appraise-summary-main-avg-count">
                        <span>{assessCount}次</span>
                        <div>评价总次数</div>
                    </div>
                </div>
                <div className="appraise-summary-main-appraise">
                    <div className="appraise-summary-main-appraise-good">
                        <div className="appraise-summary-main-appraise-good-bg">
                            优秀项： {goodItem || '无'}
                        </div>
                        {goodItemStr || '--'}
                    </div>
                    <div className="appraise-summary-main-appraise-bad">
                        <div className="appraise-summary-main-appraise-bad-bg">
                            薄弱项：{badItem || '无'}
                        </div>
                        {badItemStr || '--'}
                    </div>
                </div>
            </div>
        </div>
    );
}
