// 添加/修改授权
<template>
  <el-dialog
    :title="isEdit ? '编辑安装包' : '上传安装包'"
    width="700px"
    :visible.sync="visible"
    :destroy-on-close="false"
    :close-on-click-modal="false"
    :center="true"
  >
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-position="left"
      label-width="120px"
    >
      <el-form-item label="安装包名称" prop="apkTitle">
        <el-input v-model="form.apkTitle" placeholder="请输入安装包名称" />
      </el-form-item>
      <el-form-item label="安装包版本号" prop="apkVersion">
        <el-input v-model="form.apkVersion" placeholder="请输入安装包版本号" />
      </el-form-item>
      <el-form-item label="上传安装包" prop="apkPath">
        <a href="javascript:;" class="file" v-loading="uploadLoading"
          >上传<input
            type="file"
            name="file"
            ref="file"
            @change="uploadFile($event)"
        /></a>
        <span class="m-l" v-if="fileaName">{{ fileaName }}</span>
        <!-- 进度条 -->
        <el-progress v-if="percentage" :percentage="percentage"></el-progress>
        <p></p>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取消 </el-button>
      <el-button
        type="primary"
        :loading="submitLoading"
        @click="submit"
        :disabled="uploadLoading"
      >
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { apkAdd } from "@/api/install_task";
import { androidApk } from "@/api/ordinary_user";
import request from "@/utils/request";
export default {
  data() {
    return {
      form: {
        apkTitle: null,
        apkVersion: null,
        apkPath: "",
      },
      rules: {
        apkTitle: [
          {
            required: true,
            message: "不能为空!",
            trigger: "blur",
          },
        ],
        apkVersion: [
          {
            required: true,
            message: "不能为空!",
            trigger: "blur",
          },
        ],
        apkPath: [
          {
            required: true,
            message: "不能为空!",
          },
        ],
      },
      visible: false,
      submitLoading: false,
      isEdit: false,
      fileaName: "",
      percentage: 0, //进度条
      uploadLoading: false,
    };
  },
  created() {},
  methods: {
    open(obj) {
      this.visible = true;
      this.submitLoading = false;
      this.percentage = 0;
      this.fileaName = "";
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        if (obj && Object.keys(obj).length > 0) {
          this.form = obj;
          this.isEdit = true;
        } else {
          this.form = {};
          this.isEdit = false;
        }
      });
    },
    submit(e) {
      console.log(this.form);
      e.preventDefault();
      this.$refs.form.validate(async (valid) => {
        if (!valid) {
          return false;
        }
        if (this.submitLoading) {
          return;
        }
        this.submitLoading = true;
        try {
          await apkAdd(this.form);
          this.visible = false;
          this.$emit("success", this.isEdit);
        } catch (e) {
          console.info("add", e);
        } finally {
          this.submitLoading = false;
        }
      });
    },
    async uploadFile(e) {
      let that = this;
      that.uploadLoading = true;
      this.fileaName = "";
      var files = e.currentTarget.files;
      if (!files.length) {
        return;
      }
      this.fileaName = files[0].name;
      var formData = new FormData(); // 必需声明一个FormData对象
      formData.append("file", files[0]);
      const { data: res } = await request({
        method: "post",
        url: "api/v1/upload/android/apk",
        headers: {
          "Content-Type": "multipart/form-data",
        },
        data: formData,
        onUploadProgress: function (progressEvent) {
          that.percentage = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
        },
      });
      that.form.apkPath = res;
      that.uploadLoading = false;
      console.log(that.form.apkPath);
    },
  },
};
</script>

<style scoped>
::v-deep .el-select {
  width: 100%;
}
.m-l {
  margin-left: 20px;
}
/*批量导入按钮*/
.file {
  position: relative;
  background: #d0eeff;
  border: 1px solid #99d3f5;
  border-radius: 4px;
  padding: 10px 20px;
  box-sizing: border-box;
  overflow: hidden;
  color: #1e88c7;
  text-decoration: none;
  text-indent: 0;
}
.file input {
  position: absolute;
  font-size: 14px;
  width: 106px;
  height: 40px;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
.file:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}
</style>
