import React from 'react';
import { Collapse, Space, Tag, Button, Table, TableColumnProps } from '@arco-design/web-react';
import styles from './style/collapseList.module.less';
import { IconEye } from '@arco-design/web-react/icon';

const CollapseItem = Collapse.Item;


const headerNode = () => {
  return (
    <div className={styles['header-node']}>
      <Space size={7} style={{ marginRight: 50 }}>
        <img src="https://picsum.photos/200/300"
             style={{ width: 50, height: 50, borderRadius: 6, overflow: 'hidden' }} />
        <div>小车零件中心点识别</div>
      </Space>

      <Space size={10}>
        <Tag>视觉AI组件</Tag>
        <Tag>X86_64</Tag>
        <Tag color={'green'}>启用中</Tag>
        <div className={styles['flex-box']}>
          <img src={'/icons/countIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
          <span style={{ color: '#A2A2AB' }}>4</span>
        </div>
      </Space>
    </div>
  );
};

const extraNode = () => {
  return (
    <div className={styles['extra-node']}>
      <Space size={20}>
        <div className={styles['flex-box']}>
          <img src={'/icons/compileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
          <span style={{ color: '#A2A2AB' }}>未编译</span>
        </div>
        <div className={styles['flex-box']}>
          <img src={'/icons/recompileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
          <span style={{ color: '#A2A2AB' }}>重新编译</span>
        </div>
        <div className={styles['flex-box']}>
          <img src={'/icons/addIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
          <span style={{ color: '#A2A2AB' }}>新增实例</span>
        </div>
        <div className={styles['flex-box']}>
          <img src={'/icons/removedIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
          <span style={{ color: '#A2A2AB' }}>下架组件</span>
        </div>
        <div className={styles['flex-box']}>
          <img src={'/icons/moreIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
          <span style={{ color: '#A2A2AB' }}>更多操作</span>
        </div>
      </Space>
    </div>
  );
};

const extraNode1 = () => {
  return (
    <div className={styles['extra-node']}>
      <Space size={20}>
        <div className={styles['flex-box']}>
          <img src={'/icons/compiledIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
          <span style={{ color: '#40BF6D' }}>已编译</span>
        </div>
        <div className={styles['flex-box']}>
          <img src={'/icons/recompileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
          <span style={{ color: '#A2A2AB' }}>重新编译</span>
        </div>
        <div className={styles['flex-box']}>
          <img src={'/icons/addIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
          <span style={{ color: '#A2A2AB' }}>新增实例</span>
        </div>
        <div className={styles['flex-box']}>
          <img src={'/icons/removedIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
          <span style={{ color: '#A2A2AB' }}>下架组件</span>
        </div>
        <div className={styles['flex-box']}>
          <img src={'/icons/moreIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
          <span style={{ color: '#A2A2AB' }}>更多操作</span>
        </div>
      </Space>
    </div>
  );
};

const columns: TableColumnProps[] = [
  {
    title: '#',
    dataIndex: 'key',
    align: 'center'
  },
  {
    title: '组件标识',
    dataIndex: 'name',
    align: 'center'
  },
  {
    title: '实例名称',
    dataIndex: 'salary',
    align: 'center'
  },
  {
    title: '运行类型',
    dataIndex: 'address',
    align: 'center'
  },
  {
    title: '运行状态',
    dataIndex: 'email',
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'email',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: '',
    align: 'center',
    render: (col, record, index) => (
      <div className={styles['table-handle-box']}>
        <Space size={20}>
          <Button type="text">查看配置</Button>
          <Button type="text">环境配置</Button>
          <Button type="text">运行日志</Button>
          <Button type="text">实例配置</Button>
          <Button type="text"
                  icon={<img
                    src={'/icons/editIcon.png'}
                    style={{ width: 16, height: 16, marginRight: 5 }} />}
          >编辑</Button>
          <Button type="text"
                  icon={<img
                    src={'/icons/powerUpIcon.png'}
                    style={{ width: 16, height: 16, marginRight: 5 }} />}
          >启用</Button>
          <Button type="text"
                  icon={<img
                    src={'/icons/deleteIcon.png'}
                    style={{ width: 16, height: 16, marginRight: 5 }} />}
          >删除</Button>
        </Space>
      </div>
    )
  }
];
const data = [
  {
    key: '1',
    name: 'Jane Doe',
    salary: 23000,
    address: '32 Park Road, London',
    email: 'jane.doe@example.com'
  },
  {
    key: '2',
    name: 'Alisa Ross',
    salary: 25000,
    address: '35 Park Road, London',
    email: 'alisa.ross@example.com'
  },
  {
    key: '3',
    name: 'Kevin Sandra',
    salary: 22000,
    address: '31 Park Road, London',
    email: 'kevin.sandra@example.com'
  },
  {
    key: '4',
    name: 'Ed Hellen',
    salary: 17000,
    address: '42 Park Road, London',
    email: 'ed.hellen@example.com'
  },
  {
    key: '5',
    name: 'William Smith',
    salary: 27000,
    address: '62 Park Road, London',
    email: 'william.smith@example.com'
  }
];

const listNode = () => {
  return (
    <Table pagination={false} border={false} columns={columns} data={data} />
  );
};

const CollapseList = () => {
  return (
    <div className={styles['collapse-list']}>
      <Collapse
        expandIconPosition={'right'}
        bordered={false}
      >
        <CollapseItem
          header={headerNode()}
          name="1"
          extra={extraNode()}
        >
          {listNode()}
        </CollapseItem>

        <CollapseItem
          header={headerNode()}
          name="2"
          extra={extraNode1()}>
          {listNode()}
        </CollapseItem>

        <CollapseItem
          header={headerNode()}
          name="3"
          extra={extraNode()}>
          {listNode()}
        </CollapseItem>
      </Collapse>
    </div>
  );
};

export default CollapseList;