<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=".pdf"
    />
    <label for="upload">
      <div
        ref="uploadBox"
        class="
          upload-box
          text-center
          flex
          items-center
          justify-center
          mx-auto
          text-font-white
        "
      >
        <img
          v-if="!fileName"
          src="@/assets/icons/upload.png"
          alt=""
          class="mx-auto"
        />
        <img v-else src="@/assets/icons/file.png" alt="" class="mx-auto" />
      </div>
    </label>
    <div class="text-center text-font-white">
      <div v-if="!fileName">支持扩展名格式：PDF</div>
      <div v-if="fileName">
        {{ fileName }}
      </div>
      <label for="upload">
        <div v-if="fileName">重新上传</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">

import Vue from "vue";
import { mapMutations, mapState } from "vuex";
export default Vue.extend({
  data() {
    return {};
  },
  components: {
    "Layout-Child": () => import("@/layout/Child.vue"),
    "app-btn": () => import("@/components/common/Btn.vue"),

  },
  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 {
        const ret = await this.$service.nftService.getMd5(file);
        this.setState({
          fileName: file.name,
          fileHash: ret,
          file: file
        });
      } catch (err) {
        console.log(err);
        
      }
    },
  },
});
</script>
<style scoped>
.upload-box {
  width: 140px;
  height: 71px;
  background: #1d2649;
  border-radius: 15px;
  border: 1px solid #0078ff;
}
</style>