<template>
  <div class="app-container">
    <h3>秒杀区间时间设置</h3>

    <el-row :gutter="20">
      <el-checkbox-group v-model="checkList">
        <el-col
          v-for="item in listArr"
          :key="item.lable"
          :span="6"
          style="margin-bottom: 20px"
        >
          <el-checkbox :label="item.lable">{{ item.lable }}</el-checkbox>
        </el-col>
      </el-checkbox-group>
    </el-row>

    <div style="margin-top: 30px">
      <el-button type="primary" :loading="loading" @click="dataFormSubmit()"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script>
import { seckillTimeConfigList, seckillTimeConfigAdd } from "@/api/operating";

export default {
  name: "seckillIntervalTime",
  data() {
    return {
      loading: false,
      listArr: [],
      checkList: [],
    };
  },
  created() {
    let listArr = [];
    for (let i = 9; i < 24; i++) {
      let startHour = `${i}:00`;
      let endHour = `${i + 1}:00`;
      if (i == 23) {
        endHour = "23:59";
      }
      listArr.push({
        lable: `${startHour} - ${endHour}`,
      });
    }
    this.listArr = listArr;
    // console.log(listArr);
    this.getList();
  },
  methods: {
    getList() {
      seckillTimeConfigList().then((res) => {
        console.log(res);
        if (res.code == 200 && res.data) {
          this.checkList = res.data.map(
            (item) => `${item.startHour} - ${item.endHour}`
          );
        }
      });
    },
    dataFormSubmit() {
      if (this.loading) return;
      this.loading = true;
      let list = this.checkList.map((item) => {
        let objs = item.split(" - ");
        return {
          startHour: objs[0],
          endHour: objs[1],
        };
      });
      seckillTimeConfigAdd(list)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.$message.success("保存成功");
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
  },
};
</script>
