<template>
  <div class="">
    <div class="list-item" v-for="(item, index) in list" :key="index">
      <div class="order">{{ index }}</div>
      <div class="flex-center w90Per">
        <img class="icon" :src="item.icon" />
        <div @touchend="selectItem(item, index)" class="list-item-container">
          <span
            class="list-item-row1"
            :class="{
              'list-item-row1_selected': index == listIndex,
            }"
            >{{ item.title || item.titile }}</span
          >
          <span class="list-item-row2">灯光操作：{{ item.operation }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import utils from "@/utils/index";
export default {
  // setup(props, { emit }) {
  // 	let listIndex = ref(-1);
  // 	let store = useStore();
  // 	let audioPlayTimer: number;
  // 	const { playAudio, playMulAudio, pauseAudio, audioOn, audioOnce, durationAudio } = useAudio();
  // 	function playAudioNext(duration: number, interval: number) {
  // 		audioPlayTimer = window.setTimeout(() => {
  // 			if (Array.isArray(props.list) && listIndex.value + 1 !== props.list?.length) {
  // 				listIndex.value = listIndex.value + 1;
  // 				playAudio(props.list[listIndex.value].voice).then((id) => {
  // 					playAudioNext(durationAudio(id as number), store.state.lightConfig.interval);
  // 				});
  // 			} else {
  // 				return;
  // 			}
  // 		}, duration * 1000 + interval * 1000);
  // 	}
  // 	let selectItem = (item: any, index: number) => {
  // 		if (listIndex.value == index) {
  // 			pauseAudio();
  // 			listIndex.value = -1;
  // 			window.clearTimeout(audioPlayTimer);
  // 		} else {
  // 			window.clearTimeout(audioPlayTimer);
  // 			listIndex.value = index;
  // 			let el: Element = document.querySelectorAll(".list-item-container")[listIndex.value];
  // 			playAudio(item.voice).then((id) => {
  // 				playAudioNext(durationAudio(id as number), store.state.lightConfig.interval);
  // 			});
  // 		}
  // 	};
  // 	let pauseAudioLoop = () => {
  // 		pauseAudio();
  // 		window.clearTimeout(audioPlayTimer);
  // 	};

  // 	return {
  // 		emit,
  // 		props,
  // 		listIndex,
  // 		selectItem,
  // 		playAudio,
  // 		pauseAudioLoop,
  // 	};
  // },
  data() {
    return {
      listIndex: -1,
      audioPlayTimer: 0,
      audio: {},
    };
  },
  methods: {
    playNextAudio(duration, interval) {
      console.log(duration, interval);

      let that = this;

      if (Array.isArray(this.list) && that.listIndex + 1 !== this.list.length) {
        that.audio.play();
        that.audio.offEnded();
        that.audio.onEnded(() => {
          setTimeout(() => {
            if (
              Array.isArray(this.list) &&
              that.listIndex + 1 !== this.list.length
            ) {
              that.listIndex = that.listIndex + 1;
              that.audio.src = that.list[that.listIndex].voice;
              that.audio.play();
            }
          }, interval * 1000);
        });
      } else {
        return;
      }
    },
    selectItem(item, index) {
      if (this.listIndex == index) {
        this.audio.pause();
        this.listIndex = -1;
        clearTimeout(this.audioPlayTimer);
      } else {
        clearTimeout(this.audioPlayTimer);
        this.listIndex = index;
        this.audio.src = item.voice;
        this.audio.play();
        let interval = this.$store.state.user.lightConfig.interval;
        let duration = this.audio.duration;
        this.playNextAudio(duration, interval);
      }
    },
    init(){
      if(this.list.length>0){
        this.audio.pause()
        this.listIndex = -1
        this.selectItem(this.list[0],0)

      }

    }
  },
  props: {
    list: {
      type: Array,
      defalut: () => {
        return [
          {
            createTime: "2022-03-21 16:40:22",
            updateTime: "2022-03-21 16:51:11",
            id: 18,
            title: "新灯光01",
            operation:
              "开始-远近光交替-远近光交替-远光灯-近光灯-示廓灯/危险警示灯-结束",
            icon: "https://t1-1305573081.file.myqcloud.com/lighting/icon/6.png",
            itemId: "3,10,12,5,7,15,17",
          },
        ];
      },
    },
  },
  mounted() {
    this.audio = utils.wxUtils.getGlobAudio();
    this.audio.pause();
    setTimeout(()=>{
      this.selectItem(this.list[0],0)
    },500)
    

  },
};
</script>

<style lang="scss" scoped>
.w90Per {
  width: 90%;
}
.flex-center {
  display: flex;
  align-content: center;
  align-items: center;
}
.list-item {
  display: flex;
  padding-top: 14px;
  margin-left: 10px;
  border-bottom: 1px solid #d8d8d8;
  padding-bottom: 10px;
  .order {
    font-size: 14px;
    color: gray;
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon {
    width: 35px;
    height: 35px;
  }
  .list-item-container {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    margin-left: 10px;
    flex-wrap: wrap;
    width: 75%;

    .list-item-row1 {
      font-size: 16px;
      line-height: 20px;
    }
    .list-item-row1_selected {
      color: #01c18d;
    }
    .list-item-row2 {
      display: inline-block;
      width: 100%;
      font-size: 12px;
      line-height: 20px;
      color: #a0a0a0;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
</style>