import { Button, Col, Divider, Form, Input, Row } from 'antd';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import LayoutView from '~/components/layout';
import api from './api';
import styles from './index.module.scss';
import { phoneNumber } from '~/lib/validateUtils';

export default function JoinPolicy() {
  const router = useRouter();
  const [content, setContent] = useState(''); //福利内容
  const tagId = Number(router.query.tagId);

  useEffect(() => {
    if (tagId) {
      api
        .getTagById({
          id: tagId,
        })
        .then((res) => {
          setContent(res.result?.tagDescription.replaceAll('\n', '<br/>') || '');
        });
    }
  }, []);
  //提交
  const onFinish = (values: any) => {
    console.log(values);
    api
      .cooperationApply({
        ...values,
        cooperationTagId: tagId,
      })
      .then((res) => {
        console.log('提交结果', res);
        if (res.code === '200') {
          window.messageApi.success('提交成功');
          setTimeout(() => {
            router.push('/');
          }, 1500);
        }
      });
  };

  return (
    <LayoutView>
      <div className={styles.banner}></div>
      <div
        className='page'
        style={{
          background: '#fff',
          position: 'relative',
          zIndex: 1,
          marginTop: 60,
          paddingBottom: 63,
        }}
      >
        <div
          className={styles.font1}
          style={{ textAlign: 'center', paddingTop: 40, paddingBottom: 30 }}
        >
          加盟入驻福利
        </div>
        <div
          className={styles.font2}
          style={{ paddingLeft: 50, paddingRight: 50 }}
          dangerouslySetInnerHTML={{ __html: content }}
        ></div>
        <Divider />
        <div className={styles.font1} style={{ textAlign: 'center', marginBottom: 28 }}>
          申请加盟入驻
        </div>
        <Row justify={'center'}>
          <Col style={{ width: 400 }}>
            <Form labelAlign='left' labelCol={{ span: 5 }} onFinish={onFinish}>
              <Form.Item label='姓名' name='applyName' rules={[{ required: true }]}>
                <Input placeholder='请输入姓名'></Input>
              </Form.Item>
              <Form.Item
                label='联系方式'
                name='applyPhone'
                rules={[
                  { required: true },
                  {
                    pattern: /^1\d{10}$/,
                    message: '很输入11位手机号',
                  },
                ]}
              >
                <Input placeholder='请输入手机号' maxLength={11} onInput={phoneNumber}></Input>
              </Form.Item>
              <Form.Item name='remark'>
                <Input.TextArea placeholder='其它信息'></Input.TextArea>
              </Form.Item>
              <Row justify={'center'}>
                <Button
                  type='primary'
                  htmlType='submit'
                  style={{ marginTop: 11, width: 200 }}
                  size='large'
                >
                  提交申请
                </Button>
              </Row>
            </Form>
          </Col>
        </Row>
      </div>
    </LayoutView>
  );
}
