<template>
    <el-container>
        <el-main>
            <el-card shadow="never" header="存储配置" class="borderNone">
                <el-form :model="sys" :rules="rules" ref="form" label-position="top">
                    <div class="tip-container">
                        <el-alert title="文件将存储在本地服务器，默认保存在 public/upload 目录，文件以 HASH 命名。" show-icon description="文件存储的目录需要有读写权限，有足够的存储空间。特别注意，本地存储暂不支持图片压缩！" type="info" :closable="false" v-if="typeChange == 'public'" />
                        <el-alert title="文件将上传到 七牛云 存储" description="对象存储需要配置为公开访问的 Bucket 空间" show-icon type="info" :closable="false" v-if="typeChange == 'qiniu'" />
                        <el-alert title="文件将上传到 阿里云 OSS 存储，需要配置 OSS 公开访问及跨域策略" description="配置跨域访问 CORS 规则，设置：来源 Origin 为 *，允许 Methods 为 POST，允许 Headers 为 *" show-icon type="info" :closable="false" v-if="typeChange == 'oss'" />
                        <el-alert title="文件将上传到 腾讯云 COS 存储，需要配置 COS 公有读私有写访问权限及跨域策略" description="配置跨域访问 CORS 规则，设置来源 Origin 为 *，允许 Methods 为 POST，允许 Headers 为 *" show-icon type="info" :closable="false" v-if="typeChange == 'cos'" />
                    </div>
                    <el-form-item label="默认上传方式：" prop="type" class="label-item">
                        <el-col :span="11" :xs="24">
                            <el-radio-group v-model="sys.type" @change="checkType">
                                <el-radio label="public" border>本地 (不推荐)</el-radio>
                                <el-radio label="qiniu" border>七牛云</el-radio>
                                <el-radio label="oss" border>阿里云</el-radio>
                                <el-radio label="cos" border>腾讯云</el-radio>
                            </el-radio-group>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="允许类型：" prop="allow_exts" class="label-item">
                        <el-col :span="11" :xs="24">
                            <el-input v-model="sys.allow_exts" placeholder="请输入允许类型"></el-input>
                        </el-col>
                        <div class="el-form-item-msg">设置系统允许上传文件的后缀，多个以英文逗号隔开如：png,jpg,rar,doc，未设置允许上传的后缀</div>
                    </el-form-item>
                    <div v-if="typeChange == 'public'">
                    </div>
                    <div v-if="typeChange == 'qiniu'">
                        <el-form-item label="访问协议：" prop="qiniu_http_protocol" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-radio-group v-model="sys.qiniu_http_protocol">
                                    <el-radio label="http" border>HTTP</el-radio>
                                    <el-radio label="https" border>HTTPS</el-radio>
                                    <el-radio label="auto" border>AUTO</el-radio>
                                </el-radio-group>
                            </el-col>
                            <div class="el-form-item-msg">七牛云存储访问协议，其中 HTTPS 需要配置证书才能使用（ AUTO 为相对协议 ）</div>
                        </el-form-item>
                        <el-form-item label="存储区域：" prop="qiniu_region" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-select v-model="sys.qiniu_region" style="width: 100%;" placeholder="请选择存储区域" size="large">
                                    <el-option
                                        v-for="(item, index) in qiniuRegin"
                                        :key="index"
                                        :label="item"
                                        :value="index"
                                    />
                                </el-select>
                            </el-col>
                            <div class="el-form-item-msg">七牛云存储空间所在区域，需要严格对应储存所在区域才能上传文件</div>
                        </el-form-item>
                        <el-form-item label="空间名称：" prop="qiniu_bucket" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-input v-model="sys.qiniu_bucket" placeholder="请输入空间名称"></el-input>
                            </el-col>
                            <div class="el-form-item-msg">填写七牛云存储空间名称，如：static</div>
                        </el-form-item>
                        <el-form-item label="访问域名：" prop="qiniu_http_domain" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-input v-model="sys.qiniu_http_domain" placeholder="请输入访问域名"></el-input>
                            </el-col>
                            <div class="el-form-item-msg">填写七牛云存储访问域名，如：static.qiniu.tempfood.cn</div>
                        </el-form-item>
                        <el-form-item label="访问密钥：" prop="qiniu_access_key" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-input v-model="sys.qiniu_access_key" placeholder="请输入访问密钥"></el-input>
                            </el-col>
                            <div class="el-form-item-msg">可以在 [ 七牛云 > 个人中心 ] 设置并获取到访问密钥</div>
                        </el-form-item>
                        <el-form-item label="安全密钥：" prop="qiniu_secret_key" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-input v-model="sys.qiniu_secret_key" placeholder="请输入安全密钥"></el-input>
                            </el-col>
                            <div class="el-form-item-msg">可以在 [ 七牛云 > 个人中心 ] 设置并获取到安全密钥</div>
                        </el-form-item>
                    </div>
                    <div v-if="typeChange == 'oss'">
                        <el-form-item label="访问协议：" prop="oss_http_protocol" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-radio-group v-model="sys.oss_http_protocol">
                                    <el-radio label="http" size="large">HTTP</el-radio>
                                    <el-radio label="https" size="large">HTTPS</el-radio>
                                    <el-radio label="auto" size="large">AUTO</el-radio>
                                </el-radio-group>
                            </el-col>
                            <div class="el-form-item-msg">阿里云OSS存储访问协议，其中 HTTPS 需要配置证书才能使用（AUTO 为相对协议）</div>
                        </el-form-item>
                        <el-form-item label="存储区域：" prop="oss_region" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-select v-model="sys.oss_region" style="width: 100%;" placeholder="请选择存储区域" size="large">
                                    <el-option
                                        v-for="(item, index) in ossRegin"
                                        :key="index"
                                        :label="item"
                                        :value="index"
                                    />
                                </el-select>
                            </el-col>
                            <div class="el-form-item-msg">阿里云存储空间所在区域，需要严格对应储存所在区域才能上传文件</div>
                        </el-form-item>
                        <el-form-item label="空间名称：" prop="oss_bucket" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-input v-model="sys.oss_bucket" placeholder="请输入空间名称"></el-input>
                            </el-col>
                            <div class="el-form-item-msg">填写阿里云存储空间名称，如：static</div>
                        </el-form-item>
                        <el-form-item label="访问域名：" prop="oss_http_domain" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-input v-model="sys.oss_http_domain" placeholder="请输入访问域名"></el-input>
                            </el-col>
                            <div class="el-form-item-msg">填写阿里云存储访问域名，如：static.qiniu.tempfood.cn</div>
                        </el-form-item>
                        <el-form-item label="访问密钥：" prop="oss_access_key" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-input v-model="sys.oss_access_key" placeholder="请输入访问密钥"></el-input>
                            </el-col>
                            <div class="el-form-item-msg">可以在 [ 阿里云 > 个人中心 ] 设置并获取到访问密钥</div>
                        </el-form-item>
                        <el-form-item label="安全密钥：" prop="oss_secret_key" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-input v-model="sys.oss_secret_key" placeholder="请输入安全密钥"></el-input>
                            </el-col>
                            <div class="el-form-item-msg">可以在 [ 阿里云 > 个人中心 ] 设置并获取到安全密钥</div>
                        </el-form-item>
                    </div>
                    <div v-if="typeChange == 'cos'">
                        <el-form-item label="访问协议：" prop="cos_http_protocol" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-radio-group v-model="sys.cos_http_protocol">
                                    <el-radio label="http" size="large">HTTP</el-radio>
                                    <el-radio label="https" size="large">HTTPS</el-radio>
                                    <el-radio label="auto" size="large">AUTO</el-radio>
                                </el-radio-group>
                            </el-col>
                            <div class="el-form-item-msg">阿里云OSS存储访问协议，其中 HTTPS 需要配置证书才能使用（AUTO 为相对协议）</div>
                        </el-form-item>
                        <el-form-item label="存储区域：" prop="cos_region" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-select v-model="sys.cos_region" style="width: 100%;" placeholder="请选择存储区域" size="large">
                                    <el-option
                                        v-for="(item, index) in cosRegin"
                                        :key="index"
                                        :label="item"
                                        :value="index"
                                    />
                                </el-select>
                            </el-col>
                            <div class="el-form-item-msg">腾讯云存储空间所在区域，需要严格对应储存所在区域才能上传文件</div>
                        </el-form-item>
                        <el-form-item label="空间名称：" prop="cos_bucket" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-input v-model="sys.cos_bucket" placeholder="请输入空间名称"></el-input>
                            </el-col>
                            <div class="el-form-item-msg">填写腾讯云存储空间名称，如：static</div>
                        </el-form-item>
                        <el-form-item label="访问域名：" prop="cos_http_domain" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-input v-model="sys.cos_http_domain" placeholder="请输入访问域名"></el-input>
                            </el-col>
                            <div class="el-form-item-msg">填写腾讯云存储访问域名，如：static.tempfood.cn</div>
                        </el-form-item>
                        <el-form-item label="访问密钥：" prop="cos_access_key" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-input v-model="sys.cos_access_key" placeholder="请输入访问密钥"></el-input>
                            </el-col>
                            <div class="el-form-item-msg">可以在 [ 腾讯云 > 个人中心 ] 设置并获取到访问密钥</div>
                        </el-form-item>
                        <el-form-item label="安全密钥：" prop="cos_secret_key" class="label-item">
                            <el-col :span="11" :xs="24">
                                <el-input v-model="sys.cos_secret_key" placeholder="请输入安全密钥"></el-input>
                            </el-col>
                            <div class="el-form-item-msg">可以在 [ 腾讯云 > 个人中心 ] 设置并获取到安全密钥</div>
                        </el-form-item>
                    </div>
                </el-form>
            </el-card>
        </el-main>
        <el-footer>
            <el-button type="primary" size="large" :loading="isSaveing" @click="saveForm">保存</el-button>
        </el-footer>
    </el-container>
</template>

<script>

export default {
    data() {
        return {
            isSaveing: false,
            sys: {},
            configList: [],
            rules: {
                type: [
                    { required: true, message: '请选择上传方式', trigger: 'change' }
                ],
                allow_exts: [
                    { required: true, message: '请输入允许类型', trigger: 'blur' }
                ],
                qiniu_http_protocol: [
                    { required: true, message: '请选择访问协议', trigger: 'change' }
                ],
                oss_http_protocol: [
                    { required: true, message: '请选择访问协议', trigger: 'change' }
                ],
                cos_http_protocol: [
                    { required: true, message: '请选择访问协议', trigger: 'change' }
                ],
                qiniu_region: [
                    { required: true, message: '请选择存储区域', trigger: 'change' }
                ],
                oss_region: [
                    { required: true, message: '请选择存储区域', trigger: 'change' }
                ],
                cos_region: [
                    { required: true, message: '请选择存储区域', trigger: 'change' }
                ],
                qiniu_bucket: [
                    { required: true, message: '请输入空间名称', trigger: 'blur' }
                ],
                oss_bucket: [
                    { required: true, message: '请输入空间名称', trigger: 'blur' }
                ],
                cos_bucket: [
                    { required: true, message: '请输入空间名称', trigger: 'blur' }
                ],
                qiniu_http_domain: [
                    { required: true, message: '请输入访问域名', trigger: 'blur' }
                ],
                oss_http_domain: [
                    { required: true, message: '请输入访问域名', trigger: 'blur' }
                ],
                cos_http_domain: [
                    { required: true, message: '请输入访问域名', trigger: 'blur' }
                ],
                qiniu_access_key: [
                    { required: true, message: '请输入访问密钥', trigger: 'blur' }
                ],
                oss_access_key: [
                    { required: true, message: '请输入访问密钥', trigger: 'blur' }
                ],
                cos_access_key: [
                    { required: true, message: '请输入访问密钥', trigger: 'blur' }
                ],
                qiniu_secret_key: [
                    { required: true, message: '请输入安全密钥', trigger: 'blur' }
                ],
                oss_secret_key: [
                    { required: true, message: '请输入安全密钥', trigger: 'blur' }
                ],
                cos_secret_key: [
                    { required: true, message: '请输入安全密钥', trigger: 'blur' }
                ],
            },
            typeChange:"public",
            ossRegin:[],
            cosRegin:[],
            qiniuRegin: [],
        }
    },
    created() {
        this.getConfig();
        this.getRegin();
    },
    methods: {
        checkType(val){
            this.typeChange = val;
        },
        saveForm() {
            this.isSaveing = true;
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    var result = await this.$API.setting.configSave.post({type:"storage",data: this.sys });
                    this.isSaveing = false;
                    if(result.code == 0)
                    {
                        this.$message.error(result.msg);
                        return false;
                    }
                    this.$message.success(result.msg);
                } else {
                    this.isSaveing = false;
                    return false;
                }
            })
        },
        async getConfig() {
            var result = await this.$API.setting.config.get({ type: "storage" });
            if (result.code == 0) {
                this.$message.error(result.msg);
                return;
            }
            this.typeChange = result.data.type;
            this.sys = result.data;
        },
        async getRegin() {
            var result = await this.$API.setting.regin.get();
            if (result.code == 0) {
                this.$message.error(result.msg);
                return;
            }
            this.ossRegin = result.data.oss;
            this.cosRegin = result.data.cos;
            this.qiniuRegin = result.data.qiniu;
        }
    }
}

</script>
<style>
</style>