<template>
  <div>
    <div class="upload_layout" @click="initFileUpload">
      <img
        class="layout_icon"
        src="/images/newProductList/upload.png"
        alt=""
      />
      <div class="layout_status">{{ uploadStatusText }}</div>
      <div class="layout_tip">
        源文件支持图片、文件、音频、视频、Word、Excel等…
      </div>
      <div class="layout_tip">文件大小不超过10M</div>
    </div>
    <div class="chain_select">
      <syRadio
        v-for="item in chainSelectAction"
        :key="item.value"
        :label="item.value"
        v-model="chainSelected"
        :disabled="item.disabled"
        >{{ item.text }}</syRadio
      >
    </div>
    <div
      class="upload_process"
      v-if="fileData.name && uploadStatus != UploadStatusType.INIT"
    >
      <div class="process_info">
        <div class="process_img">
          <img
            v-if="
              ['mp3', 'wma', 'wav', 'amr', 'm4a'].includes(
                uploadFileType(fileData.name)
              )
            "
            class="layout_icon"
            src="/images/newProductList/audio_icon.png"
            alt=""
          />
          <img
            v-else-if="
              [
                'wmv',
                'asf',
                'asx',
                'rm',
                'rmvb',
                'mpg',
                'mpeg',
                'mp4',
                '3gp',
                'mov',
                'm4v',
                'avi',
                'mkv',
                'flv',
                'vob',
              ].includes(uploadFileType(fileData.name))
            "
            class="layout_icon"
            src="/images/newProductList/video_icon.png"
            alt=""
          />
          <img
            v-else-if="['doc', 'docx'].includes(uploadFileType(fileData.name))"
            class="layout_icon"
            src="/images/newProductList/word_icon.png"
            alt=""
          />
          <img
            v-else-if="
              ['png', 'jpg', 'jpeg', 'gif'].includes(
                uploadFileType(fileData.name)
              )
            "
            class="layout_icon"
            src="/images/newProductList/img_icon.png"
            alt=""
          />
          <img
            v-else-if="['xls', 'xlsx'].includes(uploadFileType(fileData.name))"
            class="layout_icon"
            src="/images/newProductList/excel_icon.png"
            alt=""
          />
          <img
            v-else-if="['pdf'].includes(uploadFileType(fileData.name))"
            class="layout_icon"
            src="/images/newProductList/pdf_icon.png"
            alt=""
          />
          <img
            v-else-if="['ppt', 'pptx'].includes(uploadFileType(fileData.name))"
            class="layout_icon"
            src="/images/newProductList/ppt_icon.png"
            alt=""
          />
          <img
            v-else-if="['txt'].includes(uploadFileType(fileData.name))"
            class="layout_icon"
            src="/images/newProductList/txt_icon.png"
            alt=""
          />
          <img
            v-else
            class="layout_icon"
            src="/images/newProductList/pass.png"
            alt=""
          />
        </div>
        <div class="process_content">
          <div class="content_info">
            <div class="file_name">{{ fileData.name }}</div>
            <div class="file_size">{{ mapFileSize(fileData.size) }}</div>
            <div class="process_text">已完成 {{ uploadProcessCount }} %</div>
          </div>
          <el-progress
            :percentage="uploadProcessCount"
            :show-text="false"
          ></el-progress>
        </div>
        <div class="process_icon">
          <img
            v-if="uploadStatus == UploadStatusType.LOADING"
            class="layout_icon"
            src="/images/newProductList/cancel.png"
            alt=""
          />
          <img
            v-if="uploadStatus == UploadStatusType.SUCCESS"
            class="layout_icon"
            src="/images/newProductList/success.png"
            alt=""
          />
          <img
            v-if="uploadStatus == UploadStatusType.FAIL"
            class="layout_icon"
            src="/images/newProductList/fail.png"
            alt=""
          />
        </div>
      </div>
      <div
        class="process_tip tip_fail"
        v-if="uploadStatus == UploadStatusType.FAIL"
      >
        <div class="tip_left">上传出错，请重新上传</div>
        <div class="tip_right" @click="onInputUpload()">重新上传</div>
      </div>
      <div
        class="process_tip tip_success"
        v-if="uploadStatus == UploadStatusType.SUCCESS"
      >
        <div></div>
        <div class="tip_right">
          预计扣除次数 <span class="fee">{{ fee }}</span
          >次
        </div>
      </div>
    </div>
    <input type="file" ref="fileUpload" hidden @change="onInputUpload" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage, ElRadio, ElProgress } from "element-plus";
import { syRadio } from "cqk-sy-ui";

enum UploadStatusType {
  INIT = 1,
  LOADING,
  SUCCESS,
  FAIL,
}

export default defineComponent({
  name: "",
  components: {
    ElRadio,
    syRadio,
    ElProgress,
  },
  props: {
    fileData: {
      default: () => {
        return {} as File;
      },
    },
  },
  data() {
    return {
      chainSelectAction: [
        {
          value: 1,
          text: "Chain33",
          disabled: false,
        },
        {
          value: 2,
          text: "IPFS",
          disabled: true,
        },
      ],
      chainSelected: 1,
      UploadStatusType,
      uploadStatus: 1,
      uploadProcessCount: 0,
      fileHash: "",
      fileUrl: "",
      fee: 1,
    };
  },
  computed: {
    uploadStatusText(): string {
      switch (this.uploadStatus) {
        case this.UploadStatusType.INIT:
          return "上传源文件";
        case this.UploadStatusType.LOADING:
          return "文件上传中";
        case this.UploadStatusType.SUCCESS:
          return "重新上传";
        case this.UploadStatusType.FAIL:
          return "重新上传";
        default:
          return "上传源文件";
      }
    },
  },
  methods: {
    /**
     * 根据文件大小计算费用
     * @param size 文件大小
     */
    feeCalcu(size: number) {
      return Math.ceil(size / (0.2 * 1024 * 1024)) + 1;
    },
    mapFileSize(size: number): string {
      if (size / 1024 < 100) {
        return (size / 1024).toFixed(2) + "K";
      } else {
        return (size / 1024 / 1024).toFixed(2) + "M";
      }
    },
    uploadFileType(text: string): string {
      return text
        .slice(text.lastIndexOf(".") + 1, text.length + 1)
        .toLocaleLowerCase();
    },
    initFileUpload() {
      (this.$refs.fileUpload as HTMLInputElement).click();
    },
    async onInputUpload(e?: any) {
      if (e) {
        console.log(e, "show e");
        if (e.target.files[0].size > 10 * 1024 * 1024) {
          ElMessage.warning(`文件最大不能超过10M`);
          return;
        }
        if (
          ![
            "mp3",
            "wma",
            "wav",
            "amr",
            "m4a",
            "wmv",
            "asf",
            "asx",
            "rm",
            "rmvb",
            "mpg",
            "mpeg",
            "mp4",
            "3gp",
            "mov",
            "m4v",
            "avi",
            "mkv",
            "flv",
            "vob",
            "doc",
            "docx",
            "png",
            "jpg",
            "jpeg",
            "gif",
            "xls",
            "xlsx",
            "pdf",
            "ppt",
            "pptx",
            "txt",
          ].includes(this.uploadFileType(e.target.files[0].name))
        ) {
          ElMessage.warning(`不支持此类型文件上传`);
          return;
        }
        this.uploadProcessCount = 100;
        this.uploadStatus = UploadStatusType.LOADING;
        this.uploadStatus = UploadStatusType.SUCCESS;
        this.fee = this.feeCalcu(e.target.files[0].size);
        this.$emit("uploaded", {
          file: e?.target.files[0],
          fileType: this.uploadFileType(e.target.files[0].name),
          chainType: this.chainSelected.toString(),
          fee: this.fee,
        });
        e.target.value = "";
      }
    },
  },
});
</script>

<style scoped lang="scss">
.upload_layout {
  width: 100%;
  height: 158px;
  border: 1px dashed #dae5ff;
  border-radius: var(--border-radius);
  color: #8b8b8b;
  text-align: center;
  background-color: #f6f9ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  .layout_icon {
    margin-bottom: 5px;
  }
  .layout_status {
    color: var(--sy-blue);
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 5px;
  }
  .layout_tip {
    transform: scale(0.9);
    font-size: 12px;
    line-height: 17px;
  }
}
.chain_select {
  margin-top: 15px;
}
.upload_process {
  margin: 20px 0 20px 0;
  .process_info {
    display: flex;
    align-items: center;
    padding: 15px 18px;
    box-shadow: 0px 2px 15px 0px #e7eef3;
    .process_img {
      img {
        width: 24px;
        height: 24px;
      }
    }
    .process_content {
      flex: 1;
      margin: 0 25px;
      .content_info {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        margin-bottom: 5px;
        color: #8b8b8b;
        .file_name {
          color: #353535;
          width: 33.3%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .process_tip {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
  }
  .tip_fail {
    .tip_left {
      color: #ff4848;
    }
    .tip_right {
      color: var(--sy-blue);
      cursor: pointer;
    }
  }
  .tip_success {
    color: #1c2323;
    .fee {
      color: #f6ad00;
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>
