<template>
  <div style="display: flex">
    <nm-file-upload v-model="value_" v-bind="options" :disabled="disabled"> </nm-file-upload>
    <nm-button class="btn-confirm" type="success" text="确认" @click="handlerConfirm" />
  </div>
</template>
<script>
import { mapState } from 'vuex'
// 接口
const api = $api.tPM.tpmProducts

export default {
  data() {
    return {
      value_: '',
      options: {
        module: 'Tpm',
        group: 'TpmProductFiles',
        maxSize: '10Mb',
        width: '100px',
        height: '120px',
        iconSize: '3em',
        accept: 'xls,xlsx',
      },
    }
  },
  props: {
    value: String,
    disabled: Boolean,
  },
  watch: {
    value(val) {
      if (this.value_ != val) this.value_ = val
    },
    value_(val) {
      if (this.value != val) this.$emit('input', val)
    },
  },
  computed: {
    ...mapState('app/account', { userId: (s) => s.id }),
  },
  methods: {
    handlerConfirm() {
      if (this.value_ == '') {
        this._warning('请选择要上传的文件')
        return false
      }
      api.improtTpmData(this.value_, this.userId).then((rst) => {
        this._success(rst)
        this.value_ = ''
      })
    },
    // beforeUpload(file) {
    //   const size10m = file.size / 1024 / 1024 < 10
    //   if (!size10m) {
    //     this._warning('上传文件大小不能雨大10M')
    //   }
    // },
  },
}
</script>
<style lang="scss">
.btn-confirm {
  margin-left: 20px;
}
</style>