import React, { useState, useEffect } from 'react';
import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select, Form, Alert, Tabs, Row, Col } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import XForm, { FieldTypes } from '../../../components/XForm';
import router from 'umi/router';
import apis from '../../../services/apis';
import request from '../../../utils/request';
import Wangedit from '../../../components/Wangedit/Wangedit'
import Styles from './style.less';
import moment from 'moment';

const { TabPane } = Tabs;

const header = props => {
  const companyId = props.location.query.id

  const [data, setData] = useState({})
  if (companyId) {
    useEffect(() => {
      getCompanyData(companyId);
    }, [])

    // 查询列表
    const getCompanyData = (companyId) => {
      request({
        ...apis.company.get,
        urlData: { id: companyId }
      }).then((data) => {
        if (data.certifiedStatus === 'registered') {
          router.push({
            pathname: '/eContract/company/add',
            query: {
              id: companyId
            },
          });
          return
        }
        setData(data)
      }).catch((err) => {
        message.error(err.msg || err.message)
      })
    }
  } else {
    //第一次进入就创建新的企业
    useEffect(() => {
      addCompanyData();
    }, [])

    // 添加
    const addCompanyData = () => {
      request({
        ...apis.company.add,
      }).then((data) => {
        setData(data)
      }).catch((err) => {
        message.error(err.msg || err.message)
      })
    }
  }

  const openFddUrl = () => {
    window.open(data.certifiedAddress)
  }

  const getCompanyInfo = () => {
    if(data.companyId){
      request({
        ...apis.company.refresh, urlData: { id: data.companyId }
      }).then((data) => {
        message.info("查询成功")
        setData(data)
      }).catch((err) => {
        message.error(err.msg || err.message)
      })
    }else{
      message.info("加载中，请稍后点击")
    }
  }


  const datas1 = [
    {
      name: "企业编号",
      value: data.companyCode
    },
    {
      name: "法大大客户编号",
      value: data.fadadaCode
    },
    {
      name: "企业管理员身份",
      render: <><span>{data.companyManagerType === 'legal' ? '法人' : data.companyManagerType === 'agent' ? "代理人" : ""}</span></>
    },
    {
      name: "认证序列号",
      value: data.certifiedSerialNumber
    },
    {
      name: "实名认证地址",
      render: <span style={{wordWrap: 'break-word'}}><a onClick={openFddUrl}>{data.certifiedAddress}</a></span>
    },
    {
      name: "实名认证状态",
      render: <><span>{data.status === 0 ? '未认证' : data.status === 1 ? "管理员资料已提交" : data.status === 2 ? "企业基本资料（没有申请表）已提交" : data.status === 3 ? "已提交待审核" :
        data.status === 4 ? '审核通过' : data.status === 5 ? "审核不通过" : data.status === 6 ? "人工初审通过" : ""}</span></>
    },
  ]


  const datas2 = [
    {
      name: <><span style={{ fontWeight: '800' }}>认证状态</span></>,
      render: <><span style={{ fontWeight: '800' }}>{data.status === 0 ? '未认证' : data.status === 1 ? "管理员资料已提交" : data.status === 2 ? "企业基本资料（没有申请表）已提交" : data.status === 3 ? "已提交待审核" :
        data.status === 4 ? '审核通过' : data.status === 5 ? "审核不通过" : data.status === 6 ? "人工初审通过" : ""}</span></>
    },
    {
      name: "不通过原因",
      value: data.reason
    },
    {
      name: "审核时间",
      render:<><span>{data.verifyTime ? moment(data.verifyTime).format('YYYY-MM-DD HH:mm:ss') : ''}</span></>
    },
    {
      name: "认证方式",
      render: <><span>{data.certifiedType === 0 ? "银行卡认证" : data.certifiedType === 1 ? "纸质审核认证" : ""}</span></>
    },

    {
      name: <><span style={{ fontWeight: '800' }}>企业信息</span></>,
      style: { marginTop: '25px' }
    },
    {
      name: "企业名称",
      value: data.companyName
    },
    {
      name: "统一社会信用代码",
      value: data.creditCode
    },
    {
      name: <><span style={{ fontWeight: '800' }}>对公账号信息</span></>,
      style: { marginTop: '25px' }
    },
    {
      name: "银行名称",
      value: data.bankName
    },
    {
      name: "银行帐号",
      value: data.bankAccount
    },
    {
      name: "开户支行名称",
      value: data.subbranchName
    },
    {
      name: <><span style={{ fontWeight: '800' }}>企业管理员身份</span></>,
      render: <><span style={{ fontWeight: '800' }}>{data.companyManagerType === 'legal' ? '法人' : data.companyManagerType === 'agent' ? "代理人" : ""}</span></>,
      style: { marginTop: '25px' }
    },
    {
      name: "姓名",
      value: data.userName
    },
    {
      name: "手机号",
      value: data.tel
    },
    {
      name: "身份证号码",
      value: data.idCard
    },
  ]

  return (
    <Tabs type="card">
      <TabPane tab="基本信息" key="1">
        <div>
          {datas1.map((x) => {
            return <Row style={x.style || { margin: '10px 0' }}>
              <Col span={8}></Col>
              <Col span={4} className={Styles.title}>
                {x.name}
              </Col>
              <Col span={4} className={Styles.text}>
                {
                  x.render ? typeof x.render === 'function' ? x.render(props) : x.render : x.value
                }
              </Col>
              <Col span={8} >
              </Col>
            </Row>

          })}
          <Row style={{ margin: '40px 0' }}>
            <Col span={8}></Col>
            <Col span={4}>
              <Button type="danger" style={{ height: ' 45px', fontSize: '20px', lineHeight: ' 45px' }} onClick={getCompanyInfo}>更新认证状态</Button>
            </Col>
            <Col span={4}>
              <Button type="danger" style={{ height: ' 45px', fontSize: '20px', lineHeight: ' 45px' }} onClick={() => router.go(-1)}>返回</Button>
            </Col>
            <Col span={8}></Col>
          </Row>
        </div>

      </TabPane>
      <TabPane tab="企业认证信息" key="2">

        {datas2.map((x) => {
          return <Row style={x.style || { margin: '10px 0' }}>
            <Col span={8}></Col>
            <Col span={4} className={Styles.title} >
              {x.name}
            </Col>
            <Col span={4} className={Styles.text}>
              {
                x.render ? typeof x.render === 'function' ? x.render(props) : x.render : x.value
              }
            </Col>
            <Col span={8} >
            </Col>
          </Row>

        })}

        <Row style={{ margin: '40px 0' }}>
          <Col span={8}></Col>
          <Col span={4}>
            <Button type="danger" style={{ height: ' 45px', fontSize: '20px', lineHeight: ' 45px' }} onClick={getCompanyInfo}>更新企业认证信息</Button>
          </Col>
          <Col span={4}>
            <Button type="danger" style={{ height: ' 45px', fontSize: '20px', lineHeight: ' 45px' }} onClick={() => router.go(-1)}>返回</Button>
          </Col>
          <Col span={8}></Col>
        </Row>

      </TabPane>
    </Tabs>
  )
}

const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
export default WrappedNormalLoginForm