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


function adminModal (props) {
   const {
      close,
      cancel,
      visible,
      dispatch,
      actions,
      systemEdit,//是否是编辑
      peplist,//项企项目列表
      anxincloudList,//安心云项目列表
      appList,//应用列表
      pepProjectId,//已选择项企id
      pepname,//修改时自定义项目名称
      anxincloudArr,//修改时已经选择的安心云列表
      anxinDelete,//修改时安心云项目有删除,显示提示信息
      appArr,//修改时添加应用
      bindId,
      mapping, //修改时的映射类型
      maintenancePeriod, //维保时间段
      editData,
      traitLabel
   } = props;
   const { install } = actions;
   const form = useRef();//表单
   const [custom, setCustom] = useState(false); //是否是自定义项目
   const [myprojectType, setMyprojectType] = useState('pep'); //是否是自定义项目
   const [structureSensor, setStructureSensor] = useState([])
   const [sendorders, setSendorders] = useState([])
   const [strucId, setStrucId] = useState([])

   //初始化
   useEffect(async () => {
      if (pepname) {
         setCustom(true)
         setMyprojectType('axy')
      }
      if (editData?.id) {
         await getData({ projectId: anxincloudArr?.join(',') + ',-1' })
         setSendorders(editData?.sendorders)
         if (editData?.sendorders?.includes('emphasis')) {
            form.current.setValue('strucId', editData?.strucId)
            editData?.strucId?.forEach(d => {
               form.current.setValue('strucSensor' + d, editData?.strucSensor[d])

            })
            setStrucId(editData?.strucId || [])
         }
         if (editData?.sendorders?.includes('percentage')) {
            form.current.setValue('percentage', editData?.percentage)
         }


      }

   }, []);



   const getData = async (data = {}) => {
      await dispatch(install.getStructureStation({ ...data, traitLabel })).then((res) => {
         if (res.success) {
            setStructureSensor(res.payload.data || [])
         }
      })
   }

   function handleOk () {
      //点击弹框确定  右边按钮
      form.current
         .validate()
         .then((values) => {

            let appArr = []
            for (let i = 0; i < values.appId.length; i++) {
               appArr.push(JSON.parse(values.appId[i]).id)
            }
            console.log(22, values);

            let strucSensor = {}
            if (values.sendorders?.includes("emphasis")) {
               values.strucId?.forEach(d => {
                  strucSensor[d] = values['strucSensor' + d] || []
               });
            }
            let data = {
               name: values.name,
               pepProjectId: values.pepProjectId,
               anxinProjectId: values.anxinProjectId,
               appId: appArr,
               mappingClass: values.mappingClass,
               maintenancePeriod: values.maintenancePeriod,
               isanchor: values.isanchor,
               sendorders: values.sendorders,
               percentage: values.percentage,
               strucId: values.strucId,
               strucSensor: strucSensor
            }

            if (systemEdit) {
               dispatch(install.postProjectBind({ ...data, bindId: bindId, msg: '修改映射关系', })).then((res) => {//获取项企(PEP)全部部门及其下用户
                  if (res.success) {
                     close();
                  }
               })
            }
            else {
               dispatch(install.postProjectBind({ ...data, 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="132px"
                  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
                        onChange={v => {
                           if (v.length) {
                              getData({ projectId: v.join(',') + ',-1' })
                           } else {
                              setStructureSensor([])
                           }
                           form.current.setValue('strucId', [])
                           setStrucId([])
                        }}
                     >
                        {
                           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>
                     <Form.Select
                        label="映射分类:"
                        field="mappingClass"
                        filter
                        placeholder="请选择映射类型"
                        style={{ width: 425 }}
                        initValue={mapping}
                        showClear
                     >
                        {
                           [
                              { name: '智慧类', value: 'wisdom' },
                              { name: '监测类', value: 'monitor' },
                              { name: '其他', value: 'other' }
                           ].map(item => {
                              return <Form.Select.Option key={item.value} value={item.value}>
                                 {item.name}
                              </Form.Select.Option>
                           })
                        }
                     </Form.Select>
                     <Form.DatePicker
                        style={{ width: 425 }}
                        label='维保期限时间:'
                        type='dateRange'
                        field='maintenancePeriod'
                        initValue={maintenancePeriod}
                     >
                     </Form.DatePicker>
                  </div>
                  <Form.RadioGroup field="isanchor" label='是否续签:' initValue={editData?.isanchor} >
                     <Form.Radio value={true}>续签</Form.Radio>
                     <Form.Radio value={false}>不续签</Form.Radio>
                  </Form.RadioGroup>
                  <Form.CheckboxGroup
                     field="sendorders"
                     label='自动派单:'
                     direction='horizontal'
                     initValue={editData?.sendorders || []}
                     onChange={v => {
                        setSendorders(v)
                        if (!v.includes('emphasis')) {
                           setStrucId([])
                        }
                     }}
                  >
                     <Form.Checkbox value="percentage">项目在线百分比</Form.Checkbox>
                     <Form.Checkbox value="emphasis">运维关键点位</Form.Checkbox>
                  </Form.CheckboxGroup>
                  {
                     sendorders?.includes('percentage') &&
                     <Form.InputNumber field='percentage' label='项目中断百分比:' min={0} max={100} />
                  }
                  {
                     sendorders?.includes('emphasis') &&
                     <>
                        <Form.Select
                           label="选择结构物:"
                           field="strucId"
                           filter
                           multiple
                           placeholder="请选择结构物"
                           style={{ width: 425 }}
                           // initValue={[]}
                           showClear
                           onChange={v => {
                              setStrucId(v)
                           }}
                        >
                           {
                              structureSensor.map(item => {
                                 return <Form.Select.Option key={item.strucId} value={item.strucId}>
                                    {item.strucName}
                                 </Form.Select.Option>
                              })
                           }
                        </Form.Select>

                        {strucId?.length ? structureSensor?.filter(v => strucId?.includes(v.strucId))?.map((u, index) => {
                           return <Form.CheckboxGroup
                              label={u.strucName + ':'}
                              key={u.strucName + index}
                              field={'strucSensor' + u.strucId}
                              style={{ width: 420 }}
                              // initValue={editObj?.pomsStrucFactorId ? editObj?.pomsStrucFactorId[u.id] : (factorItem || [])}
                              direction='horizontal'
                              showClear
                           >
                              {
                                 u.sensor?.map((v, index) =>
                                    <Form.Checkbox value={v.senterId} key={v.senterId} style={{ width: 200 }}>{v.senterName}（{v.factorName}）</Form.Checkbox>)
                              }
                           </Form.CheckboxGroup>
                        }) : ""
                        }
                     </>
                  }
               </Form>
            </div >
         </Modal >
      </>
   );
}
function mapStateToProps (state) {
   const { auth, global, members } = state;
   return {
      //   loading: members.isRequesting,
      user: auth.user,
      actions: global.actions,
      traitLabel: global.traitLabel,
   };
}

export default connect(mapStateToProps)(adminModal);