import React from 'react'
import { Button, Table, Popconfirm } from 'antd'
import AuthButton from '@/components/AuthButton'
import moment from 'moment'

const saleType = [
  {
    id: 1,
    name: '未开盘',
  },
  {
    id: 2,
    name: '售罄',
  },
  {
    id: 3,
    name: '在售',
  },
  {
    id: 4,
    name: '在租',
  },
]

const houseType = [
  {
    id: 1,
    name: '1室',
  },
  {
    id: 2,
    name: '2室',
  },
  {
    id: 3,
    name: '3室',
  },
  {
    id: 4,
    name: '4室',
  },
  {
    id: 5,
    name: '5室及以上',
  },
]

export default (props) => {
  const columns = [
    {
      title: '户型名称',
      dataIndex: 'apartmentName',
      key: 'apartmentName',
    },
    {
      title: '销售状态',
      dataIndex: 'marketStatus',
      key: 'marketStatus',
      render: (_, record) => <span>{(saleType.filter(x => x.id == record.marketStatus)[0] || {}).name}</span>,
    },
    {
      title: '户型',
      dataIndex: 'houseType',
      key: 'houseType',
      render: (_, record) => <span>{(houseType.filter(x => x.id == record.houseType)[0] || {}).name}</span>,
    },
    {
      title: '面积',
      dataIndex: 'buildingArea',
      key: 'buildingArea',
      render: (buildingArea, _) => <span>{`${buildingArea === 0 || buildingArea === null ? "-" : buildingArea + "m²"}`}</span>,
    },
    {
      title: '使用面积',
      dataIndex: 'insideArea',
      key: 'insideArea',
      render: (insideArea, _) => <span>{`${insideArea === 0 || insideArea === null ? "-" : insideArea + "m²"}`}</span>,
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      render: (_, record) => <span>{moment(record.createDate).format('YYYY-MM-DD HH:mm')}</span>,
    },
    {
      title: '操作',
      dataIndex: 'apartmentId',
      key: 'apartmentId',
      render: (_, record) => (
        <>
          <AuthButton name="building.houseType.edit">
            <Button type="link" onClick={() => props.onEdit(record)}>编辑</Button>
          </AuthButton>
          <AuthButton name="building.houseType.delete">
            <Popconfirm
              title="确定要进行删除操作 ?"
              onConfirm={() => props.onDelete(record)}
            >
              <Button type="link" style={{ color: 'red' }}>删除</Button>
            </Popconfirm>
          </AuthButton>
        </>
      ),
    },
  ]

  return (
    <Table
      loading={props.loading}
      dataSource={props.dataSource}
      columns={columns}
      style={{marginTop: '1em', width: '100%'}}
      rowKey="apartmentId"
    />
  )
}
