<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('用户详情')"/>
        <th:block th:include="include :: bootstrap-fileinput-css" />
        <style>
            .user_data_box {
                padding: 0 28px 28px;
            }
            h2 {
                font-weight: 600;
            }
            .user_item {
                /* padding-left: 20px; */
                margin: 12px 0;
            }
            .user_item, .name_box {
                display: flex;
                margin-right: 40px;
                align-items: center;
            }
            .user_item h3 {
                margin: 0;
                margin-right: 12px;
            }
            .user_item_box .title {
                display: flex;
                align-items: center;
            }
            .user_item_box .title h3 {
                margin: 0 0 0 6px; 
            }
            .user_item_box .title span {
                height: 20px;
                width: 4px;
                background: #3c8dbc;
            }
            .user_items_box {
                padding: 12px 12px 0;
            }
            .user_items_box p {
                /* font-weight: 600; */
                font-size: 16px;
                margin-top: 12px;
                margin-right: 20px;
            }
            .items {
                display: flex;
                padding-bottom: 12px;
                align-items: center;
                /* border-bottom: 1px solid; */
            }
            .items img {
                height: 120px;
            }
            .items .showImg {
                margin-right: 20px;
            }
            .items span {
                display: inline-block;
                height: 30px;
                width: 70px;
                text-align: center;
                line-height: 30px;
                margin-right: 20px;
                background: #ccc;
                border: 1px solid #ccc;
            }
            .items .selectedSp {
                color: #fff;
                background: skyblue;
                border: 1px solid skyblue;
            }
            .items input {
                border: 1px solid #ddd;
                border-radius: 4px;
                background: transparent;
                outline: none;
                height: 30px;
                width: 200px;
                padding-left: 5px;
            }
            .items2 p {
                font-weight: 600;
            }
        </style>
    </head>

    <body class="user_data_box">
        <h2>用户资料</h2>
        <div class="user_item">
            <div class="name_box">
                <h3>用户身份:</h3>
                <span id="type">代理/总代/特邀代理/志愿者</span>
            </div>
            <!-- <div class="name_box">
                <h3>状态:</h3>
                <span>正常/黑名单</span>
            </div> -->
        </div>
        <div class="user_item_box">
            <div class="title">
                <span></span><h3>基础资料</h3>
            </div>
            <div class="user_items_box">
                <div class="items2" style="display: flex;">
                    <p style="font-weight: 500">照片:</p>
                    <img id="photo" style="height: 120px;" src="https://img.zhengzai.tv/banner/2022/02/28/6735ab4d9baf467998e80dcd70fee527.jpeg?x-oss-process=image/resize,s_400" alt="">
                </div>
                <div class="items">
                    <p>真实姓名:</p>
                    <input type="text" disabled id="name" autocomplete="off" value="张三" class="layui-input">
                </div>
                <div class="items">
                    <p>出生日期:</p>
                    <input type="text" disabled id="bornTime" autocomplete="off" value="2022.04.20" class="layui-input">
                </div>
                <div class="items">
                    <p>性别:</p>
                    <span id="sex1" class="selectedSp">男</span>
                    <span id="sex2">女</span>
                </div>
                <div class="items">
                    <p>所在城市:</p>
                    <input type="text" disabled id="citys" autocomplete="off" value="北京 北京市 朝阳区" class="layui-input">
                </div>
                <div class="items">
                    <p>详细地址:</p>
                    <input type="text" disabled id="address" autocomplete="off" value="北京 北京市 朝阳区" class="layui-input">
                </div>
                <div class="items">
                    <p>类型:</p>
                    <span id="identity1" class="selectedSp">在校学生</span>
                    <span id="identity2">已毕业</span>
                </div>
                <div class="items">
                    <p>学校全称/单位名称:</p>
                    <input type="text" disabled id="schoolName" autocomplete="off" value="北京 北京市 朝阳区" class="layui-input">
                </div>
                <div class="items">
                    <p>所学专业/所在部门:</p>
                    <input type="text" disabled id="schoolMajor" autocomplete="off" value="北京 北京市 朝阳区" class="layui-input">
                </div>
                <!-- <div class="items">
                    <p>微信号:</p>
                    <input type="text" disabled id="wechat" autocomplete="off" value="北京 北京市 朝阳区" class="layui-input">
                </div> -->
            </div>
        </div>
        <div class="user_item_box">
            <div class="title">
                <span></span><h3>认证信息</h3>
            </div>
            <div class="user_items_box">
                <div class="items2">
                    <p>姓名：<span id="authName"></span></p>
                    <p>身份证号：<span id="idCard">211481199302641564</span></p>
                    <!-- <p>有效期：<span>长期/2021年12月27日到期</span></p> -->
                </div>
                <!-- <div class="items">
                    <div class="showImg">
                        <p>身份证正面:</p>
                        <img src="https://img.zhengzai.tv/banner/2022/02/28/6735ab4d9baf467998e80dcd70fee527.jpeg?x-oss-process=image/resize,s_400" alt="">
                    </div>
                    <div class="showImg">
                        <p>身份证反面:</p>
                        <img src="https://img.zhengzai.tv/banner/2022/02/28/6735ab4d9baf467998e80dcd70fee527.jpeg?x-oss-process=image/resize,s_400" alt="">
                    </div>
                    <div class="showImg">
                        <p>手持身份证:</p>
                        <img src="https://img.zhengzai.tv/banner/2022/02/28/6735ab4d9baf467998e80dcd70fee527.jpeg?x-oss-process=image/resize,s_400" alt="">
                    </div>
                </div> -->
            </div>
        </div>
        <div class="user_item_box">
            <div class="title">
                <span></span><h3>个人技能</h3>
            </div>
            <div class="user_items_box">
                <div class="items2">
                    <textarea disabled id="specialty" name="remark" class="form-control" style="height: 200px;width: 50%">先随便写点啥</textarea>
                </div>
                <!-- <div class="items">
                    <p>作品链接:</p>
                    <input type="text" disabled id="name" autocomplete="off" value="https://weibo.com/u/53454874" class="layui-input">
                </div> -->
            </div>
        </div>
        <div class="user_item_box">
            <div class="title">
                <span></span><h3>自我介绍</h3>
            </div>
            <div class="user_items_box">
                <div class="items2">
                    <textarea disabled id="introduce" name="remark" class="form-control" style="height: 200px;width: 50%">先随便写点啥</textarea>
                </div>
            </div>
        </div>
        <div class="user_item_box">
            <div class="title">
                <span></span><h3>社交主页</h3>
            </div>
            <div class="user_items_box">
                <!-- <div class="items">
                    <p>抖音:</p>
                    <input type="text" disabled id="name" autocomplete="off" value="https://weibo.com/u/53454874" class="layui-input">
                </div>
                <div class="items">
                    <p>微博:</p>
                    <input type="text" disabled id="name" autocomplete="off" value="https://weibo.com/u/53454874" class="layui-input">
                </div> -->
                <div class="items">
                    <p>手机号：</p>
                    <p id="authPhone"></p>
                </div>
                <div class="items">
                    <p>提交时间:</p>
                    <p id="createTime">2022年02月24日 16:43:15</p>
                </div>
            </div>
        </div>
    </body>

    <th:block th:include="include :: footer"/>
    <script type="text/javascript">
        $(function() {
            let uid = getUrlParms('id');
            console.log(uid, 'uid')
            let data = {
                uid
            }
            $.ajax({
                url: '/smile/user/getUserById',
                type: 'post',
                data,
                success: function(res) {
                    let { data } = res;

                    $("#photo").attr('src', data.img);
                    $("#name").val(data.name);
                    $("#authName").text(data.name);
                    $("#authPhone").text(data.phone);
                    $("#bornTime").val(data.birthday);
                    $("#citys").val(`${data.province + ' ' + data.city + ' ' + data.area}`);
                    $("#schoolName").val(data.schoolName);
                    $("#createTime").text($.common.dateFormat(new Date(data.createdDate), 'yyyy-MM-dd HH:mm:ss'));
                    if (data.sex == 1) {
                        $('#sex1').addClass('selectedSp');
                        $('#sex2').removeClass('selectedSp');
                    } else {
                        $('#sex2').addClass('selectedSp');
                        $('#sex1').removeClass('selectedSp');
                    }
                    $("#address").val(data.address);
                    $("#wechat").val(data.wechat);
                    if (data.type == 1) {
                        $("#type").text('总代')
                    } else {
                        $("#type").text('普代')
                    }
                    $("#schoolMajor").val(data.schoolMajor);
                    if (data.identity == 1) {
                        $("#identity1").addClass('selectedSp');
                        $("#identity2").removeClass('selectedSp');
                    } else {
                        $("#identity2").addClass('selectedSp');
                        $("#identity1").removeClass('selectedSp');
                    }
                    $("#introduce").text(data.introduce);
                    $("#idCard").text(data.idCard);
                    $("#specialty").val(`${data.specialty1}\n${data.specialty2}\n${data.specialty3}\n`);
                    console.log(res, 'res')
                }
            })
        })
        function getUrlParms(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)
                return unescape(r[2]);
                return null;
        }
    </script>
</html>