import React, { Component } from "react";
import { connect } from "dva";

import { Link } from 'dva/router';
import { gup } from '../../../utils/utils';
import {
  Alert,
  Form,
  Row,
  Col,
  Input,
  Table,
  message,
  Button,
  Modal,
  Checkbox,
  Upload,
  Icon,
  Tabs,
  Breadcrumb,
  Radio,
  Divider,
  Select
} from "antd";
import { formItemLayout, formLayout, formLayout1, formLayoutTable, formLayoutTable2, formLayout3 } from './formLayout';
import PSelect from '../../../components/Pro/PSelect';
import PFromUpload from '../../../components/Pro/PFromUpload';
import BTable from '../../../components/Pro/BTable';
import declare from '../../../utils/hoc/declare';
import ImageFormItem from './imageFormItem';
import { contract, infoReviewDetail, internReviewDetail } from "./columns";
import { qualify_applyInfo, qualify_selectProofList } from "../../../services/bkt/qualify"
import { trainInternInternLinePage, trainGradeApplyInfo, trainGradeApplyInfoCheck } from "../../../services/bkt/grade"
import { getBayBaseInfo, publicCommonFileFilePreview } from "../../../services/api"
const { TabPane } = Tabs;
@connect(state => ({
  profile: state.profile
}))
@Form.create()
@declare
export default class CertificateMessage extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      tab: '1',
      contractColumns: [],  //合同信息
      infoReviewColumns: [], //学习记录
      internReviewColumns: [], //实习记录
      checkStatus: 1,
      internModel: false,
      checkContent: "", //不合格原因
      info: {},
      selectProofList: [],  //学习记录列表
      internList: [], //实习记录列表
      internContent: "", //实习记录不合格原因
      personApplyId: this.props.history.location.query ? `${this.props.history.location.query.personApplyId}` : "",
      checkPerName: "",
      pageParm: { //实习记录表格参数
        pageSize: '10',
        pageNumber: '1',
      },
    };
  }

  componentWillMount() {
    this.__getDetailInfo(this.state.personApplyId)
    this.__getSelectProofList(this.state.personApplyId)
    const tab = gup('tab');
    if (tab) {
      this.setState({
        tab
      });
    }
  }
  componentDidMount() {
    // const contractColumns = contract.call(this);
    const infoReviewColumns = infoReviewDetail.call(this);
    const internReviewColumns = internReviewDetail.call(this);
    this.setState({
      infoReviewColumns,
      internReviewColumns
    });

  }
  //获取详情
  __getDetailInfo = (personApplyId) => {
    let { pageParm } = this.state
    trainGradeApplyInfo({ data: { personApplyId } }).then(res => {
      this.setState({
        info: res.data,
        pageParm: { ...pageParm, uid: res.data.uid }
      });
    });
  }
  //获取学习记录
  __getSelectProofList = (personApplyId) => {
    qualify_selectProofList({ data: { personApplyId } }).then(res => {
      this.setState({
        selectProofList: res.data
      })
    });
  }


  render() {
    const { getFieldDecorator } = this.props.form;
    const { state } = this
    const { info, selectProofList, personApplyId } = this.state
    const contractDataSource = []
    if (info.contractName) {
      contractDataSource.push(info)
    }

    return (
      <div style={{ paddingTop: '10px' }}>
        <Breadcrumb style={{ margin: '16px 0 8px 24px' }}>
          <Breadcrumb.Item>
            <Link to="/spotCheck/gradeRecord">保安员等级证考培信息抽查记录</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>审查详情</Breadcrumb.Item>
        </Breadcrumb>
        <Form style={{ paddingRight: 15 }}>
          <div className="basic_container">
            <Divider style={{ paddingLeft: "15px" }} orientation="left">
              <h3 style={{ fontWeight: 800, fontSize: "20px" }}>历史审核意见</h3>
            </Divider>
            <Row gutter={16}>
              <Col span={21}>
                <div style={{ marginLeft: "82px", fontSize: "16px", marginBottom: "30px", color: "red" }}>
                  {
                    info.checkFailContent ?
                      info.checkFailContent.map(item => {
                        return (
                          <div style={{ display: "flex" }}>
                            <p style={{ whiteSpace: "nowrap", marginRight: "5px" }}>{item.date} | </p>
                            <p>{item.content}</p>
                          </div>
                        )
                      }) : ""
                  }
                </div>
              </Col>
            </Row>
            <Divider style={{ paddingLeft: "15px" }} orientation="left">
              <h3 style={{ fontWeight: 800, fontSize: "20px" }}>基本信息</h3>
            </Divider>
            <Row gutter={16}>
              <Col span={7}>
                <Form.Item {...formItemLayout} label="姓名">
                  {getFieldDecorator('fullname', {
                    initialValue: info.fullname
                  })(< Input placeholder="" maxLength={30} disabled={true} />
                  )}
                </Form.Item>
              </Col>
              <Col span={7}>
                <Form.Item {...formItemLayout} label="身份证号码">
                  {getFieldDecorator('identitynumber', {
                    initialValue: info.identitynumber
                  })(<Input placeholder="" maxLength={30} disabled={true} />)}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={7} >
                <Form.Item {...formItemLayout} label="手机号码">
                  {getFieldDecorator('mobile', {
                    initialValue: info.mobile
                  })(<Input placeholder="" maxLength={30} disabled={true} />)}
                </Form.Item>
              </Col>
              <Col span={7}>
                <Form.Item {...formItemLayout} label="户籍类型">
                  {getFieldDecorator('residentType', {
                    initialValue: info.residentType
                  })(<PSelect disabled style={{ width: '100%' }} type="residentType" />)}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={7} >
                <Form.Item {...formItemLayout} label="户籍所在地类型">
                  {getFieldDecorator('residentPlaceType', {
                    initialValue: info.residentPlaceType
                  })(<PSelect disabled style={{ width: '100%' }} type="residentPlaceType" />)}
                </Form.Item>
              </Col>
              <Col span={7} >
                <Form.Item {...formItemLayout} label="户籍地址">
                  {getFieldDecorator('householdAddress', {
                    initialValue: info.householdAddress
                  })(<Input.TextArea placeholder="" disabled={true} autosize={{ minRows: 1, maxRows: 3 }} />)}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={7}>
                <Form.Item {...formItemLayout} label="现住地址">
                  {getFieldDecorator('actualAddress', {
                    initialValue: info.actualAddress
                  })(<Input.TextArea placeholder="" disabled={true} autosize={{ minRows: 1, maxRows: 3 }} />)}
                </Form.Item>
              </Col>
              <Col span={7}>
                <Form.Item {...formItemLayout} label="本职业工作年限">
                  {getFieldDecorator('workYear', {
                    initialValue: info.workYear+"年"
                  })(<Input placeholder="" maxLength={30} disabled={true} />)}
                </Form.Item>
              </Col>
            </Row>
            <Divider style={{ paddingLeft: "15px" }} orientation="left">
              <h3 style={{ fontWeight: 800, fontSize: "20px" }}>证书证明照片信息</h3>
            </Divider>
            <Row gutter={16}>
              <Col span={8}>
                <Form.Item style={{ marginLeft: "150px" }} >
                  二寸免冠照
                {info.avatar ?
                    getFieldDecorator("avatar", {
                      initialValue: info.avatar
                    })(
                      <PFromUpload
                        disabled={true}
                        size={1}
                        disabled
                      />
                    ) : <div style={{ width: "104px", height: "104px", border: "1px dashed #ccc", paddingTop: "30px", textAlign: "center" }}>暂无</div>
                  }
                </Form.Item>
              </Col>
              <Col span={7}>
                <Form.Item>
                  身份证人像面
                {info.idCardNoFrontUrl ?
                    getFieldDecorator("idCardNoFrontUrl", {
                      initialValue: info.idCardNoFrontUrl
                    })(
                      <PFromUpload
                        disabled={true}
                        size={1}
                        disabled
                      />
                    ) : <div style={{ width: "104px", height: "104px", border: "1px dashed #ccc", paddingTop: "30px", textAlign: "center" }}>暂无</div>
                  }
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item >
                  身份证国徽面
                {info.idCardNoBackUrl ?
                    getFieldDecorator("idCardNoBackUrl", {
                      initialValue: info.idCardNoBackUrl
                    })(
                      <PFromUpload
                        disabled={true}
                        size={1}
                        disabled
                      />
                    ) : <div style={{ width: "104px", height: "104px", border: "1px dashed #ccc", paddingTop: "30px", textAlign: "center" }}>暂无</div>
                  }
                </Form.Item>
              </Col>
            </Row>

            <Divider style={{ paddingLeft: "15px" }} orientation="left">
              <h3 style={{ fontWeight: 800, fontSize: "20px" }}>合同信息</h3>
            </Divider>
            <Row gutter={16}>
              <Col span={7}>
                <Form.Item {...formItemLayout} label="合同名称">
                  {getFieldDecorator('contractName', {
                    initialValue: info.contractName
                  })(< Input placeholder="" maxLength={30} disabled={true} />
                  )}
                </Form.Item>
              </Col>
              <Col span={7} >
                <Form.Item {...formItemLayout} label="有效期">
                  <span>{info.effectStartDate}--{info.effectEndDate}</span>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={16}>
                <Form.Item style={{ marginLeft: "30px" }} {...formLayout3} label="合同文件">
                  <Button
                    onClick={() => {
                      if (this.state.info.contractUrl) {
                        publicCommonFileFilePreview({
                          url: this.state.info.contractUrl,
                          isLoad: '1'
                        })
                          .then(data => {
                            if (data.data) {
                              window.open(data.data);
                            }
                          });
                      } else {
                        notification.warning({
                          message: '该合同未上传附件！',
                          description: '请先上传合同文件，方可查看。'
                        });
                      }
                    }}
                  >
                    预览
                  </Button>
                  <span style={{ color: "#FF7370" }}>（备注：该保安人员不满足保安证/入职/录入时间满一年，需校验劳动合同生效时间是否满一年）</span>
                </Form.Item>

              </Col>
            </Row>
            <Divider style={{ paddingLeft: "15px" }} orientation="left">
              <h3 style={{ fontWeight: 800, fontSize: "20px" }}>学习记录</h3>
            </Divider>
            <Form.Item {...formLayoutTable} label="">
              <Table style={{ marginLeft: "100px" }}
                dataSource={selectProofList} footer={null} columns={state.infoReviewColumns}
                pagination={false}
              />
            </Form.Item>
            <Divider style={{ paddingLeft: "15px" }} orientation="left">
              <h3 style={{ fontWeight: 800, fontSize: "20px" }}>实习记录</h3>
            </Divider>
            <Form.Item {...formLayoutTable2} label="">
              <BTable
                style={{ marginTop: 20, marginLeft: 100 }}
                columns={state.internReviewColumns}
                url="trainInternInternLinePage"
                pageParm={state.pageParm}
                // forceUpdate={this.state.forceUpdate}
                // scroll={{ x: '2200px' }}
                pagination={{
                  showTotal: total => `总共 ${total} 条`
                }}
              />
            </Form.Item>
          </div>
        </Form>

        {/* </TabPane>
        </Tabs> */}
      </div>
    );
  }
}