import { Space, Table, Button, Popconfirm, notification, Divider, Checkbox, Spin } from 'antd';
import React, { useState, useEffect, useCallback } from 'react';
import VisibleRoleModal from '@/pages/platformCenter/messageManage/projectManage/components/RolseSelect/VisibleRoleModal';
import { PlusOutlined, UserAddOutlined } from '@ant-design/icons';
import styles from '../dimensionsConfig.less';
import {
  deleteConfig,
  SettingRoleWebSchema,
  SetServiceConfig,
  DeleteWebSchema,
  GetWebSchemaList,
  GetSchemaInfoList,
  IsActionWebSchema,
} from '@/services/webConfig/api';
import RoleModal from '../../schemeConfig/solutionConfig/RoleModal';
import AddModal from './AddModal';
const VectorData = props => {
  const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示
  const [schemename, setSchemename] = useState([]);
  const [record, setRecord] = useState({}); // 选中关联角色的方案名
  const [webCurrent, setWebCurrent] = useState(0); // web列表下标
  const [handCurrent, setHandCurrent] = useState(0); // hand列表下标
  const [webData, setWebData] = useState([]); // web数据
  const [handData, setHandData] = useState([]); // 手持数据
  const [visible, setVisible] = useState(false); // 弹窗
  const [flag, setFlag] = useState(0); // 更新list
  const [handStatus, setHandStatus] = useState([]); // 更新状态
  const [webStatus, setWebStatus] = useState([]); // 更新状态
  const [type, setType] = useState(''); // 弹窗类型
  const [checkLoading, setCheckLoading] = useState(false);
  const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' });
  const [addVisible, setAddVisible] = useState(false);
  const [checkValue, setCheckValue] = useState([]);

  const columns = [
    {
      title: '默认方案',
      align: 'center',
      render: (text, record, index) => (
        <Space>
          <Checkbox
            checked={webStatus[index + webCurrent * 5]}
            onChange={e => {
              onChangeCheck(e, record, index + webCurrent * 5);
            }}
          />
        </Space>
      ),
    },
    {
      title: '方案名',
      align: 'center',
      render: (text, record, index) => <Space>{record.scheme.schemename}</Space>,
    },
    {
      title: '关联角色',
      align: 'center',
      render: record => (
        <Space size="middle">
          <UserAddOutlined
            onClick={() => pickRole(record)}
            style={{ fontSize: '18px', color: '#1890FF' }}
          />
        </Space>
      ),
    },
    {
      title: '编辑',
      align: 'center',
      render: (text, record, index) => (
        <Space>
          <div onClick={e => e.stopPropagation()}>
            <Popconfirm
              title="是否删除此条方案？"
              okText="确认"
              cancelText="取消"
              onConfirm={() => {
                delWebConfirm(record);
              }}
            >
              <Button size="small" danger>
                删除
              </Button>
            </Popconfirm>
          </div>
        </Space>
      ),
    },
  ];
  // const columns1 = [
  //     {
  //         title: '查询方案',
  //         align: 'center',
  //         render: (text, record, index) => (
  //             <Space>
  //                 <Checkbox
  //                     checked={handStatus[index + handCurrent * 5]}
  //                     onChange={e => {
  //                         onChangeHand(e, record, index + handCurrent * 5);
  //                     }}
  //                 />
  //             </Space>
  //         ),
  //     },
  //     {
  //         title: '方案名',
  //         align: 'center',
  //         render: (text, record, index) => (
  //             <Space>
  //               {record.scheme.schemename}
  //             </Space>
  //         ),
  //     },
  //     {
  //         title: '关联角色',
  //         align: 'center',
  //         render: (text, record, index) => (
  //             <Space>
  //                 <div onClick={() => pickRole(record)} style={{ cursor: 'pointer' }}>
  //                     <VisibleRoleModal onSubmit={onPushSubmit} title={"关联角色"} initValues ={record.roles!=null?record.roles.split(","):[]} operate={<UserAddOutlined />} />
  //                 </div>
  //             </Space>
  //         ),
  //     },
  //     {
  //         title: '编辑',
  //         align: 'center',
  //         render: (text, record, index) => (
  //             <Space>
  //                 <div onClick={e => e.stopPropagation()}>
  //                     <Popconfirm
  //                         title="是否删除此条方案？"
  //                         okText="确认"
  //                         cancelText="取消"
  //                         onConfirm={() => {
  //                             delhandConfirm(record);
  //                         }}
  //                     >
  //                         <Button size="small" danger>
  //                             删除
  //                         </Button>
  //                     </Popconfirm>
  //                 </div>
  //             </Space>
  //         ),
  //     }

  // ];
  // 获取选中的角色
  const onPushSubmit = value => {
    setAddVisible(false);
    if (value.length) {
      let query = {
        schemaname: record.scheme.schemename,
        roles: value.join(','),
      };
      SettingRoleWebSchema(query)
        .then(res => {
          if (res.code === 0) {
            prompt('success', '关联角色成功');
            setFlag(flag + 1);
          } else {
            prompt('fail', '关联角色失败');
          }
        })
        .catch(err => {
          prompt('fail', '网络请求失败');
        });
    }
  };
  // 获取角色
  const pickRole = e => {
    setRecord(e);
    setAddVisible(true);
    let arr = e.roles != null ? e.roles.split(',') : [];
    console.log(arr);
    setCheckValue(arr);
  };
  // 设置web方案
  const onChangeCheck = (e, record, index) => {
    setCheckLoading(true);
    IsActionWebSchema({ schemaname: record.scheme.schemename }).then(res => {
      setCheckLoading(false);
      if (res.msg === '') {
        prompt('success', '设置成功');
        setFlag(flag + 1);
      } else {
        prompt('fail', res.msg);
      }
    });
  };

  // 选择手持方案
  const onChangeHand = (e, record, index) => {
    setCheckLoading(true);
    const newLoadings = [...handStatus];
    newLoadings.map((item, loadIndex) => {
      return loadIndex == index
        ? (newLoadings[loadIndex] = !newLoadings[loadIndex])
        : (newLoadings[loadIndex] = false);
    });
    setHandStatus(newLoadings);
    let query = {
      schemename: record['schemename'],
      terminalType: 'phone',
      isBaseMap: false,
      jsonCfg: JSON.stringify({
        isDefault: newLoadings[index],
      }),
    };
    if (!newLoadings[index]) {
      SetServiceConfig(query).then(res => {
        setCheckLoading(false);
        if (res.code == '0') {
          const changehandData = [...handData];
          changehandData[index].isDefault = false;
          setHandData(changehandData);
          prompt('success', '设置成功');
        } else {
          prompt('fail', `${record['schemename']}默认设置时遇到错误：` + res.message);
        }
      });
      return;
    }
    var beforeDefault = handData.findIndex(item => item['isDefault']);
    SetServiceConfig({
      schemename: record['schemename'],
      terminalType: 'phone',
      isBaseMap: false,
      jsonCfg: JSON.stringify({
        isDefault: true,
      }),
    }).then(res => {
      setCheckLoading(false);
      if (res.code == '0') {
        const changehandData = [...handData];
        changehandData[index].isDefault = true;
        setHandData(changehandData);
        if (beforeDefault != -1) {
          SetServiceConfig({
            schemename: changehandData[beforeDefault].schemename,
            terminalType: 'phone',
            isBaseMap: false,
            jsonCfg: JSON.stringify({
              isDefault: false,
            }),
          }).then(res => {
            setCheckLoading(false);
            if (res.IsSuccess) {
              const changehandData1 = [...handData];
              changehandData1[beforeDefault].isDefault = false;
              setHandData(changehandData1);
              prompt('success', '设置成功');
              return;
            }
            prompt('fail', `${record['schemename']}默认设置时遇到错误：` + res.message);
          });
        }
      }
    });
  };
  const prompt = (type, content) => {
    if (type == 'success') {
      notification.success({
        message: '提示',
        duration: 3,
        description: content,
      });
    } else {
      notification.error({
        message: '提示',
        duration: 3,
        description: content,
      });
    }
  };
  const onSubmit = prop => {
    setVisible(false);
    setFlag(flag + 1);
  };
  // 删除web配置方案
  const delWebConfirm = record => {
    DeleteWebSchema(record.scheme.schemename).then(res => {
      if (res.msg === '') {
        prompt('success', '删除成功');
        setFlag(flag + 1);
      } else {
        prompt('fail', '删除失败');
      }
    });
  };
  // 删除手持配置方案
  const delhandConfirm = record => {
    deleteConfig({
      schemename: record['schemename'],
      terminalType: 'phone',
      isBaseMap: false,
    }).then(res => {
      if (res.code == '0') {
        prompt('success', '删除成功');
        setFlag(flag + 1);
      } else {
        prompt('fail', '删除失败');
      }
    });
  };
  // 添加方案
  const addType = type => {
    setType(type);
    let listData = [];
    type == 'add' ? (listData = webData) : (listData = handData);
    let webSchemenameArr = [],
      schemeArr = [];
    setTreeLoading(true);
    GetSchemaInfoList().then(res => {
      if (res.data && res.data.length) {
        setTreeLoading(false);
        listData.map(item => {
          webSchemenameArr.push(item.scheme.schemename);
        });
        res.data.map(item => {
          if (!webSchemenameArr.includes(item.schemename)) schemeArr.push(item.schemename);
        });
        setSchemename(schemeArr);
        if (schemeArr.length) {
          setVisible(true);
        } else {
          notification.warning({
            message: '提示',
            duration: 3,
            description: '请先配置方案',
          });
        }
      } else {
        setTreeLoading(false);
        notification.warning({
          message: '提示',
          duration: 3,
          description: '请先配置方案',
        });
      }
    });
  };
  useEffect(() => {
    renderTile();
  }, [flag]);
  // 获取瓦片数据配置数据
  const renderTile = () => {
    setCheckLoading(true);
    // 查询手持方案
    // var schemeConfigQueryRequest = GetMaplayerByTerminalType({
    //     terminalType: 'phone',
    //     isBaseMap: false
    // })
    // 查询web方案
    var webSchemeQueryRequest = GetWebSchemaList();
    Promise.all([webSchemeQueryRequest])
      .then(res => {
        // if (res[0].msg==="Ok" && res[0].data.phone) {
        //     let arr = []
        //     res[0].data.phone.optionalLayer.layers.map((item, index) => {
        //         if (item.isDefault) {
        //             arr.push(true)
        //         } else {
        //             arr.push(false)
        //         }

        //         item.isStatus = 'phone'
        //         return item
        //     })
        //     setHandData(res[0].data.phone.optionalLayer.layers)
        //     setHandStatus(arr)

        // }
        if (res[0].msg === 'Ok' && res[0].data) {
          let arr = [];
          res[0].data.map((item, index) => {
            if (item.isDefault) {
              arr.push(true);
            } else {
              arr.push(false);
            }
            item.isStatus = 'web';
            return item;
          });
          setWebData(res[0].data);
          setWebStatus(arr);
        }
        setCheckLoading(false);
      })
      .catch(e => {
        setCheckLoading(false);
      });
  };

  const rolCallBack = useCallback(list => {
    let strList = [];
    if (list.length > 0) {
      list.forEach(item => {
        console.log(item, 'item');
        Object.keys(item.last).forEach(i => {
          strList.push(i);
        });
      });
      console.log(strList);
      onPushSubmit(strList);
    }
  });

  return (
    <>
      <Spin tip="loading..." spinning={checkLoading}>
        <div className={styles.solutionConfig}>
          <div>
            <Divider orientation="left">
              <div className={styles.divider}>
                {' '}
                Web{' '}
                <PlusOutlined
                  onClick={() => {
                    addType('add');
                  }}
                  className={styles.dividerIcon}
                />
              </div>
            </Divider>
            <Table
              columns={columns}
              dataSource={webData}
              bordered
              style={{ height: 'calc(100vh - 230px)' }}
              pagination={{
                showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                defaultPageSize: 8,
                onChange: value => {
                  setWebCurrent(value - 1);
                },
              }}
              rowKey={(record, index) => record.scheme.schemename}
              scroll={{ y: 300 }}
            />
          </div>
          {/* <Divider orientation="left"><div className={styles.divider}>手持 <PlusOutlined
                        onClick={() => { addType('addHand') }}
                        className={styles.dividerIcon} /></div> </Divider>
                    <Table
                        columns={columns1}
                        dataSource={handData}
                        bordered
                        rowKey="schemename"
                        scroll={{ y: 400 }}
                        pagination={{
                            showTotal: (total, range) =>
                                `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                            defaultPageSize: 8,
                            onChange: (value) => {
                                setHandCurrent(value - 1)
                            }

                        }}
                    >
                    </Table> */}
        </div>
      </Spin>
      <AddModal
        visible={visible}
        onCancel={() => setVisible(false)}
        callBackSubmit={onSubmit}
        type={type}
        formObj={formObj}
        listData={schemename}
      />
      <RoleModal
        selectValue={checkValue.toString()}
        visible={addVisible}
        rolCallBack={roleList => rolCallBack(roleList)}
        onCancel={() => {
          setAddVisible(false);
        }}
      />
    </>
  );
};
export default VectorData;