import React, { useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, Table, notification, Modal } from 'antd';
import moment from 'moment';
import request from '../../../../../utils/request';
import apis from '../../../../../services/apis';
import Styles from '../style.less';
import { router } from 'umi';
import ModalImage from './modalImage';

const { confirm } = Modal;


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室及以上',
  },
]

/**
 *图片设置
 *
 * @param {*} props
 * @returns
 */
function imageSet(props) {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [data, setData] = useState([])

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [visibleData, setVisibleData] = useState({ visible: false, apartmentId: '', buildingId: '' })

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    getList()
  }, [])

  function openNotificationWithIcon(type, message) {
    notification[type]({
      message,
      description:
        '',
    });
  }

  function getList(params) {
    // 网路请求
    request({ ...apis.building.buildingApartment, urlData: { id: props.building.buildingId }, params: { ...params, apartmentType: 'apart' } }).then(res => {
      setData(res)
    }).catch(err => {
      openNotificationWithIcon('error', err.message)
    })
  }

  /**
   *回调事件
   *
   */
  function onModalChange() {
    getList()
    setVisibleData({ visible: false, apartmentId: '', buildingId: '' })
  }

  /**
   *打开编辑页
   *
   * @param {*} record
   */
  function showEdi(record) {
    setVisibleData({ visible: true, apartmentId: record === undefined ? '' : record.apartmentId, buildingId: props.building.buildingId })
  }

  /**
   * 删除
   *
   * @param {*} record
   */
  function deleteApartment(record) {
    confirm({
      title: '确认删除当前数据?',
      content: '确定后成功删除，点击取消则放弃当前操作',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        // 网路请求
        request({ ...apis.building.buildingApartmentDelete, urlData: { id: record.apartmentId } }).then(res => {
          getList()
          openNotificationWithIcon('success', '操作成功')
        }).catch(err => {
          // openNotificationWithIcon('error', err.message)
        })
      },
      onCancel() { },
    });
  }


  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:ss')}</span>,
    },
    {
      title: '操作',
      dataIndex: 'apartmentId',
      key: 'apartmentId',
      render: (_, record) => (
        <>
          <Button type="link" style={{ color: 'red' }} onClick={() => showEdi(record)}>编辑</Button>
          <Button type="link" style={{ color: 'red' }} onClick={() => deleteApartment(record)}>删除</Button>
        </>
      ),
    },
  ]

  return (
    <>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px', justifyContent: 'space-between' }}>
        <Button type="primary" onClick={() => showEdi()}>新增户型</Button>
        <Button onClick={() => router.go(-1)}>返回</Button>
      </div>
      <Table dataSource={data} columns={columns} pagination={false} rowKey="imageSet" />

      {/* 编辑页 */}
      {/*  onSuccess是子组件传递事件信息  */}
      <ModalImage visibleData={visibleData} key="ModalImage" onSuccess={() => onModalChange()} />
    </>
  )
}

export default imageSet
