<template>
  <div class="container">
    <div class="form">
      <h1 class="title">APP版本管理</h1>
      <Form ref="form" :model="form" :rules="rules">
        <FormItem prop="user" label="文件名：" :label-width="100">
          <Input type="text" v-model="versionInfo.fileName" placeholder="暂无上传版本" style="width: 300px;" disabled>
          </Input>
        </FormItem>
        <FormItem prop="user" label="当前版本：" :label-width="100">
          <Input type="text" v-model="versionInfo.version" placeholder="暂无上传版本" style="width: 300px;" disabled>
          </Input>
        </FormItem>
        <FormItem prop="updateApkType" label="版本类型：" :label-width="100">
          <RadioGroup v-model="form.updateApkType">
            <Radio :label="0">增量更新</Radio>
            <Radio :label="1">全量更新</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem prop="version" label="版本号：" :label-width="100">
          <Input type="text" v-model="form.version" placeholder="请输入版本号" style="width: 300px;">
          </Input>
        </FormItem>
        <FormItem prop="fileName" label="上传文件：" :label-width="100">
            <Upload
              ref="upload"
              :before-upload="set_img"
              :max-size="2048"
              action=""
            >
              <Input v-model="form.fileName" search enter-button="文件" placeholder="请上传文件" disabled style="width: 300px;"/>
            </Upload>
        </FormItem>
      </Form>
      <div class="btn">
        <Button type="info" style="width: 100px;" @click="uploadApkFile">上传</Button>
      </div>
    </div>
  </div>
</template>

<script>
import { UploadApkFile, DownloadApkFile } from '@/api/user'
export default {
  name: 'app-vision-manage',
  data () {
    return {
      drawVisible: false,
      form: {
        version: '',
        fileName: '',
        fileBase64: '',
        updateApkType: 0,
        floder: 'app-version'
      },
      versionInfo: {
        fileName: '',
        version: ''
      },
      rules: {
        version: [
          { required: true, message: '版本号不能为空', change: 'blur' }
        ],
        fileName: [
          { required: true, message: '文件不能为空', change: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 上传apk
    uploadApkFile () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          UploadApkFile({
            fileBase64: this.form.fileBase64,
            fileName: this.form.fileName,
            floder: this.form.floder,
            updateApkType: this.form.updateApkType,
            version: this.form.version
          }).then((res) => {
            if (res.code === 0) {
              this.$Message.info(res.msg || '上传成功！')
              this.downloadApkFile()
              this.form.fileBase64 = ''
              this.form.version = ''
              this.form.filename = ''
              this.$refs['form'].resetFields()
            }
          })
        }
      })
    },
    // 选择文件
    set_img (file) {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (event) => {
        this.form.fileBase64 = event.srcElement.result
        this.form.fileName = file.name
        // UploadApkFile({
        //   fileBase64: event.srcElement.result,
        //   fileName: file.name,
        //   floder: 'app-version',
        //   version: '1.0.4'
        // }).then(({ data }) => {
        //   // this.formData.uploadImage = data.result
        //   console.log(data)
        // })
      }
      return false
    },
    // 获取当前版本信息
    downloadApkFile () {
      DownloadApkFile().then(res => {
        if (res.code === 0) {
          this.versionInfo = res.result
        }
      })
    }
  },
  created () {
    this.downloadApkFile()
  }
}
</script>

<style lang="less" scoped>
  .container {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    min-width: 720px;
    display: flex;
    justify-content: center;
    background-color: #FFFFFF;
    .form {
      .title {
        padding: 50px 0;
        text-align: center;
      }
      .btn {
        padding-top: 20px;
        padding-bottom: 100px;
        text-align: center;
      }
    }
  }
</style>
