import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
import {
  Card,
  Form,
  Col,
  Row,
  DatePicker,
  Input,
  Select,
  TreeSelect,
  Table,
  Button,
  Upload,
  message,
  InputNumber,
  Modal,
  Tooltip,
  Switch,
  Tabs,
  Empty,
  AutoComplete,
  Spin,
} from 'antd';
import { Loading3QuartersOutlined, PlusOutlined } from '@ant-design/icons';
import type { DatePickerProps } from 'antd';
import type { UploadProps } from 'antd';
import dayjs from 'dayjs';
import moment from 'moment';
import { connect } from 'umi';
import styles from './ProjectDetail.less';
import { ProjectStatus, ProjectType, Provinces, ProjectStage } from '@/Project/constants';
import { useModel, useRequest } from '@umijs/max';
import { queryProjectById, updateProject, removeProjectUser, addProjectUserV2 } from '@/Project/services/project';
import UserRoleModal from './UserRoleModal';
// import ContentPage from '@/pages/Unity/Components/ContentPage';
// import cardStyle from '@/pages/Unity/Components/Card.less';
// import { deleteScreenShort, queryScreenShort } from '@/services/ProjectAdmin';
// import UnityPageTitle from '@/components/UnityPageTitle';
import { STORAGE_TYPE, LocalService } from '@/Frameworks/SysStorage';
import { FormInstance } from 'antd/es/form';
const { TextArea } = Input;
const { Option } = Select;
const { TreeNode } = TreeSelect;
const { confirm } = Modal;
const { TabPane } = Tabs;
const fieldLabels = {
  Name: '项目名称',
  Code: '项目编号',
  StartDate: '开始日期',
  EndDate: '结束日期',
  Type: '项目类型',
  Position: '项目地点',
  LeaderId: '项目经理',
  Status: '项目状态',
  Remark: '项目简介',
  Duration: '项目工期',
  Customer: '客户信息',
  Province: '项目所属省份',
  UndertakenUnit: '承建单位',
  ConstructionUnit: '建设单位',
  SiteManager: '初级项目经理',
  TechnicalDesigner: '工艺主设',
  MechanicalDesigner: '机械主设',
  ElectricalDesigner: '电气自控主设',
  CurrentDuration: '当前工期执行天数',
  CompanyName: '公司名称',
  CompanyNumber: '员工人数',
  Stage: '项目所属平台',
  WaterName: '水厂名称',
  // CurrentOperatorNum: '当前作业人数',
};

// @connect(({ user, pro, project, loading }) => ({
//   user,
//   depUserTree: pro.depUserTree,
//   depTrees: pro.depTrees,
//   cp: pro.currentProject,
//   // currentUser: user.currentUser,
//   projectRoleList: pro.projectRoleList,
//   // permission: user.currentUser.Permission,
//   // projectCodes: project.projectCodes,
//   submitting: loading.effects['form/fetchById'],
//   cpDetailLoading: loading.effects['pro/fetchById']
// }))
function ProjectDetail(props: any) {
  // 编辑
  const [editable, setEditable] = useState(false);
  const [visible, setVisible] = useState(false);
  const [item, setItem] = useState(null);
  const [dep, setDep] = useState({});
  const [screenShot, setScreenShot] = useState(null);
  const [showUserSelectTree, setShowUserSelectTree] = useState(false);
  // state = {
  //   // editable: false,
  //   // item: null,
  //   // dep: {},
  //   // screenShot: null,
  //   showUserSelectTree: false,
  // };
  const [formRef] = Form.useForm();
  const dateFormat = 'YYYY-MM-DD';
  const projectId = 46;
  // componentDidMount() {
  //   // const projectId = this.props.match.params.projectId;
  //   console.log(this.props);
  //   const projectId = 92;
  //   const { dispatch } = this.props;
  //   dispatch({
  //     type: 'pro/fetchById',
  //     payload: {
  //       ID: parseInt(projectId, 10),
  //     },
  //     callback: cp => {

  //     }
  //   });

  //   dispatch({
  //     type: 'pro/fetchDepV2',
  //   });

  //   dispatch({
  //     type: 'user/fetchUserList',
  //     payload: {
  //       projectId,
  //     },
  //   });

  //   dispatch({
  //     type: 'pro/queryProjectRole',
  //     payload: {
  //       projectId,
  //       mod: 1,
  //     },
  //   });
  //   dispatch({
  //     type: 'project/queryProjectCodes',
  //     payload: {
  //       projectId,
  //     },
  //   });

  //   // 获取项目截图
  //   // queryScreenShort({
  //   //   projectId,
  //   // }).then(res => {
  //   //   this.setState({
  //   //     screenShot: res.data[0],
  //   //   });
  //   // });
  // }

  const handleDeleteProjectUser = (userId: Number) => {
    confirm({
      title: '提醒',
      content: '确认删除该人员，删除后无法复原',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        removeProjectUserRequest.run({
          ID: projectId,
          ProjectId: projectId,
          UserId: userId,
        })
      },
    });
  };

  const projectDetailRequest = useRequest(queryProjectById, {
    defaultParams: [
      {
        ID: projectId,
      },
    ],
    onSuccess(data, params) {
      formRef.setFieldsValue({
        'Name': data.Name,
        'Code': data.Code,
        'CompanyName': data.CompanyName,
        'WaterName': data.WaterName,
        'CompanyNumber': data.CompanyNumber,
        'StartDate': data.StartDate ? dayjs(moment(data.StartDate).format(dateFormat), dateFormat) : null,
        'EndDate': data.EndDate ? dayjs(moment(data.EndDate).format(dateFormat), dateFormat) : null,
        'Type': data.Type,
        'Stage': data.Stage || 1,
        'Position': data.Position,
        'LeaderId': data.LeaderId === 0 ? undefined : data.LeaderId,
        'UndertakenUnit': data.UndertakenUnit,
        'Duration': getDuration(data),
        'CurrentDuration': getDuration(data, true),
        'ConstructionUnit': data.ConstructionUnit,
        'SiteManager': data.SiteManager === 0 ? undefined : data.SiteManager,
        'PurchaseManager': data.PurchaseManager === 0 ? undefined : data.PurchaseManager,
        'DepartmentManager': data.DepartmentManager === 0 ? undefined : data.DepartmentManager,
        'TechnicalDesigner': data.TechnicalDesigner === 0 ? undefined : data.TechnicalDesigner,
        'MechanicalDesigner': data.MechanicalDesigner === 0 ? undefined : data.MechanicalDesigner,
        'ElectricalDesigner': data.ElectricalDesigner === 0 ? undefined : data.ElectricalDesigner,
        'Province': data.Province,
        'Scale': data.Scale,
        'MainProcess': data.MainProcess,
        'ServiceScope': data.ServiceScope,
        'ContractTime': data.ContractTime ? dayjs(data.ContractTime, dateFormat) : null,
        'ServiceTime': data.ServiceTime,
        'CooperateMode': data.CooperateMode,
        'WaterStandard': data.WaterStandard,
        'ConstructAlarmFlag': data.ConstructAlarmFlag == 1,
        'OpsAlarmFlag': data.OpsAlarmFlag == 1,
        'CarouselFlag': data.CarouselFlag == 1,
        'Remark': data.Remark,
      });
    },
  });

  const updateProjectRequest = useRequest(updateProject, {
    manual: true,
    onSuccess(data, params) {
      success('修改成功');
      setEditable(false);
      projectDetailRequest.run({ ID: projectId })
    },
  });

  const removeProjectUserRequest = useRequest(removeProjectUser, {
    manual: true,
    onSuccess(data, params) {
      success('删除成功');
      projectDetailRequest.run({ ID: projectId })
    },
  });
  const addProjectUserRequest = useRequest(addProjectUserV2, {
    manual: true,
    onSuccess(data, params) {
      success('修改成功');
      OnHandleAllotUserModalVisible(false, null);
      projectDetailRequest.run({ ID: projectId })
    },
  });


  const { loading, setCurProjectId, userList } = useModel('userList');
  const { loading: depTreesLoading, depTrees } = useModel('dep');
  const { full_roles: roleList } = useModel('projectRoleList');

  const success = (content: string) => {
    message.success(content);
  };

  const OnEdit = () => {
    setEditable(true);
  };

  // const OnCancelEdit = () => {
  //   formRef.resetFields({});
  //   const newState = { ...this.state };
  //   newState.editable = true;
  //   newState.empty = true;
  //   this.setState(newState);
  // };

  const OnSave = (fieldsValue: any) => {
    const defaultRemark = `${fieldsValue.Province}${fieldsValue.Position}的${fieldsValue.Name}`;
    fieldsValue.Duration = getDuration(fieldsValue) || 0;
    fieldsValue.CurrentDuration = getDuration(fieldsValue, true) || 0;
    if (fieldsValue.Remark == '' || fieldsValue.Remark == defaultRemark) {
      Modal.confirm({
        title: '提示',
        content:
          '项目描述将展示在驾驶舱内，默认内容格式为：[所在省份][所在城市]的[项目名称]。建议添加详细项目介绍，有助项目展示。是否继续使用默认内容？',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          fieldsValue.Remark = defaultRemark;
          save(fieldsValue);
          formRef.setFieldsValue({ Remark: defaultRemark });
        },
        onCancel() { },
      });
    } else {
      save(fieldsValue);
    }

  };
  const save = (fieldsValue: any) => {
    fieldsValue.ConstructAlarmFlag = fieldsValue.ConstructAlarmFlag ? 1 : 0;
    fieldsValue.OpsAlarmFlag = fieldsValue.OpsAlarmFlag ? 1 : 0;
    fieldsValue.CarouselFlag = fieldsValue.CarouselFlag ? 1 : 0;
    fieldsValue.CompanyNumber = fieldsValue.CompanyNumber * 1;
    fieldsValue.StartDate = fieldsValue.StartDate.format('YYYY-MM-DD');
    fieldsValue.EndDate = fieldsValue.EndDate.format('YYYY-MM-DD');
    fieldsValue.ContractTime = fieldsValue.ContractTime.format('YYYY-MM-DD');
    fieldsValue.ID = projectId * 1;
    updateProjectRequest.run(fieldsValue);
  };

  const OnHandleAllotUserModalVisible = (show: boolean, user: any) => {
    setShowUserSelectTree(show);
    setItem(user);
  };

  // HandleAllot = projectUser => {
  //   const { dispatch } = this.props;
  //   dispatch({
  //     type: 'pro/addProjectUser',
  //     payload: projectUser,
  //   });
  //   this.OnHandleAllotUserModalVisible(false);
  // };
  const addProjectUser = (values: any) => {
    addProjectUserRequest.run({
      project_id: Number(projectId),
      ...values,
    })
  };

  // renderUserSelectTreeNodes = data =>
  //   data.map(item => {
  //     if (item.children) {
  //       return (
  //         <TreeNode
  //           title={item.title}
  //           key={item.key}
  //           value={item.value}
  //           dataRef={item}
  //           selectable={item.selectable}
  //         >
  //           {this.renderUserSelectTreeNodes(item.children)}
  //         </TreeNode>
  //       );
  //     }
  //     return (
  //       <TreeNode
  //         title={item.title}
  //         key={item.ID}
  //         value={item.value}
  //         selectable={item.selectable}
  //       />
  //     );
  //   });

  const canAddProjectUser = () => {
    let currentUser = props.initState.initialState.currentUser;
    return currentUser.Permission && currentUser.Permission['func-010101'];
  };

  const getColumns = () => {
    // 添加成员权限控制
    let currentUser = props.initState.initialState.currentUser;
    const addPermission =
      currentUser.IsSuper || projectDetailRequest.data.LeaderId === currentUser.ID || canAddProjectUser();

    const columns = [
      {
        title: '用户名',
        dataIndex: 'UserName',
      },
      {
        title: '姓名',
        dataIndex: 'CName',
      },
      {
        title: '手机号',
        dataIndex: 'Mobile',
      },
      {
        title: '邮箱',
        dataIndex: 'Email',
      },
      {
        title: '成员角色',
        dataIndex: 'Role',
        ellipsis: true,
        width: 150,
        render: (roles: any) =>
          roles
            .map((role: any) => role.Name)
            .filter((item: any) => item)
            .join('，'),
      },
      // {
      //   title: '所属部门',
      //   dataIndex: 'DepId',
      //   // render: id => {
      //   //   return this.state.dep[id]?.Name;
      //   // },
      //   // dataIndex: 'Dep',
      //   // render: (text, record) => {
      //   //   return record.Dep.map(item => item.Name).join(',');
      //   // },
      // },
      {
        title: '操作',
        render: (text: any, record: any) => {
          return (
            <Fragment>
              <a
                onClick={() => {
                  OnHandleAllotUserModalVisible(true, record);
                }}
              >
                编辑
              </a>
              &nbsp;&nbsp;&nbsp;&nbsp;
              {addPermission && (
                <a
                  onClick={() => {
                    handleDeleteProjectUser(record.ID);
                  }}
                >
                  {' '}
                  删除
                </a>
              )}
            </Fragment>
          );
        },
      },
    ];

    return columns;
  };

  const showJurisdiction = (item: string) => {
    return props.access[item];
  };
  const onCancel = () => {
    setVisible(false);
  };
  const showModal = () => {
    setVisible(true);
  };
  // uploadSuccess = () => {
  //   const { dispatch } = this.props;
  //   const {
  //     match: {
  //       params: { projectId },
  //     },
  //   } = this.props;
  //   dispatch({
  //     type: 'pro/fetchById',
  //     payload: {
  //       ID: parseInt(projectId, 10),
  //     },
  //   });
  // };

  const screenShotSuccess = () => {
    // console.log(projectId);
    // queryScreenShort({
    //   projectId,
    // }).then(res => {
    //   this.setState({
    //     screenShot: res.data[0],
    //   });
    // });
  };

  const getDuration = (data: any, isCurrent: boolean = false) => {
    const { StartDate, EndDate } = data;
    if (!StartDate) return '';
    if (isCurrent) {
      return moment().diff(StartDate, 'days') || '';
    } else {
      if (!EndDate) return '';
      return moment(EndDate).diff(StartDate, 'days') || '';
    }
  };

  const changeDate = () => {
    setTimeout(() => {
      const { StartDate, EndDate } = formRef.getFieldsValue();
      let CurrentDuration, Duration;

      if (!StartDate) {
        CurrentDuration = '';
        Duration = '';
      } else {
        CurrentDuration = moment().diff(StartDate.format('YYYY-MM-DD'), 'days') || '';
        Duration = EndDate ? moment(EndDate.format('YYYY-MM-DD')).diff(StartDate.format('YYYY-MM-DD'), 'days') : '';
      }
      formRef.setFieldsValue({ Duration, CurrentDuration });
    }, 200);
  };

  // deletePic = () => {
  //   const { screenShot } = this.state;
  //   Modal.confirm({
  //     title: '删除',
  //     content: '是否确认删除项目截图？',
  //     okText: '确定',
  //     okType: 'danger',
  //     cancelText: '取消',
  //     onOk: () => {
  //       // deleteScreenShort({
  //       //   id: screenShot.ID,
  //       // }).then(() => {
  //       //   message.success('删除成功');
  //       //   this.setState({
  //       //     screenShot: null,
  //       //   });
  //       // });
  //     },
  //   });
  // };
  // const {
  //   submitting,
  //   depUserTree,
  //   cp,
  //   currentUser,
  //   // match: {
  //   //   params: { projectId },
  //   // },
  //   projectId = 46,
  //   user: { userList },
  //   projectRoleList,
  //   projectCodes,
  //   cpDetailLoading
  // } = this.props;
  // const { editable, showUserSelectTree, empty, visible, screenShot, item } = this.state;

  // 修改编辑权限控制
  // const permission = projectDetailRequest.da.LeaderId === currentUser.ID || currentUser.IsSuper;

  // 添加成员权限控制
  // const addPermission =
  //   currentUser.IsSuper || cp.LeaderId === currentUser.ID || this.canAddProjectUser();
  // const allotMethod = {
  //   handleAllot: this.HandleAllot,
  //   handleModalVisible: this.OnHandleAllotUserModalVisible,
  // };

  useEffect(() => {
    setCurProjectId(46)
  }, []);
  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
  };
  const descLayout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 20 },
  };
  console.log(props);

  return (
    <>
      <Card bordered={false}>
        <Spin spinning={projectDetailRequest.loading || updateProjectRequest.loading}>
          <Form layout="vertical"
            form={formRef}
            onFinish={OnSave}
          // onFinishFailed={onFinishFailed}
          >
            <Row>
              <div className={styles.OperatorButtonGroup}>
                {editable &&
                  (showJurisdiction('func-01-build-8-1-03') ||
                    showJurisdiction('func-01-ops-2-0-03')) ? (
                  <Button
                    className={styles.OperatorButton}
                    type="primary"
                    htmlType="submit"
                  // onClick={this.OnSave}
                  // loading={submitting}
                  >
                    保存
                  </Button>
                ) : null}
                {!editable &&
                  (showJurisdiction('func-01-build-8-1-03') ||
                    showJurisdiction('func-01-ops-2-0-03')) ? (
                  <Button
                    className={styles.OperatorButton}
                    type="primary"
                    onClick={OnEdit}
                  // loading={submitting}
                  >
                    编辑
                  </Button>
                ) : null}
                {(showJurisdiction('func-01-build-8-1-03') ||
                  showJurisdiction('func-01-ops-2-0-03')) && (
                    <Button type="primary"
                      onClick={showModal}
                    >
                      项目图片
                    </Button>
                  )}
              </div>
            </Row>
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  {...layout}
                  label={fieldLabels.Name}
                  name='Name'
                  rules={[{ required: true, message: '请输入项目名称' }]}>
                  <Input placeholder="请输入项目名称" disabled={!editable} />
                </Form.Item>
              </Col>

              <Col span={12}>
                <Form.Item
                  label={fieldLabels.Code}
                  {...layout}
                  name='Code'
                  rules={[{ required: true, message: '请输入项目编号' }]}
                >
                  <AutoComplete
                    // dataSource={projectCodes}
                    style={{ width: '100%' }}
                    disabled={!editable}
                    placeholder="请输入项目编号"
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label={fieldLabels.CompanyName}
                  {...layout}
                  name='CompanyName'
                  rules={[{ required: true, message: '请输入公司名称' }]}
                >
                  <Input placeholder="请输入公司名称" disabled={!editable} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label={fieldLabels.WaterName}
                  {...layout}
                  name='WaterName'
                  rules={[
                    { required: true, message: '请输入水厂名称' },
                    { message: '超过12字数限制', max: 12 },
                  ]}
                >
                  <Input placeholder="请输入水厂名称" disabled={!editable} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label={fieldLabels.CompanyNumber} {...layout} name='CompanyNumber' rules={[{ required: true, message: '请输入员工人数' }]}>
                  <Input type="number" placeholder="请输入员工人数" disabled={!editable} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label={fieldLabels.StartDate} {...layout} name='StartDate' rules={[{ required: true, message: '请选择开始日期' }]}>
                  <DatePicker
                    // onChange={changeDate}
                    style={{ width: '100%' }}
                    disabled={!editable}
                  />
                </Form.Item>
              </Col>

              <Col span={12}>
                <Form.Item label={fieldLabels.EndDate} {...layout} name='EndDate' rules={[{ required: true, message: '请选择结束日期' }]}>
                  <DatePicker
                    // onChange={changeDate}
                    style={{ width: '100%' }}
                    disabled={!editable}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label={fieldLabels.Type} {...layout} name='Type' rules={[{ required: true, message: '请输入项目类型' }]}>
                  <Select placeholder="请选择项目状态" disabled={!editable}>
                    {ProjectType.map(item => {
                      return (
                        <Option value={item.value} key={item.value}>
                          {item.name}
                        </Option>
                      );
                    })}
                  </Select>
                </Form.Item>
              </Col>

              <Col span={12}>
                <Form.Item label={fieldLabels.Stage} {...layout} name='Stage' rules={[{ required: true, message: '请选择项目所属平台' }]}>
                  <Select
                    showSearch
                    style={{ width: '100%' }}
                    placeholder="请选择项目所属平台"
                    optionFilterProp="children"
                    filterOption={(input, option) => option?.props.children.indexOf(input) >= 0}
                    disabled={!editable}
                  >
                    {ProjectStage &&
                      ProjectStage.map(item => (
                        <Select.Option key={item.value} value={item.value}>
                          {item.name}
                        </Select.Option>
                      ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label={fieldLabels.Position} {...layout} name='Position' rules={[{ required: true, message: '请输入项目地点' }]}>
                  <Input
                    style={{ width: '100%' }}
                    placeholder="请输入项目地点"
                    disabled={!editable}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label={fieldLabels.LeaderId} {...layout} name='LeaderId' rules={[{ required: true, message: '请选择项目经理' }]}>
                  <Select
                    showSearch
                    style={{ width: '100%' }}
                    placeholder="请选择项目经理"
                    optionFilterProp="children"
                    filterOption={(input, option) => option?.props.children.indexOf(input) >= 0}
                    disabled={!editable}
                  >
                    {userList &&
                      userList.map((item: Api.IUser) => (
                        <Select.Option key={item.ID} value={item.ID}>
                          {item.CName}
                        </Select.Option>
                      ))}
                  </Select>
                </Form.Item>
              </Col>

              <Col span={12}>
                <Form.Item {...layout} label={fieldLabels.UndertakenUnit} name='UndertakenUnit'>
                  <Input
                    placeholder="请输入承建单位"
                    disabled={!editable}
                    style={{ width: '100%' }}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item {...layout} label={fieldLabels.Duration} name='Duration'>
                  <Input disabled style={{ width: '100%' }} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item {...layout} label={fieldLabels.CurrentDuration} name='CurrentDuration'>
                  <Input disabled style={{ width: '100%' }} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item {...layout} label={fieldLabels.ConstructionUnit} name='ConstructionUnit'>
                  <Input placeholder="请输入建设单位" disabled={!editable} />
                </Form.Item>
              </Col>

              <Col span={12}>
                <Form.Item label={fieldLabels.SiteManager} {...layout} name='SiteManager'>
                  <Select
                    showSearch
                    style={{ width: '100%' }}
                    placeholder="请选择现场经理"
                    optionFilterProp="children"
                    filterOption={(input, option) => option?.props.children.indexOf(input) >= 0}
                    disabled={!editable}
                  >
                    {userList &&
                      userList.map((item: Api.IUser) => (
                        <Select.Option key={item.ID} value={item.ID}>
                          {item.CName}
                        </Select.Option>
                      ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="采购经理" {...layout} name='PurchaseManager'>
                  <Select
                    showSearch
                    style={{ width: '100%' }}
                    placeholder="请选择采购经理"
                    optionFilterProp="children"
                    filterOption={(input, option) => option?.props.children.indexOf(input) >= 0}
                    disabled={!editable}
                  >
                    {userList &&
                      userList.map((item: Api.IUser) => (
                        <Select.Option key={item.ID} value={item.ID}>
                          {item.CName}
                        </Select.Option>
                      ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="分部经理" {...layout} name='DepartmentManager'>
                  <Select
                    showSearch
                    style={{ width: '100%' }}
                    placeholder="请选择分部经理"
                    optionFilterProp="children"
                    filterOption={(input, option) => option?.props.children.indexOf(input) >= 0}
                    disabled={!editable}
                  >
                    {userList &&
                      userList.map((item: Api.IUser) => (
                        <Select.Option key={item.ID} value={item.ID}>
                          {item.CName}
                        </Select.Option>
                      ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label={fieldLabels.TechnicalDesigner} {...layout} name='TechnicalDesigner'>
                  <Select
                    showSearch
                    style={{ width: '100%' }}
                    placeholder="请选择工艺主设"
                    optionFilterProp="children"
                    filterOption={(input, option) => option?.props.children.indexOf(input) >= 0}
                    disabled={!editable}
                  >
                    {userList &&
                      userList.map((item: Api.IUser) => (
                        <Select.Option key={item.ID} value={item.ID}>
                          {item.CName}
                        </Select.Option>
                      ))}
                  </Select>
                </Form.Item>
              </Col>

              <Col span={12}>
                <Form.Item label={fieldLabels.MechanicalDesigner} {...layout} name='MechanicalDesigner'>
                  <Select
                    showSearch
                    style={{ width: '100%' }}
                    placeholder="请选择机械主设"
                    optionFilterProp="children"
                    filterOption={(input, option) => option?.props.children.indexOf(input) >= 0}
                    disabled={!editable}
                  >
                    {userList &&
                      userList.map((item: Api.IUser) => (
                        <Select.Option key={item.ID} value={item.ID}>
                          {item.CName}
                        </Select.Option>
                      ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label={fieldLabels.ElectricalDesigner} {...layout} name='ElectricalDesigner'>
                  <Select
                    showSearch
                    style={{ width: '100%' }}
                    placeholder="请选择电气自控主设"
                    optionFilterProp="children"
                    filterOption={(input, option) => option?.props.children.indexOf(input) >= 0}
                    disabled={!editable}
                  >
                    {userList &&
                      userList.map((item: Api.IUser) => (
                        <Select.Option key={item.ID} value={item.ID}>
                          {item.CName}
                        </Select.Option>
                      ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12} className={styles.desc}>
                <Form.Item label={fieldLabels.Province} {...layout} name='Province' rules={[{ required: true, message: '请选择所属省份' }]}>
                  <Select
                    placeholder="请选择所属省份"
                    disabled={!editable}
                    optionFilterProp="children"
                  // filterOption={(input, option) =>
                  //   option?.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  // }
                  >
                    {Provinces.map(item => {
                      return (
                        <Option value={item} key={item}>
                          {item}
                        </Option>
                      );
                    })}
                  </Select>
                </Form.Item>
              </Col>

              <Col span={12}>
                <Form.Item {...layout} label="项目规模" name='Scale'>
                  <Input placeholder="请输入项目规模" disabled={!editable} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item {...layout} label="主体工艺" name='MainProcess'>
                  <Input placeholder="请输入主体工艺" disabled={!editable} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item {...layout} label="服务范围" name='ServiceScope'>
                  <Input placeholder="请输入服务范围" disabled={!editable} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item {...layout} label="签约时间" name='ContractTime'>
                  <DatePicker style={{ width: '100%' }} disabled={!editable} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item {...layout} label="运营服务时间" name='ServiceTime'>
                  <Input placeholder="请输入运营服务时间" disabled={!editable} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item {...layout} label="合作模式" name='CooperateMode'>
                  <Input placeholder="请输入合作模式" disabled={!editable} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item {...layout} label="出水执行标准" name='WaterStandard'>
                  <Input placeholder="请输入出水执行标准" disabled={!editable} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item {...layout} label="推送建设消息" name='ConstructAlarmFlag' valuePropName='checked'>
                  <Switch
                    disabled={!editable || !showJurisdiction('func-01-build-8-1-04')}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item {...layout} label="推送运营消息" name='OpsAlarmFlag' valuePropName='checked'>
                  <Switch disabled={!editable || !showJurisdiction('func-01-ops-2-0-06')} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item {...layout} label="允许轮播" name='CarouselFlag' valuePropName='checked'>
                  <Switch disabled={!editable} />
                </Form.Item>
              </Col>
              <Col span={12} className={styles.desc}>
                <Form.Item label="项目描述" {...layout} name='Remark'>
                  <TextArea placeholder="请输入项目描述" disabled={!editable} autoSize={true} />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Spin>
        <div className={styles.OperatorButtonGroup}>
          {(showJurisdiction('func-01-build-8-1-02') ||
            showJurisdiction('func-01-ops-2-0-02')) && (
              <>
                <Button
                  className={styles.OperatorButton}
                  type="primary"
                  loading={addProjectUserRequest.loading}
                  onClick={() => {
                    OnHandleAllotUserModalVisible(true, null);
                  }}
                >
                  添加项目成员
                </Button>
              </>
            )}
        </div>
        {/* <UnityPageTitle style={{ marginTop: 50, marginBottom: 25 }}>项目成员</UnityPageTitle> */}
        <Table
          bordered
          columns={getColumns()}
          dataSource={projectDetailRequest.data?.User || []}
          pagination={false}
          rowKey="ID"
          title={() => '项目成员'}
        />
        <UserRoleModal
          onOk={(data: any) => {
            addProjectUser(data);
          }}
          onCancel={() => {
            OnHandleAllotUserModalVisible(false, null);
          }}
          values={item}
          visible={showUserSelectTree}
          depUserTree={depTrees}
          roleList={roleList}
        />
      </Card>
      <ImgModal
        imgUrl={projectDetailRequest?.data?.ImageUrl}
        screenShot={screenShot}
        visible={visible}
        onCancel={onCancel}
        screenShotSuccess={screenShotSuccess}
        // uploadSuccess={uploadSuccess}
        showJurisdiction={showJurisdiction}
        projectId={projectId}
      // deletePic={deletePic}
      />
    </>
  );

}

function ImgModal(props: any) {
  const {
    visible,
    imgUrl,
    screenShot,
    projectId,
    onCancel,
    uploadSuccess,
    deletePic,
    screenShotSuccess,
    showJurisdiction,
  } = props;
  const [loading, setLoading] = useState(false);
  const uploadProps: UploadProps = {
    accept: 'image/*',
    name: 'file',
    action: `/api/v1/project-image-file/${projectId}`,
    showUploadList: false,
    listType: 'picture-card',
    headers: {
      'JWT-TOKEN': LocalService.getItem(STORAGE_TYPE.token)
    },
    className: 'avatar-uploader',
    beforeUpload: (file: any) => {
      const isLt = file.size / 1024 < 200;
      if (!isLt) {
        message.error('图片必须小于200 KB');
      }
      setLoading(isLt);
      return isLt;
    },
    onChange(info: any) {
      if (info.file.status !== 'uploading') {
        // console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 文件上传成功`);
        setLoading(false);
        uploadSuccess();
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 文件上传失败`);
        setLoading(false);
      }
    },
  };
  const sendMessageToUnity = () => {
    // if (isClick) {
    // if (window.screenShot) {
    //   window.screenShot(JSON.stringify('screenShot'));
    // }
  };
  // window.screenShotSuccess = idStr => {
  //   screenShotSuccess();
  // };
  const uploadScreenShot = () => {
    confirm({
      title: '提醒',
      content: '确认上传截图，上传后无法复原',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        sendMessageToUnity();
      },
    });
  };

  const uploadButton = (
    <div>,
      {loading ? <Loading3QuartersOutlined></Loading3QuartersOutlined> : <PlusOutlined></PlusOutlined>}
      <div className="ant-upload-text">上传</div>
    </div>
  );

  return (
    <Modal title="图片" open={visible} footer={null} onCancel={onCancel}>
      <Tabs defaultActiveKey="1">
        <TabPane tab="项目封面" key="1">
          <div className={styles.upload}>
            <Upload {...uploadProps}>
              {imgUrl ? <img src={imgUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
            </Upload>
            {/* <Button type="danger" style={{ marginTop: 20 }}>
            删除
          </Button> */}
          </div>
        </TabPane>
        <TabPane tab="模型截图" key="2">
          <div className={styles.upload} style={{ position: 'relative' }}>
            {(showJurisdiction('func-01-ops-2-0-05') ||
              showJurisdiction('func-01-build-8-1-05')) && (
                <Button
                  type="primary"
                  onClick={uploadScreenShot}
                  style={{ marginTop: 20, position: 'absolute', right: 0, bottom: 0, zIndex: 10 }}
                >
                  上传预览图
                </Button>
              )}
            {screenShot?.Url ? (
              <>
                <img src={screenShot.Url} alt="avatar" style={{ width: '100%' }} />
                {(showJurisdiction('func-01-ops-2-0-04') ||
                  showJurisdiction('func-01-build-8-1-06')) && (
                    <Button type="primary" danger onClick={deletePic} style={{ marginTop: 20 }}>
                      删除
                    </Button>
                  )}
              </>
            ) : (
              <Empty />
            )}
          </div>
        </TabPane>
      </Tabs>
    </Modal>
  );
}
export default ProjectDetail;

