<template>
  <div>
    <div
      class="ykt-msg-box"
      :style="{ top: offset + 30 + 'px', left: offsetleft + 'px' }"
      v-if="isType"
    >
      <el-result>
        <template #extra>
          <div class="ykt-info">{{ infoList[index].msg }}</div>
          <div>
            <el-button :disabled="index == 0" @click="previousStep"
              >上一步</el-button
            >
            <el-button
              type="primary"
              @click="yktNext"
              :disabled="index == infoList.length - 1"
              >下一步</el-button
            ><el-button type="danger" @click="yktEnd">结束</el-button>
          </div>
        </template>
      </el-result>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs } from "@vue/runtime-core";
export default {
  name: "ykt-ui",
  props: {
    infoList: Array,
    indexStep: Number
  },
  setup(props) {
    const state = reactive({
      offset: 0,
      offsetleft: 0,
      index: 0,
      isType: true,
      height: 0,
      width: 0,
    });
    //下一步
    const yktNext = () => {
      state.index += 1;
      if (state.index != 0) {
        let oldname = document.querySelector(
          props.infoList[state.index - 1].elName
        );
        oldname.style.boxShadow = "";
      }
      setupStyle();
    };
    // 上一步
    const previousStep = () => {
      state.index -= 1;
      let oldname = document.querySelector(
        props.infoList[state.index + 1].elName
      );
      oldname.style.boxShadow = "";
      setupStyle();
    };
    // 去除阴影
    //设置阴影
    const setupStyle = () => {
      let name = document.querySelector(props.infoList[state.index].elName);
      name.style.boxShadow = "0px 0px 20px 10px #ccc";
      if (name.offsetTop + 400 <= state.height) {
        state.offset = name.offsetTop;
      } else {
        state.offset = name.offsetTop - 360;
      }
      if (name.offsetLeft + 300 <= state.width) {
        state.offsetleft = name.offsetLeft;
      } else {
        state.offsetleft = name.offsetLeft - 260;
      }
    };
    //结束
    const yktEnd = () => {
      let name = document.querySelector(props.infoList[state.index].elName);
      name.style.boxShadow = "";
      state.isType = false;
    };
    onMounted(() => {
      state.height = window.innerHeight;
      state.width = window.innerWidth;
      state.index = props.indexStep
      setupStyle();
    });
    return { ...toRefs(state), yktNext, setupStyle, yktEnd, previousStep };
  },
};
</script>
<style scoped>
.ykt-msg-box {
  display: flex;
  width: 300px;
  height: 300px;
  display: inline-block;
  margin-top: 10px;
  justify-content: center !important;
  box-shadow: 0px 0px 20px 10px #ccc;
  border-radius: 10px;
  overflow: hidden;
  position: absolute;
  background-color: white;
}
.ykt-info {
  width: 300px;
  margin-bottom: 20px;
  word-wrap: break-word;
  word-break: normal;
  margin-top: -25px;
  height: 100px;
  overflow-y: auto;
  line-height: 25px;
}
</style>