import {deleteAlgorithmModelDeleteAlgorithmModel, postAlgorithmModelGetAlgorithmModelList, deleteAlgorithmModelDeleteAlgorithmModelByIds} from '@/services/resource/AlgorithmModel';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
  FooterToolbar,
  PageContainer,
  ProTable,
  ProFormSelect,
  ProList
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max';
import {Button, message,Tag, Progress} from 'antd';
import React, { useRef, useState } from 'react';
import UpdateForm from './AlgorithmModelList/components/UpdateForm';
import CreateForm from "./AlgorithmModelList/components/CreateForm";
import {ColumnDrawer} from "./AlgorithmModelList/components/ColumnDrawer";
const AlgorithmModelList: React.FC = () => {
      /**
       * @en-US Pop-up window of new window
       * @zh-CN 新建窗口的弹窗
       *  */
      const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
      /**
       * @en-US The pop-up window of the distribution update window
       * @zh-CN 分布更新窗口的弹窗
       * */
      const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
      const [showDetail, setShowDetail] = useState<boolean>(false);
      /**
       * @en-US International configuration
       * @zh-CN 国际化配置
       * */
      const access = useAccess();
      const intl = useIntl();
      const actionRef = useRef<ActionType>();
      const [currentRow, setCurrentRow] = useState<API.AlgorithmModel>();
      const [selectedRowsState, setSelectedRows] = useState<API.AlgorithmModel[]>([]);
      const [cardActionProps, setCardActionProps] = useState<'actions' | 'extra'>(
        'extra',
      );
  const data = [
    '苏胜天文字OCR识别算法',
    '苏胜天人物识别算法',
    '苏胜天交警识别识别',
    '苏胜天车牌识别算法',
    '苏胜天语音识别算法',
    '苏胜天机器视觉算法',
    '苏胜天人脸识别算法',
    '苏胜天轨迹识别算法',
  ].map((item) => ({
    title: '苏胜天算法模型',
    subTitle: <Tag color="#5BD8A6">经典算法</Tag>,
    actions: [<a key="run">编辑</a>, <a key="delete">删除</a>],
    avatar:
      'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg',
    content: (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: 'center',
          width: '100%'
        }}
      >
        <div style={{fontSize: '24px', fontWeight: 'bold'}}>{item}</div>
        <div><img src="/images/model.png" alt="" style={{width: '160px'}}/></div>
        <div>V1.6.2</div>
        <div>更新时间：2023-10-17</div>
        <div>项目：玩手机检测</div>
      </div>
    ),
  }));

  const [ghost, setGhost] = useState<boolean>(true);
      const handleUpdateModal = ()=>{
        if (updateModalOpen) {
          setUpdateModalOpen(false)
          setCurrentRow(undefined)
        } else {
          setUpdateModalOpen(true)
        }
      }
      const handleCreateModal = ()=>{
        if (createModalOpen) {
          setCreateModalOpen(false)
          setCurrentRow(undefined)
        } else {
          setCreateModalOpen(true)
        }
      }
      const handleColumnDrawer = ()=>{
        if (showDetail) {
          setShowDetail(false)
          setCurrentRow(undefined)
      } else {
          setShowDetail(true)
        }
      }
      const handleDestroy = async (selectedRow: API.AlgorithmModel) => {
        deleteAlgorithmModelDeleteAlgorithmModel({id: selectedRow.id}).then(()=>{
          message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
          actionRef.current?.reload()
        }).catch(()=>{
          message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
        })
      };

const columns: ProColumns<API.AlgorithmModel>[] = [

    {
      title: (<FormattedMessage
        id="resource.algorithm_model.table.list.id"
        defaultMessage="id"/>),
      dataIndex: "id",
      sorter: true,
      render: (dom, entity) => {
        return (
          <a
            onClick={() => {
              setCurrentRow(entity);
              setShowDetail(true);
            }}
          >
            {dom}
          </a>
        );
      },
    },

    {
        title: (<FormattedMessage
            id="resource.algorithm_model.table.list.name"
            defaultMessage="$$$"/>),
        dataIndex: "name",
        hideInSearch: true,
    },


    {
        title: (<FormattedMessage
            id="resource.algorithm_model.table.list.type"
            defaultMessage="$$$"/>),
        dataIndex: "type",
        hideInSearch: true,
    },


    {
        title: (<FormattedMessage
            id="resource.algorithm_model.table.list.remark"
            defaultMessage="$$$"/>),
        dataIndex: "remark",
        hideInSearch: true,
    },


    {
        title: (<FormattedMessage
            id="resource.algorithm_model.table.list.createTime"
            defaultMessage="$$$"/>),
        dataIndex: "createTime",
        sorter: true,
        hideInSearch: true,
        valueType: 'dateTime',
    },


    {
        title: (<FormattedMessage
            id="resource.algorithm_model.table.list.updateTime"
            defaultMessage="$$$"/>),
        dataIndex: "updateTime",
        sorter: true,
        hideInSearch: true,
        valueType: 'dateTime',
    },


        {
            title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
            dataIndex: 'option',
            valueType: 'option',
            fixed:'right',
            render: (_, record) => [
            <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
              <a
                key="update"
                onClick={() => {
                  setUpdateModalOpen(true);
                  setCurrentRow(record);
                }}
              >
                <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
              </a>
              <a
                key="destroy"
                 onClick={() => {
                   handleDestroy(record).then(()=>{})
              }}>
                <FormattedMessage
                  id="pages.searchTable.destroy"
                  defaultMessage="Destroy"
                />
              </a>
              </Access>
            ],
        },];
return (
        <PageContainer>
          <ProList<any>
            toolBarRender={() => {
              return [
                <Button key="3" type="primary">
                  新建
                </Button>,
              ];
            }}

            ghost={ghost}
            itemCardProps={{
              ghost,
            }}
            pagination={{
              defaultPageSize: 8,
              showSizeChanger: false,
            }}
            showActions="hover"
            rowSelection={{}}
            grid={{ gutter: 8, column: 6 }}
            onItem={(record: any) => {
              return {
                onMouseEnter: () => {
                  console.log(record);
                },
                onClick: () => {
                  console.log(record);
                },
              };
            }}
            metas={{
              title: {},
              subTitle: {},
              type: {},
              avatar: {},
              content: {},
              actions: {
                cardActionProps,
              },
            }}
            headerTitle="卡片列表展示"
            dataSource={data}
          />
          {/*<ProTable<API.AlgorithmModel>*/}
          {/*  headerTitle={intl.formatMessage({*/}
          {/*    id: 'pages.searchTable.title',*/}
          {/*    defaultMessage: '$$$',*/}
          {/*  })}*/}
          {/*  options={{ fullScreen: true, setting: true, density: true, reload: true }}*/}
          {/*  actionRef={actionRef}*/}
          {/*  rowKey="key"*/}
          {/*  search={{*/}
          {/*    labelWidth: 120,*/}
          {/*  }}*/}
          {/*  onDataSourceChange={(data)=>{*/}
          {/*    */}
          {/*  }}*/}
          {/*  pagination={{*/}
          {/*    showSizeChanger: true,*/}
          {/*    pageSize: 10,*/}
          {/*  }}*/}
          {/*  columnsState={{*/}
          {/*    persistenceKey: 'algorithm_model_list',*/}
          {/*    persistenceType: 'localStorage'*/}
          {/*  }}*/}
          {/*  toolBarRender={() => [*/}
          {/*  <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>*/}
          {/*    */}
          {/*    <Button*/}
          {/*      type="primary"*/}
          {/*      key="primary"*/}
          {/*      onClick={() => {*/}
          {/*        setCreateModalOpen(true);*/}
          {/*      }}*/}
          {/*    >*/}
          {/*      <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />*/}
          {/*    </Button>*/}
          {/*  </Access>*/}
          {/*  ]}*/}
          {/*  request={async (params = {}, sort) => {*/}
          {/*  const {current, ...rest} = params*/}
          {/*const reqParams = {*/}
          {/*  page: current,*/}
          {/*  desc: false,*/}
          {/*  orderKey: "",*/}
          {/*  ...rest,*/}
          {/*}*/}
          {/*if (sort && Object.keys(sort).length) {*/}
          {/*  reqParams.orderKey = Object.keys(sort)[0]*/}
          {/*  let sort_select = sort[reqParams.orderKey]*/}
          {/*  reqParams.desc = sort_select === 'descend';*/}
          {/*}*/}
          {/*let resp = await postAlgorithmModelGetAlgorithmModelList({...reqParams})*/}
          {/*return {*/}
          {/*  data: resp.data.list.map((v: API.AlgorithmModel)=>{*/}
          {/*      return {...v, key: v.id}*/}
          {/*  }),*/}
          {/*  success: resp.success,*/}
          {/*  total: resp.data.total,*/}
          {/*  current: resp.data.page,*/}
          {/*  pageSize: resp.data.pageSize*/}
          {/*};*/}
          {/*    */}
          {/*  }}*/}
          {/*  columns={columns}*/}
          {/*  rowSelection={{*/}
          {/*    onChange: (_, selectedRows) => {*/}
          {/*      setSelectedRows(selectedRows);*/}
          {/*    },*/}
          {/*  }}*/}
          {/*/>*/}
          {/*{selectedRowsState?.length > 0 && (*/}
          {/*  <FooterToolbar*/}
          {/*    extra={*/}
          {/*      <div>*/}
          {/*        <FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}*/}
          {/*        <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}*/}
          {/*        <FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />*/}
          {/*      </div>*/}
          {/*    }*/}
          {/*  >*/}
          {/*    <Button*/}
          {/*  onClick={async () => {*/}
          {/*    deleteAlgorithmModelDeleteAlgorithmModelByIds({ids: selectedRowsState.map((v: API.AlgorithmModel)=>{return v.id as number})}).then(()=>{*/}
          {/*      actionRef.current?.reloadAndRest?.();*/}
          {/*    })*/}
          {/*  }}*/}
          {/*>*/}
          {/*  <FormattedMessage*/}
          {/*    id="pages.searchTable.batchDeletion"*/}
          {/*    defaultMessage="Batch deletion"*/}
          {/*  />*/}
          {/*</Button>*/}
          {/*  </FooterToolbar>*/}
          {/*)}*/}
          {/*<CreateForm*/}
          {/*  createModalOpen={createModalOpen}*/}
          {/*  values={currentRow || {}}*/}
          {/*  handleModal={handleCreateModal}*/}
          {/*  reload={actionRef.current?.reload}*/}
          {/*/>*/}
          {/*<UpdateForm*/}
          {/*  updateModalOpen={updateModalOpen}*/}
          {/*  values={currentRow || {}}*/}
          {/*  handleModal={handleUpdateModal}*/}
          {/*  reload={actionRef.current?.reload}*/}
          {/*/>*/}

          {/*<ColumnDrawer*/}
          {/*  handleDrawer={handleColumnDrawer}*/}
          {/*  isShowDetail={showDetail}*/}
          {/*  columns={columns}*/}
          {/*  currentRow={currentRow}*/}
          {/*/>*/}

        </PageContainer>
      );
};

    export default AlgorithmModelList;
