import React, { useState, useEffect } from 'react';
import { Modal, Row, Col, Form, Select, Input, Button } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import Icon from '@/tenants-ui/Icon';
import styles from './index.less';
import { EditOutlined } from '@ant-design/icons';
import { equipImageMap } from '@/config/image.js';

const typeList = [
  {
    label: '独立办公室',
    value: '1s',
  },
  {
    label: '办公区',
    value: '2s',
  },
  {
    label: '活动区',
    value: '3s',
  },
];

export default ({ onClose }) => {
  const { officeImg, curtainTemp, waterTemp, lampTemp, airTemp } = equipImageMap;
  const [currentType, setCurrentType] = useState('3s');
  const [spaceName, setSpaceName] = useState('王总办公室');
  const [paramList, setParamList] = useState([
    {
      name: '温度',
      id: 'temperature',
      num: 24,
      describe: '温度适宜',
    },
    {
      name: 'CO₂',
      id: 'co2',
      num: 410,
      describe: '空气清新',
    },
    {
      name: 'PM2.5',
      id: 'pm25',
      num: 0.3,
      describe: '优秀',
    },
    {
      name: '甲醛',
      id: 'jiaquan',
      num: 0.5,
      describe: '健康',
    },
    {
      name: '湿度',
      id: 'wet',
      num: 26,
      unit: '%',
      describe: '健康',
    },
  ]);
  //const [paramId, setParamId] = useState('temperature&wet');
  const [paramObj, setParamObj] = useState({});
  const [editVisible, setEditVisible] = useState(false);
  useEffect(() => {
    console.log('chartModal-effect');
    setParamObj(paramList[0]);
  }, []);
  const nameChange = () => {
    setEditVisible(true);
  };
  const [form] = Form.useForm();
  const cancelSave = () => {
    setEditVisible(false);
  };
  const saveForm = () => {
    form
      .validateFields()
      .then((values) => {})
      .catch((errorInfo) => {
        //debugger;
      });
    // setEditVisible(false);
  };
  const [errorObj, setErrorObj] = useState({});
  const formValueChange = () => {
    setTimeout(() => {
      var errors = form.getFieldsError();
      var errorObjTemp = {};

      errors.forEach(function (item) {
        if (item?.errors?.length > 0 && item?.name?.length > 0) {
          errorObjTemp[item.name[0]] = item.errors;
        }
      });
      setErrorObj(errorObjTemp);
    }, 0);
  };
  return (
    <>
      <Modal width={810} visible maskClosable={false} closable={false} footer={null}>
        <div className={styles.main}>
          <div className={styles.header}>
            {!editVisible && (
              <div className={styles.show}>
                <div className={styles.tileline} onClick={nameChange}>
                  <img src={officeImg} className={styles.titleIcon}></img>
                  <span>1#-1312</span>
                  <EditOutlined className={styles.edit} />
                </div>
                <div className={styles.timeLine}>
                  使用时间:<span>08:00-20:00</span>
                </div>
              </div>
            )}
            {editVisible && (
              <div className={styles.editShow}>
                <Form
                  layout="vertical"
                  initialValues={{ spacename: '总裁办公室', spacetype: '3s' }}
                  onValuesChange={() => {
                    formValueChange();
                  }}
                  form={form}
                >
                  <Row gutter={[20, 0]}>
                    <Col span={8}>
                      <Form.Item
                        label="空间名称"
                        name="spacename"
                        rules={[{ required: true, message: '空间名称不能为空' }]}
                      >
                        <Input
                          autoComplete="off"
                          size="large"
                          style={{ height: '50px' }}
                          suffix={
                            errorObj.spacename ? (
                              <Icon type={'warning'} style={{ color: '#E5574F' }} />
                            ) : (
                              <span></span>
                            )
                          }
                        />
                      </Form.Item>
                    </Col>
                    <Col span={8}>
                      <Form.Item label="空间类型" name="spacetype">
                        <Select
                          size="large"
                          onChange={(val) => {
                            console.log(val);
                          }}
                          options={typeList}
                        />
                      </Form.Item>
                    </Col>
                    <Col span={8} style={{ display: 'flex', alignItems: 'center' }}>
                      <Button
                        type="primary"
                        shape="round"
                        size="middle"
                        style={{ width: 88, height: 50 }}
                        onClick={saveForm}
                      >
                        保存
                      </Button>
                      <Button
                        type="default"
                        size="middle"
                        style={{ width: 88, height: 50, border: 'none', marginLeft: 10 }}
                        icon={<CloseOutlined />}
                        onClick={cancelSave}
                      >
                        取消
                      </Button>
                    </Col>
                  </Row>
                </Form>
              </div>
            )}
            <div className={styles.close} onClick={onClose}>
              <Icon type="close" />
            </div>
          </div>
          <div className={styles.content}>
            <div className={styles.infoList}>
              {paramList.map((item, index) => {
                return (
                  <div className={styles.item} key={'navc' + item.id}>
                    <div className={styles.title}>{item.name}</div>
                    <div className={styles.num}>
                      {item.num}
                      {item.unit}
                    </div>
                    <div className={styles.describe}>{item.describe}</div>
                  </div>
                );
              })}
            </div>
            <div className={styles.devices}>
              <Row gutter={[12, 18]}>
                <Col span={12}>
                  <img style={{ width: '100%' }} src={airTemp}></img>
                </Col>
                <Col span={12}>
                  <img style={{ width: '100%' }} src={lampTemp}></img>
                </Col>
                <Col span={12}>
                  <img style={{ width: '100%' }} src={waterTemp}></img>
                </Col>
                <Col span={12}>
                  <img style={{ width: '100%' }} src={curtainTemp}></img>
                </Col>
              </Row>

              {/* <img src={lampTemp}></img>
              <img src={waterTemp}></img>
              <img src={curtainTemp}></img> */}
            </div>
          </div>
        </div>
      </Modal>
    </>
  );
};
