/**
 * 评价记录
 */
import React from 'react';
import VMTable from '../../../vm-table';
import SubTitle from '../../../vm-sub-title';
import { AppraiseService } from '../../api';
import { useSetState } from 'ahooks';

interface TypeProps {
    id: string;
}

export default function AppraiseRecord(props: TypeProps) {
    const { id } = props;
    const [state, setState] = useSetState({
        pagination: {
            current: 1,
            pageSize: 10,
            total: 0,
        },
    });
    const { pagination } = state;

    const { records } = AppraiseService.useAppraiseRecord(id, pagination.current - 1);
    const columns = [
        {
            title: '平均总分',
            dataIndex: 'totalValue',
            key: 'totalValue',
        },
        {
            title: '容易找到',
            dataIndex: 'valueEight',
            key: 'valueEight',
        },
        {
            title: '硬件设施',
            dataIndex: 'valueFive',
            key: 'valueFive',
        },
        {
            title: '服务管理',
            dataIndex: 'valueFour',
            key: 'valueFour',
        },
        {
            title: '无需等待',
            dataIndex: 'valueSeven',
            key: 'valueSeven',
        },
        {
            title: '干净卫生',
            dataIndex: 'valueSix',
            key: 'valueSix',
        },
        {
            title: '评价时间',
            dataIndex: 'assessDateStr',
            key: 'assessDateStr',
        },
    ];

    const pageChange = (page: number) => {
        setState({
            pagination: {
                ...pagination,
                current: page,
            },
        });
    };

    const tableProps = {
        pagination: {
            ...pagination,
            total: records.total,
            defaultPageSize: 10,
            onChange: pageChange,
        },
        height: 240,
        dataSource: records.dataSource,
    };

    return (
        <div className="appraise-record">
            <SubTitle title="评价记录" />

            <div className="appraise-record-table">
                <VMTable columns={columns} {...tableProps} />
            </div>
        </div>
    );
}
