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';
const { Item } = Form;
const { Option } = Select;
const AddConfig = props => {
  const { miniTitle, submitCallback, subType, addCallback, singleList, visible } = props;
  console.log(subType, 'ubType');
  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 [clientList, setClientList] = useState([
    { text: 'miniapp', value: 'miniapp' },
    { text: '手持系统', value: '手持系统' },
    { text: 'mypanda', value: 'mypanda' },
  ]);
  const [loading, setLoading] = useState(false);
  const [keepTitle, setKeepTitle] = useState([]);
  const [keepValue, setKeepValue] = useState([]);
  const [form] = Form.useForm();
  const layout = {
    layout: 'horizontal',
    labelCol: { span: 7 },
    wrapperCol: { span: 15 },
  };

  useEffect(() => {
    console.log(singleList);
    let text = [];
    let value = [];
    singleList.map(i => {
      text.push(i.text);
      value.push(i.subSystemValue);
    });
    setKeepTitle(text);
    setKeepValue(value);
    if (visible) {
      form.setFieldsValue({
        title: '新应用',
        shortcutIcon: 'assets\\images\\icon\\熊猫-白色.png',
        bootAnimation: 'assets\\images\\bootAnimation\\bootDefault.png',
        loginPageImage: 'assets\\images\\loginPageImage\\loginDefault.png',
        homePageImage: 'assets\\images\\homePageImage\\homeDefault.png',
        loginTemplate: loginList[0].value,
        theme: themeList[0].value,
        style: styleList[0].value,
      });
    }
  }, [visible]);
  // 单选值改变
  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={{ 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 (keepTitle.indexOf(data) != -1) {
                    return Promise.reject('标题已存在');
                  }
                  return Promise.resolve();
                },
              },
            ]}
          >
            <Input placeholder="请输入应用名称" allowClear />
          </Item>
          <Item
            label="虚拟目录："
            name="client"
            rules={[
              {
                required: true,
                message: '请输入虚拟目录',
              },
              {
                validator: (rule, value) => {
                  let data = form.getFieldValue().client;
                  if (data == 'CS') {
                    return Promise.reject('不允许输入CS');
                  }
                  if (keepValue.indexOf(data) != -1) {
                    return Promise.reject('虚拟目录已存在');
                  }
                  return Promise.resolve();
                },
              },
            ]}
          >
            <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: '请选择系统图标',
              },
            ]}
            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="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> */}
        </Form>
      </div>
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Button type="primary" onClick={submit}>
          提交
        </Button>
      </div>
    </Spin>
  );
};
export default AddConfig;
