import { Button, Form, Input, InputNumber, Select, DatePicker, Rate, Upload } from 'antd';
import { InnerContactField } from '@/components/DDComponents';
import { PlusOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
const { Option } = Select;
const { RangePicker } = DatePicker;
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

const AuditDetailed = ({ items }) => {
  const onFinish = values => {
    console.log(values);
  };
  const selectBefore = (
    <Select defaultValue="是" className="select-before">
      <Option value="是">是</Option>
      <Option value="否">否</Option>
    </Select>
  );
  const prefixSelector = (
    <Form.Item name="prefix" noStyle>
      <Select style={{ width: 70 }}>
        <Option value="86">+86</Option>
        <Option value="87">+87</Option>
      </Select>
    </Form.Item>
  );

  const children = [];
  for (let i = 10; i < 36; i++) {
    children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
  }

  const handleChange = value => {
    console.log(`selected ${value}`);
  };

  const GetComponent = item => {
    const {
      id,
      label,
      bizAlias,
      required,
      placeholder,
      options,
      align,
      statField,
      hideLabel,
      objOptions,
      format,
      pushToAttendance,
      labelEditableFreeze,
      requiredEditableFreeze,
      unit,
      extract,
      link,
      payEnable,
      bizType,
      childFieldVisible,
      notPrint,
      verticalPrint,
      hiddenInApprovalDetail,
      disabled,
      notUpper,
      children, // 子控件
    } = item.props;
    //{ id: startId, label: startLabel, upper, unit } = statField;是个array
    //objOptions ={value}
    // children ={componentName, props ={ id,label,bizAlias,required,}}

    console.log(item.props);
    let component;
    switch (item.componentName) {
      case 'TextField': //单行输入
        component = <Input disabled={disabled} placeholder={placeholder} />;
        break;
      case 'TextareaField': //多行输入
        component = <Input.TextArea disabled={disabled} placeholder={placeholder} />;
        break;
      case 'NumberField': //数字输入
        component = <InputNumber disabled={disabled} formatter={value => `${value}${unit}`} />;
        break;
      case 'DDSelectField': //单选框
        component = (
          <Select style={{ width: '100%' }} defaultValue="">
            {options.map(cur => (
              <Option key={cur.key} value={cur.key}>
                {cur.value}
              </Option>
            ))}
          </Select>
        );
        break;
      case 'DDMultiSelectField': //多选框
        component = (
          <Select mode="multiple" allowClear style={{ width: '100%' }} defaultValue="">
            {options.map(cur => (
              <Option value={cur}>{cur}</Option>
            ))}
          </Select>
        );
        break;
      case 'DDDateField': //日期控件
        component = <DatePicker format={format} />;
        break;
      case 'DDDateRangeField': //时间区间控件
        component = <RangePicker format={format} />;
        break;
      case 'TextNote': //文本说明控件
        // component = <p style={{textAlign: align}}></p>
        break;
      case 'PhoneField': //电话控件
        component = <Input type="phone" disabled={disabled} placeholder={placeholder} />;
        break;
      case 'DDPhotoField': //图片控件
        component = (
          <Upload>
            <Button icon={<PlusOutlined />}>添加图片</Button>
          </Upload>
        );
        break;
      case 'MoneyField': //金额控件
        component = <Input placeholder={placeholder} />;
        break;
      case 'TableField': //明细控件
        break;
      case 'DDAttachment': //附件
        component = (
          <Upload>
            <Button icon={<PlusOutlined />}>添加附件</Button>
          </Upload>
        );
        break;
      case 'InnerContactField': //联系人控件
        component = <InnerContactField></InnerContactField>;
        break;
      case 'DepartmentField': //部门控件
        break;
      case 'RelateField': //关联审批单
        break;
      case 'AddressField': //省市区控件
        break;
      case 'StarRatingField': //评分控件
        break;
      case 'FormRelateField': //关联控件
        break;
    }
    return (
      <Form.Item
        name={['user', 'introduction']}
        label={bizAlias || label}
        rules={[
          {
            required,
          },
        ]}
      >
        {component}
        {notUpper == 1 && <p>大写</p>}
      </Form.Item>
    );
  };

  return (
    <Form
      style={{ height: '300px', overflowY: 'scroll' }}
      layout="vertical"
      autoComplete="off"
      onFinish={onFinish}
    >
      {/* <Form.Item
        name={['user', 'name']}
        label="单行输入"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input placeholder="Basic usage" />
      </Form.Item>
      <Form.Item
        name={['user', 'name']}
        label="金额输入"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input placeholder="Basic usage" />
        <p>大写</p>
      </Form.Item>
      <Form.Item
        name={['user', 'age']}
        label="数字输入"
        rules={[
          {
            type: 'number',
            min: 0,
            max: 99,
          },
        ]}
      >
        <InputNumber placeholder="Basic usage" />
      </Form.Item>
      <Form.Item
        name={['user', 'introduction']}
        tooltip="This is a required field"
        label="多行输入"
      >
        <Input.TextArea placeholder="Basic usage" />
      </Form.Item>
      <Form.Item
        name="phone"
        label="Phone Number"
        rules={[{ required: true, message: 'Please input your phone number!' }]}
      >
        <Input addonBefore={prefixSelector} style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item name={['user', 'introduction']} label="单选框">
        <Select style={{ width: '30%' }} defaultValue="Home">
          <Option value="Home">Home</Option>
          <Option value="Company">Company</Option>
        </Select>
      </Form.Item>
      <Form.Item name={['user', 'introduction']} label="多选框">
        <Select
          mode="multiple"
          allowClear
          style={{ width: '100%' }}
          placeholder="Please select"
          defaultValue={['a10', 'c12']}
          onChange={handleChange}
        >
          {children}
        </Select>
      </Form.Item>
      <Form.Item name={['user', 'introduction']} label="时间组件">
        <DatePicker onChange={() => {}} />
      </Form.Item>
      <Form.Item name={['user', 'introduction']} label="开始时间">
        <DatePicker onChange={() => {}} />
        <Select style={{ width: '30%' }} defaultValue="Home">
          <Option value="Home">上午</Option>
          <Option value="Company">下午</Option>
        </Select>
      </Form.Item>
      <Form.Item name={['user', 'introduction']} label="结束时间">
        <DatePicker onChange={() => {}} />
        <Select style={{ width: '30%' }} defaultValue="Home">
          <Option value="Home">上午</Option>
          <Option value="Company">下午</Option>
        </Select>
      </Form.Item>
      <Form.Item name={['user', 'introduction']} label="评分">
        <Rate />
      </Form.Item> */}
      {/* <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item> */}

      {items.map(item => GetComponent(item))}
    </Form>
  );
};

export default AuditDetailed;