import React, { useState, useEffect } from 'react';
import { Form, Select, Input, Button, Radio, notification, Spin } from 'antd';
import { editWebsite, getWebsite, addWebsite } from '@/services/mobileConfig/api';
import PicturesWall from '@/components/Upload/index';
const { Item } = Form;
const { Option } = Select;
const AddConfig = props => {
  const { miniTitle, submitCallback, subType, addCallback, singleList } = props;
  console.log(subType, 'ubType');
  const [config, setConfig] = useState(''); // 网站配置信息
  const [loginList, setLoginList] = useState([{ text: '默认界面', value: 'default' }]); // 系统登陆页
  const [styleList, setStyleList] = useState([
    { text: '熊猫产品', value: 'default' },
    { text: '通用项目', value: 'project' },
  ]); // 系统风格
  const [themeList, setThemeList] = useState([{ text: '默认皮肤', value: 'default' }]); // 系统皮肤
  const [clientList, setClientList] = useState([
    { text: 'miniapp', value: 'miniapp' },
    { text: '手持系统', value: '手持系统' },
    { text: 'mypanda', value: 'mypanda' },
  ]);
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const layout = {
    layout: 'horizontal',
    labelCol: { span: 7 },
    wrapperCol: { span: 15 },
  };
  // 单选值改变
  const radioChange = e => {};
  // 提交选择
  const submit = value => {
    form.validateFields().then(valid => {
      if (valid) {
        if (
          singleList.some(item => item.text === valid.title || item.id.slice(6) === valid.client)
        ) {
          notification.error({
            message: '提示',
            duration: 3,
            description: '应用名称跟类别不能重复',
          });
          return;
        }
        setLoading(true);
        const obj = { ...form.getFieldsValue() };
        let params = { ...obj, mode: 'single' };
        addWebsite(params)
          .then(res => {
            setLoading(false);
            if (res.code === 0) {
              addCallback(params.title);
              notification.success({
                message: '提示',
                duration: 3,
                description: '新增成功',
              });
            } else {
              notification.error({
                message: '提示',
                duration: 10,
                description: res.message || '新增失败',
              });
            }
            console.log(res, 'res');
          })
          .catch(err => {
            setLoading(false);
          });
      }
    });
  };
  return (
    <Spin spinning={loading} tip="loading...">
      <div style={{ minHeight: 'calc(100vh  - 252px)', marginTop: '20px' }}>
        <Form form={form} name={`form-${miniTitle}`} {...layout}>
          <Item
            label="应用名称："
            name="title"
            rules={[
              {
                required: true,
                message: '请输入应用名称',
              },
            ]}
          >
            <Input placeholder="请输入应用名称" allowClear />
          </Item>
          <Item
            label="应用类别："
            name="client"
            rules={[
              {
                required: true,
                message: '请输入应用类别',
              },
            ]}
          >
            <Input placeholder="请输入应用类别" allowClear />
            {/* <Select placeholder="请选择应用类别">
              {clientList &&
                clientList.map((item, index) => (
                  <Option value={item.value} key={`item${index}`}>
                    {item.text}
                  </Option>
                ))}
            </Select> */}
          </Item>
          <Item
            label="系统图标："
            name="shortcutIcon"
            rules={[
              {
                required: true,
                message: '请选择系统图标',
              },
            ]}
          >
            <PicturesWall picType="icon" />
          </Item>

          <Item
            label="登陆页面："
            name="loginTemplate"
            rules={[
              {
                required: true,
                message: '请选择登陆页面',
              },
            ]}
          >
            <Select placeholder="请选择登陆页面">
              {loginList &&
                loginList.map((item, index) => (
                  <Option value={item.value} key={`item${index}`}>
                    {item.text}
                  </Option>
                ))}
            </Select>
          </Item>
          <Item
            label="系统皮肤："
            name="theme"
            rules={[
              {
                required: true,
                message: '请选择系统皮肤',
              },
            ]}
          >
            <Select placeholder="请选择系统皮肤">
              {themeList &&
                themeList.map((item, index) => (
                  <Option value={item.value} key={`item${index}`}>
                    {item.text}
                  </Option>
                ))}
            </Select>
          </Item>
          <Item
            label="系统风格："
            name="style"
            rules={[
              {
                required: true,
                message: '请选择系统风格',
              },
            ]}
          >
            <Select placeholder="请选择系统风格">
              {styleList &&
                styleList.map((item, index) => (
                  <Option value={item.value} key={`item${index}`}>
                    {item.text}
                  </Option>
                ))}
            </Select>
          </Item>
          <Item label="开启云登陆：" name="cloudLogin" initialValue={false}>
            <Radio.Group onChange={radioChange}>
              <Radio value>是</Radio>
              <Radio value={false}>否</Radio>
            </Radio.Group>
          </Item>
          <Item wrapperCol={{ span: 6, offset: 7 }}>
            <Button type="primary" onClick={submit}>
              提交
            </Button>
          </Item>
        </Form>
      </div>
    </Spin>
  );
};
export default AddConfig;
