import React from 'react';
import { Table, Divider } from 'antd';
import { useStore } from '../index';
import { history } from 'umi';
import style from '../index.less';
import defaultThum from '@/assets/defaultThum.png';
import { render } from 'react-dom';

export default function CarList() {
  const { list, paginationConfig, loading, setCurrentItem, setVisible, setCopyVisible } = useStore();

  const columns = [
      {
      title: '编号',
      dataIndex: 'id',
      align: "center"
    },
    {
      title: '整车型号代码',
      dataIndex: 'specCode',
      align: "center",
    },
    {
      title: '车型分类名称',
      dataIndex: 'classifyName',
      align: "center",
    },
    {
      title: '配置名称',
      dataIndex: 'name',
      width: "13%",
      align: "center"
    }, {
      title: '配置代码',
      dataIndex: 'specCodeList',
      align: "center",
      render: (text:any, record:any) => (text ? text.map((res:any, index:any) => <div key={`item_${index}`}>{res}</div>) : '——'),
    }, {
      title: '品牌',
      dataIndex: 'brandName',
      align: "center"
    }, {
      title: '厂商',
      width: "13%",
      dataIndex: 'factoryName',
      align: "center"
    }, {
      title: '车系',
      dataIndex: 'seriesName',
      align: "center"
    }, {
      title: '缩略图',
      dataIndex: 'thumbnail',
      width: 120,
      align: "center",
      render: (val: string) => <img style={{ objectFit: 'cover', width: 60, height: 30 }} src={val || defaultThum} alt="" />
    }, {
      title: '生产状态',
      dataIndex: 'proStatus',
      align: "center",
      render: (val: any) => {
        switch (val) {
          case 1:
            return (<div>在产</div>);
          case 0:
            return (<div>停产</div>);
          default:
            return (<div>未知</div>);
        }
      }
    }, {
      title: '销售状态',
      dataIndex: 'saleStatus',
      align: "center",
      render: (val: any) => {
        switch (val) {
          case 2:
            return (<div>预售</div>);
          case 1:
            return (<div>在售</div>);
          case 0:
            return (<div>停售</div>);
          default:
            return (<div>未知</div>);
        }
      }
    }, 
    // {
    //   title: '是否有效',
    //   dataIndex: 'yn',
    //   align: "center",
    //   render: (val: any) => {
    //     switch (val) {
    //       case true:
    //         return (<div>有效</div>);
    //       case false:
    //         return (<div>无效</div>);
    //       default:
    //         return (<div>未知</div>);
    //     }
    //   }
    // }, 
    {
      title: '操作',
      align: "center",
      render: (text: any, row: any) => (
        <React.Fragment key="key">
          <a href="#" onClick={(e) => { e.preventDefault(); setCurrentItem(row); setVisible(true); }}>编辑 </a>
          {/* <Divider type="vertical" />
          <Popconfirm placement="top" title={`是否${row.yn ? '禁用' : '启用'}【${row.name}】?`} onConfirm={e => changeStatus(e, row)}>
            <a href="#">{row.yn ? '禁用' : '启用'} </a>
          </Popconfirm> */}
          {/* <Divider type="vertical" />
        <a onClick={() => { history.push(`/oop/carPara?id=${row.id}`); }}>参数</a> */}
          <Divider type="vertical" />
          <a onClick={() => { setCurrentItem(row); setCopyVisible(true); }}>复制</a>
          <Divider type="vertical" />
          <a onClick={() => history.push(`/oop/car/atlas/${row.seriesId}`)}>图集</a>
        </React.Fragment>
      )
    }
  ];

  return (
    <Table
      className={style.table}
      loading={loading}
      rowKey={record => record.id}
      dataSource={list}
      columns={columns}
      pagination={paginationConfig}
      size="small"
    />
  );
}