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 SiteConfig = props => {
  const { miniTitle, submitCallback, addCallback, parentKey, clientName } = props;
  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 [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const layout = {
    layout: 'horizontal',
    labelCol: { span: 7 },
    wrapperCol: { span: 8 },
  };
  useEffect(() => {
    console.log(miniTitle, 'miniTitle');
    if (!miniTitle) {
      return;
    }
    setLoading(true);
    getWebsite({
      _version: 9999,
      _dc: Date.now(),
      title: miniTitle,
    })
      .then(res => {
        setLoading(false);
        let obj = {};
        let arr = Object.keys(form.getFieldsValue());
        arr.map(k => {
          obj[k] = res.data[k];
        });
        form.setFieldsValue(obj);
      })
      .catch(err => {
        setLoading(false);
      });
  }, [miniTitle]);
  // 单选值改变
  const radioChange = e => {};
  // 提交选择
  const submit = value => {
    form.validateFields().then(valid => {
      if (valid) {
        setLoading(true);
        const obj = { ...form.getFieldsValue() };
        let params = { ...obj, mode: 'single', client: clientName };
        editWebsite(params)
          .then(res => {
            setLoading(false);
            if (res.code === 0) {
              submitCallback(obj.title);
              notification.success({
                message: '提示',
                duration: 3,
                description: '编辑成功',
              });
            } else {
              notification.error({
                message: '提示',
                duration: 3,
                description: res.message || '编辑失败',
              });
            }
          })
          .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="虚拟目录:">
            <Input value={clientName} disabled />
          </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 SiteConfig;