import React, { useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, message, Col, Pagination, Alert, 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 AuthButton from '@/components/AuthButton';
import SelectCity from '../../../components/SelectButton/CitySelect'


const { Option } = Select;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { Meta } = Card;

const tempDate = [{ code: 's101' }]

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

/**
 *卡片
 *
 * @returns
 */
function CartBody(props) {
  const { data } = props

  function toEdi(record) {
    router.push({
      pathname: '/h5SampleManager/h5Sample/detail',
      query: {
        id: record.sampleId,
      },
    })
  }
  const tagList = data.tag.split(',')

  // src={((data.buildingImg && data.buildingImg[0]) || {}).url}background: `url(${item.caseCoverImg})` style={{ background: `url(((data.buildingImg && data.buildingImg[0]) || {}).url)` }}
  const { buildingImg } = data
  console.log("buildingImg1: ", data.coverImg)
  return (
    <Card
      hoverable
      onClick={() => toEdi(data)}
      style={{ minWidth: '330px', borderRadius: '12px', margin: '10px 20px 10px 0', boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)' }}
    // cover={}
    // bodyStyle={{ padding: '10px 20px' }}
    >
      {/* 因为 background 方式设置图片背景，如果 图片url 存在空格或者其他特殊字符，导致显示不出来，需要进行 encodeURI(xxx) 转码 */}
      {tagList.length > 0 && <div className={Styles.recommderTagBox}>
        {tagList.map((tag, index) =>
          <span key={index + 'tag'} style={index % 2 == 0 ? { background: '#4886FF' } : { background: '#34BD28' }} className={Styles.recommderTag}>{tag}</span>
        )}
      </div>

      }
      <img className={Styles.cover} style={{ backgroundImage: `url('` + data.coverImg + `')` }}   ></img>
      <p className={Styles.cardText} style={{ padding: '0.1rem 0.096rem',marginBottom:'0px' }}>
        {/* <span className={Styles.title}>样例名</span> */}
        <span style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>{data.sampleName}</span>
      </p>
    </Card>
  )
}

/**
 *
 *
 * @param {*} props
 * @returns
 */
function body(props) {
  const { getFieldDecorator } = props.form

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [dataSource, setDataSource] = useState({ records: [], size: 0 })

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

  function getList(params) {
    // 网路请求
    request({ ...apis.taH5SampleManager.taH5Sample, params: { ...params } }).then(res => {
      setDataSource(res)
      console.log("res:", res)
    }).catch(err => {
      // eslint-disable-next-line no-unused-expressions
      <Alert
        style={{
          marginBottom: 24,
        }}
        message={err}
        type="error"
        showIcon
      />
    })
  }

  // 提交事件
  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        // eslint-disable-next-line no-console
        console.log('提交数据: ', values)
        const { startDate } = values
        if (values.startDate !== undefined) {

          values.startDate = `${moment(startDate).format('YYYY-MM-DDT00:00:00.000')}Z`
        }
        getList({ pageNum: 1, pageSize: 9, ...values })
      }
    });
  }

  // Change 事件
  function handleSelectChange(e) {
    // eslint-disable-next-line no-console
    console.log(e)
  }

  // 分页
  function onChange(pageNumber) {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    getList({ pageNum: pageNumber, pageSize: 9, ...props.form.getFieldsValue() })
  }


  /**
   * 重置搜索
   */
  function handleReset() {
    props.form.resetFields();
    getList({ pageNum: 1, pageSize: 9 })
  }

  function onSuccess() {
    getList({ pageNum: 1, pageSize: 9 })
  }


  return (
    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('sampleName')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="样例名"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('tag')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="标签"
            />,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            搜索
            </Button>
          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
            重置
            </Button>
        </Form.Item>
      </Form>

      {/* 卡片内容，显示楼盘项目  */}
      <Row style={{ paddingTop: ' 16px' }}>
        {
          dataSource.records.map((item, _) => (
            <Col span={8}>
              <CartBody data={item} key={item.buildingId} onSuccess={() => onSuccess()} />
            </Col>
          ))
        }
      </Row>
      {/* 分页 */}
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
        <Pagination showQuickJumper defaultCurrent={1} total={dataSource.total} onChange={onChange} pageSize={dataSource.size} />
      </div>
    </>
  );
}
const WrappedBody = Form.create({ name: 'body' })(body);

export default WrappedBody
