import React, { useState, useEffect, useRef, useCallback } from 'react';
import {
  getLoginPage,
  getMapCofigs,
  getWebThemes,
  getProductList,
  GetUserName,
} from '@/services/webConfig/api';
import { SketchPicker } from 'react-color';
import {
  Drawer,
  notification,
  Button,
  Space,
  Form,
  Input,
  Select,
  Checkbox,
  Radio,
  Tooltip,
  Divider,
  AutoComplete,
  Row,
  Col,
  Switch,
  message,
} from 'antd';
import RMSComponents from '@/components/RolePmSite/index';
import PersonnelSelector from '@/components/PersonnelSelector/index';
import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
import TreeSelect from '../menuconfig/TreeSelect';
import WebConfigForm from './webConfigForm';
import ColorLinear from './ColorLinear';
import Upload from '@/components/Upload';
import styles from './siteConfigDrawer.less';
import ParmarModal from './ParmarModal';
import HomePageConfigs from './HomePageConfigs';
const { Option } = Select;
const plainOptions = ['搜索', '消息'];
const defaultCheckedList = ['搜索', '消息'];
const colorList = [
  {
    key: '科技蓝',
    color: '#0087F7',
    headerColor: 'linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)',
  },
  {
    key: '环保绿',
    color: '#009C73',
    headerColor: 'linear-gradient(0deg, #00845D 0%, #02BF87 100%)',
  },
  {
    key: '清澈蓝',
    color: '#1890FF',
    headerColor: '#1890FF',
  },
];

export default props => {
  const {
    visible,
    onClose,
    config,
    hasIntegerate,
    isEdit,
    onOk,
    submitting,
    productList,
    allProductList,
    userMode,
    webs,
    curWeb,
  } = props;
  const [form] = Form.useForm();
  const [loginPages, setLoginPages] = useState([]);
  const [checkedList, setCheckedList] = useState([]);
  const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(true);
  const [displayColorPicker, setDisplayColorPicker] = useState(false);
  const [color, setColor] = useState('');
  const CheckboxGroup = Checkbox.Group;
  const [showAdvanced, setShowAdvanced] = useState(false); // 是否显示高级设置
  const [showParmarModal, setShowParmarModal] = useState(false);
  const [keepText, setKeepText] = useState([]);
  const [keepValue, setKeepValue] = useState([]);

  const [visibleChecked, setVisibleChecked] = useState(''); // 菜单开关
  const [visibleChecked1, setVisibleChecked1] = useState(''); // SaaS样式开关
  const [visibleChecked2, setVisibleChecked2] = useState(''); // Web4地图开关
  const [visibleChecked3, setVisibleChecked3] = useState(''); // 消息标记开关
  const [visibleChecked4, setVisibleChecked4] = useState(''); // 语音播报开关
  const [visibleChecked5, setVisibleChecked5] = useState(''); // 菜单样式开关
  const [visibleChecked7, setVisibleChecked7] = useState(''); // 地图遮罩开关
  const [homePageConfig, setHomePageConfig] = useState();
  const homepageConfigRef = useRef();
  const [addVisible, setAddVisible] = useState(false);
  const [checkValue, setCheckValue] = useState([]);
  const [checkValueList, setCheckValueList] = useState([]);
  const [aftercare, setAftercare] = useState('请勾选不显示售后服务的用户');
  useEffect(() => {
    onGetLoginPages();
    let text = [];
    let value = [];
    webs.map(i => {
      text.push(i.text);
      value.push(i.subSystemValue);
    });
    setKeepText(text);
    setKeepValue(value);
    if (isEdit) {
      if (config != null && config.topMenu) {
        setCheckedList(config.topMenu.split(','));
        if (config.topMenu.split(',').length == 1 && config.topMenu.split(',')[0] == '') {
          setIndeterminate(false);
        } else {
          setIndeterminate(
            !!config.topMenu.split(',').length &&
              config.topMenu.split(',').length < plainOptions.length,
          );
        }

        setCheckAll(config.topMenu.split(',').length === plainOptions.length);
      }
    } else {
      setCheckValue([]);
      setAftercare('请勾选不显示售后服务的用户');
      setCheckedList(defaultCheckedList);
      setIndeterminate(false);
      setCheckAll(true);
    }
    if (visible == false) {
      setCheckedList([]);
      setCheckValue([]);
    }
  }, [visible]);

  useEffect(() => {
    if (visible) {
      if (isEdit) {
        // 获取表单回显
        console.log(config, 'config');
        debugger;
        if (config.CloudStyle == '是') {
          config.CloudStyle == true;
          setVisibleChecked1(true);
        } else {
          config.CloudStyle == false;
          setVisibleChecked1(false);
        }

        if (config.messageMarking == 'All') {
          config.messageMarking == true;
          setVisibleChecked3(true);
        } else {
          config.messageMarking == false;
          setVisibleChecked3(false);
        }

        if (config.menuState == 'open') {
          config.menuState == true;
          setVisibleChecked5(true);
        } else {
          config.menuState == false;
          setVisibleChecked5(false);
        }
        console.log(config);

        setVisibleChecked(config.navTheme == 'light');
        setVisibleChecked2(config.hideMap);
        setVisibleChecked4(config.messageVoice);
        setVisibleChecked7(config.useCoverMap == 'true');
        setHomePageConfig(config.roleHomePages);
        form.setFieldsValue({
          ...config,
          primaryColor: config.primaryColor ? config.primaryColor : '#0087F7',
          navTheme: config.navTheme == 'light',
          CloudStyle: config.CloudStyle,
          messageMarking: config.messageMarking,
          hideMap: config.hideMap,
          messageVoice: config.messageVoice,
          menuState: config.menuState,
          useCoverMap: config.useCoverMap == 'true',
          isCache: config.isCache,
          changeStation: config.changeStation,
          headerPrimaryColor: config.headerPrimaryColor
            ? config.headerPrimaryColor
            : 'linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)',
        });
        setColor(
          config.headerPrimaryColor
            ? config.headerPrimaryColor
            : 'linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)',
        );
        if (!config.afterSales || config.afterSales === '' || config.afterSales === null) {
          setAftercare('请勾选不显示售后服务的用户');
          setCheckValue([]);
          setCheckValueList([]);
        } else {
          setCheckValue(config.afterSales);
          setCheckValueList(config.afterSalesInfo);
          GetUserName({ userIds: config.afterSales }).then(res => {
            if (res.code === 0) {
              let data = res.data.toString();
              setAftercare(data);
              form.setFieldsValue({ afterSales: data });
            }
          });
        }
      } else {
        setColor('linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)');
        setVisibleChecked(false);
        setVisibleChecked1(true);
        setVisibleChecked2(true);
        setVisibleChecked3(true);
        setVisibleChecked4(true);
        setVisibleChecked5(true);
        setVisibleChecked7(true);
        setHomePageConfig([]);
        form.setFieldsValue({
          shortcutIcon: 'assets\\images\\icon\\熊猫-蓝色.png',
          logo: 'assets\\images\\logo\\熊猫-蓝绿色.svg',
          bannerLogo: 'assets\\images\\logo\\熊猫-白色.svg',
          title: '新网站',
          messageMarking: true,
          messageVoice: true,
          menuState: true,
          hideMap: true,
          loginTemplate: 'Dark',
          primaryColor: '#0087F7',
          navTheme: false,
          CloudStyle: true,
          useCoverMap: true,
          isCache: true,
          changeStation: false,
          headerPrimaryColor: 'linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)',
        });
        setCheckValue([]);
        setAftercare('请勾选不显示售后服务的用户');
      }
    } else {
      setShowAdvanced(false);
      form.resetFields();
      setVisibleChecked('');
      setVisibleChecked1('');
      setVisibleChecked2('');
      setVisibleChecked3('');
      setVisibleChecked4('');
      setVisibleChecked5('');
      setHomePageConfig([]);
      setCheckValue([]);
      setCheckValueList([]);
      setAftercare('');
    }
  }, [visible]);
  const onGetLoginPages = () => {
    if (loginPages.length === 0) {
      getLoginPage().then(res => {
        let list = [
          {
            label: renderTitle('web5内置模板'),
            options: [],
          },
          {
            label: renderTitle('web4登录模板'),
            options: [],
          },
        ];
        res.data.loginTemplate.forEach(item => {
          if (item.type === 'web5') {
            list[0].options.push(renderItem(`${item.title}`));
          }
          if (item.type === 'web4') {
            list[1].options.push(renderItem(`${item.title}`));
          }
        });

        setLoginPages(list);
      });
    }
  };
  const renderItem = title => ({
    value: title,
    label: (
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
        }}
      >
        {title}
      </div>
    ),
  });
  // 登录搜索头部
  const renderTitle = title => <span>{title}</span>;

  const onsubmit = () => {
    form.validateFields().then(validate => {
      // if (checkedList.find(i => i == '首页') && !validate.homePage) {
      //   notification.warning({
      //     message: '提示',
      //     duration: 3,
      //     description: '功能配置勾选首页时主页Url必填',
      //   });
      //   return;
      // }
      validate.topMenu = checkedList.toString();
      validate.navTheme = visibleChecked ? 'light' : 'dark';
      validate.CloudStyle = visibleChecked1 ? '是' : '否';
      validate.messageMarking = visibleChecked3 ? 'All' : 'One';
      validate.menuState = visibleChecked5 ? 'open' : 'close';
      validate.afterSales = checkValue && checkValue.toString();

      console.log(validate);
      if (validate.homePage) {
        let arr = validate.homePage.split('/'); // 用const声明常量
        let allProList = JSON.parse(JSON.stringify(allProductList));
        allProList.push({ PackageName: 'civ_base' });
        const product = allProList.find(item => item.PackageName === arr[0]);
        if (product) {
          arr.shift();
          validate.homePage = arr.join('/');
        }
        console.log(product, 'product');
        validate.productType = product?.PackageName || 'civweb4';
        let proList = JSON.parse(JSON.stringify(productList));
        proList.push({ PackageName: 'civ_base' });
        if (
          !proList.some(item => item.PackageName === validate.productType) &&
          validate.productType !== 'civweb4'
        ) {
          message.error(`${validate.productType}未授权,不能使用该功能当主页`);
          return;
        }
      }

      console.log(validate);

      if (validate) {
        const colorIndex = colorList.findIndex(item => item.color === validate.primaryColor);
        let pages = homepageConfigRef.current.getHomePageConfig().map((item, index) => {
          let str = item.homePage.replace(/^[^\/]+\/+/, '');
          console.log(str, 'fasdasd');
          return {
            ...item,
            homePage: item.homePage.replace(/^[^\/]+\/+/, ''),
            index,
          };
        });
        console.log(pages, 'pages');

        onOk({
          ...validate,
          roleHomePages: pages,
          headerPrimaryColor: colorList[colorIndex].headerColor,
          mode: 'single',
          menu: 'banner-left',
        });
      }
    });
  };

  const onCheckAllChange = e => {
    setCheckedList(e.target.checked ? plainOptions : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  const onChange = list => {
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };
  const colorChange = value => {
    setColor(value);
    form.setFieldsValue({ headerPrimaryColor: value });
  };

  const addParama = () => {
    if (!form.getFieldValue('loginTemplate')) {
      notification.error({ message: '提示', duration: 3, description: '请先选择登录模板' });
      return;
    }
    setShowParmarModal(true);
  };

  const change = e => {
    setVisibleChecked(e);
  };

  const change1 = e => {
    setVisibleChecked1(e);
  };
  const change2 = e => {
    setVisibleChecked2(e);
  };

  const change3 = e => {
    setVisibleChecked3(e);
  };
  const change4 = e => {
    setVisibleChecked4(e);
  };

  const change5 = e => {
    setVisibleChecked5(e);
  };

  const change7 = e => {
    setVisibleChecked7(e);
  };

  const rolCallBack = useCallback(list => {
    console.log(list);
    debugger;
    setCheckValueList(list.checkList);
    setAddVisible(false);
    setAftercare(list.text === '' ? '请勾选不显示售后服务的用户' : list.text);
    setCheckValue(list.ids);
  });

  return (
    <Drawer
      title={isEdit ? '查看/编辑网站配置' : '新增网站'}
      width={550}
      onClose={onClose}
      visible={visible}
      destroyOnClose
      footer={
        <Space>
          <Button onClick={onClose}>取消</Button>
          <Button onClick={onsubmit} type="primary">
            确定
          </Button>
        </Space>
      }
    >
      <Form
        form={form}
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 19 }}
        initialValues={{ remember: true }}
      >
        <Form.Item
          label="标题"
          name="title"
          rules={[
            {
              required: true,
              message: '标题为必填项',
            },
            {
              validator: (rule, value) => {
                let data = form.getFieldValue().title;
                if (keepText.indexOf(data) != -1 && !isEdit) {
                  return Promise.reject('标题已存在');
                }
                if (keepText.indexOf(data) != -1 && data != config.title) {
                  return Promise.reject('标题已存在');
                }
                return Promise.resolve();
              },
            },
          ]}
        >
          <Input placeholder="请输入标题" autoComplete="off" />
        </Form.Item>
        <Form.Item label="副标题" name="subtitle">
          <Input placeholder="请输入副标题" autoComplete="off" />
        </Form.Item>
        <Form.Item
          label="系统Icon"
          name="shortcutIcon"
          style={{ height: '112px' }}
          rules={[
            {
              required: true,
              message: '请选择菜单图标',
            },
          ]}
        >
          <Upload picType="icon" />
        </Form.Item>
        <Form.Item
          label="登录Logo"
          name="logo"
          style={{ height: '112px' }}
          rules={[
            {
              required: true,
              message: '请选择图标icon',
            },
          ]}
        >
          <Upload picType="logo" />
        </Form.Item>
        <Form.Item
          label="标题Logo"
          name="bannerLogo"
          style={{ height: '112px' }}
          rules={[
            {
              required: true,
              message: '请选择标题logo',
            },
          ]}
        >
          <Upload picType="logo" />
        </Form.Item>
        <Form.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 && !isEdit) {
                  return Promise.reject('虚拟目录已存在');
                }
                return Promise.resolve();
              },
            },
          ]}
        >
          <Input autoComplete="off" disabled={isEdit} />
        </Form.Item>
        <Form.Item label="登录模板" name="loginTemplate">
          <AutoComplete placeholder="请选择登录模板" options={loginPages} allowClear filterOption />
        </Form.Item>
        <Form.Item label="页面缓存" name="isCache" valuePropName="checked">
          <Switch checkedChildren="开启" unCheckedChildren="关闭" />
        </Form.Item>
        <Form.Item label="站点切换" name="changeStation" valuePropName="checked">
          <Switch checkedChildren="开启" unCheckedChildren="关闭" />
        </Form.Item>
        <Divider orientation="left" style={{ borderTopColor: '#99bbe8' }}>
          主页配置
        </Divider>
        {/* <Form.Item label="产品类型(默认)" name="productType">
          <Select placeholder="请选择主页产品类型">
            {productList.map(item => (
              <Option value={item.PackageName} key={item.PackageName}>
                {`${item.ProductName}(${item.PackageName})`}
              </Option>
            ))}
          </Select>
        </Form.Item> */}
        <Form.Item label="主页地址(默认)" name="homePage">
          {/* <Input placeholder="请输入主页路径" autoComplete="off" /> */}
          <TreeSelect menuChange={val => {}} />
        </Form.Item>
        <HomePageConfigs
          ref={homepageConfigRef}
          userMode={userMode}
          curWeb={curWeb}
          roleHomePages={homePageConfig}
          productList={productList}
          allProductList={allProductList}
          client={form.getFieldValue('client')}
        />
        <Divider orientation="left" style={{ borderTopColor: '#99bbe8' }}>
          主题配置
        </Divider>

        {/* <Form.Item name="headerPrimaryColor" label="顶部">
          <div className={styles.colorBox}>
            <div
              className={styles.colorSwatch}
              onClick={e => {
                setDisplayColorPicker(!displayColorPicker);
              }}
            >
              <div>颜色</div>
              <div
                style={{
                  background: color,
                  height: '10px',
                  width: '10px',
                  margin: '10px 0 0 5px',
                }}
              />
            </div>
          </div>
        </Form.Item> */}
        <Form.Item name="primaryColor" label="主题色">
          <Select placeholder="请选择颜色">
            {colorList.map(item => (
              <Option value={item.color} key={item.color}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div
                    style={{
                      height: '10px',
                      width: '10px',
                      background: item.color,
                      marginRight: '5px',
                    }}
                  />
                  {`${item.key}(${item.color})`}
                </div>
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="navTheme" label="菜单">
          {/* <Radio.Group>
            <Radio value="dark">暗</Radio>
            <Radio value="light">亮</Radio>
          </Radio.Group> */}
          <Switch
            checkedChildren="亮"
            unCheckedChildren="暗"
            checked={visibleChecked}
            onChange={change}
          />
        </Form.Item>

        <Form.Item>
          <Switch
            checked={showAdvanced}
            checkedChildren="高级设置"
            unCheckedChildren="高级设置"
            onChange={() => setShowAdvanced(!showAdvanced)}
          />
        </Form.Item>
        <div style={{ display: showAdvanced ? 'block' : 'none' }}>
          <Form.Item
            label={
              <div className={styles.formData_label}>
                <Tooltip
                  title={
                    <span>用于云平台模式,默认云,选择租户会在SaaS访问情况下,展示租户样式</span>
                  }
                  overlayStyle={{ maxWidth: 350 }}
                >
                  <InfoCircleOutlined style={{ color: '#40a9ff', padding: '2px 2px 0 0' }} />
                </Tooltip>
                <span>SaaS样式</span>
              </div>
            }
            name="CloudStyle"
          >
            {/* <Radio.Group>
              <Radio value="是">云</Radio>
              <Radio value="否">租户</Radio>
            </Radio.Group> */}
            <Switch
              checkedChildren="云"
              unCheckedChildren="租户"
              checked={visibleChecked1}
              onChange={change1}
            />
          </Form.Item>
          <Form.Item name="topMenu" label="顶部功能">
            <Checkbox
              indeterminate={indeterminate}
              onChange={onCheckAllChange}
              checked={checkAll}
              style={{ marginTop: '5px', display: 'none' }}
            >
              全选
            </Checkbox>
            <CheckboxGroup
              options={plainOptions}
              value={checkedList}
              checked={showAdvanced}
              onChange={onChange}
            />
          </Form.Item>
          {/* <Form.Item label="功能标签" name="mdi">
            <Select placeholder="请选择功能标签">
              <Option value="MDI" key="0">
                多标签模式
              </Option>
              <Option value="SDI" key="1">
                单标签模式
              </Option>
            </Select>
          </Form.Item> */}
          <Form.Item label="售后服务">
            <div
              style={{
                border: '2px solid #6A98FA',
                minHeight: '34px',
                lineHeight: '34px',
                padding: '0px 10px',
                width: '100%',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              }}
              onClick={() => {
                setAddVisible(true);
              }}
            >
              <span style={{ color: checkValue && checkValue.length > 0 ? 'black' : '#dcdcdc' }}>
                <Tooltip title={checkValue && checkValue.length > 0 ? aftercare : ''}>
                  {aftercare}
                </Tooltip>
              </span>
            </div>
          </Form.Item>

          <Form.Item label="二维码地址" name="qrcode">
            <Input placeholder="请输入二维码地址" autoComplete="off" />
          </Form.Item>
          {/* <Form.Item label="Web4地图" name="hideMap">
            <Switch
              checkedChildren="开启"
              unCheckedChildren="关闭"
              checked={visibleChecked2}
              onChange={change2}
            />
          </Form.Item> */}
          <Form.Item label="地图遮罩" name="useCoverMap">
            <Switch
              checkedChildren="开启"
              unCheckedChildren="关闭"
              checked={visibleChecked7}
              onChange={change7}
            />
          </Form.Item>
          <Form.Item
            label={
              <div className={styles.formData_label}>
                <Tooltip
                  title={
                    <span>
                      多人(默认):标记自己的消息,不影响他人接收
                      <br />
                      单人:标记已读,消息不再提醒其他人,主要解决报警过多,通知范围过大的情况
                    </span>
                  }
                  overlayStyle={{ maxWidth: 350 }}
                >
                  <InfoCircleOutlined style={{ color: '#40a9ff', padding: '2px 2px 0 0' }} />
                </Tooltip>
                <span>消息标记</span>
              </div>
            }
            name="messageMarking"
          >
            {/* <Radio.Group>
              <Radio value="All">多人</Radio>
              <Radio value="One">单人</Radio>
            </Radio.Group> */}
            <Switch
              checkedChildren="多人"
              unCheckedChildren="单人"
              checked={visibleChecked3}
              onChange={change3}
            />
          </Form.Item>
          <Form.Item label="语音播报" name="messageVoice">
            {/* <Radio.Group>
              <Radio value>开启</Radio>
              <Radio value={false}>关闭</Radio>
            </Radio.Group> */}
            <Switch
              checkedChildren="开启"
              unCheckedChildren="关闭"
              checked={visibleChecked4}
              onChange={change4}
            />
          </Form.Item>
          {/* <Form.Item label="菜单样式" name="menuState">
            <Switch
              checkedChildren="展开"
              unCheckedChildren="折叠"
              checked={visibleChecked5}
              onChange={change5}
            />
          </Form.Item> */}
        </div>
      </Form>
      <ColorLinear
        visible={displayColorPicker}
        color={color}
        onSubumit={colorChange}
        handleCancel={() => setDisplayColorPicker(false)}
      />
      <ParmarModal
        pageUrl={form.getFieldValue('loginTemplate')}
        handleCancel={() => setShowParmarModal(false)}
        visible={showParmarModal}
        parmarCallBack={url => {
          form.setFieldsValue({ loginTemplate: url });
          setShowParmarModal(false);
        }}
      />
      {/* <RMSComponents
        visible={addVisible}
        onCancel={() => {
          setAddVisible(false);
        }}
        callBackSubmit={roleList => rolCallBack(roleList)}
        newCheckedList={checkValue.toString().split(',')} // 单选框中的值
        groupName="角色" // 打开组件展示的分组名,用来首次获取数据
        chooseGroupName={['角色']} // 可选分组名
        dataType="id"
      /> */}
      <PersonnelSelector
        visible={addVisible}
        onCancel={() => {
          setAddVisible(false);
        }}
        callBackSubmit={roleList => rolCallBack(roleList)}
        itemObj={checkValue && checkValue.toString().split(',')} // 单选框中的值
        aftercare={aftercare}
        checkValueList={checkValueList}
      />
    </Drawer>
  );
};