import React, { useState, useEffect } from 'react';
import { Col, Row, Button, Modal, Input, Pagination, message } from 'antd'
import ZmageImg from '../../../components/ZmageImg/ZmageImg'
import request from '../../../utils/request';
import apis from '../../../services/apis';
import { router } from 'umi';
import AuthButton from '../../../components/AuthButton';
import moment from 'moment';

const unaudited = {
  // color :'rgb(255, 126, 72)'
  float: "right", fontWeight: "bold", marginRight: '30px'
}

const auditPass = {
  // color : '#FF7E48',
  color: 'green',
  float: "right", fontWeight: "bold", marginRight: '30px'
}

const noauditPass = {
  color: ' #fc515c',
  float: "right", fontWeight: "bold", marginRight: '30px'
}

function body (props) {
  const documentVerifyId = props.location.query.id
  const [data, setData] = useState([])
  const [datas, setDatas] = useState({})
  // const [status,setStatus] = useState()
  useEffect(() => {
    getList()
    // setVisible(false)
    // setReasonValue()
    // useState(2)
  }, [])
  // , documentVerifyId: documentVerifyId
  function getList (params) {
    // 网路请求
    console.log(props, '1111')
    request({ ...apis.system.documentVerifyDetail, urlData: { id: documentVerifyId }, params: params }).then(data => {
      console.log('data:', data.records)
      setDatas(data)
      setData(data.records)
    }).catch(err => {
      // eslint-disable-next-line no-unused-expressions

    })
  }



  const cancelPage = () => {
    router.push({
      pathname: '/system/document/list',
    });
  }


  const Card = (props) => {
    const [visible, setVisible] = useState()
    const [reasonValue, setReasonValue] = useState('')
    useEffect(() => {
      setVisible(false)
    }, [])


    function onVerify (params) {
      // 网路请求
      console.log(reasonValue, "111212")
      request({ ...apis.system.updateVerify, urlData: { id: props.data.documentVerifyId }, data: { verifyStatus: params, rejectReason: reasonValue } }).then(data => {
        console.log(data, "datadata")
        getList()
      }).catch(err => {


      })
    }



    const handleOk = (data) => {

      if (data == 1) {
        Modal.confirm({
          title: '审核通过后，将给当前用户发放积分 确认审核通过？',
          okText: '确认',
          cancelText: '取消',
          onOk () {

            onVerify(1)
          }
        });
      } else {
        setVisible(true)
      }
    }

    const showModal = () => {
      setVisible(true)
    };

    const handleOk1 = e => {
      console.log(reasonValue, "2222");
      if (reasonValue ) {
        // console.log(e);
        onVerify(2)
        console.log(reasonValue, "11111111");
        setVisible(false)
      } else {
        message.info("不能为空")
      }

    };

    const handleCancel = e => {

      setVisible(false)
    };

    const Reason = e => {
      console.log(e.target.value)
      // e.target.
      setReasonValue(e.target.value)
    }


    // console.log("props", props.data)
    const carddata = props.data.imgList
    return (
      <>
        <div style={{ background: '#ffffff', padding: '40px', marginTop: '30px', borderRadius: '12px', boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)' }}>
          <p style={{ fontSize: '0.096rem' }}>
            <span>资料说明：{props.data.documentTitle} </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           
            <span style={props.data.verifyStatus == 0 ? unaudited : props.data.verifyStatus == 1 ? auditPass : noauditPass} >
              {props.data.verifyStatus == 0 ? "待审核" : props.data.verifyStatus == 1 ? "审核通过" : "不通过"}
            </span>
          </p>
          <p style={{ fontSize: '0.096rem' }}>提交时间：{moment(props.data.createDate).format('YYYY-MM-DD HH:mm:ss')}   </p>

          <div style={{ fontSize: '0.096rem' }}>资料图片:
        <Row gutter={16}>
              {
                // data.consultant && data.consultant.projects.map((item, _) => <span>{item}</span>)
                carddata.map((data, inx) =>
                  <Col span={4} style={{ textAlign: "center" }}>
                    <ZmageImg style={{ width: '128px', height: '128px', marginTop: '30px' }} src={data.img} />
                  </Col>
                )
              }
            </Row>
          </div>
          {props.data.verifyStatus == 0 && <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'center' }}>
            <AuthButton name="admin.documentVerify.id.put" noRight={null}>
              <Button type="primary" style={{ marginTop: '30px' }} onClick={() => handleOk(1)}>通过</Button>
            </AuthButton>
            &nbsp;&nbsp;&nbsp;&nbsp;
        <AuthButton name="admin.documentVerify.id.put" noRight={null}>
              <Button style={{ marginTop: '30px' }} onClick={() => handleOk(2)}>不通过</Button>
            </AuthButton>
          </div>}

          {props.data.verifyStatus == 2 &&  <p style={{ fontSize: '0.096rem',marginTop: '30px' }}>驳回原因：{props.data.rejectReason}   </p>}

          <Modal
            title="驳回原因"
            visible={visible}
            onOk={handleOk1}
            onCancel={handleCancel}
            okText="确认"
            cancelText="取消"
          >
            <Input value={reasonValue} onChange={e => Reason(e)} />
          </Modal>
        </div>

      </>
    )
    // return <div>111</div>
  }

  const changePageNum = (pageNumber) => {
    getList({ pageNum: pageNumber, pageSize: 5 })
  }


  return (
    <>
      {/* <div>111</div> */}
      <div>
        {
          // data.consultant && data.consultant.projects.map((item, _) => <span>{item}</span>)
          data.map((data, inx) =>
            <Card data={data}></Card>
          )
        }
        {/* <Card data = {data.records}></Card> */}
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
          <Pagination showQuickJumper defaultCurrent={1} total={datas.total} pageSize={datas.size} onChange={changePageNum} current={datas.current} />
        </div>

      </div>




    </>
  )
}

export default body