import React, { PureComponent } from 'react';
// import { connect } from 'react-redux';
// import { BrowserRouter, Route,Link } from 'react-router-dom';

// import { actionCreators } from './store';

class clientPopups extends PureComponent {


  render() {
    return (
      <div className="modal fade" id="lock-detail" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div className="modal-dialog modal-xl">
      <div className="modal-content">
        <div className="dialog-sheet">
          <button type="button" className="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true"><i className="fal fa-times"></i></span>
          </button>
          <div className="sheet-box row m-0">
            <div className="sheet-left-panel">
              <div className="sheet-panel-header d-flex justify-content-between mx-4">
                <div>
                  <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="上一条记录" className="mr-2 disabled"><i className="far fa-chevron-up"></i></a>
                  <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="下一条记录" className="mr-2"><i className="far fa-chevron-down"></i></a>
                  <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="新页面打开"><i className="fal fa-external-link"></i></a>
                </div>
                <div>
                </div>
              </div>
              <div className="sheet-panel-content">
                <div className="sheet-panel-form slimScroll1 mx-4">
                  <div className="form-header mt-3">
                    <div className="d-flex justify-content-between"><span className="text-muted">软件锁</span><span className="text-muted">出库于 2019年5月6日 14:55</span></div>
                    <legend>HNYH-0654</legend>
                  </div>
                  <div className="cldform clearfix">
                    <div className="cldform-line"></div>
                    <div className="cldform-item">
                      <div className="cldform-label">锁号</div>
                      <div className="cldform-control">
                        <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span>HNYH-0654</span></div>
                      </div>
                    </div>
                    <div className="cldform-line"></div>
                    <div className="cldform-item">
                      <div className="cldform-label">产品</div>
                      <div className="cldform-control">
                        <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span className="badge badge-primary mr-1">固化清单全功能</span><span className="badge badge-primary mr-1">全国专业</span><span className="badge badge-primary">全国专业（新定额）</span></div>
                      </div>
                    </div>
                    <div className="cldform-line"></div>
                    <div className="cldform-item">
                      <div className="cldform-label">期限</div>
                      <div className="cldform-control">
                        <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span></span></div>
                      </div>
                    </div>
                    <div className="cldform-line"></div>
                    <div className="cldform-item">
                      <div className="cldform-label">使用状态</div>
                      <div className="cldform-control">
                        <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span>销售</span></div>
                      </div>
                    </div>
                    <div className="cldform-line"></div>
                    <div className="cldform-item">
                      <div className="cldform-label">负责人</div>
                      <div className="cldform-control">
                        <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span><a href="#">@陈特</a></span></div>
                      </div>
                    </div>
                    <div className="cldform-line"></div>
                    <div className="cldform-item">
                      <div className="cldform-label">联系人</div>
                      <div className="cldform-control">
                        <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span><a href="#">张三</a></span></div>
                      </div>
                    </div>
                    <div className="cldform-line"></div>
                    <div className="cldform-item">
                      <div className="cldform-label">公司</div>
                      <div className="cldform-control">
                        <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span><a href="#">珠海纵横创新软件有限公司</a></span></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="sheet-right-panel col p-0">
              <div className="sheet-panel-tabs mx-4 mt-4">
                <ul className="nav nav-tabs sheet-nav-tabs" role="tablist">
                  <li className="nav-item"><a className="nav-link active" data-toggle="tab" href="#tab-lserver" role="tab" aria-selected="false">记录内容</a></li>
                </ul>
                <div className="tab-content">
                  <div className="tab-pane fade sheet-panel-righttop show  active" id="tab-lserver" role="tabpanel" aria-labelledby="tab-server">
                    <div className="slimScrol3">
                      <table className="table">
                        <thead>
                          <tr>
                            <th className="border-0"></th>
                            <th className="border-0">类型/时间</th>
                            <th className="border-0">服务内容</th>
                          </tr>
                        </thead>
                        <tr>
                          <td width="20">1</td>
                          <td width="150">销售 <a href="#">张三</a>
                            <br/><span className="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
                          <td><span className="badge badge-primary mr-1">固化清单全功能</span><span className="badge badge-primary mr-1">全国专业</span><span className="badge badge-primary">全国专业（新定额）</span></td>
                        </tr>
                        <tr>
                          <td width="20">2</td>
                          <td width="140">借出 <a href="#">张三</a>
                            <br/><span className="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
                          <td><span className="badge badge-primary mr-1">固化清单全功能</span><span className="badge badge-primary mr-1">全国专业</span><span className="badge badge-primary">全国专业（新定额）</span></td>
                        </tr>
                        <tr>
                          <td width="20">3</td>
                          <td width="140">赠送 <a href="#">张三</a>
                            <br/><span className="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
                          <td><span className="badge badge-primary mr-1">固化清单全功能</span><span className="badge badge-primary mr-1">全国专业</span><span className="badge badge-primary">全国专业（新定额）</span></td>
                        </tr>
                        <tr>
                          <td width="20">4</td>
                          <td width="140">升级 <a href="#">张三</a>
                            <br/><span className="text-muted">系统 5月5日 14:55</span></td>
                          <td><span className="badge badge-primary mr-1">固化清单全功能</span><span className="badge badge-primary mr-1">全国专业</span><span className="badge badge-primary">全国专业（新定额）</span></td>
                        </tr>
                        <tr>
                          <td width="20">5</td>
                          <td width="140">延期 <a href="#">张三</a>
                            <br/><span className="text-muted">系统 5月5日 14:55</span></td>
                          <td>由2018-09-10延期至2019-09-10</td>
                        </tr>
                        <tr>
                          <td width="20">6</td>
                          <td width="140">收回 <a href="#">张三</a>
                            <br/><span className="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
                          <td></td>
                        </tr>
                        <tr>
                          <td width="20">7</td>
                          <td width="140">更换 <a href="#">张三</a>
                            <br/><span className="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
                          <td><a href="#">ZH-03905</a></td>
                        </tr>
                        <tr>
                          <td width="20">8</td>
                          <td width="140">备注 <a href="#">张三</a>
                            <br/><span className="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
                          <td>备注内容</td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
                <div className="sheet-btns mt-3">
                  <a href="#lock-binding" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#lock-binding">借出/销售/赠送</a>
                  <a href="#lokc-update" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#lokc-update">升级</a>
                  <a href="#lokc-replace" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#lokc-replace">更换</a>
                  <a href="#add-retrieve" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#add-retrieve">收回</a>
                  <a href="#add-remark" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#add-remark">备注</a>
                </div>
              </div>
              <div className="sheet-panel-record">
                <ul className="nav nav-tabs nav-tabs-clean sheet-nav-tabs" role="tablist">
                  <li className="nav-item ml-4"><a className="nav-link text-center active" data-toggle="tab" href="#tab-log" role="tab" aria-selected="true">日志</a></li>
                </ul>
                <div className="tab-content p-3">
                  <div className="tab-pane fade active show sheet-panel-log" id="tab-log" role="tabpanel" aria-labelledby="tab-log">
                    <div className="slimScrol4">
                      <p><a href="#">@陈特</a> 移除联系人 张三<br/><span className="text-muted">5月5日 14:55</span></p>
                      <p><a href="#">@陈特</a> 绑定联系人 张三<br/><span className="text-muted">5月5日 14:55</span></p>
                      <p><a href="#">@陈特</a> 接收<br/><span className="text-muted">5月5日 14:55</span></p>
                      <p>系统 生成<br/><span className="text-muted">5月5日 14:55</span></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
    );
  }

}




export default clientPopups;
