<template>
    <div>
    <h4>视频课APP在线升级和管理系统</h4>
        <br>
        <br>
        <br>
        <el-row :gutter="20" v-loading="loading">
            <el-col :span="10">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>app版本控制</span>
                    </div>
                    <div class="text item">
                        当前版本 {{ Version }}
                    </div>
                    <br>
                    <div class="text item">
                        时间 {{ CreatedAt | filterFmtDate}}
                    </div>
                    <br>
                    <div class="text item">
                        文件名 {{ FileName }}
                    </div>
                    <br>
                    <div class="text item">
                        升级内容 {{ UpdateContent }}
                    </div>
                </el-card>
            </el-col>
            <el-col :span="10">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>wgt上传</span>
                    </div>
                    <div class="text item">
                        版本号
                        <el-input v-model="upload.version" placeholder="如1.1.1"></el-input>
                    </div>
                    <div class="text item">
                        更新内容
                        <el-input v-model="upload.updateContent " placeholder="更新内容"></el-input>
                    </div>
                    <div class="text item">
                        <el-upload
                                class="upload-demo"
                                :action=trueApi.UpVueFramework
                                :http-request=upqiniu
                                :show-file-list="false"
                                :limit="1"
                                :before-upload="beforeUpload"
                                ref="my-upload"
                        >
                        <br>
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传wgt文件，且不超过50mb</div>
                        </el-upload>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    let qs = require('qs');
    export default {
        name: "versionControlMefisto",
        data() {
            return {
                trueApi: {
                    UpVueFramework: headbpi + 'v1/Sensors/VCAppUpVueFramework',
                    QueryVueFramework: headbpi +'v1/Sensors/VCAppQueryVueFramework',
                },
                falseApi: {
                    UpVueFramework: 'http://192.168.0.3:19096/v1/Sensors/VCAppUpVueFramework',
                    QueryVueFramework: 'http://192.168.0.3:19096/v1/Sensors/VCAppQueryVueFramework',
                },
                loading: false,
                Version: '',
                CreatedAt: '',
                FileName: '',
                UpdateContent: '',
                fileList: [],
                upload: {
                    version: '1.3.0',
                    updateContent: '基础功能',
                    file: [],
                }
            }
        },
        mounted() {
            this.QueryVueFramework();
        },
        methods: {
            upqiniu(req) {
                let that = this;
                that.loading = true;
                const config = {
                    headers: {'Content-Type': 'multipart/form-data'}
                };
                const formdata = new FormData();
                formdata.append('file', req.file);
                formdata.append('version', that.upload.version);
                formdata.append('updateContent', that.upload.updateContent);
                this.axios.post(this.trueApi.UpVueFramework, formdata, config).then(res => {
                    console.log(res.data);
                //     // 重载
                    that.QueryVueFramework();
                    that.loading = false;
                    that.$refs['my-upload'].clearFiles();
                })
            },
            // 验证文件合法性
            beforeUpload(file) {
                const isLt50M = file.size / 1024 / 1024 < 50;
                if (!isLt50M) {
                    this.$message.error('上传wgt大小不能超过 50MB!')
                }
                return isLt50M
            },
            QueryVueFramework() {
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                let url = that.trueApi.QueryVueFramework;
                axios.post(url, postdata).then(function (data) {
                    let json = data.data;
                    if (json.Code == 0) {
                        that.Version = json.VueFramework.Version;
                        that.CreatedAt = json.VueFramework.CreatedAt;
                        that.FileName = json.VueFramework.FileName;
                        that.UpdateContent = json.VueFramework.UpdateContent;

                        // 读取上一个版本
                        that.upload.version = json.VueFramework.Version;
                    } else {
                        console.log(json.Memo);
                    }
                })
            }
        },
        filters: {
            filterFmtDate(val) {
                if (!val) {
                    return '--'
                } else {
                    return nonTfmtDate(val, 16);
                }
            },

        }
    }
</script>

<style scoped>

</style>
