<template>
  <tf-dialog v-bind="$attrs" v-on="listeners" @submit="onSubmit" :loading="loading" height="234px">
    <el-form class="form" ref="form" v-bind="{ labelWidth: 'auto', size: 'small' }" :model="formData" :rules="rules">
      <el-form-item required prop="fileList">
        <el-upload
          :on-remove="handleRemove"
          :auto-upload="false"
          :file-list="formData.fileList"
          :on-change="onFileChange"
          action="whatever"
          accept=".xlsx,.xls"
          class="upload"
          :disabled="loading"
        >
          <div slot="tip" class="text">⚠️ 注意：请上传.xlsx， .xls格式的文件，且文件大小不能超10MB</div>
          <el-button size="small" type="primary" :disabled="loading"> 点击上传 </el-button>
        </el-upload>
        <div>
          <el-button type="text" style="margin-top: 1em">
            <a :href="xlsxString" download="降雨量模板.xlsx">下载降雨量模板</a>
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </tf-dialog>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import { ElForm } from 'element-ui/types/form'
  import { ElUploadInternalFileDetail } from 'element-ui/types/upload'
  import xlsxString from './xlsx_template'

  @Component({ name: 'TeamForm', components: {} })
  export default class TeamForm extends Vue {
    @Prop({ type: Boolean, default: false }) loading!: boolean
    $refs!: { form: ElForm }
    xlsxString: string = xlsxString
    formData: { fileList: ElUploadInternalFileDetail[] } = { fileList: [] }
    rules = {
      fileList: [
        {
          required: true,
          validator: (_, value, callback) => {
            if (value.length !== 1) callback(new Error('请选择文件'))
            else callback()
          }
        }
      ]
    }
    get listeners() {
      const { submit, ...rest } = this.$listeners
      return rest
    }
    onFileChange(file) {
      this.$refs.form.clearValidate()
      const allowedTypes = [
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'application/vnd.ms-excel'
      ]
      const isLt10M = file.size / 1024 / 1024 < 10
      let pass = true

      if (
        !allowedTypes.includes(file.raw.type) &&
        !String(file.raw.type).endsWith('.amr') &&
        !String(file.raw.type).startsWith('audio')
      ) {
        this.$message.error('上传文件只能是 JPG/JPEG、png、amr 格式!')
        pass = false
      }

      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过 10MB!')
        pass = false
      }

      if (pass) this.formData.fileList = [file]
    }

    handleRemove() {
      this.formData.fileList = []
    }

    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const [file] = this.formData.fileList || []
          const { raw } = file || {}
          this.$emit('submit', raw)
        }
      })
    }
  }
</script>
<style lang="scss" scoped>
  .upload {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .text {
      font-size: $--font-size-extra-small;
      margin-left: 1em;
      line-height: 1.4;
    }
    .el-upload {
      flex: 0 0 80px;
    }
    .text {
      flex: 0 0 calc(100% - 80px - 1em);
    }
    // .el-upload-list {
    //   flex: 1 1 100%;
    //   .file-list {
    //     font-size: 14px;
    //     .name {
    //       cursor: pointer;
    //       &:hover {
    //         color: $--color-primary;
    //       }
    //     }
    //     .el-button {
    //       color: $--color-info;
    //       padding: 5px;
    //       &:hover {
    //         color: $--color-primary;
    //       }
    //     }
    //   }
    // }
  }
</style>
