<template>
  <div class="impotergroupleader">
    <div class="main">
      <div class="minatitl" v-if="templateUrl">
        <div class="up1">请下载</div>
        <a
          class="up2"
          :href="templateUrl"
          target="_blank"
          style="cursor: pointer"
          >模板</a
        >
        <div class="up1">，按要求填写数据并导入</div>
      </div>
      <div class="upload">
        <div class="text">上传：</div>
        <div class="right">
          <div style="height: 176px; margin-bottom: 20px">
            <a-upload-dragger
              :data="data"
              :multiple="true"
              :name="name"
              :headers="headers"
              :accept="accept"
              :action="uploadUrl"
              @change="handleChange"
              v-model:file-list="fileList"
            >
              <p class="ant-upload-drag-icon">
                <inbox-outlined></inbox-outlined>
              </p>
              <p class="ant-upload-text">点击或将文件拖拽到此处上传</p>
              <p class="ant-upload-hint">支持扩展名：.xls/.xlsx</p>
              <template #itemRender="{ file }">
                <div class="loadstate">
                  <div class="loadborder">
                    <div class="content">
                      <div class="img"></div>
                      <div class="timebox">
                        <div class="timetop">
                          <div class="tit">{{ file.name }}</div>
                          <div class="stateloading">
                            {{
                              {
                                done: "上传成功",
                                uploading: "正在上传",
                                error: "上传失败",
                                removed: "正在上传",
                              }[file.status]
                            }}
                          </div>
                        </div>
                        <a-progress :percent="file.percent" />
                      </div>
                      <div class="curloading">
                        <div
                          style="
                            color: #387df7;
                            margin-left: 20px;
                            cursor: pointer;
                          "
                          v-if="file.uploadState?.status === 'FAILED'"
                          @click="downloadErrorData(file.uploadState?.url)"
                        >
                          下载失败数据
                        </div>
                      </div>
                    </div>
                    <a-spin
                      :spinning="true"
                      v-if="file.uploadState?.status === 'START'"
                    />
                    <div
                      :class="
                        file.uploadState?.status === 'SUCCESS'
                          ? 'succebox'
                          : 'defeatbox'
                      "
                    >
                      <img
                        style="width: 14px; height: 14px; margin-left: 16px"
                        :src="
                          file.uploadState?.status === 'SUCCESS' ? success : err
                        "
                      />
                      <div class="tacl">
                        {{
                          file.uploadState?.successNum || 0
                        }}条数据导入成功，{{
                          file.uploadState?.failedNum || 0
                        }}条数据导入失败
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </a-upload-dragger>
          </div>
        </div>
      </div>
    </div>
    <div class="btnn">
      <button class="btn2" @click="closeDrawer">取消</button>
    </div>
  </div>
</template>

<script setup>
import { defineEmits, defineProps, ref } from "vue";
import { message } from "ant-design-vue";
import { getImportStatus } from "@/api/index1";
import { useTimeout } from "@/utils/useCommon";
import err from "@/assets/images/err.png";
import success from "@/assets/images/success.png";
import { getCookieForName } from "@/api/method";

const props = defineProps({
  url: String,
  name: {
    type: String,
    defalut: "file",
  },
  title: String,
  accept: String,
  fileType: Object,
  data: Object,
  templateUrl: String,
});
const emit = defineEmits({});
const fileList = ref([]);
const headers = { token: getCookieForName("token") };
const uploadUrl = ref(process.env.VUE_APP_BASE_API + props.url);
const { start } = useTimeout(async ({ uuid, file }) => {
  const {
    data: { data: upData },
  } = await getImportStatus(uuid);
  file.uploadState = upData;
  fileList.value = [...fileList.value];
  if (upData && upData.status !== "START" && upData.status !== "NULL") {
    emit("change", "end");
    // message.success("导入成功");
    // closeDrawer();
    throw Error("查询任务结束");
  }
}, 1000);

const closeDrawer = () => {
  fileList.value = [];
  emit('close')
};

function downloadErrorData(url) {
  window.open(process.env.VUE_APP_FILE_PATH + url);
}

function handleChange({ file }) {
  emit("change", "start");
  file && file.response && start({ uuid: file.response.data, file });
}
</script>

<style scoped lang="scss">
.impotergroupleader > .ant-drawer-content-wrapper {
  min-width: 800px !important;
  width: 800px !important;
}
.impotergroupleader {
  min-width: 600px;
  margin: 0px 32px 0px 32px;
  overflow-x: auto;
  display: flex;
  flex-direction: column;

  .main {
    .minatitl {
      display: flex;

      .up1 {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
      }

      .up2 {
        font-size: 16px;
        font-weight: 400;
        color: #4ea6ff;
        margin-left: 4px;
      }
    }

    .upload {
      margin-top: 32px;
      display: flex;

      .text {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
      }

      .right {
        margin-left: 6px;
        width: 500px;

        .load {
          width: 500px;
          height: 176px;
          background: #f5f9fd;
          border-radius: 4px;
          // opacity: 0.3;
          border: 1px dashed #caddfd;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 20px;

          .cloud {
            margin-top: 52px;
            width: 28px;
            height: 28px;
            background-image: url(../../assets/images/basicinfo/cloud.png);
          }

          .tip {
            font-size: 14px;
            font-weight: 400;
            color: #4ea6ff;
            margin-top: 15px;
            cursor: pointer;
          }

          .tipz {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            margin-top: 10px;
          }
        }

        .loadstate {
          width: 500px;
          margin-bottom: 50px;

          .loadborder {
            width: 500px;
            height: 173px;
            border-radius: 4px;
            border: 1px dashed #eaeaea;
            margin-bottom: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;

            .content {
              display: flex;
              margin-left: 20px;
              position: relative;

              .defeat {
                width: 262px;
                padding: 10px 20px;
                position: absolute;
                left: 46px;
                top: 42px;
                font-size: 14px;
                font-weight: 500;
                height: 32px;
                border-radius: 2px;
                border: 1px solid #387df7;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;

                .detext {
                  font-size: 14px;
                  font-weight: 400;
                  color: #387df7;
                }
              }

              .img {
                width: 30px;
                height: 34px;
                background-image: url(../../assets/images/basicinfo/exl.png);
              }

              .timebox {
                margin-left: 15px;
                margin-top: -5px;

                .timetop {
                  display: flex;
                  width: 262px;
                  justify-content: space-between;
                  // margin-bottom: 8px;
                  .tit {
                    font-size: 14px;
                    font-weight: 400;
                    color: #333333;
                  }

                  .stateloading {
                    font-size: 14px;
                    font-weight: 400;
                    color: #4ea6ff;
                  }

                  .statedefeat {
                    font-size: 14px;
                    font-weight: 400;
                    color: #ff7474;
                  }

                  .statesucce {
                    font-size: 14px;
                    font-weight: 400;
                    color: #35ae69;
                  }
                }

                .prog {
                  width: 262px;
                  height: 5px;
                  background: #eaf1fe;
                  border-radius: 4px;

                  .inprogloading {
                    width: 55%;
                    height: 5px;
                    border-radius: 4px;

                    background: #4ea6ff;
                  }

                  //下载失败条
                  .inprogdefeat {
                    width: 55%;
                    height: 5px;
                    border-radius: 4px;

                    background: #ff7474;
                  }

                  //下载成功条
                  .inprogsucce {
                    width: 100%;
                    height: 5px;
                    border-radius: 4px;

                    background: #57c887;
                  }
                }
              }

              .curloading {
                margin-left: 15px;
                margin-top: 15px;
                display: flex;

                .cur {
                  font-size: 14px;
                  font-weight: 400;
                  color: #333333;
                }

                .cancel {
                  font-size: 14px;
                  font-weight: 400;
                  color: #387df7;
                }
              }
            }

            .downloadErr {
              width: 120px;
              height: 32px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 2px;
              border: 1px solid #387df7;
              font-size: 14px;
              font-weight: 400;
              color: #387df7;
              line-height: 20px;
              cursor: pointer;
              margin-left: 66px;
              margin-top: 16px;
              position: absolute;
              bottom: 28px;
            }
          }

          .defeatbox {
            width: 500px;
            height: 40px;
            margin-top: 20px;
            background: rgba(255, 116, 116, 0.1);
            border: 1px solid #ff7474;
            display: flex;
            align-items: center;

            .lefimg {
              width: 14px;
              height: 14px;
              margin-right: 8px;
              background-size: 100%;
            }

            .tacl {
              font-size: 14px;
              font-weight: 400;
              margin-left: 17px;
              color: #ff7474;
            }
          }

          .succebox {
            width: 500px;
            height: 40px;
            background: rgba(53, 174, 105, 0.1);
            border: 1px solid #35ae69;
            display: flex;
            align-items: center;

            .lefimg {
              width: 14px;
              height: 14px;
              margin-left: 17px;
              margin-right: 8px;
              background-size: 100%;
            }

            .tacl {
              font-size: 14px;
              font-weight: 400;

              color: rgba(0, 0, 0, 0.65);
            }
          }
        }
      }
    }
  }

  .btnn {
    height: 72px;
    width: 100%;
    position: absolute;
    background-color: #fff;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);

    .btn1 {
      width: 100px;
      height: 40px;
      border: 1px solid #4ea6ff;
      border-radius: 8px;
      color: #4ea6ff;
      background-color: #fff;
      cursor: pointer;
    }

    .btn2 {
      cursor: pointer;
      width: 100px;
      height: 40px;
      background: #4ea6ff;
      border-radius: 8px;
      border: 0;
      margin-left: 15px;
      color: #fff;
    }
  }
}
</style>
