<template>
  <div class="listcom-box">
    <div class="list-box">
      <van-checkbox-group v-model="checked" ref="checkboxGroup">
        <van-cell-group>
          <van-pull-refresh v-model="refreshing" @refresh="onLoad">
            <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
                  class="cell-box"
                  clickable
                  :title="`${item.id}. ${item.issue}`"
                  @click="goWrongReview(item.id)"
                >
                  <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="收藏"
                    @click="collectionClick(item.id)"
                    v-if="props.type == 'wrong'"
                  />
                </template>
              </van-swipe-cell>
            </van-list>
          </van-pull-refresh>
        </van-cell-group>
      </van-checkbox-group>
    </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"
            @click="collectionClick"
            v-if="props.type == 'wrong'"
            >移入收藏夹</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { CollectionModel } from "@/dataModel/collection";
import { RouterBus } from "@/hooks";
/**
 * 列表hook
 */
const useQuestionList = (type: CollectionAndWrongType.type) => {
  const collectionModel = new CollectionModel(type);
  const questionList = ref<Test.QuestionInfo[]>([]);
  const collectionList = ref<CollectionAndWrongType.QuestionRes[]>([]);
  const {
    route: { query },
  } = new RouterBus();

  const total = ref(0);
  const pageNum = ref(1);
  const pageSize = ref(20);
  /** 刷新数据 */
  const refreshing = ref(false);
  /**加载中 */
  const loading = ref(false);
  /**数据是否全部加载完成 */
  const finished = ref(false);

  /** 删除已收藏的问题 */
  const deletes = async (ids: number[]) => {
    const res = await collectionModel.deletes(ids, collectionList.value);
    //乐观删除本地数据
    questionList.value = questionList.value.filter(
      (item) => !ids.includes(item.id)
    );
  };

  /** 加入收藏 */
  const addsCollection = async (ids: number[]) => {
    const list = collectionList.value.filter((item) =>
      ids.includes(item.questionId)
    );
    const params = list.map((item) => {
      return {
        carType: item.carType,
        km: item.km,
        questionId: item.questionId,
      };
    });
    const collectionModel = new CollectionModel("collection");
    const res = await collectionModel.adds(params);
    //收藏成功则删除错题
    // if (res.data == 1) {
    deletes(ids);
    // }
  };

  /**获取下一页数据 */
  const onLoadData = async () => {
    if (loading.value) return;
    loading.value = true;
    if (refreshing.value) {
      collectionList.value = [];
      questionList.value = [];
      pageNum.value = 1;
      refreshing.value = false;
    }
    const res = await collectionModel.getList({
      carType: query.vehicle as CollectionAndWrongType.CarType,
      km: query.name as CollectionAndWrongType.Km,
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    });
    total.value = res.total;
    collectionList.value.push(...res.collectionList);
    questionList.value.push(...res.rows);
    loading.value = false;
    finished.value = questionList.value.length >= total.value;
    pageNum.value++;
  };

  return {
    questionList,
    deletes,
    finished,
    loading,
    onLoadData,
    refreshing,
    addsCollection,
  };
};
</script>

<script setup lang="ts">
import { ref, watch } from "vue";

const { goWrongReview } = new RouterBus();

interface Props {
  type: "wrong" | "collection";
}

const props = withDefaults(defineProps<Props>(), {});

//当前视图事务
const {
  questionList: list, //题目列表
  finished, //是否全部加载完成
  refreshing /** 重载状态 */,
  loading /**显示加载状态 */,
  onLoadData: onLoad /**加载数据 */,
  deletes, //批量删除
  addsCollection, //加入收藏,移除错题
} = useQuestionList(props.type);

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) => {
  deletes([id]);
};
//批量删除
const deletesClick = () => {
  deletes(checked.value);
};

//单个收藏
const collectionClick = (id: number) => {
  addsCollection([id]);
};
//批量收藏
const collectionsClick = () => {
  addsCollection(checked.value);
};
</script>

<style lang="scss" scoped>
.listcom-box {
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
}

.list-box {
  flex-grow: 1;
  overflow-y: auto;
  .cell-box {
    min-height: 70px;
  }
}
.checkbox {
  margin-right: 5px;
}
.bottom-cell {
  flex-shrink: 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>
