import React, { useState, useEffect } from 'react';
import { Form, Select, Input, Button, Radio, notification, Spin, Tag } from 'antd';
import { editWebsite, getWebsite, addWebsite } from '@/services/mobileConfig/api';
import PicturesWall from '@/components/Upload/index';
import { stripBasename } from 'history/pathutils';
const { Item } = Form;
const { Option } = Select;
const SiteConfig = props => {
  const { miniTitle, submitCallback, addCallback, parentKey, clientName, singleList } = props;
  const [config, setConfig] = useState(''); // 网站配置信息
  const [loginList, setLoginList] = useState([
    { text: '科技蓝', value: 'default.html' },
    { text: 'h5_科技蓝', value: 'h5_default' },
    { text: 'h5_江西水务', value: 'h5_jiangxi' },
  ]); // 系统登陆页
  const [h5LoginList, setH5LoginList] = useState([
    { text: '科技蓝', value: 'h5_default' },
    { text: '江西水务', value: 'h5_jiangxi' },
  ]); // H5登陆页
  const [styleList, setStyleList] = useState([
    { text: '熊猫产品', value: 'default' },
    { text: '通用项目', value: 'project' },
  ]); // 系统风格
  const [themeList, setThemeList] = useState([{ text: '默认皮肤', value: 'default' }]); // 系统皮肤
  const [loading, setLoading] = useState(false);
  const [keepText, setKeepText] = useState([]);
  const [name, setName] = useState('');
  const [form] = Form.useForm();
  const layout = {
    layout: 'horizontal',
    labelCol: { span: 7 },
    wrapperCol: { span: 8 },
  };
  useEffect(() => {
    console.log(singleList);
    let aa = [];
    singleList.map(i => {
      aa.push(i.text);
    });
    setKeepText(aa);
    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];
        });
        console.log(obj);
        setName(obj.title);
        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: '请输入应用名称',
              },
              {
                validator: (rule, value) => {
                  let data = form.getFieldValue().title;
                  if (keepText.indexOf(data) != -1 && data != name) {
                    return Promise.reject('标题已存在');
                  }
                  return Promise.resolve();
                },
              },
            ]}
          >
            <Input placeholder="请输入应用名称" allowClear />
          </Item>
          <Item label="虚拟目录：">
            <Input value={clientName} disabled />
          </Item>
          <Item
            label="系统图标："
            name="shortcutIcon"
            rules={[
              {
                required: true,
                message: '请选择系统图标',
              },
            ]}
            style={{ display: 'none' }}
          >
            <PicturesWall picType="icon" />
          </Item>
          {/* <Item
            label="开机动画："
            name="bootAnimation"
            rules={[
              {
                required: true,
                message: '请选择开机动画',
              },
            ]}
          >
            <PicturesWall picType="bootAnimation" />
          </Item> */}
          <Item
            label="登录页："
            name="loginPageImage"
            rules={[
              {
                required: true,
                message: '请选择登录页',
              },
            ]}
          >
            <PicturesWall picType="loginPageImage" />
          </Item>
          <Item
            label="主页焦点图："
            name="homePageImage"
            rules={[
              {
                required: true,
                message: '请选择主页焦点图',
              },
            ]}
          >
            <PicturesWall picType="homePageImage" />
          </Item>

          <Item
            label="背景图："
            name="userPageImage"
            rules={[
              {
                required: true,
                message: '请选择背景图',
              },
            ]}
          >
            <PicturesWall picType="userPageImage" />
          </Item>

          <Item
            label="过渡页："
            name="bootAnimation"
            rules={[
              {
                required: true,
                message: '请选择过渡页',
              },
            ]}
          >
            <PicturesWall picType="bootAnimation" />
          </Item>

          <Item
            label="APP登陆页面："
            name="loginTemplate"
            rules={[
              {
                required: true,
                message: '请选择登陆页面',
              },
            ]}
          >
            <Select placeholder="请选择登陆页面">
              {loginList &&
                loginList.map((item, index) => (
                  <Option value={item.value} key={`item${index}`}>
                    {item.value.includes('h5') ? (
                      <Tag color="green">h5</Tag>
                    ) : (
                      <Tag color="blue">flutter</Tag>
                    )}
                    {item.text}
                  </Option>
                ))}
            </Select>
          </Item>
          <Item
            label="H5登陆页面："
            name="h5loginTemplate"
            rules={[
              {
                required: true,
                message: '请选择登陆页面',
              },
            ]}
          >
            <Select placeholder="请选择登陆页面">
              {h5LoginList &&
                h5LoginList.map((item, index) => (
                  <Option value={item.value} key={`item${index}`}>
                    {item.value.includes('h5') ? (
                      <Tag color="green">h5</Tag>
                    ) : (
                      <Tag color="blue">flutter</Tag>
                    )}
                    {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;
