import React, { useState, useRef, useEffect } from "react";
import { connect } from "react-redux";
import { Modal, Form, ArrayField, Tag } from "@douyinfe/semi-ui";
import { IconAlertCircle, IconAlertTriangle } from '@douyinfe/semi-icons';


function adminModal (props) {
   const {
      close,
      cancel,
      visible,
      dispatch,
      actions,
      systemEdit,//是否是编辑
      peplist,//项企项目列表
      anxincloudList,//安心云项目列表
      appList,//应用列表
      pepProjectId,//已选择项企id
      pepname,//修改时自定义项目名称
      anxincloudArr,//修改时已经选择的安心云列表
      anxinDelete,//修改时安心云项目有删除,显示提示信息
      appArr,//修改时添加应用
      bindId
   } = props;
   const { install } = actions;
   const form = useRef();//表单
   const [custom, setCustom] = useState(false); //是否是自定义项目
   const [myprojectType, setMyprojectType] = useState('pep'); //是否是自定义项目
   //初始化
   useEffect(() => {
      if (pepname) {
         setCustom(true)
         setMyprojectType('axy')
      }
   }, []);

   function handleOk () {
      //点击弹框确定  右边按钮
      form.current
         .validate()
         .then((values) => {
            if (systemEdit) {
               let appArr = []
               for (let i = 0; i < values.appId.length; i++) {
                  appArr.push(JSON.parse(values.appId[i]).id)
               }
               let bindObj = JSON.parse(JSON.stringify(values))
               bindObj.appId = appArr
               dispatch(install.postProjectBind({ ...bindObj, bindId: bindId, msg: '修改映射关系' })).then((res) => {//获取项企(PEP)全部部门及其下用户
                  if (res.success) {
                     close();
                  }
               })
            }
            else {
               let appArr = []
               for (let i = 0; i < values.appId.length; i++) {
                  appArr.push(JSON.parse(values.appId[i]).id)
               }
               let bindObj = JSON.parse(JSON.stringify(values))
               bindObj.appId = appArr
               dispatch(install.postProjectBind({ ...bindObj, msg: '添加映射关系' })).then((res) => {//获取项企(PEP)全部部门及其下用户
                  if (res.success) {
                     close();
                  }
               })
            }
         })
   }
   function handleCancel () {
      cancel();
      //点击弹框取消  左边按钮
   }
   const renderMultipleWithCustomTag = (optionNode, { onClose }) => {
      const content = (
         <Tag closable={true}
            onClose={onClose}
            size='large'>
            {JSON.parse(optionNode.value).name}
         </Tag>
      );
      return {
         isRenderInTag: false,
         content
      };
   }
   return (
      <>
         <Modal
            title={systemEdit ? '修改映射关系' : '添加映射关系'}
            okText="确定"
            cancelText="取消"
            visible={visible}
            onOk={handleOk}
            width={666}
            onCancel={handleCancel}
         >
            <div style={{ margin: "0px 25px" }}>
               <div style={{ width: '100%', lineHeight: 2, background: '#F4F8FF', borderRadius: 2, border: '1px solid #C7E1FF', display: 'flex' }}>
                  <div style={{ display: 'flex', marginLeft: 12, marginTop: 5.5 }}><IconAlertCircle style={{ color: '#0F7EFB' }} /></div>
                  <div style={{ color: '#0F7EFB', fontSize: 12, marginLeft: 8, marginRight: 12 }}>映射关系由项企立项项目与安心云项目关联产生，若项目未在项企中有记载，可选自定义项目，待项企立项项后再进行修改！</div>
               </div>
               <Form
                  allowEmpty
                  labelPosition="left"
                  labelAlign="right"
                  labelWidth="110px"
                  onValueChange={(values, field) => {
                     for (var key in field) {
                        if (key == 'projectType') {
                           if (field.projectType == 'pep') {
                              setCustom(false)
                           }
                           else {
                              setCustom(true)
                           }
                        }
                     }
                  }}
                  getFormApi={(formApi) => (form.current = formApi)}
               >
                  <div>
                     <Form.RadioGroup field="projectType" initValue={myprojectType} label='项目类型:'
                        disabled={systemEdit && !pepname} >
                        <Form.Radio value='pep'>项企项目</Form.Radio>
                        <Form.Radio value='axy'>自定义项目（未在项企中立项的项目可选）</Form.Radio>
                     </Form.RadioGroup>
                  </div>
                  {custom ? (
                     <div>
                        <Form.Input
                           field="name"
                           label='自定义项目:'
                           style={{ width: 425 }}
                           maxLength={15}
                           initValue={pepname || ""}
                           placeholder="请输入项目名称，且名称需与项企区分"
                           showClear
                           rules={[{ required: true, message: "请输入项目名称，且名称需与项企区分" }]} />
                     </div>
                  ) : (
                     <div>
                        <Form.Select
                           label="PEP项企项目:"
                           field="pepProjectId"
                           filter
                           placeholder="请选择PEP项企项目"
                           style={{ width: 425 }}
                           rules={[{ required: true, message: "请选择PEP项企项目" }]}
                           initValue={pepProjectId || ""}
                           disabled={systemEdit && !pepname}
                           showClear
                        >
                           {
                              peplist.reduce((arr, item) => {
                                 if (!item.binded) {
                                    arr.push(
                                       <Form.Select.Option key={item.id} value={item.id}>
                                          {item.project_name}
                                       </Form.Select.Option>
                                    )
                                 }
                                 return arr
                              }, [])
                           }
                        </Form.Select>
                     </div>
                  )}
                  <div>
                     <Form.Select
                        label="安心云项目:"
                        field="anxinProjectId"
                        multiple
                        filter
                        placeholder="请选择安心云项目"
                        style={{ width: 425 }}
                        rules={[{ required: true, message: "请选择安心云项目" }]}
                        initValue={anxincloudArr || []}
                        showClear
                     >
                        {
                           anxincloudList.map((item, index) => {
                              return (
                                 <Form.Select.Option key={index} value={item.id}>
                                    {item.name}
                                 </Form.Select.Option>
                              )
                           })
                        }
                     </Form.Select>
                  </div>
                  {
                     anxinDelete.length > 0 ? (
                        <div style={{ display: 'flex' }}>
                           <div style={{ marginTop: 3 }}>
                              <img src="/assets/images/install/risk.png" alt="" style={{ height: 24, width: 24, }} />
                           </div>
                           <div style={{
                              background: 'rgba(255, 51, 0, 0.28)', color: '#FF3300',
                              fontSize: 12, marginLeft: 8, lineHeight: 2, padding: '0px 5px',
                              border: '1px solid rgba(255,51,0,0.3)', width: 515
                           }}>
                              确认关联后“{anxinDelete.join('、')}”将被系统移除映射关系，原因是项目已在【安心云】中被删除！
                           </div>
                        </div>
                     ) : ('')
                  }
                  <div>
                     <Form.Select
                        label="添加应用:"
                        field="appId"
                        multiple
                        filter
                        placeholder="请选择添加应用"
                        style={{ width: 425 }}
                        initValue={appArr || []}
                        showClear
                        renderSelectedItem={renderMultipleWithCustomTag}
                     >
                        {
                           appList.map((item, index) => {
                              return (
                                 <Form.Select.Option key={'a' + index} value={JSON.stringify(item)} label={
                                    <div>
                                       <div style={{ fontSize: 14, fontWeight: 600 }}>
                                          {item.name}
                                       </div>
                                       <div style={{ fontSize: 12, color: 'rgb(139, 139, 139)' }}>
                                          URL:{item.url}
                                       </div>
                                    </div>
                                 }>
                                 </Form.Select.Option>
                              )
                           })
                        }
                     </Form.Select>
                  </div>
               </Form>
            </div>
         </Modal>
      </>
   );
}
function mapStateToProps (state) {
   const { auth, global, members } = state;
   return {
      //   loading: members.isRequesting,
      user: auth.user,
      actions: global.actions,
      //   members: members.data,
   };
}

export default connect(mapStateToProps)(adminModal);