import {StateType} from "@/pages/FlinkSqlStudio/model";
import {connect} from "umi";
import {Tag, Space, Typography, Divider, Badge, Modal} from 'antd';
import {MessageOutlined,ClusterOutlined,FireOutlined,RocketOutlined} from "@ant-design/icons";
import ProList from '@ant-design/pro-list';
import {handleRemove, queryData} from "@/components/Common/crud";
import ProDescriptions from '@ant-design/pro-descriptions';
import React, {useState} from "react";
import {
  ModalForm,
} from '@ant-design/pro-form';
import styles from "./index.less";
import {Scrollbars} from 'react-custom-scrollbars';
import StudioPreview from "../StudioPreview";
import {getJobData} from "@/pages/FlinkSqlStudio/service";
import {HistoryItem} from "@/components/Studio/StudioConsole/StudioHistory/data";


const { Title, Paragraph, Text, Link } = Typography;

type HistoryConfig={
  useSession: boolean;
  session: string;
  useRemote: boolean;
  type: string;
  clusterId: number;
  clusterConfigurationId: number;
  host: string;
  useResult: boolean;
  useChangeLog: boolean;
  maxRowNum: number;
  useAutoCancel: boolean;
  taskId: number;
  jobName: string;
  useSqlFragment: boolean;
  useStatementSet: boolean;
  useBatchModel: boolean;
  checkpoint: number;
  parallelism: number;
  savePointPath: string;
};

const url = '/api/history';
const StudioHistory = (props: any) => {

  const {current,refs,dispatch} = props;
  const [modalVisit, setModalVisit] = useState(false);
  const [row, setRow] = useState<HistoryItem>();
  const [config,setConfig] = useState<HistoryConfig>();
  const [type,setType] = useState<number>();
  const [result,setResult] = useState<{}>();

  const showDetail=(row:HistoryItem,type:number)=>{
    setRow(row);
    setModalVisit(true);
    setType(type);
    setConfig(JSON.parse(row.configJson));
    if(type===3){
      // showJobData(row.jobId,dispatch)
      const res = getJobData(row.jobId);
      res.then((resd)=>{
        setResult(resd.datas);
      });
    }
  };

  const removeHistory=(row:HistoryItem)=>{
    Modal.confirm({
      title: '删除执行记录',
      content: '确定删除该执行记录吗？',
      okText: '确认',
      cancelText: '取消',
      onOk:async () => {
        await handleRemove(url,[row]);
        // refs.current?.reloadAndRest?.();
        refs.history?.current?.reload();
      }
    });
  };

  return (
    <>
      <ProList<HistoryItem>
        actionRef={refs.history}
        toolBarRender={() => {
          return [
            // <Button key="3" type="primary"  icon={<ReloadOutlined />}/>,
          ];
        }}
        search={{
          filterType: 'light',
        }}
        rowKey="id"
        headerTitle="执行历史"
        request={(params, sorter, filter) => queryData(url,{...params, sorter:{id:'descend'}, filter})}
        pagination={{
          pageSize: 5,
        }}
        showActions="hover"
        metas={{
          title: {
            dataIndex: 'jobId',
            title: 'JobId',
            render: (_, row) => {
              return (
                <Space size={0}>
                  <Tag color="blue" key={row.jobId}>
                    <FireOutlined /> {row.jobId}
                  </Tag>
                </Space>
              );
            },
          },
          description: {
            search: false,
            render:(_, row)=>{
              return (<Paragraph>
                <blockquote>
                  <Link href={`http://${row.jobManagerAddress}`} target="_blank">
                    [{row.jobManagerAddress}]
                  </Link>
                  <Divider type="vertical"/>开始于：{row.startTime}
                  <Divider type="vertical"/>完成于：{row.endTime}
                </blockquote>
              </Paragraph>)
            }
          },
          subTitle: {
            render: (_, row) => {
              return (
                <Space size={0}>
                  {row.jobName?(
                    <Tag color="gray" key={row.jobName}>
                      {row.jobName}
                    </Tag>
                  ):''}
                  {row.session?(
                    <Tag color="orange" key={row.session}>
                      <MessageOutlined /> {row.session}
                    </Tag>
                  ):''}
                  {row.clusterAlias?(
                    <Tag color="green" key={row.clusterAlias}>
                      <ClusterOutlined /> {row.clusterAlias}
                    </Tag>
                  ):(<Tag color="green" key={row.clusterAlias}>
                    <ClusterOutlined /> 本地环境
                  </Tag>)}
                  {row.type?(
                    <Tag color="blue" key={row.type}>
                      <RocketOutlined /> {row.type}
                    </Tag>
                  ):''}
                  {(row.status==2) ?
                    (<><Badge status="success"/><Text type="success">SUCCESS</Text></>):
                    (row.status==1) ?
                      <><Badge status="success"/><Text type="secondary">RUNNING</Text></> :
                      (row.status==3) ?
                        <><Badge status="error"/><Text type="danger">FAILED</Text></> :
                        (row.status==4) ?
                          <><Badge status="error"/><Text type="warning">CANCEL</Text></> :
                          (row.status==0) ?
                            <><Badge status="error"/><Text type="warning">INITIALIZE</Text></> :
                            <><Badge status="success"/><Text type="danger">UNKNOWEN</Text></>}
                </Space>
              );
            },
            search: false,
          },
          actions: {
            render: (text, row) => [
              <a key="config" onClick={()=>{showDetail(row,1)}}>
                执行配置
              </a>,
              <a key="statement" onClick={()=>{showDetail(row,2)}}>
                FlinkSql语句
              </a>,
              <a key="result" onClick={()=>{showDetail(row,3)}}>
                预览数据
              </a>,
              <a key="error" onClick={()=>{showDetail(row,4)}}>
                异常信息
              </a>,
              <a key="delete" onClick={()=>{removeHistory(row)}}>
                删除
              </a>,
            ],
            search: false,
          },
          jobName: {
            dataIndex: 'jobName',
            title: '作业名',
          },
          clusterId: {
            dataIndex: 'clusterId',
            title: '运行集群',
          },
          session: {
            dataIndex: 'session',
            title: '共享会话',
          },
          status: {
            // 自己扩展的字段，主要用于筛选，不在列表中显示
            title: '状态',
            valueType: 'select',
            valueEnum: {
              '': {text: '全部', status: 'ALL'},
              0: {
                text: '初始化',
                status: 'INITIALIZE',
              },
              1: {
                text: '运行中',
                status: 'RUNNING',
              },
              2: {
                text: '成功',
                status: 'SUCCESS',
              },
              3: {
                text: '失败',
                status: 'FAILED',
              },
              4: {
                text: '停止',
                status: 'CANCEL',
              },
            },
          },
          startTime: {
            dataIndex: 'startTime',
            title: '开始时间',
            valueType: 'dateTimeRange',
          },
          endTime: {
            dataIndex: 'endTime',
            title: '完成时间',
            valueType: 'dateTimeRange',
          },
        }}
        options={{
          search: false,
          setting:false
        }}
      />
      <ModalForm
        visible={modalVisit}
        onFinish={async () => {
        }}
        onVisibleChange={setModalVisit}
        submitter={{
          submitButtonProps: {
            style: {
              display: 'none',
            },
          },
        }}
      >
        {type==1 && (
          <ProDescriptions
            column={2}
            title='执行配置'
          >
            <ProDescriptions.Item span={2} label="JobId" >
              <Tag color="blue" key={row.jobId}>
                <FireOutlined /> {row.jobId}
              </Tag>
            </ProDescriptions.Item>
            <ProDescriptions.Item label="共享会话" >
              {config.useSession?'启用':'禁用'}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="会话 Key">
              {config.session}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="执行方式" >
              {config.useRemote?'远程':'本地'}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="任务类型">
              {config.type}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="集群ID">
              {config.clusterId}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="集群配置ID">
              {config.clusterConfigurationId}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="预览结果" >
              {config.useResult?'启用':'禁用'}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="打印流" >
              {config.useChangeLog?'启用':'禁用'}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="最大行数">
              {config.maxRowNum}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="自动停止" >
              {config.useAutoCancel?'启用':'禁用'}
            </ProDescriptions.Item>
            <ProDescriptions.Item span={2} label="JobManagerAddress">
              {row.jobManagerAddress}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="作业ID">
              {config.taskId}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="作业名">
              {config.jobName}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="片段机制">
              {config.useSqlFragment?'启用':'禁用'}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="语句集">
              {config.useStatementSet?'启用':'禁用'}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="并行度">
              {config.parallelism}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="CheckPoint">
              {config.checkpoint}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="savePoint 机制">
              {config.savePointStrategy}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="SavePointPath">
              {config.savePointPath}
            </ProDescriptions.Item>
          </ProDescriptions>
        )}
        {type==2 && (
          <ProDescriptions
            column={1}
            title='FlinkSql 语句'
          >
            <ProDescriptions.Item label="JobId" >
              <Tag color="blue" key={row.jobId}>
                <FireOutlined /> {row.jobId}
              </Tag>
            </ProDescriptions.Item>
            <ProDescriptions.Item>
              <pre className={styles.code}>{row.statement}</pre>
            </ProDescriptions.Item>
          </ProDescriptions>
        )}
        {type==3 && (
          <ProDescriptions
            column={2}
            title='数据预览'
          >
            <ProDescriptions.Item span={2} label="JobId" >
              <Tag color="blue" key={row.jobId}>
                <FireOutlined /> {row.jobId}
              </Tag>
            </ProDescriptions.Item>
            <ProDescriptions.Item  span={2} >
              <StudioPreview result={result} style={{width: '100%'}}/>
            </ProDescriptions.Item>
          </ProDescriptions>
        )}
        {type==4 && (
          <ProDescriptions
            column={1}
            title='异常信息'
          >
            <ProDescriptions.Item label="JobId" >
              <Tag color="blue" key={row.jobId}>
                <FireOutlined /> {row.jobId}
              </Tag>
            </ProDescriptions.Item>
            <ProDescriptions.Item>
              <Scrollbars style={{height: '400px',width:'100%'}}>
                <pre className={styles.code}>{row.error}</pre>
              </Scrollbars>
            </ProDescriptions.Item>
          </ProDescriptions>
        )}
      </ModalForm>
    </>
  );
};

export default connect(({Studio}: {Studio: StateType}) => ({
  current: Studio.current,
  refs: Studio.refs,
}))(StudioHistory);
