import React,{useEffect,useState,useMemo,useRef} from 'react';
import { Form, Button, Input, Row,Upload, Col, Table, DatePicker, TreeSelect,message,Image,Modal,Typography ,Popconfirm } from 'antd';
import { DeleteOutlined,FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';
import PersonTree from '../../../../components/PersonTree';
import apiurl from '../../../../service/apiurl';

import NormalSelect from '../../../../components/Form/NormalSelect';
import { xyt_httpget2 } from '../../../../utils/request';
import "./index.less"
import moment from 'moment';
import { httpget2 } from '../../../../utils/request';
const { RangePicker } = DatePicker
const { Dragger } = Upload;
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"


const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
  const [itemList, setItemList] = useState([])
  const [itemParams, setItemParams] = useState([])
  const taskTypes = [
    {label:"日常巡查",value:0},
    {label:"特别检查",value:1},
    {label:"汛前巡检",value:2},
  ]
  const [form] = Form.useForm();

  const handleTree = (arr) => {
    
    const res = arr.map(item => {
      item.value = item.id;
      item.title = item.itemDesc;
      if (item.children) {
        item.children = handleTree(item.children)
      }
      return item;
    })
    return res
  }
 
  const getItemList = async() => {
    try {
      const res = await httpget2(apiurl.rcgl.xcxj.xjrw.list);
      if (res.code === 200) {
        const arr1 = res.data.map(item => ({
          id: item.id,
          itemDesc: item.name,
          children: item.children,
          disabled:item.children.length > 0 ? false : true
        }));
        const result = handleTree(arr1)
        console.log(result);
        setItemList(result)
      }
    } catch (error) {
      console.log(error);
      
    }
  } 
 
  const onfinish = (values) => {
    const userId = localStorage.getItem('userId')
    const userName = localStorage.getItem('userName')
    values.startDate = values.startDate?moment(values.startDate).format("YYYY-MM-DD 00:00:00"):''
    values.endDate = values.endDate ? moment(values.endDate).format("YYYY-MM-DD 00:00:00") : ''
    values.createUserId = userId
    values.createUserName = userName;
    values.inspectUserName = deptUserList?.find(item => item.userId == values.inspectUserId)?.nickName
    values.items = itemParams;
    if (mode === 'save') {
      onSave(apiurl.rcgl.xcxj.xjrw.save,values)
    }
    if (mode == "edit") {
      onEdit(apiurl.rcgl.xcxj.xjrw.edit,{...record,...values})
    }
  }
 
  const itemChange = (a, b,c) => {
    const itemArr = a.map(item => ({
      pointId: c?.triggerNode?.props?.pointId,
      itemId:item
    }))
    setItemParams(itemArr)
  }

  const getXjInfo = async () => {
    try {
      const res = await httpget2(apiurl.rcgl.xcxj.xjrw.detail, { taskId: record?.id })
      if (res.code === 200) { 
        const xjd = res.data.map(item => item.itemId)
        form.setFieldValue("items", xjd)
        setItemParams(res.data)
      }
    } catch (error) {
      console.log(error);
      
    }
  }
  useEffect(() => {
    getItemList()
  }, [])

  useEffect(() => {
    if (mode == "edit") {
      getXjInfo()
    }
  }, [record,mode])
  

  const [deptList, setDeptList] = useState([])
  const [deptUserList, setDeptUserList] = useState([])
  const buildTree = (data, parentId) => {
    let tree = [];
    data.forEach((node) => {
        node.title = node.deptName;
        node.key = node.deptId;
        
        if (node.parentId === parentId) {
        let children = buildTree(data, node.deptId);
        if (children.length) {
            node.children = children;
        }
        tree.push(node);
        }
    });
    return tree;
}

const handleTreeList = (dept, user) => {
    const deptArr = dept.map(item => {
      return {
        ...item,
        value: item.deptId,
        title: item.deptName,
        disabled: item.userId ? false : true,
        children: user.filter(u => u.deptId == item.deptId).map(u => ({
          ...u,
          value: u.userId,
          title: u.nickName
        }))
      }
    }) 
    console.log("deptArr",deptArr);
    const treelist = buildTree(deptArr,0)
    return treelist
  }
  const treeList = useMemo(() => {
    if (deptUserList?.length > 0 && deptList?.length > 0) {
        return handleTreeList(deptList,deptUserList)
    } else {
      return []
    }
  }, [deptUserList, deptList])


  // 获取部门数据
const getDeptList = async() => {
try {
  const result = await xyt_httpget2(apiurl.rcgl.zbgl.zbb.deptlist);
  if (result.code == 200) {
    setDeptList(result.data);
    getDeptUser(result.data[0])
  }
  
} catch (error) {
  console.log(error);
}
}

// 获取部门人员数据
const getDeptUser = async() => {
try {
  const result = await xyt_httpget2(apiurl.rcgl.zbgl.zbb.userList, {pageNum:1,pageSize:9999});
  if (result.code == 200) {
    setDeptUserList(result.rows)
  }
} catch (error) {
  console.log(error);
}
}
  useEffect(() => {
    getDeptList()
  }, [])
  
  return (
    <>
      <Form
        form={form}
        {...formItemLayout}
        onFinish={onfinish}
        initialValues={record}
      >
      <Row>
          <Col span={12}>
              <Form.Item
                label="任务类型"
                name="taskType"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
              <NormalSelect
                style={{ width: '100%' }}
                allowClear
                options={taskTypes}
              />
              </Form.Item>
          </Col>  
          <Col span={12}>
              <Form.Item
                label="任务标题"
                name="taskTitle"
              >
              <Input
                style={{ width: '100%' }}
                allowClear
              />
              </Form.Item>
          </Col>
      </Row>

      <Row>
          <Col span={24}>
              <Form.Item
                label="选择巡查人"
                name="inspectUserId"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                    <TreeSelect
                      showSearch
                      style={{
                          width: '100%',
                      }}
                      dropdownStyle={{
                          maxHeight: 400,
                          overflow: 'auto',
                      }}
                      allowClear
                      treeDefaultExpandAll
                      treeData={treeList}
                      treeNodeFilterProp='title'
                      
                  />
              </Form.Item>
          </Col>  
      </Row>

      <Row>
          <Col span={24}>
              <Form.Item
                label="巡查项"
                name="items"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
               <TreeSelect
                  showSearch
                  style={{
                      width: '100%',
                  }}
                  dropdownStyle={{
                      maxHeight: 400,
                      overflow: 'auto',
                  }}
                  onChange={itemChange}
                  allowClear
                  treeDefaultExpandAll
                  treeData={itemList}
                  treeNodeFilterProp='title'
                  treeCheckable={true}
                  maxTagCount={1}
              />
              </Form.Item>
          </Col>
      </Row>          
      <Row>
          <Col span={24}>
              <Form.Item
                label="任务内容"
                name="taskContent"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
              >
              <Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'100px'}} allowClear />
              </Form.Item>
          </Col>
      </Row>
      <Row>
          <Col span={12}>
              <Form.Item
                label="开始日期"
                name="startDate"
                getValueFromEvent={(e,dateString) => dateString}
                getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
   
              >
                <DatePicker disabled={mode==='view'} format={'YYYY-MM-DD'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="结束日期"
                name="endDate"
                getValueFromEvent={(e,dateString) => dateString}
                getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
   
              >
                <DatePicker disabled={mode==='view'} format={'YYYY-MM-DD'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
      </Row>          
        {
        mode==='view'?null:(
          <>
          <Form.Item {...btnItemLayout}>
            <Button type="primary" htmlType="submit">
              {mode === 'save' ? '提交' : '修改'}
            </Button>
          </Form.Item>
          </>
        )
      }
      </Form>
    </>
  );
}

export default ModalForm;