import React from 'react'
import DetialTable from './index'
import '@platformuiserver/platformui.assets/css/index.less'
import { Button, Radio } from 'antd'

export const BasicDetialTable = () => {
  const columnsBase = ({ editTableRow, onRadioChange, delTableRow }) => {
    return [
      {
        title: '默认环境',
        dataIndex: 'defaultEnv',
        key: 'defaultEnv',
        align: 'center',
        width: 120,
        render: (text, record) => <Radio value={record.id} checked={record.defaultEnv} onChange={(e) => onRadioChange(e.target.value, record)} />
      },
      {
        title: '环境名称',
        dataIndex: 'envName',
        key: 'envName'
      },
      {
        title: '环境描述',
        dataIndex: 'remark',
        key: 'remark'
      },
      {
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        align: 'center',
        width: 200,
        render: (text, record) => (
          <>
            <Button type="link" style={{ marginRight: '10px' }} onClick={() => editTableRow(record)}>
              编辑
            </Button>
            <Button type="link" onClick={() => delTableRow(record)}>
              删除
            </Button>
          </>
        )
      }
    ]
  }
  const tableList = [
    {
      defaultEnv: false,
      envName: '环境名称',
      remark: '环境描述',
      id: 1
    },
    {
      defaultEnv: true,
      envName: '环境名称',
      remark: '环境描述',
      id: 2
    },
    {
      defaultEnv: false,
      envName: '环境名称',
      remark: '环境描述',
      id: 3
    }
  ]
  const editTableRow = (record) => {
    console.log(record)
  }
  const onRadioChange = (value, record) => {
    console.log(value, record)
  }
  const delTableRow = (record) => {
    console.log(record)
  }

  return (
    <div style={{ minWidth: '400px', border: '5px solid #e8e8e8' }}>
      <DetialTable
        columns={columnsBase({
          editTableRow: (record) => editTableRow(record),
          onRadioChange: (value, record) => onRadioChange(value, record),
          delTableRow: (record) => delTableRow(record)
        })}
        data={tableList}
        pagination={false}
      />
    </div>
  )
}
