<template>
  <el-dialog
    class="custom-dialog"
    custom-class="party-dialog"
    title="上传新版安装包"
    width="540px"
    :visible.sync="formVisible"
    :before-close="close"
  >
    <div class="dialog-content">
      <el-form
        :model="formItem"
        class="party-form"
        ref="formItem"
        label-width="125px"
        label-position="right"
        :rules="rules"
      >
        <el-form-item label="版本号1：" prop="version">
          <el-input size="small" v-model="formItem.version" clearable placeholder="请输入版本号"></el-input>
        </el-form-item>
        <el-form-item label="版本信息：" prop="versionContent">
          <el-input type="textarea" size="small" v-model="formItem.versionContent"></el-input>
        </el-form-item>
        <el-form-item label="更新内容：" prop="updateContent">
          <el-input type="textarea" size="small" v-model="formItem.updateContent"></el-input>
        </el-form-item>
        <el-upload
          class="text-center"
          drag
          action="#"
          :auto-upload="false"
          :on-change="onChange"
          :file-list="fileList">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将安装包拖到此处，或<em>点击上传安装包</em></div>
          <div class="el-upload__tip" slot="tip">只能上传zip文件，且不超过500kb</div>
        </el-upload>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer btn-group">
      <el-button size="mini" type="primary" @click="submitForm('formItem')">确定</el-button>
      <el-button size="mini" @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      formVisible: false,
      formItem: {},
      fileList:[],
      rules: {
        version: [
          { required: true, message: "请输入版本号", trigger: "blur" }
        ],
        versionContent: [{ required: true, message: "请输入版本信息", trigger: "blur" }],
        updateContent: [{ required: true, message: "请输入更新内容", trigger: "blur" }]
      }
    };
  },
  methods: {
    backFn(item) {
      this.formVisible = true;
      this.$nextTick(()=>{
        this.$refs.formItem.clearValidate();
      })
      this.formItem = {};
    },
    // 关闭
    close() {
      this.formVisible = false;
      for (let key in this.formItem) {
        this.formItem[key] = null;
      }
      this.$refs["formItem"].resetFields();
    },
    // 上传数据操作
    onChange(file, fileList) {
      this.fileList = fileList
    },

    // 保存编辑信息
    submitForm() {
      let _this = this;
      _this.$refs.formItem.validate(valid => {
        if (valid) {
          if (!this.fileList.length) {
            this.$message.info('请先选取文件!')
            return false
          }
          const fileType = this.fileList.every(item => {
            console.log(item.raw.type)
            return item.raw.type === 'application/zip'
          })
          if (!fileType) {
            this.$message.error('支持扩展名：.zip格式!')
            return false
          }
          const param = new FormData()
          this.fileList.forEach(file => {
            param.append('file', file.raw) // 此处一定是append file.raw 上传文件只需维护fileList file.raw.name要加上
            param.append('fileName', file.name)
            param.append('version', this.formItem.version)
            param.append('versionContent', this.formItem.versionContent)
            param.append('updateContent', this.formItem.updateContent)
          })
          _this.$emit("refreshFn");
          _this.formVisible = false;
          // _this.$https(
          //     {
          //       url: "menu/edit",
          //       method: "put",
          //       authType: this.backToken
          //     },
          //     _this.$qs.stringify(param)
          //   ).then(res => {
          //       if (res.data.status == 200 || res.data.status == 201) {
          //         _this.$message({
          //           type: "success",
          //           message: res.data.message
          //         });
          //         _this.formVisible = false;
          //         _this.$refs["formItem"].resetFields();
          //       } else {
          //         _this.$message({
          //           type: "error",
          //           message: res.data.message
          //         });
          //       }
          //     },
          //     error => {
          //       _this.$message({
          //         type: "error",
          //         message: error
          //       });
          //     }
          //   );
        }
      });
    },
  }
};
</script>

<style lang="less">
@import "../../../../style/dialog.less";
.text-center {
  text-align: center;
}
.custom-dialog {
  .party-form .el-input {
    width: 100%;
  }
}
</style>