<template>
  <div class="collection-box">
    <div>
      <img class="collectionHeader" mode="widthFix" :src="collectionHeader" />
    </div>
    <div class="choose">
      <div class="choose-img" @click="goSpecifyExercise('wrong')">
        <span class="choose-text1"> 做错题 </span>
        <span class="choose-text2"> 共 {{ wrongList.length }} 题 </span>
        <image mode="widthFix" class="bg" :src="wrongBg" />
        <image mode="widthFix" class="goArrow" :src="goArrow" />
        <button
          @click="clearTopics('wrong')"
          style="color: #498ef5"
          class="clear"
        >
          清空错题
        </button>
      </div>
      <div class="choose-img" @click="goSpecifyExercise('collection')">
        <span class="choose-text1">收藏题</span>
        <span class="choose-text2"> 共 {{ collectionList.length }} 题 </span>
        <image mode="widthFix" class="bg" :src="collectionBg" />
        <image mode="widthFix" class="goArrow" :src="goArrow" />
        <button
          @click="clearTopics('collection')"
          style="color: #01c18d"
          class="clear"
        >
          清空收藏
        </button>
      </div>
    </div>
    <div class="bottom">
      <image mode="widthFix" :src="collectionBottomBg" />
    </div>
    <!-- <van-swipe ref="swiper" :show-indicators="false" :touchable="false">
      <van-swipe-item> <listCom type="wrong" /> </van-swipe-item>
      <van-swipe-item> <listCom type="collection" /> </van-swipe-item>
    </van-swipe> -->
  </div>
</template>

<script>

import goArrow from "@/assets/img/goArrow.png";
import api from "@/api/index";
import utils from "@/utils/index";
export default {
  data() {
    return {
      wrongBg:"https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/collection/wrongBg.png",
      collectionBottomBg:"https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/collection/collectionBottomBg.png",
      goArrow,
      collectionBg:"https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/collection/collectionBg.png",
      collectionHeader:"https://t1-1305573081.file.myqcloud.com/wxapp/static/imgs/collection/collectionHeader.png",
      query: {
        questionIds: "",
      },
      gsMap: {
        xc: "小车",
        hc: "货车",
        mtc: "摩托车",
        kc: "客车",
      },
      wrongList: [],
      collectionList: [],
    };
  },
  onLoad(query) {
    this.query = query;
    api.exam
      .studentQuestionWrongList({
        carType: this.gsMap[query.gs],
        km: query.subject === "1" ? "科目一" : "科目四",
        pageNum: 1,
        pageSize: 10000,
      })
      .then((res) => {
        this.wrongList = res.rows;
      });
    api.exam
      .studentQuestionCollectionList({
        carType: this.gsMap[query.gs],
        km: query.subject === "1" ? "科目一" : "科目四",
        pageNum: 1,
        pageSize: 10000,
      })
      .then((res) => {
        this.collectionList = res.rows;
      });
  },
  methods: {
    goSpecifyExercise(type) {
      let query = Object.assign({}, this.query);
      if (type == "wrong" && this.wrongList.length == 0) {
        uni.showToast({
          title: "没有题目了",
          icon: "error",
        });
        return;
      }
      if (type == "collection" && this.collectionList.length == 0) {
        uni.showToast({
          title: "没有题目了",
          icon: "error",
        });
        return;
      }

      if (type == "wrong") {
        query.questionIds = this.wrongList
          .map((item) => {
            return item.questionId;
          })
          .join(",");
      } else if (type === "collection") {
        query.questionIds = this.collectionList
          .map((item) => {
            return item.questionId;
          })
          .join(",");
      }
      uni.navigateTo({
        url: "/otherPages/specifyExercise/index?" + utils.mapToUrlQuery(query),
      });
    },
    clearTopics(type) {
      let that = this;
      if (type === "wrong") {
        uni.showModal({
          title: "是否清空错题",
          success(res) {
            if (res.confirm) {
              api.exam
                .studentQuestionWrongCancelAll({
                  carType: that.gsMap[that.query.gs],
                  km: that.query.subject === "1" ? "科目一" : "科目四",
                })
                .then((res) => {
                  api.exam
                    .studentQuestionWrongList({
                      carType: that.gsMap[that.query.gs],
                      km: that.query.subject === "1" ? "科目一" : "科目四",
                      pageNum: 1,
                      pageSize: 10000,
                    })
                    .then((res) => {
                      that.wrongList = res.rows;
                    });
                });
            }
          },
        });
      } else if (type === "collection") {
        uni.showModal({
          title: "是否清空收藏题",
          success(res) {
            if (res.confirm) {
              api.exam
                .studentQuestionCollectionCancelAll({
                  carType: that.gsMap[that.query.gs],
                  km: that.query.subject === "1" ? "科目一" : "科目四",
                })
                .then((res) => {
                  api.exam
                    .studentQuestionCollectionList({
                      carType: that.gsMap[that.query.gs],
                      km: that.query.subject === "1" ? "科目一" : "科目四",
                      pageNum: 1,
                      pageSize: 10000,
                    })
                    .then((res) => {
                      that.collectionList = res.rows;
                    });
                });
            }
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bottom {
  bottom: 0;
  image {
    width: 100%;
  }
}
.choose {
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: space-between;
  align-items: space-between;
  flex-wrap: wrap;
  transform: translate(0%, -8%);

  .choose-img {
    width: 690rpx;
    position: relative;
    margin-bottom: 25rpx;
    .bg {
      width: 690rpx;
    }
    .clear {
      background: #fff;
      border-radius: 30rpx;
      position: absolute;
      bottom: 40rpx;
      width: 200rpx;
      height: 60rpx;
      left: 40rpx;
      bottom: 40rpx;
      border: 0;
      font-size: 26rpx;
    }
    .goArrow {
      position: absolute;
      top: 64rpx;
      right: 40rpx;
      width: 146rpx;
    }
    .choose-text1 {
      position: absolute;
      font-size: 50rpx;
      color: #fff;
      left: 40rpx;
      top: 40rpx;
    }
    .choose-text2 {
      position: absolute;
      top: 112rpx;
      left: 44rpx;
      color: #fff;
    }
    img {
      width: 100%;
    }
  }
}
.collectionHeader {
  width: 100%;
}
.collection-box {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>
