import PropTypes from 'prop-types'
import React, { useEffect, useState } from "react";
import { connect } from 'react-redux'
import { Table, message } from 'antd'
import { getPartyMember } from '../../homePage/actions/profile'
import { editLaborParty } from '../actions/party'
import EditParty from '../components/edit-party';

var request = false
export const Default = (props) => {

  const { dispatch } = props;

  const [partyLabor, setPartyLabor] = useState();
  const [showEdit, setShowEdit] = useState(false);
  const [editData, setEditData] = useState();

  useEffect(() => {
    dispatch(getPartyMember()).then(res => {
      if (res.success) {
        setPartyLabor(res.payload.data);
      }
    })
  }, [request])

  const onEditParty = (record) => {
    setShowEdit(true);
    setEditData(record)
  }

  const tableColumns = [
    {
      key: 'num',
      dataIndex: 'num',
      title: '序号',
      render: () => {
        return <span>1</span>
      }
    },
    {
      key: 'partyNumber',
      dataIndex: 'partyNumber',
      title: '党员人数',
    },
    {
      key: 'laborUnion',
      dataIndex: 'laborUnion',
      title: '工会人数',
    },
    {
      key: 'ation',
      title: '操作',
      render: (text, record) => {
        return <a onClick={() => onEditParty(record)}>编辑</a>
      }
    }
  ]

  const handleOk = (values) => {
    if (values) {
      const { labor, party } = values
      const result = { partyNumber: party, laborUnion: labor }
      dispatch(editLaborParty(result)).then(res => {
        if (res.success) {
          message.success("编辑成功");
          request = !request;
          handleCancel();
        }
      })
    }
  }
  const handleCancel = () => {
    setShowEdit(false);
  }

  return (
    <div>
      <p style={{ marginBottom: 16, fontSize: 16 }}>党员、工会人数维护</p>
      <Table columns={tableColumns} dataSource={partyLabor ? [partyLabor] : []} />
      <EditParty editData={editData} visible={showEdit} handleOk={handleOk} handleCancel={handleCancel} />
    </div>
  )
}

Default.propTypes = {
  second: PropTypes.third
}

const mapStateToProps = (state) => ({})


export default connect(mapStateToProps)(Default)