import React, { PureComponent } from 'react';
import style from "styled-components";
// import { Modal, Button,Alert,Table } from 'antd';
import { Tabs } from 'antd';
import {
  // getOnlineInsBlbLink,
  enterpriseInsComInsGetOnlineInsBlbPreservationPageLink
} from "../../../services/api";
import "./InsuranceMangerment.less";

const { TabPane } = Tabs;
// import {
//   enterpriseInsCominsPromptInitPerAddDelIns, //获取保全缴费记录
// } from "../../../services/api";

// const columns = [{
//   title: '订单号',
//   dataIndex: 'no',
// }, {
//   title: '保险产品',
//   dataIndex: 'product',
// }, {
//   title: '人数（人）',
//   dataIndex: 'number',
// }, {
//   title: '购买时间',
//   dataIndex: 'time',
// }, {
//   title: '保费（元）',
//   dataIndex: 'price',
// }];
// const data = [{
//   key: '1',
//   no: '895846714563489792',
//   product: '安保无忧全年意外险（30万计划）',
//   number: '100',
//   time:'2017-12-12',
//   price:'100元',
// }, {
//   key: '2',
//   no: '895846714563489792',
//   product: '安保无忧全年意外险（30万计划）',
//   number: '100',
//   time:'2017-12-12',
//   price:'100元',
// }, {
//   key: '3',
//   no: '895846714563489792',
//   product: '安保无忧全年意外险（30万计划）',
//   number: '100',
//   time:'2017-12-12',
//   price:'100元',
// }, {
//   key: '4',
//   no: '895846714563489792',
//   product: '安保无忧全年意外险（30万计划）',
//   number: '100',
//   time:'2017-12-12',
//   price:'100元',
// }, {
//   key: '5',
//   no: '895846714563489792',
//   product: '安保无忧全年意外险（30万计划）',
//   number: '100',
//   time:'2017-12-12',
//   price:'100元',
// }, {
//   key: '6',
//   no: '895846714563489792',
//   product: '安保无忧全年意外险（30万计划）',
//   number: '100',
//   time:'2017-12-12',
//   price:'100元',
// }, {
//   key: '7',
//   no: '895846714563489792',
//   product: '安保无忧全年意外险（30万计划）',
//   number: '100',
//   time:'2017-12-12',
//   price:'100元',
// }, {
//   key: '8',
//   no: '895846714563489792',
//   product: '安保无忧全年意外险（30万计划）',
//   number: '100',
//   time:'2017-12-12',
//   price:'100元',
// }];
// const rowSelection = {
//   onChange: (selectedRowKeys, selectedRows) => {
//     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
//   },
//   getCheckboxProps: record => ({
//     disabled: record.name === 'Disabled User',
//     name: record.name,
//   }),
// };
export default class InsurancePreservation extends PureComponent {
  constructor(props, context) {
    super(props, context);
    this.state = {
      // visible: false,
      // reducepeoplevisible:false,
      // addpeoplevisible:false,
      onlineUrl: "", //购买在线保险的url
    };

  }
  /************************ajax请求********************************* */
  //获取保全缴费记录
  // getCollectResume = () => {
  //   // const comId = 1;
  //   // const pageSize = 10;
  //   // const pageNumber = 1;
  //   enterpriseInsCominsPromptInitPerAddDelIns({ }).then((res) => {
  //     console.log("获取保全缴费记录成功:", res);
  //   }, (err) => {
  //     console.log("获取保全缴费记录失败:", err);
  //   });
  // }

  // showModal = () => {
  //   this.setState({
  //     visible: true,
  //   });
  // }
  // handleOk = (e) => {
  //   console.log(e);
  //   this.setState({
  //     visible: false,
  //   });
  // }
  // handleCancel = (e) => {
  //   console.log(e);
  //   this.setState({
  //     visible: false,
  //   });
  // }
  //保险减员提示
  // showreducepeopleModal = () => {
  //   this.setState({
  //     reducepeoplevisible: true,
  //   });
  // }
  // handlereducepeopleOk = (e) => {
  //   console.log(e);
  //   this.setState({
  //     reducepeoplevisible: false,
  //     addpeoplevisible:false,
  //   });
  //   // this.getCollectResume();
  // }
  // handlereducepeopleCancel = (e) => {
  //   console.log(e);
  //   this.setState({
  //     reducepeoplevisible: false,
  //     addpeoplevisible:false,
  //   });
  // }
  // // 保险增员提示
  // showaddpeopleModal = () => {
  //   this.setState({
  //     addpeoplevisible:true,
  //   });
  // }
  // componentWillMount() {
  //   this.messageOnline();
  // }
  componentDidMount() {
    this.messageOnline();
    // this.handleonline();
  }
  //在线购买保险的链接生成
  messageOnline = () => {
    enterpriseInsComInsGetOnlineInsBlbPreservationPageLink({
    }).then(data => {
      this.setState({
        onlineUrl: data.data
      });
    });
  };
  handleonline = () => {
    setTimeout(() => {
      window.open(this.state.onlineUrl);
    }, 500);
  };
  render() {

    return (
      <Container>
        <Tabs>
          <TabPane tab="保全缴费记录" key="1" />
        </Tabs>
        <iframe
          title="保全缴费记录"
          src={this.state.onlineUrl}
          width="100%"
          frameBorder="0"
          style={{ height: "calc(100vh - 225px)" }}
        />

        {/* {this.handleonline()} */}
        {/* <div>
          <Button type="primary" onClick={this.showreducepeopleModal}>保险员减员提示</Button>
          <Modal className="reducepeople"
            title="保险员减员提示"
            visible={this.state.reducepeoplevisible}
            onOk={this.handlereducepeopleOk}
            onCancel={this.handlereducepeopleCancel}
            footer={[
              <Button key="submit" type="primary" onClick={this.handlereducepeopleOk}>马上办理</Button>,
            ]}>
            <div>
              <div>
                <Alert message="保险产品的增员、减员、替换等操作可通过【金融保险】-【保险订单】-选择有效订单的【保全】对保单中的人员增减操作！"
                      type="warning" showIcon/>
              </div>
              <p>本次离职人员共 %s 位，[保险日期]已为其中%s 位员工购买过团意险产品[产品名称]（订单号：[订单编号]），企业可对离职人员办理保险保全的减员操作，以降低保险成本！</p>
            </div>
          </Modal>
        </div>
        <div>
          <Button type="primary" onClick={this.showaddpeopleModal}>保险员增员提示</Button>
          <Modal className="reducepeople"
            title="保险员增员提示"
            visible={this.state.addpeoplevisible}
            onOk={this.handlereducepeopleOk}
            onCancel={this.handlereducepeopleCancel}
            footer={[
              <Button key="submit" type="primary" onClick={this.handlereducepeopleOk}>马上办理</Button>,
            ]}>
            <div>
              <div>
                <Alert message="保险产品的增员、减员、替换等操作可通过【金融保险】-【保险订单】-选择有效订单的【保全】对保单中的人员增减操作！"
                      type="warning" showIcon/>
              </div>
              <p>本次新增人员共%s 位，企业目前已购买团意险产品[产品名称]（订单号：[订单编号]），企业可对新增人员办理保险保全的增员操作。</p>
            </div>
          </Modal>
        </div>
        <div>
        <Button type="primary" onClick={this.showModal}>选择订单</Button>
          <Modal className="chooseorderlist"
            title="选择订单"
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
          >
           <Alert message="当前企业所购买了多份团意险产品。请选择需要增员/减员的订单:"
                   type="success" showIcon/>
          <Table rowSelection={rowSelection} columns={columns} dataSource={data} pagination={false}/>
          </Modal>
        </div> */}

      </Container>
    );
  }
}

const Container = style.div`
  padding:10px 24px 24px;
  div{
    button{
      margin:5px auto;
    }
  }
`;