
<template>
  <Layout-Child class="page-scroll text-center">
    <div class="text-font-white mt-20 text-center mb-20">请上传剧本附件</div>
    <input
      type="file"
      id="upload"
      class="hidden"
      @change="handleFileChange"
      ref="inputFile"
      accept="application/pdf"
    />
    <label for="upload" class="inline-block">
      <div
        ref="uploadBox"
        class="
          upload-box
          text-center
          flex
          items-center
          justify-center
          text-font-white
        "
      >
        <img
          v-if="status === uploadStatus.NULL"
          src="@/assets/icons/upload.png"
          alt=""
          class="mx-auto"
        />
        <img
          v-else-if="status === uploadStatus.success"
          src="@/assets/icons/file.png"
          alt=""
          class="mx-auto"
        />
        <Loading type="spiner" v-else-if="status === uploadStatus.uploading" />
        <div v-else-if="status === uploadStatus.failed">上传失败</div>
      </div>
    </label>
    <div class="text-center text-font-white">
      <div v-if="!fileName" class="mt-2">支持扩展名格式：PDF</div>
      <div v-if="fileName" class="mt-2">
        {{ fileName }}
      </div>
      <label for="upload" class="mt-2">
        <div
          v-if="
            status === uploadStatus.failed || status === uploadStatus.success
          "
          style="color: #0076ff"
          class="inline-block"
        >
          重新上传
        </div>
      </label>
    </div>
    <div class="flex justify-between fixed bottom-0 left-0 right-0">
      <app-btn
        text="取消"
        class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue"
        border="none"
        @btnClicked="$router.back()"
      ></app-btn>
      <app-btn
        text="确定"
        class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue"
        border="none"
        :disabled="nextBtnDisabled"
        @btnClicked="$router.back()"
      ></app-btn>
    </div>
  </Layout-Child>
</template>

<script lang="ts">
/* eslint-disable */
import Vue from "vue";
import { Uploader, Loading } from "vant";
import { mapMutations, mapState } from "vuex";

enum uploadStatus {
  NULL,
  uploading,
  failed,
  success,
}

export default Vue.extend({
  data() {
    return {
      fileList: [],
      uploading: false,
      uploadStatus,
      status: uploadStatus.NULL,
    };
  },
  components: {
    "Layout-Child": () => import("@/layout/Child.vue"),
    "app-btn": () => import("@/components/common/Btn.vue"),
    Uploader,
    Loading,
  },
  computed: {
    ...mapState("create", ["fileName"]),
    nextBtnDisabled(): boolean {
      return !this.fileName;
    },
  },
  methods: {
    handleFileChange() {
      const ele = this.$refs.inputFile as HTMLInputElement;
      const files = ele.files;
      if (files && files.length >= 1) {
        this.afterRead(files[0]);
      }
    },
    ...mapMutations("create", {
      setState: "SET_STATE",
    }),
    async afterRead(file: File) {
      try {
        this.status = uploadStatus.uploading;
        const ret = await this.$service.nftService.getMd5(file);
        this.setState({
          fileName: file.name,
          fileHash: ret,
          file: file,
        });
        this.status = uploadStatus.success;
      } catch (err) {
        this.status = uploadStatus.failed;
      }
    },
    afterRead2(file: any) {
      file.status = "uploading";
      file.message = "上传中...";

      setTimeout(() => {
        file.status = "failed";
        file.message = "上传失败";
      }, 1000);
    },
  },
});
</script>
<style scoped>
.upload-box {
  width: 140px;
  height: 71px;
  background: #1d2649;
  border-radius: 15px;
  border: 1px solid #0078ff;
}
</style>