// 商家评价管理
import { connect } from "umi";
import type { CurrentUser } from "umi";
import type { ConnectState } from "@/models/connect";
import React, { useRef, useState } from "react";
import type { FormInstance } from "antd";
import { Button, message, Space, Spin, Tree } from "antd";
import useRequest from "@ahooksjs/use-request";
import type { ActionType } from "@ant-design/pro-table";
import ProTable from "@ant-design/pro-table";
import LeftSelectTree from "@/pages/reports/settlementAccount/component/leftSelectTree";
import PageTitleBox from "@/components/PageTitleBox";
import { handeGetCOMMENTList } from "../service";
import moment from 'moment'


const MerchantEvaluationManage: React.FC<{ currentUser: CurrentUser }> = (props) => {
    const { currentUser } = props
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    const [collapsible, setCollapsible] = useState<boolean>(false)


    // 树相关的属性和方法
    const [selectedId, setSelectedId] = useState<string>()


    const columns: any = [
        {
            title: "序号",
            dataIndex: "index",
            valueType: "index",
            hideInSearch: true,
            align: "center",
            width: 60,
        },
        {
            title: "商家名称",
            dataIndex: "MERCHANTS_ID",
            width: 300,
            hideInSearch: true,
            ellipsis: true,
            align: "center",
        },
        {
            title: "评价时间",
            dataIndex: "CREATE_DATE",
            width: 180,
            hideInSearch: true,
            ellipsis: true,
            align: "center",
            render: (_, record) => {
                return record?.CREATE_DATE ? moment(record?.CREATE_DATE).format('YYYY-MM-DD HH:mm:ss') : "-"
            }
        },
        {
            title: "评价人员",
            dataIndex: "UPDATE_STAFF_NAME",
            width: 150,
            hideInSearch: true,
            ellipsis: true,
            align: "center",
        },
        {
            title: "会员类型",
            dataIndex: "会员类型",
            width: 150,
            hideInSearch: true,
            ellipsis: true,
            align: "center",
        },
        {
            title: "消费评价",
            dataIndex: "消费评价",
            width: 120,
            hideInSearch: true,
            ellipsis: true,
            align: "center",
        },
        {
            title: "评分",
            dataIndex: "COMMENT_SCORE",
            width: 120,
            hideInSearch: true,
            ellipsis: true,
            align: "center",
        },
        {
            title: "评价内容",
            dataIndex: "COMMENT_CONTENT",
            width: 250,
            hideInSearch: true,
            ellipsis: true,
            align: "center",
        },
        {
            title: "回复内容",
            dataIndex: "回复内容",
            width: 250,
            hideInSearch: true,
            ellipsis: true,
            align: "center",
        },
    ]

    return (
        <div>
            <div style={{ backgroundColor: '#fff', display: 'flex' }}>
                <LeftSelectTree setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} />
                <div style={{
                    width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
                    paddingTop: 0,
                    paddingBottom: 0,
                    paddingRight: 0
                }}>
                    <ProTable
                        actionRef={actionRef}
                        formRef={formRef}
                        columns={columns}
                        bordered
                        expandable={{
                            expandRowByClick: true
                        }}
                        scroll={{ x: "100%", y: "calc(100vh - 410px)" }}
                        headerTitle={<PageTitleBox props={props} />} // 列表表头
                        search={{ span: 6 }}
                        request={async (params) => {
                            if (!selectedId) {
                                return
                            }
                            const req: any = {
                                SearchParameter: {
                                    OWNERUNIT_ID: currentUser?.OwnerUnitId,
                                    PROVINCE_CODE: currentUser?.ProvinceCode,
                                    COMMENT_ISVALID: 1
                                },
                                PageIndex: 1,
                                PageSize: 999999,
                            }
                            const data = await handeGetCOMMENTList(req)
                            console.log('datadatadatadatadata', data);
                            if (data.List && data.List.length > 0) {
                                return { data: data.List, success: true, total: data.TotalCount }
                            }
                            return { data: [], success: true }
                        }}
                        toolbar={{
                            actions: [
                            ]
                        }}
                    />
                </div>
            </div>
        </div>
    )
}

export default connect(({ user }: ConnectState) => ({
    currentUser: user.currentUser
}))(MerchantEvaluationManage);