<template>
  <div @click="openDrawer">
    <slot></slot>
  </div>
  <a-drawer
    :visible="visible"
    class="drawerStyle impotergroupleader"
    placement="right"
    width="800px"
  >
    <div class="drawerMain">
      <div class="header">
        <div class="headerTitle">{{ title }}</div>
        <img
          style="width: 29px; height: 29px; cursor: pointer"
          src="../../assets/images/basicinfo/close.png"
          @click="closeDrawer"
        />
      </div>
      <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>
        <button class="btn2" @click="closeDrawer">确定</button>
      </div>
    </div>
  </a-drawer>
</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 visible = ref(false);
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 = () => {
  visible.value = false;
  fileList.value = [];
};

function openDrawer() {
  visible.value = true;
}

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 {
  .drawerMain {
    min-width: 600px;
    margin: 0px 32px 0px 32px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;

    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // background-color: red;
      margin-bottom: 20px;
      flex-shrink: 0;

      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        // margin-left: 24px;
      }
    }

    .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>
