<template>
  <div class="mask">
    <div class="header">
      <span
        @click="
          () => {
            stopTopicsAudio()
            $emit('close');
          }
        "
        class="close-text"
        >关闭</span
      >
      <div class="header-tip">
        <img class="floader" src="@/assets/img/floder.png" />
        <div class="title">
          {{
            type == 0
              ? "随机播放" + directives + "条灯光"
              : "播放单个组合：" + comTitle
          }}{{ title || "" }}
        </div>
      </div>
    </div>
    <div class="mid">
      <composeTopicsMaskList
        ref="mid"
        :list="type == 0 ? randSingleList : randComlist"
      />
    </div>
    <!-- 前进,倒退 -->
    <div class="bottom">
      <div class="bottom-container">
        <div @click="stopTopicsAudio" class="timeOut">暂停</div>
        <div
          @click="
            () => {
              nextGroup();
            }
          "
          class="nextGroup"
        >
          下一组
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import composeTopicsMaskList from "./composeTopicsMaskList.vue";
import utils from "@/utils/index";
import api from "@/api/index";
export default {
  // setup(props, { emit }) {
  // 	let mid = ref(null);
  // 	const store = useStore();
  // 	let randComlist = ref([]);
  // 	let randComlistIndex = ref(0);
  // 	let randSingleListList = ref(0);
  // 	let randSingleList = ref([]);
  // 	let type = store.state.lightConfig.type as number;
  // 	let directives = store.state.lightConfig.directives;
  // 	let newComList: lightingCombinationListResRow[];
  // 	// onMounted(() => {
  // 	// 	console.log(mid.value,"xx");
  // 	// });
  // 	let stopTopicsAudio = () => {
  // 		if (mid) {
  // 			console.log(mid);
  // 			mid.value.pauseAudioLoop();

  // 			mid.value.listIndex = -1;
  // 		}
  // 	};
  // 	const nextGroup = () => {
  // 		if (type == 0) {
  // 			let copySingleList = [...props.singleList]
  // 			randComlistIndex.value = randComlistIndex.value + 1;
  // 			let arrEnd = copySingleList.pop();
  // 			let arrBegin = copySingleList.shift();
  // 			let arr = copySingleList.sort((a, b) => Math.random() - 0.5);
  // 			let arrMid = arr.slice(0, directives);
  // 			randSingleList.value = [arrBegin, ...arrMid, arrEnd];
  // 		} else {
  // 			if (randComlistIndex.value + 1 >= props.comList.length) {
  // 				randComlistIndex.value = 0;
  // 			} else {
  // 				randComlistIndex.value = randComlistIndex.value + 1;
  // 			}
  // 			lightingCombinationId(newComList[randComlistIndex.value].id).then((res) => {
  // 				randComlist.value = res.data;
  // 			});
  // 		}
  // 	};
  // 	watch(
  // 		() => props.comList,
  // 		(val, oldValue) => {
  // 			if (type == 1) {
  // 				console.log("辩护了");
  // 				let arr = val?.sort((a, b) => Math.random() - 0.5);
  // 				newComList = arr;
  // 				if (arr && arr.length > 0) {
  // 					lightingCombinationId(arr[randComlistIndex.value].id).then((res) => {
  // 						randComlist.value = res.data;
  // 					});
  // 				}
  // 			}

  // 			/* ... */
  // 		},
  // 		{
  // 			immediate: true,
  // 		}
  // 	);

  // 	watch(
  // 		() => props.singleList,
  // 		(val, oldValue) => {
  // 			if (type == 0) {
  // 				let copyVal = [...val]
  // 				let arrEnd = copyVal.pop();
  // 				let arrBegin =copyVal.shift();
  // 				let arr = [...copyVal].sort((a, b) => Math.random() - 0.5);
  // 				let arrMid = arr.slice(0, directives);
  // 				arr = [arrBegin, ...arrMid, arrEnd];
  // 				randSingleList.value = arr
  // 			}

  // 			/* ... */
  // 		},
  // 		{
  // 			immediate: true,
  // 		}
  // 	);

  // 	return {
  // 		nextGroup,
  // 		randSingleListList,
  // 		randSingleList,
  // 		emit,
  // 		randComlistIndex,
  // 		props,
  // 		randComlist,
  // 		store,
  // 		type,
  // 		mid,
  // 		directives,
  // 		stopTopicsAudio,
  // 	};
  // },
  data() {
    return {
      randComlist: [],
      randSingleList: [],
      randComlistIndex: 0,
      randSingleListList: 0,
      newComList: [],
      audio: {},
      type: Number(this.$store.state.user.lightConfig.type),
      directives: Number(this.$store.state.user.lightConfig.directives),
    };
  },
  methods: {
    stopTopicsAudio() {
   
      this.audio.stop();
    },
    createRandSingleList() {
      let directives = this.$store.state.user.lightConfig.directives;
      let singleList = [...this.singleList];
      let end = singleList.pop();
      let start = singleList.shift();
      let mid = singleList.sort((a, b) => Math.random() - 0.5);
      return [start, ...mid.slice(0, directives), end];
    },
    nextGroup() {
      if (this.$store.state.user.lightConfig.type == 0) {
        this.randSingleList = this.createRandSingleList();
        this.$refs["mid"].init()
      } else {
        if (this.randComlistIndex + 1 >= this.comList.length) {
          this.randComlistIndex = 0;
        } else {
          this.randComlistIndex = this.randComlistIndex + 1;
        }
        api.open
          .lightingCombinationId(this.newComList[this.randComlistIndex].id)
          .then((res) => {
            this.randComlist = res.data;
            console.log(this.$refs["mid"])
            this.$refs["mid"].init()
          });
      }
    },
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    comList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    singleList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  computed: {
    comTitle() {
      if (
        this.comList &&
        this.comList.length > 0 &&
        this.randComlistIndex < this.comList.length
      ) {
        return this.newComList[this.randComlistIndex].titile;
      } else {
        return "";
      }
    },

    // randComList():lightingCombinationListResRow[]{
    // 	let arr = this.comList.sort((a, b) => Math.random() - 0.5);
    // 	return arr
    // }
  },
  components: {
    composeTopicsMaskList,
  },
  mounted() {
    this.audio = utils.wxUtils.getGlobAudio();
    this.randSingleList = this.createRandSingleList();
    this.newComList = this.comList.sort((a, b) => Math.random() - 0.5);
    console.log(this.newComList)
    api.open.lightingCombinationId(this.newComList[0].id).then((res) => {
      this.randComlist = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.mask {
  position: absolute;
  background: #fff;
  width: 100vw;
  height: 100%;
  z-index: 1000;
  top: 0;

  .close {
    position: relative;
  }
  .close-text {
    color: #01c18d;
    font-size: 14px;
    position: absolute;
    right: 25px;
    margin-top: 10px;
  }
  .floader {
    width: 45px;
    height: 45px;
    margin-top: 10px;
  }
  .header-tip {
    display: flex;
    justify-content: center;
    font-size: 14px;
    flex-wrap: wrap;
    padding-bottom: 12px;
  }
  .header {
    display: flex;
    justify-content: center;
    height: 15%;
  }
  .title {
    width: 100%;
    text-align: center;
    margin-top: 8px;
  }
  .mid {
    height: 75%;
    overflow-y: scroll;
  }
  .bottom {
    height: 10%;
    font-size: 14px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    .bottom-container {
      display: flex;
      justify-content: space-between;
      width: 75%;
    }

    .previousGroup {
      border: 1px solid #333;
      width: 80px;
      height: 28px;
      text-align: center;
      line-height: 28px;
    }
    .timeOut {
      border: 1px solid #333;
      width: 80px;
      height: 28px;
      text-align: center;
      line-height: 28px;
    }
    .nextGroup {
      border: 1px solid #333;
      width: 80px;
      height: 28px;
      text-align: center;
      line-height: 28px;
    }
  }
}
</style>