import UploadImage from '@/components/UploadImage';
import UploadVideo from '@/components/UploadVideo';
import UploadFile from '@/components/UploadFile';
import { addBanner, getBannerdById, updataBanner } from '@/services/rotationChart';
import {
  PageContainer,
  ProForm,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Card, Col, message, Row, Space, Image } from 'antd';
import { useEffect, useRef, useState } from 'react';

export default (props) => {
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get('id');
  const [data, setData] = useState({});
  const [imgLabel, setImgLabel] = useState('图片');
  const formRef = useRef();
  const navigate = useNavigate();

  useEffect(() => {
    if (id) {
      getBannerdById(id).then((res) => {
        setData(res);

        formRef.current.setFieldsValue(res);
      });
    }
  }, [id]);

  const onFinish = async (values) => {
    if (id) {
      // 修改
      updataBanner(id, { ...values }).then((res) => {
        message.success('修改成功');
        navigate(-1);
      });
    } else {
      // 新增
      addBanner({ ...values }).then((res) => {
        message.success('添加成功');
        navigate(-1);
      });
    }

    return false;
  };

  return (
    <PageContainer>
      <Card>
        <ProForm
          formRef={formRef}
          layout={'horizontal'}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
          initialValues={{ type: '1', state: '1' }}
          submitter={{
            searchConfig: {
              resetText: '返回',
            },
            onReset: () => navigate(-1),
            render: (props, doms) => {
              return (
                <Row>
                  <Col span={8} offset={8}>
                    <Space>{doms}</Space>
                  </Col>
                </Row>
              );
            },
          }}
        >
          <ProFormSelect
            name="type"
            width="md"
            label="轮播图类型"
            valueEnum={{
              1: '图片',
              2: '视频',
            }}
            placeholder="轮播图类型"
            rules={[{ required: true, message: 'Please select your country!' }]}
            onChange={({ value }) =>  setImgLabel(value === '1' ? '图片' : '封面')}
          />
          <ProForm.Item
            width="md"
            name="image"
            label={imgLabel}
            // extra="longgggggggggggggggggggggggggggggggggg"
            // rules={[{ required: true, message: '请上传图片' }]}
          >
            <UploadFile
              accept="image/*"
              preview={src => <div style={{ marginTop: '2em' }}><Image width={200} src={src} /></div>}
            />
          </ProForm.Item>
          <ProForm.Item noStyle shouldUpdate>
            {(form) => {
              return form.getFieldValue('type') == '1' ? null : (
                <ProForm.Item
                  width="md"
                  name="video"
                  label="视频"
                  // extra="longgggggggggggggggggggggggggggggggggg"
                  // rules={[{ required: true, message: '请上传图片' }]}
                >
                  <UploadFile
                    accept="video/*"
                    preview={src => <div style={{ marginTop: '6px' }}><video height={360} width={480} src={src} controls /></div>}
                  />
                </ProForm.Item>
              );
            }}
          </ProForm.Item>
          <ProFormRadio.Group
            name="state"
            label="状态"
            radioType="button"
            options={[
              {
                label: '上架',
                value: '1',
              },
              {
                label: '下架',
                value: '2',
              },
            ]}
          />
          <ProFormDigit name="qz" label="权重" width="md" />
          <ProFormTextArea width="md" name="desc" label="描述" placeholder="请输入描述" />
        </ProForm>
      </Card>
    </PageContainer>
  );
};
