<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="field102">
              <el-radio-group v-model="formData.field102" size="medium">
                <el-radio v-for="(item, index) in field102Options" :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">
              <el-upload ref="sysApk" :action="field101Action" :before-upload="field101BeforeUpload"
                         :file-list="field101fileList"
              >
                <el-button icon="el-icon-upload" size="small" type="primary">上传文件</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="安装包大小" prop="sysApkSize">
              <el-input v-model="formData.sysApkSize" :style="{width: '100%'}" clearable placeholder="请输入安装包大小">
              </el-input>
            </el-form-item>
            <el-form-item label="安装包类型" prop="sysType">
              <el-select v-model="form.sysType" placeholder="请选择安装包类型">
                <el-option
                    v-for="dict in dict.type.sys_apk_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                ></el-option>
              </el-select>
            </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="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>

</template>
<script>
import { addINFO, updateINFO } from '@/api/deploy/INFO'

export default {
  name: 'InstallAdd',
  dicts: ['sys_apk_uploading_type', 'uploading_status', 'sys_apk_type'],
  data() {
    return {
      formData: {
        field102: 1,
        field103: undefined,
        field104: undefined,
        field101: null,
        field105: undefined,
        field106: 'Android',
        field107: undefined,
        field108: undefined
      },
      rules: {
        field102: [{
          required: true,
          message: '上传方式不能为空',
          trigger: 'change'
        }],
        field103: [{
          required: true,
          message: '请输入安装包名称',
          trigger: 'blur'
        }],
        field107: [{
          required: true,
          message: '请输入模块包名称',
          trigger: 'blur'
        }],
        field105: [],
        field106: []
      },
      field101Action: 'https://jsonplaceholder.typicode.com/posts/',
      field101fileList: [],
      field102Options: [{
        'label': '在线上传',
        'value': 1
      }, {
        'label': '离线上传',
        'value': 2
      }],
      field106Options: [{
        'label': 'Android',
        'value': 'Android'
      }, {
        'label': 'IOS',
        'value': 'IOS'
      }, {
        'label': '鸿蒙',
        'value': 'HarmonyOS'
      }],
      activeTabs: '1'
    }
  },
  computed: {},
  mounted() {
    console.log(this.$route)
    this.activeTabs = this.$route.params.activeTabs
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            let data = Object.assign({}, this.form)
            delete data.explain
            updateINFO(data).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addINFO(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    field101BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    cancel() {
      this.history.back()
    }
  }
}
</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>
