import React, { useState, useEffect } from 'react';
import { Input, Button, Card, Form, notification, message } from 'antd';
import router from 'umi/router';
import AuthButton from '@/components/AuthButton'
// import Styles from './style.less';
import ImageUploader from '@/components/XForm/ImageUpload';
import request from '@/utils/request';
import apis from '@/services/apis';
import { fetch } from '@/utils/request';
import pinyin from 'pinyin';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};

function Edit(props) {
  const { getFieldDecorator, getFieldValue, setFieldsValue } = props.form;
  const { form, history } = props;
  const updateBrandData = fetch(apis.brand.alterBrand);
  const saveBrandData = fetch(apis.brand.addBrand);
  const goBack = () => router.goBack(-1);
  const { validateFields } = form;

  // eslint-disable-next-line react-hooks/rules-of-hooks
  let data = {};
  const { brandId } = props.location.query;

  useEffect(() => {
    console.log(
      pinyin('地点', {
        style: pinyin.STYLE_FIRST_LETTER,
        heteronym: true,
      })[0][0],'1111111111111111'
    );
    if (brandId) {
      getById({ brandId });
    }
  }, [brandId]);

  //增+改
  function handleSubmit(e) {
    e.preventDefault();
    validateFields((err, values) => {
      if (err) {
        return;
        //字符验证未填写---返回
      }
      if (brandId) {
        updateBrandData({
          data: {
            ...values,
          },
          urlData: { id: brandId },
        })
          .then(() => {
            // setLoading(false);
            message.success('数据更新成功');
            goBack();
          })
          .catch(err => {
            // setLoading(false);//loading消失
            message.error(err.message || err);
          });
      } else {
        saveBrandData({ data: values })
          .then(() => {
            // setLoading(false);
            message.success('数据保存成功');
            goBack();
          })
          .catch(err => {
            // setLoading(false);//loading消失
            message.error(err.message || err);
          });
      }
    });
  }
  // 获取详情信息
  function getById(res) {
    request({ ...apis.brand.getBrand, urlData: { id: res.brandId } }).then(res => {
      data = res;
      props.form.setFieldsValue(res);
    });
  }
  const openNotificationWithIcon = (type, message) => {
    notification[type]({
      message,
      description: '',
    });
  };

  //修改
  // function submitData(dataSources) {
  //   if (id !== '') {
  //     // 修改
  //     updateType(dataSources);
  //     return;
  //   }
  //   dataSources.status = 1;
  //   dataSources.createDate = new Date();
  //   request({ ...apis.brand.alterBrand, data: { ...dataSources } })
  //     .then(() => {
  //       // eslint-disable-next-line no-unused-expressions
  //       openNotificationWithIcon('success', '操作成功');
  //       router.go(-1);
  //     })
  //     .catch(err => {});
  // }

  //新增
  // function updateType(row) {
  //   request({ ...apis.brand.addBrand, urlData: { id: row.brandId }, data: { ...row } })
  //     .then(() => {
  //       // eslint-disable-next-line no-unused-expressions
  //       openNotificationWithIcon('success', '操作成功');
  //       router.go(-1);
  //     })
  //     .catch(err => {});
  // }

  return (
    <Card>
      <Form {...formItemLayout} onSubmit={handleSubmit}>
        <Form.Item label="开发商名称">
          {getFieldDecorator('brandName', {
            rules: [
              {
                required: true,
                message: '请输入开发商名称!',
              },
            ],
          })(
            <Input
              onChange={e =>{
              //   console.log(e,'333333333')
              // const item =  
              //   console.log(item,'333333333')
              if(!e.target.value) return
                setFieldsValue({
                  indexLetter: pinyin(e.target.value, {
                    style: pinyin.STYLE_FIRST_LETTER,
                    heteronym: true,
                  })[0][0]?.toUpperCase()
                })
              }
                
              }
              style={{ width: 200 }}
            />,
          )}
        </Form.Item>
        <Form.Item label="开发商索引">
          {getFieldDecorator('indexLetter', {
            // value={}
            rules: [{ required: true, message: '请输入开发商索引' }],
          })(<Input style={{ width: 200 }}  disabled/>)}
        </Form.Item>
        <Form.Item label="品牌logo">
          {getFieldDecorator('brandLogo', {
            rules: [{ required: true, message: '请上传品牌logo' }],
          })(<ImageUploader />)}
        </Form.Item>
        <Form.Item label="品牌宣传图" help="建议尺寸：750*750，比例1:1">
          {getFieldDecorator('brandImg', {
            rules: [{ required: true, message: '请上传品牌宣传图' }],
          })(<ImageUploader />)}
        </Form.Item>
        <Form.Item label="开发商简介">
          {getFieldDecorator('brandRemark', {
            rules: [{ required: true, message: '请输入开发商简介' }],
          })(<Input.TextArea style={{ width: 400 }} placeholder="120字内的简介" />)}
        </Form.Item>

        <Form.Item
          {...tailFormItemLayout}
          style={{ display: 'flex', justifyContent: 'space-between' }}
        >
          <AuthButton name="building.brand">
            <Button type="primary" htmlType="submit" style={{ margin: '0' }}>
              确定
            </Button>
          </AuthButton>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Button onClick={() => router.go(-1)}>取消</Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

const WrappedBuidingTypeForm = Form.create({ name: 'Edit' })(Edit);

export default WrappedBuidingTypeForm;
