<template>
  <div class="">
    <div class="list-item" @click="selectItem(item, index)" v-for="(item, index) in list" :key="index">
      <img class="icon" :src="item.icon" />
      <div  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>
</template>

<script>
import utils from "@/utils/index";
export default {
  //   setup(props, { emit }) {
  //     let listIndex = ref(-1);
  //     const { playAudio, pauseAudio } = useAudio();
  //     const selectItem = (item: any, index: number) => {
  //       emit("select", item);

  //       if (listIndex.value == index) {
  //         pauseAudio();
  //         listIndex.value = -1;
  //       } else {
  //         playAudio(item.voice);
  //         listIndex.value = index;
  //       }
  //     };
  //     return {
  //       listIndex,
  //       emit,
  //       playAudio,
  //       selectItem,
  //     };
  //   },
  data() {
    return {
      listIndex: -1,
      audio: {},
    };
  },
  methods: {
    selectItem(item, index) {
      this.$emit("select", item);

      if (this.listIndex == index) {
        //   console.log(utils.wxUtils.setC)
        // pauseAudio();
		this.audio.pause();
        this.listIndex = -1;
      } else {
        this.audio.pause();
        utils.wxUtils.setConfigGlobAudio({
          src: item.voice,
          autoplay: true,
        });
        this.audio.play();
        // playAudio(item.voice);
        this.listIndex = index;
      }
    },
  },
  props: {
    list: {
      type: Array,
      defalut: [
        {
          createTime: "2022-03-21 16:40:22",
          updateTime: "2022-03-21 16:51:11",
          id: 18,
          title: "新灯光01",
          operation:
            "开始-远近光交替-远近光交替-远光灯-近光灯-示廓灯/危险警示灯-结束",
          icon: "https://ct.zzxcx.net/lighting/icon/6.png",
          itemId: "3,10,12,5,7,15,17",
        },
      ],
    },
  },
  mounted() {
    this.audio = utils.wxUtils.getGlobAudio();
  },
};
</script>

<style lang="scss" scoped>
.list-item {
  display: flex;
  padding-top: 14px;
  margin-left: 10px;
  border-bottom: 1px solid #d8d8d8;
  padding-bottom: 10px;

  .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: 80%;

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