<template>
  <div>
    <el-form
      inline
      :model="form"
      :rules="rules"
      ref="form"
      class="form-wrap dialog-info"
      label-width="100px">

      <el-form-item
        label="文件名称"
        prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item
        label="类型"
        prop="type">
        <el-select v-model="form.type">
          <el-option
            label="其他文件"
            :value="0"></el-option>
          <el-option
            label="软件"
            :value="1"></el-option>
          <el-option
            label="驱动"
            :value="2"></el-option>
          <el-option
            label="文档"
            :value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="下载地址"
        prop="fileUrl">
        <div style="display: flex; align-items: center;">
          <i
            v-if="form.fileUrl"
            class="el-icon-document"
            title="复制文件地址"
            @click="copyFileUrl"></i>
          <el-upload
            style="margin-left: 10px;"
            :headers="uploadHeaders"
            :show-file-list="false"
            :action="uploadUrl"
            :auto-upload="true"
            :on-success="onFileUploadSuccess"
          >
            <i
              class="el-icon-upload"
              title="上传文件"></i>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
    <div class="dialog-btn-wrap">
      <el-button @click="handleClose">关闭</el-button>
      <el-button
        @click="submit"
        type="primary">保存</el-button>
    </div>
  </div>
</template>

<script>
import { updateUploadFile } from '@/api/platform'

export default {
  props: {
    accountItem: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      visible: false,
      roleList: [],
      form: {
        id: '',
        name: '',
        type: 0,
        fileUrl: ''
      },
      uploadUrl: '/platform/file/upload',
      uploadHeaders: {
        'SaToken-platform': localStorage.platToken
      },
      rules: {}
    }
  },
  methods: {
    handleClose () {
      this.$parent.handleClose()
    },
    reset () {
      this.$refs.form.resetFields()
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.updateUploadFile()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onFileUploadSuccess (response, file, fileList) {
      console.log('文件上传成功:', response)
      if (response.code === '200') {
        this.$message.success('文件上传成功')
        this.form.fileUrl = response.data
      } else {
        this.$message.error('文件上传失败: ' + response.message)
      }
    },
    copyFileUrl () {
      this.copyTextToClipboard(this.form.fileUrl)
    },
    updateUploadFile () {
      if (!this.form.name) {
        this.$message.error('请输入文件名称')
        return
      }
      if (!this.form.fileUrl) {
        this.$message.error('请上传文件')
        return
      }
      updateUploadFile(this.form).then(res => {
        this.$message.success('保存成功')
        this.reset()
        this.handleClose()
        this.$emit('updateList')
      })
    }
  },
  watch: {
    async visible (val) {
      if (!val) return
      // 重置表单
      this.reset()
      // 初始化编辑数据
      if (this.accountItem) {
        const { id, name, type, fileUrl } = this.accountItem
        this.form = {
          id,
          name,
          type,
          fileUrl
        }
      }
    }
  }
}
</script>

<style scoped>
.btn-wrap{
  padding-right: 20px;
}
</style>
