<template>
  <!-- 导入码单 -->
  <modal v-model="modal" class-name="vertical-center-modal" width="500px">
    <div class="title" slot="header">上传发票</div>
    <div class="footer" slot="footer">
      <Button @click="cfm" class="btn" type="primary" size="small">提交</Button>
      <Button @click="cancel" class="btn">取消</Button>
    </div>
    <div class="sub-content">
      <div class="wrap">
        <div class="row">
          <div class="col">
            <div class="label">金额：</div>
            <div class="value">
              <InputNumber :min="1" v-model="form.amount" style="width: 100px"></InputNumber>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col" style="align-items: center">
            <div class="label">发票：</div>

            <Upload action="" ref="uploadFileFlag" :before-upload="beforeFile">
              <Button icon="ios-cloud-upload-outline">
                上传文件
              </Button>
            </Upload>
          </div>
        </div>
        <div class="row" v-if="form.fileName">
          <div class="col" style="position:relative;">
            {{ form.fileName }}
            <Icon type="md-close" style="position:absolute;right: 0;" @click="removeFile" />
          </div>
        </div>
      </div>
    </div>
  </modal>
</template>

<script>
import { UploadBase64 } from '@/api/upload'

export default {
  name: 'upload-modal',
  data () {
    return {
      modal: false,
      importFileName: '',
      form: {
        amount: 1
      }
    }
  },
  watch: {
    value: {
      handler (n) {
        this.modal = n
      },
      immediate: true
    },
    modal (n) {
      this.$emit('input', n)
      if (n) {
        this.form = {
          amount: 1
        }
      }
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  methods: {
    cfm () {
      if (!this.form.amount) {
        return this.$Message.error('请输入金额！')
      }
      if (!this.form.filePath) {
        return this.$Message.error('请上传文件！')
      }
      this.$emit('upload-bill', this.form)
    },
    cancel () {
      this.form = {}
      this.modal = false
    },
    removeFile () {
      this.form.fileName = ''
      this.form.filePath = ''
      this.form.fileSize = ''
    },
    beforeFile (file) {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (event) => {
        UploadBase64({
          fileBase64: event.srcElement.result,
          fileName: file.name,
          floder: 'order'
        }).then(res => {
          if (res.code === 0) {
            this.$set(this.form, 'fileSize', file.size)
            this.$set(this.form, 'fileName', file.name)
            this.$set(this.form, 'filePath', res.result)
          }
        })
      }
      return false
    }
  }
}
</script>

<style lang="less" scoped>
  .row {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    .col {
      flex: 1;
      display: flex;
      align-items: center;
      .value {
        flex: 1;
      }
    }
  }
</style>
