<template>
  <van-nav-bar left-arrow @click-left="onClickLeft" fixed placeholder>
    <template #title>
      <div class="title">
        <span :class="{ active: isType == 0 }" @click="isType = 0">做错题</span>
        <span :class="{ active: isType == 1 }" @click="isType = 1">收藏题</span>
      </div>
    </template>
  </van-nav-bar>
  <div>
    <van-checkbox-group v-model="checked" ref="checkboxGroup">
      <van-cell-group>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-swipe-cell
            v-for="(item, index) in list"
            :key="index"
            :disabled="isChoose"
          >
            <van-cell clickable :title="`${item.id}. ${item.issue}`" @click="">
              <template #icon v-if="isChoose">
                <van-checkbox :name="item.id" class="checkbox" />
              </template>
            </van-cell>
            <template #right>
              <van-button
                square
                style="height: 100%"
                type="danger"
                text="删除"
                @click="deleteClick(item.id)"
              />
              <van-button
                square
                style="height: 100%"
                type="primary"
                text="收藏"
                v-if="isType == 0"
              />
            </template>
          </van-swipe-cell>
        </van-list>
      </van-cell-group>
    </van-checkbox-group>
  </div>
  <div style="height: 50px"></div>
  <div class="bottom-cell">
    <div>
      <span v-if="!isChoose" @click="isChoose = true">批量选中</span>
      <div class="choose" v-else>
        <van-checkbox v-model="isSelectAll">全选</van-checkbox>
        <span
          @click="
            isChoose = false;
            unSelectAll();
          "
          >取消</span
        >
      </div>
    </div>
    <div>
      <div class="operate">
        <van-button
          round
          type="danger"
          size="small"
          :disabled="checked.length == 0"
          @click="deletesClick"
          >删除选中</van-button
        >
        <van-button
          round
          type="primary"
          size="small"
          :disabled="checked.length == 0"
          >移入收藏夹</van-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { onBeforeMount, computed } from "vue";
import { getQuestionInfoByIds, CollectionAndWrong } from "@/api";

/**
 * 列表hook
 */
const useQuestionList = (type: CollectionAndWrongType.type) => {
  const QuestionApi = new CollectionAndWrong(type);
  const questionList = ref<Test.QuestionInfo[]>([]);
  const collectionList = ref<CollectionAndWrongType.QuestionRes[]>([]);
  const total = ref(0);
  const pageNum = ref(0);
  const pageSize = ref(10);
  /**
   * 删除已储存的问题,总之很麻烦,不要试图去理解
   */
  const deletes = async (ids: number[]) => {
    const deletesCollectionList = collectionList.value.filter((item) => {
      return ids.includes(item.questionId);
    });
    const deletesIds = deletesCollectionList.map((item) => item.id);
    const res = await QuestionApi.deletes(deletesIds);
    //删除完成重新请求数据
    setData();
  };
  /**
   * 设置列表数据
   */
  const setData = async () => {
    const collectionListRes = await QuestionApi.getList({
      carType: "小车",
      km: "科目一",
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    });
    collectionList.value = collectionListRes.rows;
    total.value = collectionListRes.total;
    const ids = collectionListRes.rows.map((item) => item.questionId);
    if (ids.length > 0) {
      const questions = await getQuestionInfoByIds({
        ids,
      });
      questionList.value = questions.rows;
    }
  };

  const finished = computed(() => {
    return questionList.value.length === total.value;
  });
  onBeforeMount(() => {
    setData();
  });
  return {
    questionList,
    deletes,
    finished,
  };
};
</script>

<script setup lang="ts">
import { nextTick, ref, watch } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const onClickLeft = () => {
  router.back();
};

const collection = useQuestionList("collection");
const wrong = useQuestionList("wrong");
//当前视图事务
const currentView = computed(() => {
  if (isType.value == 0) {
    return collection;
  } else {
    return wrong;
  }
});
//题目列表
const list = computed(() => {
  return currentView.value.questionList.value;
});

//是否全部加载完成
const finished = computed(() => {
  return currentView.value.finished.value;
});

const isChoose = ref(false); //开启批量选中
const isSelectAll = ref(false); //是否全选
const checked = ref([]); //选中内容
const checkboxGroup = ref(); //多选框组件实例
const isType = ref(0); //0错题 1收藏
//选择全选
watch(isSelectAll, (value) => {
  if (value) {
    selectAll();
  } else {
    unSelectAll();
  }
});
// //全选状态改变
watch(checked, (val) => {
  if (val.length == 0) {
    isSelectAll.value = false;
  }
  if (val.length === list.value.length) {
    isSelectAll.value = true;
  }
});
//全选
const selectAll = () => {
  checkboxGroup.value.toggleAll(true);
};
//取消全选
const unSelectAll = () => {
  checked.value = [];
};
//单个删除
const deleteClick = (id: number) => {
  currentView.value.deletes([id]);
};
//批量删除
const deletesClick = () => {
  currentView.value.deletes(checked.value);
};

//单个收藏

//批量收藏
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  width: 130px;
  justify-content: space-between;
  align-items: center;
  span {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 13px;
    color: #0a1a33;
    position: relative;
    padding: 8px;
  }
  .active {
    &:after {
      position: absolute;
      content: "";
      width: 20px;
      height: 4px;
      border-radius: 3px;
      background-color: #498ef5;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
    }
  }
}
.checkbox {
  margin-right: 5px;
}
.bottom-cell {
  position: fixed;
  bottom: 0;
  border-top: 1px solid #bdbaba;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: 50px;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 400;
  font-family: PingFang SC;
  background-color: #ffffff;
  padding: 10px 15px;
  .choose {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100px;
  }
  .operate {
    display: flex;
    justify-content: space-between;

    span {
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      border-radius: 15px;

      &:nth-of-type(1) {
        background-color: #ff4d53;
      }
      &:active {
        filter: brightness(50%);
      }
      &:nth-of-type(2) {
        background-color: #498ef5;
      }
    }
  }
}
</style>
