import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { LeftOutlined, EyeOutlined, PoweroffOutlined } from '@ant-design/icons';
import { Modal, Input, Button, Spin, Checkbox, Image, message, Divider } from 'antd';
import { history } from 'umi';
// 样式
import './celllist.less';
import { RA } from '@/utils/method';
import imgs from '@/assets/logo_icon_bg.png';
import hfor from '@/assets/h5.png';

import PreView from '@/components/PreView';

import Axios from 'axios';
import fileDownload from 'js-file-download';

// 接口申明

const Detail = (props: any) => {
  const module = 'CellList';

  const { detailData, DataSave, dispatch, loading, overCom } = props;

  useEffect(() => {
    if (DataSave) {
      // 返回列表
      RA(32, { id: DataSave.id }, module, dispatch);
    } else {
      history.push('/CommunityManagement/CellList');
    }
  }, [1]);

  useEffect(() => {
    if (overCom != null) {
      message.success(`Community Deleted Successfully`);
      history.push('/CommunityManagement/CellList');
      // 然后在清空删除成功数据
      dispatch({
        type: module + '/comRemove',
      });
    }
  }, [overCom]);

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

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

  // 复制
  const copy = (msg: string, tip: string = 'Copy Success') => {
    var aux = document.createElement('input');
    aux.setAttribute('value', msg);
    document.body.appendChild(aux);
    aux.select();
    document.execCommand('copy');
    document.body.removeChild(aux);
    message.success(tip);
  };

  // 打开弹窗
  const openModel = () => {
    setModelFee(true);
  };
  // 关闭弹窗
  const handleCancel = () => {
    setModelFee(false);
  };
  // 关闭小区
  const handleOk = () => {
    // 删除小区
    RA(49, { id: DataSave.id }, module, dispatch);
  };

  // 打开附件下载
  async function opens(ans: string) {
    // message.warning('接口处理中');
    let msg = {
      // userToken: '',
      // type: ans.substr(ans.lastIndexOf('.') + 1),
      type: 'tosCommunityFileService',
      fileName: ans,
      extends: detailData.rows.residentialName,
    };
    RA(47, msg, module, dispatch);

    // 监听文件的变化进行下载
  }

  // 下载文件到本地
  const openDows = (url: any, name: any) => {
    Axios.get(url, {
      responseType: 'blob',
    }).then((res) => {
      fileDownload(res.data, name);
    });
  };

  return (
    <>
      <Spin spinning={loading}>
        {detailData.rows ? (
          <div className="form">
            <h3>
              <EyeOutlined />
              &nbsp;Community Details
              <div className="back">
                <Button
                  type="primary"
                  danger
                  style={{ marginRight: '15px' }}
                  icon={<PoweroffOutlined />}
                  loading={false}
                  onClick={openModel}
                >
                  <span className="capi">Close the community</span>
                </Button>
                <Button onClick={goToReturn}>
                  <LeftOutlined />
                  Back
                </Button>
              </div>
            </h3>

            <Divider />

            <div className="celBox">
              {/* 激活码 */}
              <div className="code">
                <li>Community Activation Code</li>
                <div
                  style={{ width: 122, height: 122, border: '1px solid #f0f0f0', margin: 'auto' }}
                >
                  <Image width={120} src={detailData.visitorUrl} />
                </div>
                {/* <Image width={140} src={detailData.visitorUrl} fallback={imgs} /> */}
                <li className="lis">{detailData.rows.cdkCode}</li>
              </div>

              {/* 详情 */}
              <div className="list-item">
                <div className="item">
                  <label>Community Name：</label>
                  <span>{detailData.rows.residentialName}</span>
                </div>
                {/* ---------- */}
                <div className="item">
                  <label>Community Address：</label>
                  <span>
                    {detailData.rows.residentialAddress}&nbsp;&nbsp; SINGAPORE &nbsp;
                    {/* 这是去掉 新加坡 英文字段 */}
                    {detailData.rows.residentialZipCode.substring(
                      detailData.rows.residentialZipCode.length - 6,
                      detailData.rows.residentialZipCode.length,
                    )}{' '}
                  </span>
                </div>
                {/* ---------- */}
                <div className="item">
                  <label>Working Hours：</label>
                  <span>
                    {detailData.rows.residentialStartWorking} -{' '}
                    {detailData.rows.residentialEndWorking}
                  </span>
                </div>
                {/* ---------- */}
                <div className="inst">
                  <div className="item">
                    <label>Community Telephone：</label>
                    <span>{detailData.rows.residentialPhone}</span>
                  </div>
                  <div className="item">
                    <label>Community Email：</label>
                    <span>{detailData.rows.residentialEmail}</span>
                  </div>
                </div>

                {/* ---------- */}
                <div className="item">
                  <label>Administrator：</label>
                  <span>{detailData.rows.residentialManagerUserName}</span>
                </div>
                {/* ---------- */}
                <div className="item" style={{ marginBottom: '0' }}>
                  <label>Property Fee：</label>
                  <Checkbox.Group options={plainOptions} defaultValue={['1']} />
                </div>
              </div>
            </div>

            <Divider />

            <div className="celBox">
              <div className="list-item">
                <div className="item">
                  <label>Shuttle Bus Timetable：</label>
                  <PreView OpenUrl={detailData.rows.balouscheduleUrl}></PreView>
                </div>
                {/* ---------- */}
                <div className="item">
                  <label>Property Guide：</label>
                  <PreView OpenUrl={detailData.rows.serviceGuideUrl}></PreView>
                </div>
                {/* ---------- */}
                <div className="item">
                  <label>Warranty Period Service：</label>
                  <PreView OpenUrl={detailData.rows.lifeServiceUrl}></PreView>
                </div>
              </div>
            </div>

            <Divider />

            <div className="celBox">
              <div className="list-item">
                <div className="item item_span">
                  <label>Help Center：</label>
                  <span>{detailData.rows.residentialHotlineName}</span>
                  <span>{detailData.rows.residentialHotline}</span>
                  <span>{detailData.rows.residentialHotlineServieStartTime}</span>
                  <span>{detailData.rows.residentialHotlineServieStartTime ? '-' : ''}</span>
                  <span>{detailData.rows.residentialHotlineServieEndTime}</span>
                </div>
              </div>
            </div>

            <Divider />

            <div className="celBox">
              <div className="list-item">
                <div className="item">
                  <label>Temporary Code：</label>
                  <Image width={64} src={hfor} />
                  <Button
                    type="link"
                    onClick={() => {
                      openDows(require('@/assets/h5.png'), 'code.png');
                    }}
                  >
                    Download
                  </Button>

                  <Input
                    placeholder="Basic usage"
                    disabled
                    style={{ width: '280px' }}
                    value="http://47.74.233.180:8651/tosVisitorNo"
                  />
                  <Button
                    type="link"
                    onClick={() => {
                      copy('http://47.74.233.180:8651/tosVisitorNo');
                    }}
                  >
                    Copy
                  </Button>
                </div>
              </div>
            </div>

            {/* 确认关闭框 */}
            <Modal
              title="Are You Sure You Want To Close The Community??"
              visible={ModelFee}
              centered={true}
              onCancel={handleCancel}
              onOk={handleOk}
              okText="Yes"
              cancelText="No"
              okType="danger"
              confirmLoading={loading}
            >
              <p className="capi">
                Close the community will delete <span style={{ color: 'red' }}> all owners </span>in
                the community .
              </p>
              <p className="capi">please operate carefully!</p>
            </Modal>
          </div>
        ) : (
          ''
        )}
      </Spin>
    </>
  );
};

// export default Adds;
function map(state: any) {
  const { DataSave, detailData, imgUrl, overCom } = state.CellList; // 上层传递来的值
  const loading = state.loading.models.CellList;
  console.log(state);
  return { DataSave, detailData, loading, imgUrl, overCom };
}
export default connect(map)(Detail);
