import React, { useState, useEffect } from 'react';
import { Form, Button } from 'antd';
// import { FormattedMessage } from 'umi-plugin-react/locale';
import moment from 'moment';
import router from 'umi/router';
import Navigate from '@/components/Navigate';
// import AuthButton from '@/components/AuthButton';
import request from '../../../utils/request';
import apis from '../../../services/apis';

const cancelPage = () => {
  router.go(-1);
};

const BasicForm = props => {
  const { drainageId } = props.location.query;
  const [data, setData] = useState({});

  useEffect(() => {
    request({ ...apis.activity.detailDrainage, urlData: { id: drainageId } }).then(data => {
      setData(data);
    });
  }, []);

  const toDrainageDetail = () => {
    router.push({
      pathname: '/activity/drainage/h5edit',
      query: {
        id: data.activityId,
        name: data.name,
        drainageId,
      },
    });
  }

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };
  return (
    <>
      <Form {...formItemLayout}>
        <Form.Item label="H5活动编号：">
          <span>{data.drainageId}</span>
        </Form.Item>
        <Form.Item label="是否投放小程序：">
          <span>{data.isMiniapp ? '是' : '否'}</span>
        </Form.Item>
        <Form.Item label="H5活动名称：">
          <span>{data.name}</span>
        </Form.Item>
        {data.isMiniapp && (
          <Form.Item label="链接地址：">
            <span>{data.h5Address}</span>
          </Form.Item>
        )}
        {data.activityId && (
          <Form.Item label="扫码查看">
            <img src={data.qrCode} alt="" width="200"></img>
          </Form.Item>
        )}
        {data.activityId && (
          <Form.Item label="配置H5">
            <Navigate onClick={toDrainageDetail}>修改配置</Navigate>
          </Form.Item>
        )}
        <Form.Item label="上架状态：">
          <span>{data.status === 1 ? '已上架' : '未上架'}</span>
        </Form.Item>
        <Form.Item label="新建时间：">
          <span>{moment(data.createDate).format('YYYY-MM-DD HH:mm:ss')}</span>
        </Form.Item>
        <Form.Item label="自动下架时间：">
          <span>{moment(data.endDate).format('YYYY-MM-DD HH:mm:ss')}</span>
        </Form.Item>
        <Form.Item label="appid：">
          <span>{data.appid}</span>
        </Form.Item>
        <Form.Item label="secret：">
          <span>{data.appSecret}</span>
        </Form.Item>
        <Form.Item label="参与人数：">
          <span>{data.enlistNum}</span>
        </Form.Item>
        {data.isMiniapp && (
          <Form.Item label="分享语：">
            <span>{data.shareTitle}</span>
          </Form.Item>
        )}
        {data.isMiniapp && (
          <Form.Item label="分享图：">
            <img src={data.shareImg} width="75px" height="60px" alt="" />
          </Form.Item>
        )}
        {data.isMiniapp && (
          <Form.Item label="中间页飞机图：">
            <img src={data.middleImg} width="75px" height="166.7px" alt="" />
          </Form.Item>
        )}
        <Form.Item wrapperCol={{ span: 12, offset: 8 }}>
          <Button onClick={() => cancelPage()}>取消</Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default BasicForm;
