import React, { Component } from 'react';
import { Tabs, Alert, Table, Button, notification, Modal } from 'antd';
const TabPane = Tabs.TabPane;
import * as ajax from '../../../services/api';
import { connect } from 'dva';
import $perModal from '../../../utils/modal/perModal';
@connect(state => ({
  global: state.global
}))
export default class InsuranceDetails extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      listData: [],
      tableSelectedRows: [],
      tableSelectedRowKeys: []
    };
  }
  componentDidMount() {
    this._getList();
  }
  _getList(){
    ajax.selectPrincipalByComId({pageNumber: 1, pageSize: 10}).then(res => {
      this.setState({
        listData: res.data.data,
        tableSelectedRows: [],
        tableSelectedRowKeys: []
      });
    });
  }
  _removeOfficer(perIds, callBack) {
    ajax.delBatchPrincipal({perIds}).then(res => {
      callBack&&callBack(res);
    });
  }
  render() {
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '手机号',
        dataIndex: 'mobilePhone',
        key: 'mobilePhone'
      },
      {
        title: '身份证号',
        dataIndex: 'idCardNo',
        key: 'idCardNo'
      },
      {
        title: '部门',
        dataIndex: 'departName',
        key: 'departName',
        render: (text, record) => {
          if(record.departName != '') {
            return (<span>{record.departName}</span>);
          }else {
            return (<span>{this.props.global.companyInfo.comName}</span>);
          }
        }
      },
      {
        title: '操作',
        dataIndex: '4',
        render: (text, record) => {
          return (<a href="javascript: void(0);" onClick={() => {
            if(this.state.listData.length <= 1) {
              return notification.error({
                message: '保险负责人不能少于1人'
              });
            }
            Modal.confirm({
              title: `移除保险负责人`,
              content: `确定要移除${record.name}`,
              okText:"确定移除",
              cancelText: '取消',
              onOk: () => {
                const perIds = record.perId;
                this._removeOfficer(perIds, res => {
                  // notification.success({
                  //   message: res.msg
                  // });
                  this._getList();
                });
              }
            }); 
          }}>移除</a>);
        }
      }
    ];
    const rowSelection = {
      onChange: (tableSelectedRowKeys, tableSelectedRows) => {
        this.setState({
          tableSelectedRows,
          tableSelectedRowKeys
        });
      },
      selectedRowKeys: this.state.tableSelectedRowKeys     
    };
    return (
      <Tabs defaultActiveKey="1" style={{padding: '0 16px'}}>
        <TabPane tab="保险负责人" key="1">
          <Alert style={{marginBottom: 20}} message={<div>请您设置保险负责人，保险监管/到期/缴费等通知都将通知到保险负责人，目前仅限5人。<br />若您需要保险负责人拥有企业保险模块的操作权限，请到【人事】-【人事管理】-【角色权限】中为其配置菜单权限。</div>} type="warning" showIcon/>
          <div style={{paddingBottom: 15}}>
            <Button 
              type="primary"
              onClick={()=> {
                const { listData } = this.state;
                $perModal({
                  // value: listData.map(({ perId, name }) => {
                  //   return {perId, name};
                  // }),
                  onOk: (values, close) => {
                    if(values.length + listData.length > 5) {
                      return notification.error({
                        message: '保险负责人不能大于5人'
                      });
                    }
                    const perIds = values.map(({perId}) => perId).join(',');
                    ajax.insertBatchPrincipal({perIds}).then(res => {
                      close();
                      this._getList();
                    });
                  }
                });
              }}
            >添加负责人</Button>
            <Button 
              style={{marginLeft: 15, color: 'red'}}
              onClick={
                () => {
                  if(this.state.tableSelectedRows.length <= 0) {
                    return notification.error({
                      message: '请勾选要移除的人员'
                    });
                  }
                  if(this.state.listData.length - this.state.tableSelectedRows.length < 1) {
                    return notification.error({
                      message: '保险负责人不能少于1人'
                    });
                  }
                  Modal.confirm({
                    title: `移除保险负责人`,
                    content: `确定要删除选中的${this.state.tableSelectedRows.length}人`,
                    okText:"确定移除",
                    cancelText: '取消',
                    onOk:() => {
                      const perIds = this.state.tableSelectedRows.reduce((a, b) => {
                        return a + b.perId +',';
                      }, '').slice(0, -1);
                      this._removeOfficer(perIds, res => {
                        // notification.success({
                        //   message: res.msg
                        // });
                        this._getList();
                      });
                    }
                  });
                }
              }
            >批量移除</Button>
          </div>
          <Table rowSelection={rowSelection} columns={columns} dataSource={this.state.listData} />
        </TabPane>
      </Tabs>     
    );
  }
}