<template>
  <div>
    <div>
      <p style="padding-top: 2rem">提醒学习计划：</p>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="item in list" :key="item" :title="item">
            <template #extra>
              <van-button size="small" icon="delete" type="danger" @click="deletePlan(item)"></van-button>
            </template>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="时间频率"
      placeholder="请选择提醒频率"
      @click="show = true"
    />
    <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择提醒学习频率"
        active-color="#1989fa"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
    <div style="border: 1px solid black; margin-top: 2vh">
      <van-datetime-picker
        v-model="currentTime"
        type="time"
        title="选择时间"
        :min-hour="0"
        :max-hour="23"
      />
    </div>
    <div style="margin-bottom: 10vh">
      <van-button @click="submit" type="primary">确定</van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import apiFunc from "@/apis/api";
import Cookies from "js-cookie";
export default {
  name: "index3",
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      currentTime: "12:00",
      show: false,
      fieldValue: "",
      cascaderValue: "",
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: "每天",
          value: "day",
        },
        {
          text: "每周",
          value: "week",
          children: [
            { text: "周一", value: "MON" },
            { text: "周二", value: "TUE" },
            { text: "周三", value: "WED" },
            { text: "周四", value: "THU" },
            { text: "周五", value: "FRI" },
            { text: "周六", value: "SAT" },
            { text: "周日", value: "SUN" },
          ],
        },
      ],
    };
  },
  methods: {
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
    submit() {
      if (this.fieldValue === "") {
        Toast("请输入提醒频率");
      } else {
        apiFunc
          .setTimer(this.cascaderValue, this.currentTime, Cookies.get("userid"))
          .then((res) => {
            Toast(res.data);
            this.onRefresh();
          });
      }
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      apiFunc.selectTimer(Cookies.get("userid")).then((res) => {
        for (let i = 0; i < res.data.result.length; i++) {
          if (res.data.result[i].split("|")[0] === "day") {
            this.list.push("每天 " + res.data.result[i].split("|")[1]);
          } else {
            if (res.data.result[i].split("|")[0] === "MON") {
              this.list.push("每周一 " + res.data.result[i].split("|")[1]);
            }
            if (res.data.result[i].split("|")[0] === "TUE") {
              this.list.push("每周二 " + res.data.result[i].split("|")[1]);
            }
            if (res.data.result[i].split("|")[0] === "WED") {
              this.list.push("每周三 " + res.data.result[i].split("|")[1]);
            }
            if (res.data.result[i].split("|")[0] === "THU") {
              this.list.push("每周四 " + res.data.result[i].split("|")[1]);
            }
            if (res.data.result[i].split("|")[0] === "FRI") {
              this.list.push("每周五 " + res.data.result[i].split("|")[1]);
            }
            if (res.data.result[i].split("|")[0] === "SAT") {
              this.list.push("每周六 " + res.data.result[i].split("|")[1]);
            }
            if (res.data.result[i].split("|")[0] === "SUN") {
              this.list.push("每周日 " + res.data.result[i].split("|")[1]);
            }
          }
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        this.finished = true;
      });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.list.length = 0;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
      this.refreshing = false;
    },
    deletePlan(item){
      var frequency = "";
      if(item.split(" ")[0] === "每天"){
        frequency += "day|"+item.split(" ")[1];
      }else if(item.split(" ")[0] === "每周一"){
        frequency += "MON|"+item.split(" ")[1];
      }else if(item.split(" ")[0] === "每周二"){
        frequency += "TUE|"+item.split(" ")[1];
      }else if(item.split(" ")[0] === "每周三"){
        frequency += "WED|"+item.split(" ")[1];
      }else if(item.split(" ")[0] === "每周四"){
        frequency += "THU|"+item.split(" ")[1];
      }else if(item.split(" ")[0] === "每周五"){
        frequency += "FRI|"+item.split(" ")[1];
      }else if(item.split(" ")[0] === "每周六"){
        frequency += "SAT|"+item.split(" ")[1];
      }else if(item.split(" ")[0] === "每周日"){
        frequency += "SUN|"+item.split(" ")[1];
      }
      apiFunc.deleteTimer(frequency,Cookies.get("userid")).then(res => {
        Toast(res.data);
        this.onRefresh();
      })
    }
  },
};
</script>
