<template>
  <div style="height: 100vh; background: #fff">
    <div class="header-border"></div>
    <lightConfig
      @close="
        () => {
          lightConfigVisible = false;
        }
      "
      v-if="lightConfigVisible"
    ></lightConfig>
    <composeTopicsMask
      v-if="composeTopicsMaskVisible"
      @close="
        () => {
          composeTopicsMaskVisible = false;
        }
      "
      @before="selectBeforeCom"
      @after="selectAfterCom"
      :title="singleTopicTitle"
      :list="listItem"
      :show="true"
    ></composeTopicsMask>
    <van-cell
      @click="
        () => {
          lightConfigVisible = true;
        }
      "
      class="custom-cell"
      title="考试要求：随机抽取一组灯光进行考试"
      value="设置"
      is-link
    />
    <div class="gray-space-12"></div>
    <!-- #ifdef MP-WEIXIN -->
    <van-tabs class="custom-tabs" v-model="active">
      <van-tab title="组合">
        <composeTopicList @select="selectCom" :list="list1"></composeTopicList>
      </van-tab>
      <van-tab title="单项">
        <singleTopicList :list="list2"></singleTopicList>
      </van-tab>
    </van-tabs>
    <!-- #endif -->
    <!-- #ifdef MP-TOUTIAO -->
    <swiper class="custom-tabs" v-model="active">
      <swiper-item title="组合">
        <composeTopicList @select="selectCom" :list="list1"></composeTopicList>
      </swiper-item>
      <swiper-item title="单项">
        <singleTopicList :list="list2"></singleTopicList>
      </swiper-item>
    </swiper>
    <!-- #endif -->
    <examTopicList
      @close="
        () => {
          examTopicListVisible = false;
        }
      "
      :comList="list1"
      :singleList="list2"
      v-if="examTopicListVisible"
    ></examTopicList>
    <div class="fixBottom">
      <div class="button-halo">
        <view
          class="button-text"
          @click="
            () => {
              examTopicListVisible = true;
            }
          "
        >
          <text>开始考试</text>
        </view>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/index";
import composeTopicList from "./components/composeTopicList.vue";
import composeTopicsMask from "./components/composeTopicsMask.vue";
import singleTopicList from "./components/singleTopicList.vue";
import lightConfig from "./components/lightConfig.vue";
import examTopicList from "./components/examTopicList.vue";
export default {
  data() {
    return {
      examTopicListVisible: false,
      lightConfigVisible: false,
      composeTopicsMaskVisible: false,
      list1Index: -1,
      timer: 0,
      active: 0,
      list1: [
        {
          createTime: "2022-03-21 16:40:22",
          updateTime: "2022-03-21 16:51:11",
          id: 18,
          title: "新灯光01",
          operation:
            "开始-远近光交替-远近光交替-远光灯-近光灯-示廓灯/危险警示灯-结束",
          icon: "https://ndata.zzxcx.net/lighting/icon/6.png",
          itemId: "3,10,12,5,7,15,17",
        },
      ],
      list2: [
        {
          createTime: "2022-03-21 14:35:59",
          updateTime: "2022-03-21 15:54:27",
          id: 3,
          title:
            "下面将进行模拟夜间行驶灯光的考试，请在5秒内做出相应的灯光操作。【停顿】【停顿】【停顿】请开启前照灯",
          operation: "开始（准备）",
          icon: "https://ndata.zzxcx.net/lighting/icon/1.png",
          voice:
            "https://ndata.zzxcx.net/lighting/voice/common3.mp3",
          process: 1,
        },
      ],
      listItem: [],
      singleTopicTitle: "",
    };
  },
  methods: {
    selectCom(item, index) {
      this.composeTopicsMaskVisible = true;
      this.list1Index = index;
      this.composeTopicsMaskVisible = true;
      this.singleTopicTitle = item.titile;
      api.open.lightingCombinationId(item.id).then((res) => {
        this.listItem = res.data;
      });
    },
    selectBeforeCom() {
      if (this.list1Index == 0) {
        uni.showToast({
          title: "已经到底了",
          icon: "none",
        });
      } else {
        this.list1Index = this.list1Index - 1;
        let item = this.list1[this.list1Index];
        this.singleTopicTitle = item.titile;
        api.open.lightingCombinationId(item.id).then((res) => {
          this.listItem = res.data;
        });
      }
    },
    selectAfterCom() {
      if (this.list1Index == this.list1.length - 1) {
        uni.showToast({
          title: "已经到底了",
          icon: "none",
        });
      } else {
        this.list1Index = this.list1Index + 1;

        let item = this.list1[this.list1Index];
        this.singleTopicTitle = item.titile;
        api.open.lightingCombinationId(item.id).then((res) => {
          this.listItem = res.data;
        });
      }
    },
  },
  mounted() {
    api.open.lightingCombinationList().then((res) => {
      this.list1 = res.rows;
    });
    api.open.lightingItemList().then((res) => {
      res.rows.forEach((item) => {
        item.operation = "灯光操作：" + item.operation;
      });
      this.list2 = res.rows;
    });
  },
  components: {
    composeTopicList,
    composeTopicsMask,
    singleTopicList,
    lightConfig,
    examTopicList,
  },
};
</script>

<style lang="scss" scoped>
.hidden-click {
  display: none;
}
.header-border {
  width: 100%;
  height: 2px;
  background: rgb(231, 231, 231);
}
.gray-space-12 {
  width: 100%;
  height: 12px;
  background: rgb(238, 238, 238);
}
.custom-cell {
  ::v-deep .van-cell__title {
    white-space: nowrap;
  }
}
.custom-tabs {
  height: 440px;
  overflow-y: scroll;
  background: #fff;
  ::v-deep .van-tabs__wrap {
    border-bottom: 1px solid rgb(238, 238, 238);
  }
  ::v-deep .van-tabs__line {
    width: 30px;
    background: #01c18d;
  }
}
.fixBottom {
  position: fixed;
  bottom: 0;
  font-size: 14px;
  width: 100%;
  display: flex;
  justify-content: center;

  .button-halo {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: rgb(255, 255, 255);
    border-radius: 50%;
    box-shadow: 0px 0px 3px rgb(121, 121, 121);
  }
  .button-text {
    border: none;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    color: white;
    background: #01c18d;
    padding: 0 10px;
    border-radius: 50%;
    white-space: normal;
  }
}
</style>