import React, { useRef, useState } from 'react';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { describeSiteMsg, getQuestList } from './service';
import { Button, Card, Spin } from 'antd';
import MessageDetail from "./components/messageDetail"
import QuestDetail from './components/questDetail';

const FilesList: React.FC<{}> = () => {
  const checkRelationRef = useRef<ActionType>(); //操作数据后刷新列表
  const [messageDetail, setMessageDetail] = useState<boolean>(false);
  const [messId, setMessId] = useState<string>('');//公告id
  const [questVisible, setQuestVisible] = useState<boolean>(false);//问卷visible
  const [questData, setQuestData] = useState<any>({});//问卷数据
  const [loading, setLoading] = useState<boolean>(false);//loading

  const columns: any = [
    {
      title: '序号',
      valueType: 'index',
    },
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '创建时间',
      dataIndex: 'createtime',
      valueType: 'dateTime',
    },
    {
      title: '类型',
      dataIndex: 'templatetype',
      valueEnum: {
        1: { text: '提疑消息' },
        2: { text: '澄清消息' },
        3: { text: '调查问卷' },
        4: { text: '公告审批' },
      },
    },
    {
      title: '状态',
      dataIndex: 'authorizestate',
      initialValue: 'noRead',
      valueEnum: {
        0: { text: '未读' },
        1: { text: '已读' },
      },
    },
    {
      title: '操作',
      width: 100,
      fixed: 'right',
      render: (record: any) => {
        return (
          record.templatetype == '3' ? (
            <Button type="text" key="participate" onClick={() => toParticipate(record.servicecode)}>参与调研</Button>
          ) : (
            <Button type="text" key="detail" onClick={() => lookDetail(record.msgId)}>查看</Button>
          )
        )
      }
    }
  ]

  const lookDetail = (id: any) => {
    setMessId(id)
    setMessageDetail(true)
  }

  const toParticipate = async (servicecode: any) => {
    const { questId } = JSON.parse(servicecode);
    setLoading(true);
    await getQuestList({ id: questId }).then(res => {
      if (res?.code == 200 && res?.success) {
        setQuestData(res?.data)
        setQuestVisible(true)
      }
    }).finally(() => {
      setLoading(false);
    });
  }

  return (
    <>
      <Card title="系统消息">
        <Spin spinning={loading}>
          <ProTable
            actionRef={checkRelationRef}
            columns={columns}
            size='small'
            className="searchH"
            search={false}
            request={async (params) =>
              await describeSiteMsg(params).then((res) => {
                if (res.code == 200) {
                  return Promise.resolve({
                    data: res.records,
                    // success: res.success,
                    total: res.total,
                    current: res.current,
                  });
                }
                return Promise.resolve({
                  data: [],
                  success: false,
                  total: 0,
                  current: 1,
                });
              })
            }
            pagination={{ defaultPageSize: 10, showSizeChanger: false }}//默认显示条数
            toolBarRender={false}
          />
        </Spin>
      </Card>
      {messageDetail ? <MessageDetail messId={messId} onCancel={() => { setMessageDetail(false), checkRelationRef.current?.reload() }} modalVisible={messageDetail} /> : null}
      {questVisible ? <QuestDetail questData={questData} onCancel={() => { setQuestVisible(false), checkRelationRef.current?.reload() }} modalVisible={questVisible} /> : null}
    </>
  );
}

export default FilesList;