<template>
  <!-- 加入/创建团队 -->
  <div class="team-frame">
    <main-page left-arrow @click-left="$router.go(-1)">
      <div class="px-4 pt-14 pb-4">
        <div
          class="rounded bg-indigo-100 text-indigo-500 px-2 py-2 text-sm"
        >批量导入需要先下载下方的批量导入模版，将成员信息全部按要求完成填写后，可选择下方上传信息表，自动识别并添加所有成员。</div>
        <div>
          <div
            class="flex justify-between items-center bg-white rounded px-4 py-3 my-4"
            @click="clickDownload"
          >
            <div>下载模板</div>
            <app-icon slot="right" icon-name="dot" class-name="w-1 h-1 flex  items-center" />
          </div>
          <div class="bg-white rounded px-4 py-3" @click="!file && uploadFile()">
            <div class="flex justify-between items-center">
              <div>上传信息表</div>
              <input
                type="file"
                id="uploadFile"
                ref="uploadFile"
                accept="*/*"
                class="hidden"
                @input="fileHandler"
              />
              <app-icon slot="right" icon-name="dot" class-name="w-1 h-1 flex  items-center" />
            </div>
            <div v-if="file" class="mt-3">
              <div class="flex items-center">
                <div
                  class="w-10 h-10 rounded-md bg-green-600 text-white text-3xl flex items-center justify-center"
                >X</div>
                <div class="ml-2">
                  <div>{{ file.name }}</div>
                  <div class="text-gray-500 text-sm">
                    <span class="mr-2">{{ formatDate(new Date(file.lastModified), 'YYYY/MM/DD') }}</span>
                    <span>{{ formatFileSize(file.size) }}</span>
                  </div>
                </div>
              </div>
              <div class="flex justify-around mt-2">
                <div class="flex flex-col items-center" @click.stop="clickUpload">
                  <img src="@/assets/icons/upload.png" alt />
                  <div class="text-gray-500 text-sm">上传</div>
                </div>
                <div class="flex flex-col items-center" @click.stop="clickDelete">
                  <img src="@/assets/icons/delete.png" alt />
                  <div class="text-gray-500 text-sm">删除</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="absolute flex justify-center bottom-1/4 inset-x-0" v-show="show">
          <div class="bg-gray-700 text-white px-4 py-4 rounded w-1/3 text-center">下载已完成</div>
          <div class="bg-gray-700 text-white px-4 py-4 rounded w-1/3 ml-4 text-center">上传成功</div>
        </div>-->
        <van-popup v-model="show" position="bottom" class="px-4 py-3">
          <div
            v-show="show1"
            class="w-full rounded-full py-2 px-2 text-center bg-gray-500 text-white"
          >上传中{{ progress }}%</div>
          <div
            v-show="show2"
            class="w-full rounded-full py-2 px-2 text-center bg-gray-500 mt-3 text-white"
          >下载中...</div>
        </van-popup>
        <van-overlay :show="show" />
      </div>
    </main-page>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Overlay, Toast } from 'vant';
import { Popup } from 'vant';
import Staff from '@/service/moudles/Staff';
import { Account } from '@/service/base';
import { formatDate } from '@/util/FormatDate';
import { formatFileSize } from '@/util/Common';
import { getUserInfo } from '@/util/Bridge';


Vue.use(Popup);
Vue.use(Overlay);
export default Vue.extend({
  name: 'Import',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    "app-icon": () => import("@/components/common/Icon.vue"),
  },
  created() {
    // console.log(Mock, 'mock')
  },
  data() {
    return {
      show: false,
      show1: false,
      show2: false,
      file: undefined as undefined | File,
      progress: undefined as undefined | number,
    }
  },
  methods: {
    clickDownload() {
      const downloadUrl = process.env.VUE_APP_OSS_TEMPLATE as string;
      const ele = document.createElement('a');
      ele.target = "_self"
      ele.href = downloadUrl;
      ele.download='模板'
      document.body.appendChild(ele)
      ele.click();
      ele.remove();
    },
    formatDate,
    formatFileSize,
    clickDelete() {
      this.file = undefined;
      const fileInput = this.$refs.uploadFile as HTMLInputElement
      fileInput.value = '';
    },
    onProgressChange(e: ProgressEvent) {
      const percent = (e.loaded / e.total);
      this.progress = Number.parseFloat((percent * 100).toFixed(1))
    },
    clickUpload() {
      if (!this.file) return;
      this.show = true;
      this.show1 = true;
      this.progress = 0;
      const entId = JSON.parse(localStorage.getItem('ENT_INFO') as string).id
      Staff.getInstance().addExcel(this.file, entId, this.onProgressChange).then((res: any) => {
        const {data} = res
        if (data.code === this.$global.success) {
          const {failed_num, success_num} = data.data
          this.$dialog.confirm({
            title: '提示',
            message: `尝试添加${failed_num + success_num}名成员，成功添加${success_num}名`,
            confirmButtonText: '确定'
          }).then(() => {
            this.$router.push({ name: "Team" })
          }).catch(() => {})
        }
      }).catch((err) => {
        Toast.fail(err)
      })
    },
    fileHandler(e: InputEvent) {
      const target = e.target as HTMLInputElement
      if (target.files && target.files?.length !== 0) {
        console.log(target.files);
        const file = target.files[0];
        if (file.name.match(/\.xlsx$/)) {
          this.file = file;
        } else {
          Toast.fail('请选择xlsx文件')
        }
      }
    },
    uploadFile() {
      console.log(this.$refs);
      const fileInput = this.$refs.uploadFile as HTMLInputElement
      fileInput.click()
    }
  }
})
</script>

<style lang="less">
</style>