<template>
    <div class="edit-view">
        <page-title>
            <el-button @click="$router.go(-1)" :disabled="saving">取消</el-button>
            <el-button @click="onSave" :loading="saving" type="primary"> 保存 </el-button>
        </page-title>
        <div class="edit-view__content-wrapper"  v-loading="dataLoading">
            <div class="edit-view__content-section">
                <el-form
                    :model="formData"
                    :rules="rules"
                    ref="form"
                    label-width="140px"
                    label-position="right"
                    size="small"
                    style="max-width: 500px"
                >

                    <el-form-item prop="title" label="标题">
                        <el-input v-model="formData.title" placeholder="请输入版本标题" ></el-input>
                    </el-form-item>
                  
                   <el-form-item prop="description" label="描述">
                        <el-input v-model="formData.description" type="textarea"  placeholder="请输入版本描述"></el-input>
                    </el-form-item>

                    <el-form-item prop="source" label="平台类型">
                        <el-select v-model="formData.source" clearable="">
                            <el-option v-for="(value,key) in platformTypeMap" :key="key" :value="key" :label="value" >{{value}}</el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item prop="updateType" label="更新类型">
                        <el-select v-model="formData.updateType" clearable="">
                            <el-option v-for="(value,key) in updateTypeMap" :key="key" :value="key"  :label="value">{{value}}</el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item prop="packageAddress" label="更新资源">
                        <file-upload v-model="formData.packageAddress" :limit="1"></file-upload>
                        <div class="tip">请上传对应版本的资源文件</div>
                    </el-form-item>

                    <el-form-item prop="version" label="版本号">
                        <el-input v-model="formData.version" placeholder="请输入版本号，比如0.0.1"></el-input>
                    </el-form-item>


                    <el-form-item prop="appPackage" label="app包名">
                        <el-input v-model="formData.appPackage" placeholder="升级代码的包名"></el-input>
                    </el-form-item>

                    <el-form-item prop="os" label="系统版本">
                         <el-select v-model="formData.os" clearable="">
                            <el-option v-for="(value,key) in osMap" :key="key" :value="key" :label="value">{{value}}</el-option>
                        </el-select>
                    </el-form-item>

                    <!-- <el-form-item prop="phoneBrand" label="收集品牌">
                         <el-checkbox-group v-model="phoneBrand">
                            <el-checkbox label="品牌A" ></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item> -->
                    
                    <el-form-item prop="ipAddress" label="允许IP">
                        <el-input v-model="formData.ipAddress" type="textarea"  placeholder="使用英文逗号','分割"></el-input>
                    </el-form-item>


                    <el-form-item prop="startUpdate" label="是否更新">
                        <el-switch v-model="formData.startUpdate">
                        </el-switch>
                    </el-form-item>

                    <el-form-item class="form-submit">
                        <el-button @click="$router.go(-1)" :disabled="saving">取消</el-button>
                        <el-button @click="onSave" :loading="saving" type="primary"> 保存 </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    name: 'AppVersionEdit',
    created() {
        if (this.$route.query.id) {
            this.dataLoading = true;
            this.$http
                .get('/appVersion/get/' + this.$route.query.id)
                .then(res => {
                    this.formData = res;
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                }).finally(() => {
                    this.dataLoading = false;
                });
        }
    },
    data() {
        return {
            saving: false,
            dataLoading:false,
            formData: {},
            rules: {
                title: [
                    {
                        required: true,
                        message: '请输入标题',
                        trigger: 'blur'
                    }
                ],
                source: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'blur'
                    }
                ],
                updateType: [
                     {
                        required: true,
                        message: '请选择',
                        trigger: 'blur'
                    }
                ],
                packageAddress: [
                     {
                        required: true,
                        message: '请上传资源文件',
                        trigger: 'blur'
                    }
                ],
                version: [
                     {
                        required: true,
                        message: '请输入版本号',
                        trigger: 'blur'
                    }
                ],
                os: [
                     {
                        required: true,
                        message: '请选择系统版本',
                        trigger: 'blur'
                    }
                ],
                


            },

            platformTypeMap:{
                "OFFICIAL":"官方",
                "MARKET":"市场",
            },
            updateTypeMap: {
                "HOTSWAP":"热更新",
                "SOFT_UPDATE":"软更新",
                "STRONG_UPDATE":"强制更新",
            },
            osMap: {
                "Android":"Android",
                "iOS":"iOS",
            },
             
        };
    },
    methods: {
       onSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            let data = {
                ...this.formData
            };

            this.saving = true;
            this.$http
                .post('/appVersion/save', data, { body: 'json' })
                .then(res => {
                    this.saving = false;
                    this.$message.success('成功');
                    this.$router.go(-1);
                })
                .catch(e => {
                    console.log(e);
                    this.saving = false;
                    this.$message.error(e.error);
                });
        },
    }
};
</script>
<style lang="less" scoped>
    .div-wrapper{
        margin-top:20px;
        padding:0px;
    }
</style>
