<template>
  <div class="drag" ref="DragWidgetRef">
    <div ref="DragBgRef" class="drag_bg"></div>
    <div ref="DragTextRef" class="drag_text">{{ confirmWords }}</div>
    <div
      ref="DragHandlerRef"
      @mousedown="mousedownFn($event)"
      class="handler"
      :class="{ 'is-success': confirmSuccess }"
      style="position: absolute; top: 0px; left: 0px"
    >
      <el-icon>
        <SuccessFilled v-if="confirmSuccess" />
        <DArrowRight v-else />
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { DArrowRight, SuccessFilled } from "@element-plus/icons-vue";
import { ref, onMounted, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";

const emit = defineEmits(["success"]);
const { t } = useI18n();
const beginClientX = ref(0);
const mouseMoveStata = ref(false);
const maxwidth = ref(0);
const confirmWords = ref(t("sys.login.dragVerify"));
const confirmSuccess = ref(false);

const DragHandlerRef = ref();
const DragBgRef = ref();
const DragTextRef = ref();
const DragWidgetRef = ref();

const mousedownFn = (e: any) => {
  if (!confirmSuccess.value) {
    e.preventDefault && e.preventDefault(); // 阻止文字选中等 浏览器默认事件
    mouseMoveStata.value = true;
    beginClientX.value = e.clientX;
  }
};

const successFunction = () => {
  confirmSuccess.value = true;
  confirmWords.value = t("sys.login.dragVerifySuccess");
  document.getElementsByTagName("html")[0].removeEventListener("mousemove", mouseMoveFn);
  document.getElementsByTagName("html")[0].removeEventListener("mouseup", moseUpFn);
  DragTextRef.value.style.color = "#fff";
  DragHandlerRef.value.style.left = maxwidth.value + "px";
  DragBgRef.value.style.width = maxwidth.value + 10 + "px";
  setTimeout(() => {
    emit("success");
  }, 500);
};

const mouseMoveFn = (e: any) => {
  if (mouseMoveStata.value) {
    let width = e.clientX - beginClientX.value;
    if (width > 0 && width <= maxwidth.value) {
      DragHandlerRef.value.style.left = width + "px";
      DragBgRef.value.style.width = width + 10 + "px";
    } else if (width > maxwidth.value) {
      successFunction();
    }
  }
};

const moseUpFn = (e: any) => {
  mouseMoveStata.value = false;
  let width = e.clientX - beginClientX.value;
  if (width < maxwidth.value) {
    DragHandlerRef.value.style.left = 0 + "px";
    DragBgRef.value.style.width = 10 + "px";
  }
};

onMounted(() => {
  maxwidth.value = DragWidgetRef.value.clientWidth - DragHandlerRef.value.clientWidth;
  document.getElementsByTagName("html")[0].addEventListener("mousemove", mouseMoveFn);
  document.getElementsByTagName("html")[0].addEventListener("mouseup", moseUpFn);
});

onUnmounted(() => {
  document.getElementsByTagName("html")[0].removeEventListener("mousemove", mouseMoveFn);
  document.getElementsByTagName("html")[0].removeEventListener("mouseup", moseUpFn);
});

defineExpose({ confirmSuccess });
// export default {
//   data() {
//     return {
//       beginClientX: 0 /*距离屏幕左端距离*/,
//       mouseMoveStata: false /*触发拖动状态  判断*/,
//       maxwidth: "" /*拖动最大宽度，依据滑块宽度算出来的*/,
//       confirmWords: "拖动滑块验证" /*滑块文字*/,
//       confirmSuccess: false /*验证成功判断*/
//     };
//   },
//   methods: {
//     mousedownFn: function (e) {
//       if (!this.confirmSuccess) {
//         e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件
//         this.mouseMoveStata = true;
//         this.beginClientX = e.clientX;
//       }
//     }, //mousedoen 事件
//     successFunction() {
//       this.confirmSuccess = true;
//       this.confirmWords = "验证通过";
//       if (window.addEventListener) {
//         document.getElementsByTagName("html")[0].removeEventListener("mousemove", this.mouseMoveFn);
//         document.getElementsByTagName("html")[0].removeEventListener("mouseup", this.moseUpFn);
//       } else {
//         document.getElementsByTagName("html")[0].removeEventListener("mouseup", () => {});
//       }
//       document.getElementsByClassName("drag_text")[0].style.color = "#fff";
//       document.getElementsByClassName("handler")[0].style.left = this.maxwidth + "px";
//       document.getElementsByClassName("drag_bg")[0].style.width = this.maxwidth + 10 + "px";
//     }, //验证成功函数
//     mouseMoveFn(e) {
//       if (this.mouseMoveStata) {
//         let width = e.clientX - this.beginClientX;
//         if (width > 0 && width <= this.maxwidth) {
//           document.getElementsByClassName("handler")[0].style.left = width + "px";
//           document.getElementsByClassName("drag_bg")[0].style.width = width + 10 + "px";
//         } else if (width > this.maxwidth) {
//           this.successFunction();
//         }
//       }
//     }, //mousemove事件
//     moseUpFn(e) {
//       this.mouseMoveStata = false;
//       let width = e.clientX - this.beginClientX;
//       if (width < this.maxwidth) {
//         document.getElementsByClassName("handler")[0].style.left = 0 + "px";
//         document.getElementsByClassName("drag_bg")[0].style.width = 10 + "px";
//       }
//     } //mouseup事件
//   },
//   mounted() {
//     this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
//     document.getElementsByTagName("html")[0].addEventListener("mousemove", this.mouseMoveFn);
//     document.getElementsByTagName("html")[0].addEventListener("mouseup", this.moseUpFn);
//   }
// };
</script>

<style scoped lang="scss">
.drag {
  position: relative;
  background-color: $color-gray-5;
  width: 100%;
  height: 38px;
  line-height: 38px;
  text-align: center;
  border-radius: 4px;

  background: -webkit-linear-gradient(
    0deg,
    $color-gray-5,
    $color-gray-5 25%,
    $color-gray-5 50%,
    $color-gray-2 55%,
    $color-gray-5 60%,
    $color-gray-5 80%,
    $color-gray-5 95%,
    $color-gray-5
  );
  -webkit-background-size: 200% 100%;
  -moz-background-size: 200% 100%;
  -o-background-size: 200% 100%;
  background-size: 200% 100%;
  -webkit-animation: gf-gx 6s infinite linear;
  -moz-animation: gf-gx 6s infinite linear;
  -o-animation: gf-gx 6s infinite linear;
  animation: gf-gx 6s infinite linear;
}

@keyframes gf-gx {
  0% {
    /* 移动背景位置 */
    background-position: 0 0;
  }

  100% {
    background-position: -400% 0;
  }
}
.handler {
  width: 40px;
  height: 36px;
  border: 1px solid $color-gray-6;
  cursor: move;
  border-radius: 4px;
  background: $color-gray-1;
  .el-icon {
    color: $color-gray-6;
  }

  &.is-success {
    .el-icon {
      color: $color-polar-green-5;
    }
  }
}
.drag_bg {
  background-color: #7ac23c;
  height: 38px;
  width: 0px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.drag_text {
  position: absolute;
  top: 0px;
  width: 100%;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  color: $color-gray-3;
}
</style>
