{extend name="app/shop/view/base.html"/}
{block name="main"}
<div class="layui-card card-common card-brief">
    <div class="layui-card-header">
        <span class="card-title">小程序认证</span>
    </div>
    <div class="layui-form layui-card-body">
        <div class="layui-form-item">
            <label class="layui-form-label">小程序名称：</label>
            <div class="layui-input-block ">
                <input type="text" name="account_name" autocomplete="off" class="layui-input len-long"  value="{$basic.nickname ?? ''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">执照类型</label>
            <div class="layui-input-block sm">
                <input type="radio" lay-filter="codeType" name="customer_type" value="12" title="个体户"{if isset($basic.customer_type) && $basic.customer_type ==12} checked {/if}>
                <input type="radio" lay-filter="codeType" name="customer_type" value="1" title="企业公司" {if isset($basic.customer_type) && $basic.customer_type ==1} checked {/if}>
                <input type="radio" lay-filter="codeType" name="customer_type" value="15" title="个人" {if isset($basic.customer_type) && $basic.customer_type ==15} checked {/if}>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label img-upload-lable short-label"><span class="required">*</span>联系人：</label>
            <div class="layui-input-inline">
                <input type="text" name="contact_info[name]" lay-verify="required" value="" autocomplete="off"  class="layui-input len-long">
            </div>
        </div>
        <div class="layui-form-item legal_persona_wechat">
            <label class="layui-form-label"><span class="required">*</span>联系邮箱：</label>
            <div class="layui-input-inline ">
                <input type="text" name="contact_info[email]" class="layui-input len-long" value="">
            </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label img-upload-lable"><span class="required">*</span>营业执照：</label>
          <div class="layui-input-block img-upload">
            <div class="upload-img-block icon">
              <div class="upload-img-box {if !empty($info.license_pic)}hover{/if}">
                <div class="upload-default" id="licensePicUpload">
                  {if empty($info.license_pic)}
                  <div class="upload">
                    <i class="iconfont iconshangchuan"></i>
                    <p>点击上传</p>
                  </div>
                  {else/}
                  <div id="preview_licensePicUpload" class="preview_img">
                    <img layer-src src="{:img($info.license_pic)}" class="img_prev"/>
                  </div>
                  {/if}
                </div>
                <div class="operation">
                  <div>
                    <i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
                    <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
                  </div>
                  <div class="replace_img js-replace">点击替换</div>
                </div>
                <input type="hidden" name="qualification" lay-verify="required" value="{$info.qualification??''}">
                <input type="hidden" name="license_pic" lay-verify="required" value="{$info.license_pic??''}">
              </div>
            </div>
          </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">其他证明材料（选填）：</label>
            <div class="layui-input-block">
                <div class="img-upload">
                    <button type="button" class="layui-btn layui-btn-danger" id="qualifications">上传图片</button>
                    <div class="layui-input-block" style="margin-left:0px;">
                        <div class="layui-upload-list" id="qualifications_img"></div>
                        <input type="hidden" id="qualifications_value" name="qualification_other" value="$info.qualification_other"/>
                    </div>
                </div>
            </div>
            <div class="word-aux"><span class="text-color-red" id="qualifications_text">特殊情况可上传作为佐证，如企业工商变更证明、官方红头文件、加盖公章证明等。其他证明材料可上传最多10张</span></div>
        </div>

        <div class="form-row">
            <button class="layui-btn bg-color" lay-submit lay-filter="save">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary" onclick="back()">返回</button>
        </div>
    </div>
    {/block}
    {block name="script"}
    <script type="text/javascript">
        var licensePicUpload = new Upload({
            elem: '#licensePicUpload'
            ,url: "{:addon_url('wxoplatform/shop/weapp/image')}", //改成您自己的上传接口
            callback: function(res) {
               console.log(res);
               $('input[name="qualification"]').val(res.data.mediaid);
               $('input[name="license_pic"]').val(res.data.pic_path);
            }
        });
        var qualificationsUpload = new Upload({
            elem: '#qualifications'
            , url: "{:addon_url('wxoplatform/shop/weapp/image')}", //改成您自己的上传接口
             multiple: true,
            callback: function(res) {
                $('#qualifications_img').append('<img style="width: 125px;margin-left: 5px;" src="' + res.data.pic_path + '" class="layui-upload-img">')
            },
             before: function (obj) {
                console.log(obj);
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#qualifications_img').append('<img style="width: 125px;margin-left: 5px;" src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                });
            }
            , done: function (res) {
                console.log(res);
                //上传完毕
                let value = $("#qualifications_value").val() || [];
                if (value.length > 0) {
                    value = JSON.parse(value);
                }
                if (res.hasOwnProperty('media_id')) {
                    value.push(res.media_id)
                    $("#qualifications_value").val(JSON.stringify(value))
                } else {
                    return layer.msg(res.message);
                }
            }
        });
        layui.use(['table', 'form', 'util', 'layer'], function () {
            var table = layui.table,
                util = layui.util,
                form = layui.form,
                layer = layui.layer,
                repeat_flag = false; //防重复标识
            form.render();
            form.on('submit(save)', function (data) {
                if (repeat_flag) return;
                repeat_flag = true;
                $.ajax({
                    type: "post",
                    url: "{:addon_url('wxoplatform://shop/weapp/authentication')}",
                    dataType: "JSON",
                    data: data.field,
                    success: function (data) {
                        console.log(data)
                        repeat_flag = false;
                        layer.msg(data.message);
                    }
                });
            });
        });

        function back() {
            location.href = "{:addon_url('weapp://shop/weapp/setting')}";
        }
    </script>
  {/block}