import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import {
  LeftOutlined,
  EyeOutlined,
  PoweroffOutlined,
  FileJpgOutlined,
  FilePdfOutlined,
} from '@ant-design/icons';
import { Modal, Input, Button, TimePicker, Checkbox, Image, message, Divider, Avatar } from 'antd';
// 样式
import './celllist.less';
import { RA } from '@/utils/method';

import moment from 'moment';

// 接口申明

const Adds = (props: any) => {
  const { Data, dispatch } = props;

  useEffect(() => {
    // 如果是添加传来没有值的时候 就清空  否则  赋值给表单
    if (Data) {
      // 返回列表
      console.log('编辑');
      console.log(Data);
    } else {
      console.log('新建');
    }
  }, [1]);

  //物业费选择
  const plainOptions = [
    { label: '线上缴费', value: '0', disabled: true },
    { label: '线下缴费', value: '1', disabled: true },
  ];
  // 关闭提示框
  const [ModelFee, setModelFee] = useState(false);

  // 返回
  const goToReturn = () => {
    // console.log(fileList)
    history.back();
  };

  // 复制
  const copy = () => {};

  // 打开弹窗
  const openModel = () => {
    setModelFee(true);
  };
  // 关闭弹窗
  const handleCancel = () => {
    setModelFee(false);
  };
  // 关闭小区
  const handleOk = () => {
    setModelFee(false);
    message.success('您已关闭小区！');
    history.back();
  };

  return (
    <div className="form">
      <h3>
        <EyeOutlined />
        &nbsp;小区详情
        <div className="back">
          <Button
            type="primary"
            danger
            style={{ marginRight: '15px' }}
            icon={<PoweroffOutlined />}
            loading={false}
            onClick={openModel}
          >
            关闭小区
          </Button>
          <Button onClick={goToReturn}>
            <LeftOutlined />
            Back
          </Button>
        </div>
      </h3>

      <Divider />

      <div className="box">
        {/* 激活码 */}
        <div className="code">
          <li>激活码</li>
          <Avatar
            shape="square"
            style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
            size={120}
            icon={<FileJpgOutlined />}
          />
        </div>

        {/* 详情 */}
        <div className="list-item">
          <div className="item">
            <label>小区名字：</label>
            <span>XXXXX</span>
          </div>
          {/* ---------- */}
          <div className="item">
            <label>详细地址：</label>
            <span>XXXXX</span>
          </div>
          {/* ---------- */}
          <div className="item">
            <label>工作时间：</label>
            <span>XXXXX</span>
          </div>
          {/* ---------- */}
          <div className="inst">
            <div className="item">
              <label>小区联系电话：</label>
              <span>XXXXX</span>
            </div>
            <div className="item">
              <label>小区邮箱：</label>
              <span>XXXXX</span>
            </div>
          </div>

          {/* ---------- */}
          <div className="item">
            <label>小区管理员：</label>
            <span>XXXXX</span>
          </div>
          {/* ---------- */}
          <div className="item" style={{ marginBottom: '0' }}>
            <label>物业费：</label>
            <Checkbox.Group options={plainOptions} defaultValue={['1']} />
          </div>
        </div>
      </div>

      <Divider />

      <div className="box">
        <div className="list-item">
          <div className="item">
            <label>楼巴时刻表：</label>
            <Avatar
              shape="square"
              style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
              size={64}
              icon={<FileJpgOutlined />}
            />
            <Button type="link">预览</Button>
          </div>
          {/* ---------- */}
          <div className="item">
            <label>物业办事指南：</label>
            <Avatar
              shape="square"
              style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
              size={64}
              icon={<FilePdfOutlined />}
            />
            <Button type="link">预览</Button>
          </div>
          {/* ---------- */}
          <div className="item">
            <label>保质期服务：</label>
            <Avatar
              shape="square"
              style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
              size={64}
            />
            <Button type="link">预览</Button>
          </div>
        </div>
      </div>

      <Divider />

      <div className="box">
        <div className="list-item">
          <div className="item">
            <label>帮助中心：</label>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
          </div>
        </div>
      </div>

      <Divider />

      <div className="box">
        <div className="list-item">
          <div className="item">
            <label>临时到访码下载：</label>
            <Avatar
              shape="square"
              style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
              size={64}
            />
            <Button type="link">下载</Button>

            <Input placeholder="Basic usage" disabled value="12333333333" />
            <Button type="link" onClick={copy}>
              复制
            </Button>
          </div>
        </div>
      </div>

      {/* 确认关闭框 */}
      <Modal title="确认关闭小区吗?" visible={ModelFee} onCancel={handleCancel} onOk={handleOk}>
        <p>
          关闭小区将会<span style={{ color: 'red' }}>删除</span>小区内
          <span style={{ color: 'red' }}>所有</span>业主，请谨慎操作！
        </p>
      </Modal>
    </div>
  );
};

// export default Adds;
function map(state: any) {
  const Data = state.CellList.DataSave;
  const loading = state.loading.models.CellList;
  return { Data, loading };
}
export default connect(map)(Adds);
