<template>
  <div class="app-container">
    <el-container>
      <el-header>
        <div>新增安装包</div>
        <el-divider/>
      </el-header>
      <el-main>
        <div class="form-main">
          <el-form ref="elForm" :model="formData" :rules="rules" label-width="100px" size="medium">
            <el-form-item label="上传方式" prop="uploadingType">
              <el-radio-group v-model="formData.uploadingType" size="medium">
                <el-radio v-for="(item, index) in dict.type.sys_apk_uploading_type" :key="index"
                          :disabled="item.disabled"
                          :label="item.value"
                >{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="activeTabs==='1'" label="安装包名称" prop="sysApkName">
              <el-input v-model="formData.sysApkName" :style="{width: '100%'}" clearable placeholder="请输入安装包名称">
              </el-input>
            </el-form-item>
            <!--            <el-form-item v-else label="模块包名称" prop="field107">-->
            <!--              <el-input v-model="formData.field107" :style="{width: '100%'}" clearable placeholder="请输入模块包名称">-->
            <!--              </el-input>-->
            <!--            </el-form-item>-->
            <el-form-item label="版本号" prop="version">
              <el-input v-model="formData.version" :style="{width: '100%'}" clearable placeholder="请输入版本号">
              </el-input>
            </el-form-item>
            <el-form-item label="安装包文件" prop="sysApk">
              <file-upload v-model="formData.sysApk" :fileType="['apk','txt']" :limit="1"
                           @getSize="getSize"
              />

            </el-form-item>
            <el-form-item label="安装包大小" prop="sysApkSize">
              <el-input v-model="formData.sysApkSize" :style="{width: '100%'}" placeholder="请输入安装包大小" readonly>
              </el-input>
            </el-form-item>
            <el-form-item label="安装包类型" prop="sysType">
              <el-radio-group v-model="formData.sysType" size="medium">
                <el-radio v-for="(item, index) in  dict.type.sys_apk_type" :key="index" :disabled="item.disabled"
                          :label="item.value"
                >{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <!--            <el-form-item v-if="activeTabs!='1'" label="适用模块" prop="configName">-->
            <!--              <el-select v-model="formData.field108" clearable placeholder="请选择对应的模块">-->
            <!--                <el-option-->
            <!--                    v-for="dict in dict.type.sys_yes_no"-->
            <!--                    :key="dict.value"-->
            <!--                    :label="dict.label"-->
            <!--                    :value="dict.value"-->
            <!--                />-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="cancel">取 消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>

</template>
<script>
import { addINFO } from '@/api/FDS/installList'

export default {
  name: 'InstallAdd',
  dicts: ['sys_apk_uploading_type', 'uploading_status', 'sys_apk_type'],
  data() {
    return {
      formData: {
        uploadingType: 'OffLineUploading',
        sysApkName: undefined,
        version: undefined,
        sysApk: null,
        sysApkSize: undefined,
        sysType: ''
      },
      rules: {
        uploadingType: [
          { required: true, message: '上传类型不能为空', trigger: 'change' }
        ],
        sysApkName: [
          { required: true, message: '安装包名称不能为空', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '版本号不能为空', trigger: 'blur' }
        ],
        sysType: [
          { required: true, message: '安装包类型不能为空', trigger: 'change' }
        ],
        sysApkSize: [
          { required: true, message: '安装包大小不能为空', trigger: 'blur' }
        ],
        sysApk: [
          { required: true, message: '安装包不能为空', trigger: 'change' }
        ]
      },

      activeTabs: '1'
    }
  },
  computed: {},

  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          addINFO(this.formData).then(response => {
            this.$modal.msgSuccess('新增成功')
          })
          this.$router.push({ path: '/build/installationList' })
        }
      })
    },
    getSize(e) {
      this.formData.sysApkSize = e[0].size + 'kb'
    },
    cancel() {
      this.$router.push({ path: '/build/installationList' })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  background: #ffffff;
  margin: 24px;
}

.form-main {
  width: 700px;
  margin: 0 auto;
}

::v-deep .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner {
  border: 1px solid #E4E7ED !important;
}

.el-upload__tip {
  line-height: 1.2;
}
</style>
