<template>
  <div class="mask">
    <div class="header">
      <div
        @click="
          () => {
            $emit('close');
          }
        "
        class="col1"
      >
        <m-icon type="fanhui" />
      </div>

      <span>灯光考试要求</span>
      <span @click="saveLightConfig" class="col3">{{ "保存" }}</span>
    </div>
    <div class="mid">
      <van-cell
        title="灯光考试要求"
        @click="
          () => {
            lightModeVisible = true;
          }
        "
        is-link
        :value="lightModeText"
      />
      <van-popup
        position="bottom"
        :close-on-click-overlay="true"
        :show="lightModeVisible"
      >
        <van-picker
          :show-toolbar="true"
          title="标题"
          @confirm="
            (e) => {
              lightConfig.type = e.detail.index;
              lightModeVisible = false;
            }
          "
          @cancel="
            () => {
              lightModeVisible = false;
            }
          "
          :columns="lightConfig.typelist"
          value-key="name"
        />
      </van-popup>

      <van-popup
        position="bottom"
        :close-on-click-overlay="true"
        :show="lightDirNumVisible"
      >
        <van-picker
          :show-toolbar="true"
          title="标题"
          @confirm="
            (e) => {
              lightConfig.directives = e.detail.index + 1;
              lightDirNumVisible = false;
            }
          "
          value-key="name"
          @cancel="
            () => {
              lightDirNumVisible = false;
            }
          "
          :columns="dirListNumList"
        />
      </van-popup>

      <van-popup
        position="bottom"
        :close-on-click-overlay="true"
        :show="lightInterNumVisible"
      >
        <van-picker
          :show-toolbar="true"
          title="标题"
          @confirm="
            (e) => {
              lightConfig.interval =e.detail.index + 1;
              lightInterNumVisible = false;
            }
          "

          @cancel="
            () => {
              lightInterNumVisible = false;
            }
          "
          :columns="dirListNumList"
        />
      </van-popup>

      <van-cell
        @click="
          () => {
            lightDirNumVisible = true;
          }
        "
        v-if="lightConfig.type == 0"
        title="抽取指令数量"
        is-link
        :value="lightConfig.directives + '条'"
      />
      <div class="mid-text">
        灯光模拟考试时,将随机抽取1条灯光进行播放(包括开始和结束)
      </div>
      <van-cell
        @click="
          () => {
            lightInterNumVisible = true;
          }
        "
        title="灯光间隔时长"
        is-link
        :value="lightConfig.interval + '秒'"
      />
      <div class="mid-text">
        一条灯光播放完后,需等待{{ lightConfig.interval }}s再播放下一条
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lightModeVisible: false,
      lightDirNumVisible: false,
      lightInterNumVisible: false,
      lightConfig: { ...this.$store.state.user.lightConfig },
      secondNumList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
      dirListNumList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
    };
  },
  methods: {
    saveLightConfig() {
      this.$emit("close");
      this.$store.commit("SET_LIGHTCONFIG", this.lightConfig);
    },
  },
  computed: {
    lightModeText() {
		console.log(this.lightConfig)
      return this.lightConfig.typelist[this.lightConfig.type||0].name;
    },
  },
};
// const lightModeVisible = ref(false);
// const lightDirNumVisible = ref(false);
// const lightInterNumVisible = ref(false);
// const lightConfig = reactive(
//   JSON.parse(JSON.stringify(store.state.lightConfig))
// );
// const secondNumList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
// const dirListNumList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
// // expects emits options
// const emit = defineEmits(["close", "delete"]);
// const lightModeText = computed(() => {
//   // console.log(lightConfig.typelist[lightConfig.type.value])
//   let text = lightConfig.typelist[lightConfig.type].name;
//   return text;
// });
// const saveLightConfig = () => {
//   emit("close");
//   store.commit("setLightConfig", lightConfig);
//   console.log(store.state.lightConfig);
// };
</script>

<style lang="scss" scoped>
.mask {
  width: 100%;
  height: 100%;
  background: #eeeeee;
  position: fixed;
  z-index: 1000;
  top: 0;
  .header {
    width: 100%;
    height: 40px;
    font-size: 14px;
    background: #fff;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    .col1 {
    }
    .col3 {
      padding-right: 10px;
      color: #01c18d;
    }
  }
  .mid {
    margin-top: 10px;
    .mid-text {
      font-size: 14px;
      color: #b1b1b1;
      padding-left: 15px;
      padding-top: 10px;
    }
  }
}
</style>