import {
  Form,
  Input,
  DatePicker,
  Modal,
  Upload
} from 'antd';
import SelectOptionTree from '@/components/SelectOptionTree';
import { XQ, AE, AX, _09, AB, OR, BG, AT, HC, OC, OD, RF, X4 } from '@/utils/pr_new_datadictionary';
import userAvatar from '@/assets/img/user_avatar.png';
import styles from "@/global.less";
import moment from 'moment';
import style from '../index.less';
import React, { useState } from 'react';
const FormItem = Form.Item;

const Aa01ViewForm = (props) => {

  const { viewModalVisible, handleViewModalVisible, values } = props;

  const [form] = Form.useForm();
  const [photoUrl, setPhotoUrl] = useState();
  React.useEffect(() => {
    if(!!values.zp){
      setPhotoUrl(values.zp.fileurl)
    }
    form?.setFieldsValue({
      za0101: values.za0101, // 姓  名	za0101
      aa0107: values.aa0107, // 性  别	aa0107
      aa0121: values.aa0121, // 民  族	aa0121
      aa0111: values.aa0111 ? moment(values.aa0111, "YYYY-MM") : null, // 出  生  年  月	aa0111
      aa0114: values.aa0114, // 籍  贯	aa0114
      aa0117: values.aa0117, // 出生地	aa0117
      aa0141: values.aa0141 ? moment(values.aa0141, "YYYY-MM-DD") : null, // 参加工作时间	aa0141
      v_aa011n: values.v_aa011n, // 党派交叉情况	v_aa011n	
      v_aa011a: values.v_aa011a, // 职  称	v_aa011a  
      aa0127: values.aa0127, // 婚  姻  状  况	aa0127
      v_aa011b: values.v_aa011b, // 健  康  状  况	v_aa011b
      aa0177: values.aa0177, // 身份证号  码	aa0177
      v_aa011c: values.v_aa011c, // 工作单位  v_aa011c
      v_aa011d: values.v_aa011d, // 职 务  v_aa011d
      v_aa011h: values.v_aa011h, // 职务层次	v_aa011h
      v_aa011f: values.v_aa011f ? moment(values.v_aa011f, "YYYY-MM-DD") : null, // 任现职务层次时间	v_aa011f
      v_aa011e: values.v_aa011e, // 职    级	v_aa011e
      v_aa011g: values.v_aa011g ? moment(values.v_aa011g, "YYYY-MM-DD") : null, // 任 现 职 级 时 间	v_aa011g
      v_aa011i: values.v_aa011i, // 单位地址	v_aa011i
      v_aa011j: values.v_aa011j, // 固定电话	v_aa011j
      v_aa011k: values.v_aa011k, // 家庭地址	v_aa011k
      ak010g: values.ak010g, // 邮政编码	ak010g
      ak010b: values.ak010b, // 手机号码	ak010b
      v_aa011l: values.v_aa011l, // 电子邮箱	v_aa011l
      v_aa011m: values.v_aa011m, // 专业专长	v_aa011m
      za9998: values.za9998, // 头像
    });
  }, [values, form]);


  return (
    <Modal
      width={1200}
      height={500}
      bodyStyle={{ padding: '20px', maxHeight: '500px', overflowY: 'auto' }}
      forceRender={true}
      getContainer={false}
      title="查看"
      visible={viewModalVisible}
      onOk={() => handleViewModalVisible(false, values)}
      onCancel={() => handleViewModalVisible(false, values)}
      afterClose={() => handleViewModalVisible()}
    >

      <Form form={form} layout="vertical" hideRequiredMark style={{ pointerEvents: 'none' }}>
        <table className={styles.formtable}>
          <tbody>
            <tr>
              <td colSpan="28">人员基本情况信息</td>
            </tr>
            <tr>
              <td colSpan="3">
                <span className={styles.required}>姓名</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="za0101">
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span className={styles.required}>性别</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0107">
                  <SelectOptionTree treeData={AX || []} />
                </FormItem>
              </td>
              <td colSpan="3">
                <span className={styles.required}>民族</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0121">
                  <SelectOptionTree treeData={AE || []} />
                </FormItem>
              </td>
              {/* 照片（za9998） */}
              <td colSpan="7" style={{ position: 'relative', border: 'none' }}>
                <div style={{ position: 'absolute', left: '28%', top: '20px' }} className={style.photoBox}>
                  <img src={photoUrl ? photoUrl : userAvatar} alt="图片加载失败" style={{ width: '120px', height: '130px' }} />
                </div>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span className={styles.required}>出生年月</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0111">
                  <DatePicker format="YYYY-MM" style={{ width: '100%' }} placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span className={styles.required}>籍贯</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0114">
                  <SelectOptionTree treeData={AB || []} />
                </FormItem>
              </td>
              <td colSpan="3">
                <span>出生地</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0117">
                  <SelectOptionTree treeData={AB || []} />
                </FormItem>
              </td>

            </tr>
            <tr>
              <td colSpan="3">
                <span className={styles.required}>参加工作时间</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0141">
                  <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="" />
                </FormItem>
              </td>

              <td colSpan="3">
                <span>党派交叉情况</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="v_aa011n">
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span className={styles.required}>职称</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="v_aa011a">
                  <Input placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span className={styles.required}>婚姻状况</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0127">
                  <SelectOptionTree treeData={BG || []} />
                </FormItem>
              </td>
              <td colSpan="3">
                <span className={styles.required}>健康状况</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="v_aa011b">
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span className={styles.required}>身份证号码</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0177">
                  <Input placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span>工作单位</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011c">
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span>职务</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011d">
                  <Input placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span>职务层次</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011h">
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span>任现职务层次时间</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011f">
                  <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span>职级</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011e">
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span>任现职级时间</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011g">
                  <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span>单位地址</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011i">
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span>固定电话</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011j">
                  <Input placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span className={styles.required}>家庭地址</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011k">
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span className={styles.required}>邮政编码</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="ak010g">
                  <Input placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span>手机号码</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="ak010b">
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span>电子邮箱</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011l">
                  <Input placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span>专业专长</span>
              </td>
              <td colSpan="25">
                <FormItem label="" name="v_aa011m">
                  <Input placeholder="" />
                </FormItem>
              </td>
            </tr>
          </tbody>
        </table>
      </Form>

    </Modal>
  );

}

export default Aa01ViewForm;