@extends('base.base')
@section('title','错误页面')

@section('head_css')
@parent
<style>
  /* 用户信息 */
  .user-info-head {
      width: 110px;
      height: 110px;
      line-height: 110px;
      position: relative;
      display: inline-block;
      border: 2px solid #eee;
      border-radius: 50%;
      overflow: hidden;
      cursor: pointer;
      margin: 0 auto;
  }

  .user-info-head:hover:after {
      content: '\e681';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.3);
      font-size: 28px;
      padding-top: 2px;
      font-style: normal;
      font-family: layui-icon;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }

  .user-info-head img {
      width: 110px;
      height: 110px;
  }

  .user-info-list-item {
      position: relative;
      padding-bottom: 8px;
  }

  .user-info-list-item > .layui-icon {
      position: absolute;
  }

  .user-info-list-item > p {
      padding-left: 30px;
  }

  .layui-line-dash {
      border-bottom: 1px dashed #ccc;
      margin: 15px 0;
  }

  /* 基本信息 */
  #userInfoForm .layui-form-item {
      margin-bottom: 25px;
  }

  /* 账号绑定 */
  .user-bd-list-item {
      padding: 14px 60px 14px 10px;
      border-bottom: 1px solid #e8e8e8;
      position: relative;
  }

  .user-bd-list-item .user-bd-list-lable {
      color: #333;
      margin-bottom: 4px;
  }

  .user-bd-list-item .user-bd-list-oper {
      position: absolute;
      top: 50%;
      right: 10px;
      margin-top: -8px;
      cursor: pointer;
  }

  .user-bd-list-item .user-bd-list-img {
      width: 48px;
      height: 48px;
      line-height: 48px;
      position: absolute;
      top: 50%;
      left: 10px;
      margin-top: -24px;
  }

  .user-bd-list-item .user-bd-list-img + .user-bd-list-content {
      margin-left: 68px;
  }
</style>
@endsection

@section('head_js')
@parent
@endsection

@section('content')
@parent
<!-- 主体部分 -->
<div class="layui-body">
  <div class="layui-body-header">
      <span class="layui-body-header-title">个人中心</span>
      <span class="layui-breadcrumb pull-right">
        <a href="{{URL('/')}}">首页</a>
        <a><cite>系统信息管理</cite></a>
      </span>
  </div>
  <!-- 正文开始 -->
  <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
          <!-- 左 -->
          <div class="layui-col-sm12 layui-col-md3">
              <div class="layui-card">
                  <div class="layui-card-body" style="padding: 25px;">
                      <div class="text-center layui-text">
                          <div class="user-info-head" id="userInfoHead">
                            @if(!empty($user->headimg))
                            <img src="{{ URL::asset('/')}}{{$user->headimg}}">
                            @else
                            <img src="{{ URL::asset('/assets/images/head.jpg')}}">
                            @endif
                          </div>
                          <h2 style="padding-top: 20px;">{{$user->realname}}</h2>
                          <p style="padding-top: 8px;">{{$user->introduction}}</p>
                      </div>
                      <div class="layui-text" style="padding-top: 30px;">
                          <!--<div class="user-info-list-item">
                              <i class="layui-icon layui-icon-username"></i>
                              <p>交互专家</p>
                          </div>-->
                          @if(!empty($user->post))
                          <div class="user-info-list-item">
                              <i class="layui-icon layui-icon-release"></i>
                              <p>{{$user->post}}</p>
                          </div>
                          @endif
                          @if($user->area)
                          <div class="user-info-list-item">
                              <i class="layui-icon layui-icon-location"></i>
                              <p>{{$user->area}}</p>
                          </div>
                          @endif
                      </div>
                      <div class="layui-line-dash"></div>
                      <!--<h3>标签</h3>
                      <div class="layui-badge-list" style="padding-top: 6px;">
                          <span class="layui-badge layui-bg-gray">很有想法的</span>
                          <span class="layui-badge layui-bg-gray">海纳百川</span>
                      </div>-->
                  </div>
              </div>
          </div>
          <!-- 右 -->
          <div class="layui-col-sm12 layui-col-md9">
              <div class="layui-card">
                  <div class="layui-tab layui-tab-brief" lay-filter="userInfoTab">
                      <ul class="layui-tab-title">
                          <li class="layui-this">基本信息</li>
                          <!--<li>账号绑定</li>-->
                      </ul>
                      <div class="layui-tab-content">
                          <!-- tab1 -->
                          <div class="layui-tab-item layui-show">

                              <div class="layui-form user-info-form layui-text"
                                   style="max-width: 400px;padding-top: 25px;">
                                  <div class="layui-form-item">
                                      <label class="layui-form-label">邮箱:</label>
                                      <div class="layui-input-block">
                                          <input type="text" name="email" value="{{$user->email}}"
                                                 class="layui-input"/>
                                      </div>
                                  </div>
                                  <div class="layui-form-item" style="display:none;">
                                      <label class="layui-form-label layui-form-required">姓名:</label>
                                      <div class="layui-input-block">
                                          <input type="text" name="name" value="{{$user->realname}}"
                                                 class="layui-input"/>
                                      </div>
                                  </div>
                                  <div class="layui-form-item">
                                      <label class="layui-form-label">个人简介:</label>
                                      <div class="layui-input-block">
                                              <textarea name="desc" placeholder="个人简介"
                                                        class="layui-textarea">{{$user->introduction}}</textarea>
                                      </div>
                                  </div>
                                  <div class="layui-form-item">
                                      <label class="layui-form-label">街道地址:</label>
                                      <div class="layui-input-block">
                                          <input type="text" name="address" value="{{$user->area}}"
                                                 class="layui-input"/>
                                      </div>
                                  </div>
                                  <div class="layui-form-item">
                                      <label class="layui-form-label">手机号:</label>
                                      <div class="layui-input-block">
                                          <div>
                                              <input type="text" name="mobile" value="{{$user->mobile}}"
                                                     class="layui-input"/>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="layui-form-item">
                                      <div class="layui-input-block">
                                          <button class="layui-btn" lay-filter="userInfoSubmit" lay-submit>
                                              更新基本信息
                                          </button>
                                      </div>
                                  </div>
                              </div>

                          </div>
                          <!-- tab2 -->
                          <!--<div class="layui-tab-item" style="padding-bottom: 20px;">
                              <div class="user-bd-list layui-text">
                                  <div class="user-bd-list-item">
                                      <div class="user-bd-list-lable">密保手机</div>
                                      <div class="user-bd-list-text">已绑定手机：138****8293</div>
                                      <a class="user-bd-list-oper">修改</a>
                                  </div>
                                  <div class="user-bd-list-item">
                                      <div class="user-bd-list-lable">密保邮箱</div>
                                      <div class="user-bd-list-text">已绑定邮箱：easyweb@vip.com</div>
                                      <a class="user-bd-list-oper">修改</a>
                                  </div>
                                  <div class="user-bd-list-item">
                                      <div class="user-bd-list-img">
                                          <i class="layui-icon layui-icon-login-qq"
                                             style="color: #3492ED;font-size: 48px;"></i>
                                      </div>
                                      <div class="user-bd-list-content">
                                          <div class="user-bd-list-lable">绑定QQ</div>
                                          <div class="user-bd-list-text">当前未绑定QQ账号</div>
                                      </div>
                                      <a class="user-bd-list-oper">绑定</a>
                                  </div>
                                  <div class="user-bd-list-item">
                                      <div class="user-bd-list-img">
                                          <i class="layui-icon layui-icon-login-wechat"
                                             style="color: #4DAF29;font-size: 48px;"></i>
                                      </div>
                                      <div class="user-bd-list-content">
                                          <div class="user-bd-list-lable">绑定微信</div>
                                          <div class="user-bd-list-text">当前未绑定绑定微信账号</div>
                                      </div>
                                      <a class="user-bd-list-oper">绑定</a>
                                  </div>
                              </div>
                          </div>-->
                      </div>
                  </div>
                  <!-- //选项卡结束 -->
              </div>
          </div>
      </div>
  </div>
</div>
<script type="text/javascript">
  layui.use(['layer', 'form', 'element', 'admin'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var element = layui.element;
    var admin = layui.admin;
    admin.activeNav("{{URL('/usercenter')}}");
    /* 选择头像 */
    $('#userInfoHead').click(function () {
        admin.cropImg({
            imgSrc: $('#userInfoHead>img').attr('src'),
            onCrop: function (res) {
              $.ajax({
                url: "{{ URL('/userheadimgForm')}}",
                type: "post",
                data: {"resimg":res,"_token":"{{csrf_token()}}"},
                success: function(data) {
                  var resdata=eval('(' + data + ')');
                  if(resdata.code!=200){
                      layer.msg(resdata.msg);
                      return false;
                  }
                  $('#userInfoHead>img').attr('src',"{{ URL::asset('/')}}"+resdata.data);
                  $('.layui-layout-admin>.layui-header .layui-nav img.layui-nav-img').attr('src',"{{ URL::asset('/')}}"+resdata.data);
                },
                error: function(xhr, status, errMsg) {
                    alert("失败")
                }
              });
            }
        });
    });
    /* 监听表单提交 */
    form.on('submit(userInfoSubmit)', function () {
        var email=$("[name='email']").val();
        var name=$("[name='name']").val();
        var desc=$("[name='desc']").val();
        var address=$("[name='address']").val();
        var mobile=$("[name='mobile']").val();
        var mobelreg =/^[1]([3-9])[0-9]{9}$/;
        if(!mobelreg.test(mobile) && mobile!=''){
          alert('手机号非法！');return false;
        }
        var emailreg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(!emailreg.test(email) && email!=''){
          alert('邮箱非法！');return false;
        }
        $.ajax({
          url: "{{ URL('/userinfoupdateForm')}}",
          type: "post",
          data: {"email":$.trim(email),"name":$.trim(name),"desc":$.trim(desc),"address":$.trim(address),"mobile":$.trim(mobile),"_token":"{{csrf_token()}}"},
          success: function(data) {
            var resdata=eval('(' + data + ')');
            if(resdata.code!=200){
                layer.msg(resdata.msg);
                return false;
            }
            alert('成功！');
          },
          error: function(xhr, status, errMsg) {
              alert("失败")
          }
        });
        return false;
    });

  });
</script>
@endsection