// 路由不是组件的直接跳转use client，useEffect，useRouter，需3个结合， use client表示客户端
'use client';
import { Button,Card, Space,Tag,Table,message,Input } from 'antd';
import { useEffect,useState } from 'react';
import http from '@/app/comm/http.js';
import "../dade.css";

export default function Index() {

  const [messageApi,contextHolder] = message.useMessage();
   // 使用 useState 管理数据状态
  let [data, setData] = useState([]);
  // 加载镜像
  let select = () => {
    http.post('/index/select', {}).then((res) => {
      if(res.data.code == 2000){
        messageApi.open({
          type:'success',
          content: '加载成功', 
        })
        setData(res.data.data);
      }
      // 处理响应数据
    }).catch(err => {
      console.error('请求出错:', err);
      messageApi.open({
        type: 'error',
        content: '加载失败', 
      })
    });
  }

  const columns = [
    {title: '序号',dataIndex: 'index', width: 70,render: (_, __, index) => index + 1,},
    {title: '备注',dataIndex: 'name',width: 200,
      render: (_, record,index) => (
        <Space.Compact style={{ width: '100%' }}>
          <Input value={record.name} size="small" placeholder='备注' onChange={(e) => handleInputChange(e,index,"name")}/>
          <Button type="primary" size="small">更改</Button>
        </Space.Compact>
      )
    },
    {title: '容器名称',dataIndex: 'names',},
    {title: '启动状态',dataIndex: 'status',width: 100,
      render: (_, record) => {
        // 检查状态字符串是否包含 "Up" 来判断容器是否运行中
        const isRunning = record.status.includes('Up');
        // 根据状态设置标签颜色和显示文本
        const color = isRunning ? 'green' : 'red';
        const text = isRunning ? '已启动' : '未启动';
        return <Tag color={color}>{text}</Tag>;
      }
    },
    {title: '镜像',dataIndex: 'image',width: 100,},
    {title: '端口映射（主机->容器）',dataIndex: 'ports',},
    {title: '挂载卷',dataIndex: 'address',},
    {title: '操作',dataIndex: 'address',width: 100,
      render: (_, record,index) => (
        <Space size="middle">
          <span style={{color:"#4096ff"}} onClick={() => update(record)}>编辑</span>
          <span style={{color:'red'}} onClick={() => update(record)}>删除</span>
        </Space>
      ),
    },
  ];
  // 容器列表数据
  const [data1, setData1] = useState([])
  // 数据双向绑定
  let handleInputChange = (ev,index,name) => {
		console.log(ev.target.value)
    data1[index][name] = ev.target.value;
    setData1([...data1])
  };

  // 加载容器列表
  let selectDocker = () => {
    http.post('/index/selectDocker', {}).then((res) => {
      if(res.data.code == 2000){
        let dade = res.data.data;
        dade.map((item,index) => {
          item.key = index; 
        })
        setData1(dade)
      }
      // 处理响应数据
    }).catch(err => {
      console.error('请求出错:', err);
      messageApi.open({
        type: 'error',
        content: '加载失败', 
      })
    });
  }

  // 刷新
  let refresh = () => {
    select();
    selectDocker()
  }

  let post = 1;
  useEffect(() => {
    if (post == 1) {
      post = 0;
      select();
      selectDocker()
    }
  }, []);

  // 编辑
  let update = (record) => {
    console.log(record)
  }


  // 选择行
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = newSelectedRowKeys => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  // 批量更新
  const listClick = () => {
    console.log(selectedRowKeys)
  };

  return (
    <div>
      {contextHolder}
      <div>
        <Button type="primary" onClick={refresh}>刷新</Button>
        <Button type="primary" style={{marginLeft:"10px"}}>新增容器</Button>
        <Button type="primary" style={{marginLeft:"10px"}} onClick={listClick}>批量更新</Button>
      </div>

      <div style={{marginTop:"10px",display:"flex"}}>
        <Space direction="vertical" size={16}>
          <Card title="容器镜像版本">
            <div style={{height:"75vh",overflow:"auto"}}>
              {data.map((item, index) => (
                <div key={index} >
                    {index == 0 ? 
                    <Tag color="green">镜像{item.repository}:{item.tag}，大小：{item.size}</Tag> : 
                    <Tag style={{marginTop:"10px"}} color="green">镜像{item.repository}:{item.tag}，大小：{item.size}</Tag>
                    }
                </div>
              ))}
            </div>
          </Card>
        </Space>
        {/* 容器列表 */}
        <div style={{marginLeft:"10px",width:"100%",height:"86vh",overflow:"auto"}}>
          <Table size='small' rowSelection={rowSelection} columns={columns} dataSource={data1}  pagination={false} scroll={{ y: "80vh"}} bordered/>
        </div>
      </div>
    </div>
  );
}