import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker, InputNumber, Checkbox, Row, Col } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import XForm, { FieldTypes } from '../../../components/XForm';
import router from 'umi/router';
import moment from 'moment';
import apis from '../../../services/apis';
import request from '../../../utils/request';
import AuthButton from '@/components/AuthButton';
import Wangedit from '../../../components/Wangedit/Wangedit'
import DragableUploadImageList from './components/ContactInfo'
import TextArea from 'antd/lib/input/TextArea';
import copy from 'copy-to-clipboard';
import copyImg from '../../../assets/copy.png';
import Navigate from '@/components/Navigate';

const { Option } = Select;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;


const header = props => {
  const sampleId = props.location.query.id;
  const [demandData, setDemandData] = useState({})
  const [demandNum, setDemandNum] = useState()

  useEffect(() => {
    getDemandData(sampleId);
  }, [])

  // 查询列表
  const getDemandData = (demandId) => {
    request({ ...apis.taH5SampleManager.taH5SampleById, urlData: { id: sampleId } }).then((data) => {
      setDemandData(data)
      setDemandNum(data.demandNum)
      props.form.setFieldsValue(data)
    })
  }

  // 跳转到编辑
  const toDetail = rowData => () => {

    request({ ...apis.taH5SampleManager.taH5SampleById, urlData: { id: sampleId } }).then((data) => {
      if (rowData) {
        router.push({
          pathname: '/h5SampleManager/h5Sample/add',
          query: {
            id: sampleId,
            sampleName: demandData.sampleName
          },
        });
        return
      }
    }).catch(err => {
      message.info("该H5样例已取消发布或已删除")
    })


  }

  const toAddH5 = rowData => () => {
    router.push({
      pathname: '/h5SampleManager/h5Sample/addH5',
      query: {
        id: sampleId,
        sampleName: demandData.sampleName
      },
    });


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

  function viewDemand() {
    router.push({
      pathname: '/h5SampleManager/h5Demand/list',
      query: {
        id: sampleId,
        sampleName: demandData.sampleName,
      },
    });
  }

  //打开新页面
  const copyLink = (e) => {
    copy(e)
    message.info('复制成功')
  }

  function handleSubmit(e) {
  }

  function newTab(e) {
    console.log(e, 'eeeeeeee')
    const newWin = window.open('about:blank');
    newWin.location.href = e
  }

  const { getFieldDecorator } = props.form;

  return (
    <>
      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }} style={{ position: 'relative' }} onSubmit={handleSubmit}>
        <Form.Item label="样例名">
          <span>{demandData.sampleName}</span>
        </Form.Item>
        {demandData.sampleTryLink != '' && demandData.sampleTryLink != null && <Form.Item label="样例体验链接" help="请复制发送到手机，用手机微信打开，PC端打开样式比例与手机端不同，以手机端为准">
          <span>{demandData.sampleTryLink}</span><span style={{ marginLeft: '10px' }}><a onClick={(e) => copyLink(demandData.sampleTryLink)} style={{ color: 'orange' }}> <img src={copyImg} height="16px" width="14px" /> 复制链接</a></span>
        </Form.Item>}
        {demandData.sampleTryCode != '' && demandData.sampleTryCode != null && <Form.Item label="样例体验小程序码/二维码" help="请使用微信扫码查看样例体验">
          <img src={demandData.sampleTryCode} height="100px" width="120px" />
        </Form.Item>}
        {demandData.taContactList != null && demandData.taContactList != '' && <Form.Item label="联系人">
          <span style={{ color: 'rgba(0, 0, 0, 0.45)', fontSize: '14px' }}>若您想在您的小程序举办类似活动，请联系以下联系人咨询，或直接点击底部的 提交需求 按钮下单，下单后与联系人沟通定制活动</span>
          <DragableUploadImageList sampleId={sampleId}></DragableUploadImageList>
        </Form.Item>}
        <Form.Item label="样例内容">
          {demandData.sampleType === 'link' && <div><span style={{ color: 'rgba(0, 0, 0, 0.45)', fontSize: '14px' }}>点击链接查看内容</span><br /></div>}
          {demandData.sampleType === 'rich' ? getFieldDecorator('sampleContent')(<div dangerouslySetInnerHTML={{ __html: demandData.sampleContent }}></div>) : getFieldDecorator('sampleContentLink')(<Navigate to={demandData.sampleContentLink}>{demandData.sampleContentLink}</Navigate>)}
        </Form.Item>
        <Form.Item wrapperCol={{ span: 15, offset: 7 }}>
          <div style={{ margin: '0.16rem 0 0.06rem' }}>
            {!!demandData.h5TemplateId && <AuthButton name="admin.h5Sample.activity.add" noRight={null}>
              <Button type="primary" onClick={toAddH5(sampleId)} style={{ marginRight: '20px' }}>
                创建H5活动
              </Button>
            </AuthButton>}
            <Button type="primary" onClick={toDetail(sampleId)} style={{ marginRight: '20px' }}>
              提交需求
          </Button>
            <Button danger onClick={() => toCancel()} style={{ marginLeft: '20px' }}>
              取消
          </Button>
          </div>
        </Form.Item>
        <div style={{ position: 'fixed', right: '0.4rem', bottom: '6%' }}>
          {!!demandData.h5TemplateId && <AuthButton name="admin.h5Sample.activity.add" noRight={null}>
            <div style={{ display: 'flex', alignItems: 'center', minWidth: '1.1rem', justifyContent: 'space-between', marginBottom: '20px' }}>样例可直接使用 <span style={{ color: '#EF273A', margin: '0 0.1rem' }}>>></span>
              <Button type="primary" onClick={toAddH5(sampleId)} >
                创建H5活动
              </Button>
            </div>
          </AuthButton>}
          <div style={{ display: 'flex', alignItems: 'center', minWidth: '1.1rem', justifyContent: 'space-between' }}>我想办类似活动 <span style={{ color: '#EF273A', margin: '0 0.1rem' }}>>></span>
            <Button type="primary" onClick={toDetail(sampleId)} >
              提交需求
              </Button>
          </div>

          {demandNum != 0 && <div style={{ display: 'flex', alignItems: 'center', minWidth: '1.1rem', justifyContent: 'space-between', marginTop: '10px' }}>已有{demandNum + '个'}需求单 <span style={{ margin: '0 0.1rem' }}>>></span>
            <Button danger onClick={() => viewDemand()}>
              查看需求
            </Button>
          </div>
          }
        </div>
      </Form>
    </>
  )
}

const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader
