import React, { useState, useEffect } from 'react';
import { Button, Spin, Input, message, Divider, Radio, Form, Select, DatePicker, Upload } from 'antd';
import { formItemLayout, base, formRules, setFormData, stateTransforToStore } from './entity';
import BraftEditor, { EditorState } from 'braft-editor';
import * as IF from './interface';
import { UploadOutlined } from '@ant-design/icons';
import COS from "@/utils/COS";
import ImageUploaderInfo from './components/ImageUploader';
import AsksCard from './components/AsksCard';
// @ts-ignore
import { ContentUtils } from 'braft-utils';
import PositionSelector from "@/components/PositionSelector";
import moment from 'moment';
import useInitail from '@/hooks/useInitail';
import { useStore } from '@/pages/mkt/ActivityCreate/index';
import * as api from './api';

interface Props {
  onNext: Function;
}

const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const TextArea = Input.TextArea;
const RadioGroup = Radio.Group;

interface InfoParams {
  errMsg?: string;
  loading?: boolean;
}
function Index({ onNext }: Props) {
  const { baseInfo, setBaseInfo } = useStore();
  const [form] = Form.useForm();
  const [readOnly, setReadOnly] = useState<boolean>(false);
  const [Infos, setnfos] = useState<InfoParams>({ loading: false });
  const [saveLoading, setSaveLoading] = useState<boolean>(false);
  const [editor, setEditor] = useState(BraftEditor.createEditorState(''));
  const [fileList, setFileList] = useState([]);
  const [activityType, setActivityType] = useState<number>(0);
  const { data: ActivityTypeList, errMsg: TypeErr } = useInitail(api.getActivityType, [], {});
  const { changeEnable, activityNo, bizType } = baseInfo;

  useEffect(() => {
    activityNo && fetchDetail(activityNo);
  }, [activityNo]);

  function fetchDetail(no: string) {
    setnfos({ loading: true });
    // const detailApi = changeEnable?
    api.getBasicInfoApi({ activityNo: no, change: changeEnable }).then(res => {
      const { data } = res;
      let _data = { ...data };
      setBaseInfo({ ...baseInfo, bizType: _data.bizType, addressType: _data.addressType, activityType: _data.activityType });
      if (![1, 3].includes(_data.status || 0)) {
        setReadOnly(true);
      }
      setEditor(BraftEditor.createEditorState(_data.remark));
      form.setFieldsValue(setFormData(_data));
      setnfos({ loading: false });
    }).catch(e => {
      setnfos({ loading: false, errMsg: e.message });
      message.error(e.message);
    });
  }

  function submitHandle() {
    form.validateFields().then(values => {
      // setSaveLoading(true);
      const content = editor.toHTML();
      const _va = stateTransforToStore(values);
      const params = {
        activityNo: baseInfo.activityNo,
        remark: content === '<p></p>' ? '' : content,
        ..._va,
      };
      const changePramas = {
        activityNo: baseInfo.activityNo,
      };

      if (changeEnable) {
        // for (let key in params) {
        //   if (key === 'asks' && (params[key] || []).length != (data.asks || []).length) {
        //     changePramas[key] = params[key];
        //   } else if (params[key] != data[key]) {
        //     changePramas[key] = params[key];
        //   }
        // }
          params.bizType = undefined;
          params.activityType = undefined;
          params.address = undefined;
          params.addressType = undefined;
          params.startTime = undefined;
          params.couponValidTime = undefined;
      }
      const currentApi = changeEnable ? api.changeBasicInfoApi : api.saveBasicInfoApi;
      currentApi(params).then((res) => {
        message.success('保存成功');
        if (changeEnable) {
          setSaveLoading(false);
          return;
        }
        setBaseInfo({
          ...baseInfo,
          bizType: params.bizType,
          activityNo: res.data,
          addressType: values.addressType,
          activityType: values.activityType
        });
        onNext && onNext();
        setSaveLoading(false);
      }).catch(e => {
        setSaveLoading(false);
        message.error(e.message);
      });
    });
  }

  /** 编辑器 */
  function uplodaChange(info: any) {
    let _editor = editor;
    let _fileList = [];
    if (Array.isArray(info)) {
      _fileList = info;
    } else {
      _fileList = info.fileList;
    }
    if (_fileList.length > 0) {
      _fileList = _fileList.slice(-1);
    }
    if (_fileList[0].status === 'done') {
      _editor = ContentUtils.insertMedias(_editor, [
        {
          type: 'IMAGE',
          url: _fileList[0].response.data
        }
      ]);
    }
    setEditor(_editor);
    setFileList(_fileList);
  }
  return (
    <div>
      <Spin spinning={Infos.loading}>
        {Infos.errMsg ? (
          <div style={{ textAlign: "center", color: "red" }}>{Infos.errMsg || "加载错误!"}</div>
        ) : (
          <Form form={form} scrollToFirstError onFinish={submitHandle} {...formItemLayout}>
            <Form.Item label="业态类型" name="bizType" {...formRules.bizType}>
              <Radio.Group disabled={readOnly} onChange={(e) => setBaseInfo({ ...baseInfo, bizType: e.target.value })}>
                <Radio value={1}>售前活动 </Radio>
                <Radio value={2}>售后活动</Radio>
              </Radio.Group>
            </Form.Item>
            <FormItem name="activityType" label="活动类型" {...formRules.activityType}>
              <Select
                showSearch
                disabled={readOnly}
                notFoundContent={TypeErr || ''}
                optionFilterProp="children"
                placeholder="请选择活动类型"
                onChange={(v) => {
                  setActivityType(v);
                  [5, 6, 9].includes(v) && form.setFieldsValue({ addressType: 2 });
                }}
              >
                {ActivityTypeList.map(v => (
                  <Select.Option value={v.code} key={v.code}>{v.name}</Select.Option>
                ))}
              </Select>
            </FormItem>
            <FormItem name="activityName" label="活动名称" {...formRules.activityName}>
              <Input placeholder="输入活动名称" disabled={readOnly && !changeEnable} />
            </FormItem>
            <FormItem label="活动描述">
              <BraftEditor
                placeholder="请输入内容"
                value={editor}
                onChange={(editorState: EditorState) => setEditor(editorState)}
                readOnly={readOnly && !changeEnable}
                extendControls={[
                  {
                    key: 'antd-uploader',
                    type: 'component',
                    component: (
                      <Upload
                        accept="image/*"
                        showUploadList={false}
                        // action="api/activity/util/file/uploadStatic"
                        customRequest={(data) => COS.cosUpload({ ...data, uploadPath: "/api/file/upload" })}
                        onChange={uplodaChange}
                        fileList={fileList}
                      >
                        <button type="button" className="control-item button upload-button" data-title="插入图片">
                          <UploadOutlined />
                        </button>
                      </Upload>
                    )
                  }
                ]}
              />
            </FormItem>
            <FormItem label="活动时间" name="startTime" {...formRules.startTime}>
              <RangePicker
                disabled={[readOnly, readOnly && !changeEnable]}
                allowClear
                style={{ width: '100%' }}
                showTime={{
                  hideDisabledOptions: true,
                  defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                }}
                disabledDate={(current) => current && current < moment().subtract(1, "days")}
                format="YYYY-MM-DD HH:mm:ss"
              />
            </FormItem>
            <FormItem label="优惠券有效时间" name="couponValidTime" {...formRules.couponValidTime}>
              <RangePicker
                disabled={[readOnly, readOnly && !changeEnable]}
                allowClear
                style={{ width: '100%' }}
                showTime={{
                  hideDisabledOptions: true,
                  defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                }}
                format="YYYY-MM-DD HH:mm:ss"
              />
            </FormItem>
            <FormItem label="活动地点类型" name="addressType" {...formRules.addressType}>
              <RadioGroup disabled={readOnly}>
                {![5, 6, 9].includes(activityType) && <Radio value={1}>按门店地址</Radio>}
                <Radio value={2}>统一地址</Radio>
              </RadioGroup>
            </FormItem>
            <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.addressType != currentValues.addressType}>
              {({ getFieldValue }): any => {
                return getFieldValue("addressType") === 2 ? (
                  <Form.Item label="地址" name="address" rules={[{ required: true, message: '请选择地址' }]}>
                    <PositionSelector disabled={readOnly} />
                  </Form.Item>
                ) : null;
              }}
            </Form.Item>
            <Divider orientation="left">上传图片</Divider>
            <FormItem wrapperCol={{ span: 24 }} labelCol={{ span: 0 }}>
              <ImageUploaderInfo form={form} readOnly={readOnly && !changeEnable} bizType={bizType} />
            </FormItem>
            <FormItem name="asks" wrapperCol={{ span: 24 }} labelCol={{ span: 0 }}>
              <AsksCard readOnly={readOnly && !changeEnable} />
            </FormItem>
            <div style={{ width: "100%", textAlign: 'center' }}>
              {readOnly && !changeEnable ? (<Button type="primary" style={{ marginBottom: 10 }} onClick={() => history.back()}>返回列表</Button>)
                : (
                  <Button type="primary" style={{ marginBottom: 10 }} onClick={() => form.submit()} loading={saveLoading}>保存基本信息 (下一步)</Button>
                )}
            </div>
          </Form>
        )}
      </Spin>
    </div>
  );
}
export default Index;