<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('店铺详情')" />
    <th:block th:include="include :: select2-css" />
    <link rel="stylesheet" href="">
    <style>
        
        .required {
            font-style: normal;
            color: red;
        }
        .content_item {
            padding: 20px;
        }
        /* .content_item .content_title {
            display: flex;
        } */
        .content_item .content_title h3 span {
            display: inline-block;
            width: 4px;
            height: 18px;
            background: skyblue;
            margin-right: 6px;
            vertical-align: top;
        }
        .content_item .content_store_name, .content_item .content_papers_type {
            display: flex;
            align-items: center;
            height: 56px;
            font-size: 16px;
            padding-left: 12px;
        }
        .content_item .content_store_name input {
            margin-left: 12px;
            height: 36px;
            width: 80%;
        }
        .content_item .content_store_name span {
            display: inline-block;
            width: 150px;
            text-align: right;
        }
        .content_store_logo, .content_store_introduce {
            font-size: 16px;
            padding-left: 12px;
            margin-top: 20px;
        }
        .content_store_logo span, .content_store_introduce span {
            font-size: 16px;
            display: inline-block;
            margin-right: 12px;
            width: 150px;
            text-align: right;
            vertical-align: top;
        }
        .content_store_logo img {
            border: 1px #ccc dashed;
            padding: 5px;
            vertical-align: top;
            border-radius: 5px;
        }
        .content_store_introduce textarea {
            display: inline-block;
            width: 80%;
            height: 200px;
        }
        .content_papers_photo {
            display: flex;
            padding-left: 12px;
            margin: 20px 0;
        }
        .content_papers_photo .photo_content {
            display: flex;
            flex: 1;
        }
        .content_papers_photo .photo_content div {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 150px;
        }
        .content_papers_photo .photo_content div p {
            font-size: 14px;
        }
        .content_papers_photo .photo_content div img {
            padding: 6px;
            border: 1px dashed #ccc;
            border-radius: 5px;
        }
        .content_store_name p {
            margin: 0;
        }
        .content_papers_photo span {
            font-size: 16px;
            vertical-align: top;
            margin-right: 12px;
            width: 150px;
            text-align: right;
        }
        .content_footer {
            display: flex;
            align-items: center;
            padding: 20px 0 20px 186px;
        }
        .content_footer input {
            width: 60%;
            height: 34px;
        }
    </style>
</head>
<body>
<form id=""  class="layui-form">
    <div class="content_item">
        <div class="content_title">
            <h3><span></span>基础信息</h3>
        </div>
        <div class="content_store_name">
            <span>店铺名称：</span><input id="storeName" disabled value="试试效果" class="form-control" type="text">
        </div>
        <div class="content_store_logo">
            <span>店铺LOGO：</span>
            <img id="logoPic" src="https://img.zhengzai.tv/other/2021/12/09/dd3259aaa66e4c3995ce2ab0ce38856c.png" alt="">
        </div>
        <div class="content_store_logo">
            <span>店铺背景图：</span>
            <img id="backgroundPic" src="https://img.zhengzai.tv/other/2021/12/09/dd3259aaa66e4c3995ce2ab0ce38856c.png" alt="">
        </div>
        <div class="content_store_introduce">
            <span>店铺介绍：</span>
            <textarea class="form-control" name="" id="introduce"></textarea>
        </div>
    </div>
    <div class="content_item">
        <div class="content_title">
            <h3><span></span>认证信息</h3>
        </div>
        <div class="content_store_name">
            <span><em class="required">*</em>证件类型：</span><p>居民身份证</p>
        </div>
        <div class="content_papers_photo">
            <span><em class="required">*</em>证件照片：</span>
            <div class="photo_content">
                <div>
                    <p>证件正面照(国徽面)</p>
                    <img id="personCertFpic" src="https://img.zhengzai.tv/other/2021/12/09/dd3259aaa66e4c3995ce2ab0ce38856c.png" alt="">
                </div>
                <div>
                    <p>证件反面照(头像面)</p>
                    <img id="personCertBpic" src="https://img.zhengzai.tv/other/2021/12/09/dd3259aaa66e4c3995ce2ab0ce38856c.png" alt="">
                </div>
                <div>
                    <p>个人半身照(需手持身份证露上半身)</p>
                    <img id="personCertSpic" src="https://img.zhengzai.tv/other/2021/12/09/dd3259aaa66e4c3995ce2ab0ce38856c.png" alt="">
                </div>
            </div>
        </div>
        <div class="content_store_name">
            <span><em class="required">*</em>证件姓名：</span>
            <input id="personName" disabled class="form-control" type="text">
        </div>
        <div class="content_store_name">
            <span><em class="required">*</em>证件号码：</span>
            <input id="personCertCode" disabled class="form-control" type="text">
        </div>
        <div class="content_store_name">
            <span><em class="required">*</em>证件有效期：</span>
            <input id="personCertValidity" disabled class="form-control" type="text">
        </div>
        <div class="content_store_logo">
            <span><em class="required">*</em>营业执照照片：</span>
            <img id="busCertPic" src="https://img.zhengzai.tv/other/2021/12/09/dd3259aaa66e4c3995ce2ab0ce38856c.png" alt="">
        </div>
        <div class="content_store_name">
            <span><em class="required">*</em>统一社会信用代码：</span>
            <input id="busCertCode" disabled class="form-control" type="text">
        </div>
        <div class="content_store_name">
            <span><em class="required">*</em>执照有效期：</span>
            <input id="busCertValidity" disabled class="form-control" type="text">
        </div>
        <div class="content_store_name">
            <span><em class="required">*</em>商户名称：</span>
            <input id="busName" disabled class="form-control" type="text">
        </div>
        <div class="content_store_name">
            <span><em class="required">*</em>所在省市：</span>
            <input id="provinceName" disabled class="form-control" type="text">
        </div>
        <div class="content_store_name">
            <span><em class="required">*</em>详细地址：</span>
            <input id="busAddress" disabled class="form-control" type="text">
        </div>
        <div class="content_store_logo">
            <span><em class="required">*</em>上传合同：</span>
            <img src="https://img.zhengzai.tv/other/2021/12/09/dd3259aaa66e4c3995ce2ab0ce38856c.png" alt="">
        </div>
        <div class="content_store_name">
            <span><em class="required">*</em>合同有效期：</span>
            <input disabled class="form-control" type="text">
        </div>
    </div>
    <div class="content_footer">
        <button class="btn btn-primary" onclick="auditAccept()">审核通过</button>
        <button class="btn btn-danger" style="margin: 0 12px" onclick="auditReject()">驳回</button>
        <input id="reason" class="form-control" placeholder="请输入驳回原因" type="text">
    </div>
</form>
<th:block th:include="include :: footer" />
</body>
<script th:inline="javascript">
    var acceptFlg = [[${@permission.hasPermi('goblin:store:audit:reject')}]];
    var rejectFlg = [[${@permission.hasPermi('goblin:store:audit:reject')}]];
    var prefix = ctx + "goblin/store";
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    let storeId = unescape(r[2]);
    var storeInfo = /*[[${storeInfo}]]*/{};
    console.log(storeInfo);
    var storeCertification = /*[[${storeCertification}]]*/{};
    console.log(storeCertification);
    $("#storeName").val(storeInfo.storeName);
    $("#logoPic").attr('src', storeInfo.logoPic)
    $("#backgroundPic").attr('src', storeInfo.backgroundPic);
    $("#introduce").val(storeInfo.introduce);
    $("#personCertSpic").attr('src', storeCertification.personCertSpic);
    $("#personCertBpic").attr('src', storeCertification.personCertBpic);
    $("#personCertFpic").attr('src', storeCertification.personCertFpic);
    $("#personName").val(storeCertification.personName);
    $("#personCertCode").val(storeCertification.personCertCode);
    $("#personCertValidity").val(storeCertification.personCertValidity);
    $("#busCertPic").attr('src', storeCertification.busCertPic);
    $("#busCertCode").val(storeCertification.busCertCode);
    $("#busCertValidity").val(storeCertification.busCertValidity);
    $("#busName").val(storeCertification.busName);
    $("#provinceName").val(storeCertification.provinceName);
    $("#busAddress").val(storeCertification.busAddress);





    /* 店铺审核:通过 */
    function auditAccept(storeId) {
        if (!acceptFlg) {
            $.modal.confirm("确认要通过该店铺申请吗？", function() {
                $.operate.post(prefix + "/audit/accept", { "storeId": storeId });
            });
        }
    }

    /* 店铺审核:驳回 */
    function auditReject(storeId) {
        if (!rejectFlg) {
            let value = $("#reason").val();
            if (!value) {
                return layer.msg('请填写原因！')
            }
            $.operate.post(prefix + "/audit/reject", { "storeId": storeId, "reason": val });
        }
    }

</script>
</body>
</html>

