import PropTypes from 'prop-types'
import React, { useEffect, useState,useRef } from "react";
import { connect } from 'react-redux'
import { Table, message,Button } from 'antd'
import ProTable from '@ant-design/pro-table';
import '../components/index.less'
import { getPartyMember } from '../../homePage/actions/profile'
import { getCommittee,delCommittee,putCommittee } from '../actions/party'
import EditParty from '../components/edit-party';
import NewlyVisibleModel from '../components/newlyVisibleModel';
import OutgoingVisibleModel from '../components/OutgoingVisibleModel';
import moment from "moment";
import { Scroller } from "$components";

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

  const [counts, setCounts] = useState(); //数据

  const [showEdit, setShowEdit] = useState(false);
  const [editData, setEditData] = useState();
  const [partyLabor, setPartyLabor] = useState();
  const [newlyVisible, setNewlyVisible] = useState(false);// 新增
  const [outgoingVisible, setOutgoingVisible] = useState(false);// 离任新增
  const [recortd,setRecortd]=useState()
  const [outgoingRecortd,setOutgoingRecortd]=useState()
  const [category, setCategory] = useState()  //类别
  const [typecard, setTypecard] = useState() //xinzeng 编辑
  const [outcategory, setOutCategory] = useState()  //类别
  const [outTypecard, setOutTypecard] = useState() //liren 编辑
  const [flageMold, setFlageMold] = useState(true) //上下table联动
  const [nameSou,setNameSou]=useState() //姓名搜索
  const tableActionRef = useRef();
  useEffect(() => {
    let query = {
      limit: 5,
    
  };
    dispatch(getCommittee(query)).then(res => {
      if (res.success) {
        setPartyLabor(res.payload.data);
        const dataCoutn = res.payload.data?.filter((item) => {
          return item.mold===true
         })
               setCounts(dataCoutn);
      }
    })
  }, [flageMold])
//删除人员信息
  const deldata = (record,id) => {
    let query={...record,mold:true,leaveTime:'',leavingReason:''}
    dispatch(putCommittee(query,id)).then((res) => {
      console.log(res)
      setFlageMold(!flageMold)
      if (res.success) {
        message.success('删除成功');
      } else {
        message.error('删除失败');
      }
    })
  }

//打开增补弹窗
  const openModal = (type, record) => {
    setNewlyVisible(true);
  
  }
  //打开离任弹窗
  const leaveModal = ( record,type) => {
    setOutgoingVisible(true);
    setOutgoingRecortd(record)
    setOutTypecard(type)

}
  const columns = [
    // {
    //   key: 'num',
    //   dataIndex: 'num',
    //   title: '序号',
    //   search: false,
    //   render: () => {
    //     return <span>1</span>
    //   }
    // },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: (dom, record) => {
        return <div>{record.name}</div>
      },
      fieldProps: {
        onChange: (value, cs) => {
          setNameSou(value.currentTarget.value)
        },
        placeholder: '请输入姓名进行搜索',
        getPopupContainer: (triggerNode) => triggerNode.parentNode,
    }
  },
  {
    title: '性别',
    dataIndex: 'sexuality',
    key: 'sexuality',
    search: false,
    render: (dom, record) => {
        return <div>{record.sexuality}</div>
    },
},
{
  title: '党内职务',
  dataIndex: 'mode',
  key: 'mode',
  search: false,
  render: (dom, record) => {
      return <div>{record.partyPosts}</div>
  },
},
{
  title: '任职方式',
  dataIndex: 'mode',
  key: 'mode',
  search: false,
  render: (dom, record) => {
      return <div>{record.howPositions}</div>
  },
},{
  title: '任职时间',
  dataIndex: 'mode',
  key: 'mode',
  search: false,
  render: (dom, record) => {
      return <div>{moment(record.employmentTime).format("YYYY-MM-DD")}</div>
  },
},{
  title: '联系电话',
  dataIndex: 'mode',
  key: 'mode',
  search: false,
  render: (dom, record) => {
      return <div>{record.phone}</div>
  },
},
    {
      key: 'ation',
      title: '操作',
      search: false,
      width:150,
      render: (text, record) => {
        return <div><a onClick={() => {
          leaveModal(record,'Outgoing')
          // setOutTypecard('Outgoing')
        }}>离任</a>
          <a style={{marginLeft:10}} onClick={() => {openModal(record)
            setTypecard('examine')
            setRecortd(record)
            setCategory('查看')}}>查看</a>
          <a style={{ marginLeft: 10 }} onClick={() => {
            openModal(record)
            setTypecard('modification')
            setRecortd(record)
            setCategory('修改委员信息')
          }}>修改</a></div>
      }
    }
    , {
      key: "direction",
      hideInTable: true,
      dataIndex: "direction",
      order: 6,
      renderFormItem: (item, { type, defaultRender, ...rest }) => {
          return (
              <div> <Button
                  type="primary"
                  style={{ width: "100px" }}
                  onClick={() => {
                    openModal()
                    setTypecard('compile')
            setCategory('新增委员信息')
            setRecortd()
                  }}
              >
                  委员增补
              </Button>
              </div>
          );
      },
  },
  ]
  return (
    <div >
      <p style={{ fontSize: 16 ,float:'left',marginBottom:0}}>中共江西飞尚科技有限公司支部委员会</p>
      <ProTable
                    actionRef={tableActionRef}
                    scroll={{ x: 800 }}
                    options={false}
                    style={{ width: "100% ", overflow: "auto", height: 400 }}
                    rowKey='id'
                    columns={columns}
                    dataSource={counts || []}
                    onReset={() => {
                      setNameSou('')
                    }}
                    request={async (params) => {
                         
                            let query = {
                                page: params.current,
                              limit: 5,
                                name:nameSou
                            };
                      const res = await dispatch(getCommittee(query));
                      const dataCoutn = res.payload.data?.filter((item) => {
                       return item.mold===true
                      })
                            setCounts(dataCoutn);
                            return {
                                ...res,
                                total: res.payload.data ? res.payload.data : '',
                            };
                    }}
                >
      </ProTable>
      <OutgoingList partyLabor={partyLabor} leaveModal={leaveModal} setOutgoingVisible={setOutgoingVisible} setOutCategory={setOutCategory} deldata={deldata} />
     <NewlyVisibleModel visible={newlyVisible} onVisibleChange={setNewlyVisible} typecard={typecard} recortd={recortd} category={category} setRecortd={setRecortd} setFlageMold={setFlageMold} flageMold={flageMold} />
      <OutgoingVisibleModel visible={outgoingVisible} onVisibleChange={setOutgoingVisible} typecard={outTypecard} recortd={outgoingRecortd} category={outcategory} setFlageMold={setFlageMold} flageMold={flageMold} deldata={deldata} />
    </div>
  )
}
const OutgoingList = (props) => {
  const { partyLabor, leaveModal,setOutTypecard,deldata } = props
  const dataLabor = partyLabor?.filter((item) => {
    return item.mold===false
  })
  const tableColumns = [
    // {
    //   key: 'num',
    //   dataIndex: 'num',
    //   title: '序号',
    //   render: () => {
    //     return <span>1</span>
    //   }
    // },
    {
      key: 'name',
      dataIndex: 'name',
      title: '姓名',
      search: false,
      render: (dom, record) => {
        return <div>{record.name}</div>
      },
    },
    {
      title: '性别',
      dataIndex: 'sexuality',
      key: 'sexuality',
      search: false,
      render: (dom, record) => {
          return <div>{record.sexuality}</div>
  
      },
  },
    {
      key: 'laborUnion',
      dataIndex: 'laborUnion',
      title: '离任前党内职务',
      search: false,
      render: (dom, record) => {
        return <div>{record.partyPosts}</div>
      },
    },  {
      key: 'laborUnion',
      dataIndex: 'laborUnion',
      title: '任职方式',
      search: false,
      render: (dom, record) => {
        return <div>{record.howPositions}</div>
      },
    },  {
      key: 'laborUnion',
      dataIndex: 'laborUnion',
      title: '离任时间',
      search: false,
      render: (dom, record) => {
        return <div>{ moment(record.leaveTime).format("YYYY-MM-DD")}</div>
      },
    },  {
      key: 'laborUnion',
      dataIndex: 'laborUnion',
      title: '离任原因',
      search: false,
      render: (dom, record) => {
        return <div>{record.leavingReason}</div>
      },
    },
    {
      key: 'ation',
      title: '操作',
      search: false,
      width:150,
      render: (text, record) => {
        return <div><a onClick={() => {
          leaveModal(record,'Outgoingss')
          
        }
        }>修改</a>
          <a style={{marginLeft:10}} onClick={() => {deldata(record,record.id)}}>删除</a>
          <a style={{ marginLeft: 10 }} onClick={() => {
            leaveModal(record,'outexamine')
          }}>查看</a></div>
      }
    }
  ]
  return <div><p style={{ fontSize: 16 ,float:'left',marginBottom:0}}>离任领导列表</p>
   <ProTable    
                    scroll={{ x: 800 }}
                    options={false}
                    style={{ width: "100% ", overflow: "auto", height: 400 }}
                    rowKey='id'
                    columns={tableColumns}
                    dataSource={dataLabor || []}
                    onReset={() => {
                       
                        setName(null)
                    }}
                    form={{
                      submitter: false
                  }}
                >
      </ProTable></div>
}
Default.propTypes = {
  second: PropTypes.third
}

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


export default connect(mapStateToProps)(Default)