@extends('layouts.admin.app')
@section('crumbs')
    <ol class="breadcrumb crumbs">
        <li><a href="{{ route('admin.index') }}#">后台导航</a></li>
        <li><a href="{{ route('admin.config.index') }}">后台下载配置首页</a></li>
        <li class="active">下载配置</li>
    </ol>
@endsection
@section('content')
    <div id="configs">
        <el-form action="{{ route('config.update.down') }}" method="post" id="configs-edit">
            <el-row class="form-group">
                <el-col :span="3" style="min-height:50px;padding-top:10px;">
                    下载链接：
                </el-col>
                <el-col :span="21" style="min-height:50px;padding-top:10px;">
                    <a target="_blank" href="{{route('front.m.down')}}">{{route('front.m.down')}}</a>
                </el-col>
            </el-row>
            <ui-file label="Logo" size="2" name="logo" :data="{uploadName:'logo'}" imageurl="{{ $configs->get('logo','') }}" tips=""></ui-file>
            <!-- 文件上传 -->
            <el-row class="form-group">
                <el-col :span="3" style="min-height:50px;padding-top:10px;">
                    <label style="margin-left:10px;vertical-align: middle;" class="control-label">安卓包</label>
                </el-col>
                <el-col :span="14" style="min-height:50px;padding-top:10px;">
                    <el-upload
                            class="upload-demo"
                            action="{{ route('admin.file') }}?type=local"
                            :on-success="handleSuccess"
                            :headers="headers"
                            :before-upload="beforeAvatarUpload"
                            accept=".apk"
                            name="file"
                            :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">上传apk文件</div>
                    </el-upload>
                </el-col>
                <el-col :span="7" style="min-height:50px;padding-top:10px;">

                </el-col>
            </el-row>
            <input type="hidden" id="android_apk" name="android_apk" value="{{ $configs->get('android_apk','') }}">
            <!-- 是否显示 -->
            <ui-radio label="ios链接/安装包" :params="params" tips="蓝色标示选中"></ui-radio>
            <!-- 文件上传 -->
            <el-row class="form-group">
                <el-col :span="3" style="min-height:50px;padding-top:10px;">
                    <label style="margin-left:10px;vertical-align: middle;" class="control-label">IOS包</label>
                </el-col>
                <el-col :span="14" style="min-height:50px;padding-top:10px;">
                    <el-upload
                            class="upload-demo"
                            action="{{ route('admin.file') }}?type=local"
                            :on-success="handleSuccessIOS"
                            :headers="headers"
                            :before-upload="beforeAvatarUploadIOS"
                            accept=".ipa"
                            name="file"
                            :file-list="fileListIOS">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">上传ipa文件</div>
                    </el-upload>
                </el-col>
                <el-col :span="7" style="min-height:50px;padding-top:10px;">

                </el-col>
            </el-row>
            <input type="hidden" id="ios_apk" name="ios_apk" value="{{ $configs->get('ios_apk','') }}">
            <ui-input-text label="IOS下载链接：" name="ios_link" value="{{ $configs->get('ios_link','') }}" placeholder="IOS下载链接" maxlength="255" tips="IOS下载链接"></ui-input-text>
            <ui-input-text label="安装视频：" name="ios_a_link" value="{{ $configs->get('ios_a_link','') }}" placeholder="安装视频" maxlength="255" tips="安装视频"></ui-input-text>
            {{ csrf_field() }}
            <hr>
            <ui-submit></ui-submit>
        </el-form>
    </div>
@endsection
@section('scripts')
    <script type="application/javascript">
        $(function () {
            // 注意：Vue组件一定放在jQuery.validator前面验证
            new Vue({
                el: '#configs',
                data :function () {
                    return {
                        fileList: [{
                            name: "{{ $configs->get('android_apk','') }}",
                            url: "{{ $configs->get('android_apk','') }}"
                        }],
                        fileListIOS: [{
                            name: "{{ $configs->get('ios_apk','') }}",
                            url: "{{ $configs->get('ios_apk','') }}"
                        }],
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        params: {
                            // 注意：group和attr连个属性都不能省略 就算为空
                            group: {},
                            attr: {
                                name: 'ios_ios_link_radio',   // 当前checkbox框的name属性  【必填】
                                radioCheck:{{ config('admins.ios_ios_link_radio', 0) }},   // 当前选中项 int | string   【必填】
                                label: 'el-radio-button', // 当前样式 默认 el-radio 样式 【非必填】
                                radios: [ // 每个checkbox 就是一个json对象     【必填】
                                    {
                                        value:0,      // 当前选中时值也就是value属性的值      【必填】
                                        label: 'ios链接',    // 当前提示文字                 【必填】
                                        disable: false   // 是否禁止点击 默认：false 不禁止
                                    },
                                    {
                                        value:1,      // 当前选中时值也就是value属性的值      【必填】
                                        label: 'ios安装包',    // 当前提示文字                 【必填】
                                        disable: false   // 是否禁止点击 默认：false 不禁止
                                    }
                                ]
                            }
                        }
                    };
                },
                methods: {
                    handleSuccess(response, file, fileList) {
                        if( response.code >= 1 ){
                            // 消息 response.message
                            this.$message.error(response.message);
                        }else{
                            this.fileList = fileList.slice(-1);
                            $('#android_apk').val(response.url);
                            // 消息 response.message
                            this.$message.success("文件上传成功");
                        }
                    },
                    handleSuccessIOS(response, file, fileList) {
                        if( response.code >= 1 ){
                            // 消息 response.message
                            this.$message.error(response.message);
                        }else{
                            this.fileListIOS = fileList.slice(-1);
                            $('#ios_apk').val(response.url);
                            // 消息 response.message
                            this.$message.success("文件上传成功");
                        }
                    },
                    beforeAvatarUpload(file) {
                        const isJPG = file.type === 'application/vnd.android.package-archive';
                        const isLt2M = file.size / 1024 / 1024 < 200;

                        if (!isJPG) {
                            this.$message.error('上传文件支持apk');
                        }
                        if (!isLt2M) {
                            this.$message.error('上传文件最大 200MB!');
                        }
                        return isJPG && isLt2M;
                    },
                    beforeAvatarUploadIOS(file) {
                        console.log(file.type);
                        // const isJPG = file.type === 'application/vnd.android.package-archive';
                        const isLt2M = file.size / 1024 / 1024 < 200;
                        // if (!isJPG) {
                        //     this.$message.error('上传文件支持apk');
                        // }
                        if (!isLt2M) {
                            this.$message.error('上传文件最大 200MB!');
                            return false;
                        }
                        return true;
                    }
                }
            });
            // 编辑保存变量
            window.formDatum = $('form').serialize();
        });
    </script>
    @component('layouts.admin.admin_component')@endcomponent
@endsection