<template>
  <div class="collection-box">
    <view>
      <img class="collectionHeader" mode="widthFix" :src="collectionHeader" />
    </view>
    <view class="choose">
      <view
        v-if="type == 'wrong'"
        class="choose-img choose-wrong"
        style="overflow: hidden; border-radius: 40rpx"
      >
        <!-- <image
          style="width: 100%"
          mode="widthFix"
          src="https://ndata.zzxcx.net/ctjk/mp-wx/collection/wrongBg3.png"
        ></image> -->
        <view class="choose-text1"> 做错题 </view>
        <view
          @click="
            () => {
              type = 'collect';
            }
          "
          class="choose-text1"
          style="right: 0; color: #8a9099; background: #f2f3f5"
        >
          收藏题
        </view>
        <view class="choose-text2" style="display: flex">
          <view class=""> 共 {{ wrongListCount }} 题 </view>
          <image
            @tap.stop="goExercise('wrong')"
            mode="widthFix"
            class="goArrow"
            :src="goArrow"
          />
        </view>
        <view class="choose-tool">
          <view
            :hover-stop-propagation="true"
            data-type="wrong"
            @tap.stop="clearTopics('wrong')"
            style="color: #498ef5"
            class="clear"
          >
            清空错题
          </view>
          <view
            :hover-stop-propagation="true"
            data-type="wrong"
            @tap.stop="
              () => {
                wrongSyncShow = true;
              }
            "
            style="color: #498ef5"
            class="sync"
          >
            同步错题
          </view>
        </view>
      </view>
      <view
        v-if="type == 'collect'"
        class="choose-img choose-collection"
        style="overflow: hidden; border-radius: 40rpx"
      >
        <!-- <image
          style="width: 100%"
          mode="widthFix"
          src="https://ndata.zzxcx.net/ctjk/mp-wx/collection/collectionBg3.png"
        ></image> -->
        <view
          @click="
            () => {
              type = 'wrong';
            }
          "
          style="color: #8a9099; background: #f2f3f5"
          class="choose-text1"
        >
          做错题
        </view>
        <view style="right: 0" class="choose-text1"> 收藏题 </view>

        <view class="choose-text2" style="display: flex">
          <view class=""> 共 {{ collectionListCount }} 题 </view>
          <image
            @tap.stop="goExercise('collect')"
            mode="widthFix"
            class="goArrow"
            :src="goArrow"
          />
        </view>
        <view class="choose-tool">
          <view
            :hover-stop-propagation="true"
            data-type="collect"
            @tap.stop="clearTopics('collect')"
            style="color: #00a748"
            class="clear"
          >
            清空收藏
          </view>
          <view
            :hover-stop-propagation="true"
            data-type="collect"
            @tap.stop="
              () => {
                collectSyncShow = true;
              }
            "
            style="color: #00a748"
            class="sync"
          >
            同步收藏
          </view>
        </view>
      </view>
    </view>

    <van-popup
      @close="
        () => {
          wrongSyncShow = false;
        }
      "
      zIndex="1000"
      position="bottom"
      :show="wrongSyncShow"
    >
      <van-picker
        @cancel="
          () => {
            wrongSyncShow = false;
          }
        "
        @confirm="syncWrongQuestion"
        :columns="[
          { text: '合并本机和云端错题', type: 'wrong', value: 0 },
          { text: '备份本机错题到云端', type: 'wrong', value: 1 },
          { text: '恢复云端错题到本机', type: 'wrong', value: 2 },
        ]"
        show-toolbar
        title="同步错题"
      />
    </van-popup>
    <van-popup
      @close="
        () => {
          collectSyncShow = false;
        }
      "
      zIndex="1000"
      position="bottom"
      :show="collectSyncShow"
    >
      <van-picker
        @cancel="
          () => {
            collectSyncShow = false;
          }
        "
        @confirm="syncCollectQuestion"
        :columns="[
          { text: '合并本机和云端收藏', type: 'collect', value: 0 },
          { text: '备份本机收藏到云端', type: 'collect', value: 1 },
          { text: '恢复云端收藏到本机', type: 'collect', value: 2 },
        ]"
        show-toolbar
        title="同步收藏"
      />
    </van-popup>
    <view v-show="!wrongSyncShow && !collectSyncShow" class="wxad">
      <ad
        :ad-intervals="100"
        ad-type="video"
        unit-id="adunit-8eb44bbd7e3147d4"
      ></ad>
    </view>
    <!-- <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 api from "@/api/index";
import utils from "@/utils/index";
export default {
  data() {
    return {
      chooseBg: "https://ndata.zzxcx.net/ctjk/mp-wx/collection/wrongBg3.png",
      type: "wrong",
      wrongBg: "https://ndata.zzxcx.net/ctjk/mp-wx/collection/wrongBg3.png",
      goArrow: "https://ndata.zzxcx.net/ctjk/mp-wx/collection/right_arrow.png",
      collectionBg:
        "https://ndata.zzxcx.net/ctjk/mp-wx/collection/collectionBg3.png",
      collectionHeader:
        "https://ndata.zzxcx.net/ctjk/mp-wx/carVideo/banner.png",
      query: {
        questionIds: "",
      },
      gsMap: {
        xc: "小车",
        hc: "货车",
        mtc: "摩托车",
        kc: "客车",
      },
      wrongSyncShow: false,
      collectSyncShow: false,
      wrongList: [],
      wrongListCount: 0,

      collectionList: [],
      collectionListCount: 0,
    };
  },
  onLoad(query) {
    this.query = query;
    this.user;
    let storageName1 =
      uni.getStorageSync("userInfo").xcxOpenid +
      "_userWrongIds_" +
      this.query.subject;

    let storageName2 =
      uni.getStorageSync("userInfo").xcxOpenid +
      "_userCollectionIds_" +
      this.query.subject;

    this.wrongListCount = uni.getStorageSync(storageName1)
      ? uni.getStorageSync(storageName1).length
      : 0;
    this.collectionListCount = uni.getStorageSync(storageName2)
      ? uni.getStorageSync(storageName2).length
      : 0;

    // api.exam
    //   .studentQuestionWrongWrongCountByUser({
    //     carType: this.gsMap[query.gs],
    //     km: query.subject === "1" ? "科目一" : "科目四",
    //     pageNum: 1,
    //     pageSize: 10000,
    //   })
    //   .then((res) => {
    //     this.wrongListCount = res.data;
    //   });
  },
  onShow() {
    let storageName1 =
      uni.getStorageSync("userInfo").xcxOpenid +
      "_userWrongIds_" +
      this.query.subject;

    let storageName2 =
      uni.getStorageSync("userInfo").xcxOpenid +
      "_userCollectionIds_" +
      this.query.subject;

    this.wrongListCount = uni.getStorageSync(storageName1)
      ? uni.getStorageSync(storageName1).length
      : 0;
    this.collectionListCount = uni.getStorageSync(storageName2)
      ? uni.getStorageSync(storageName2).length
      : 0;
  },
  methods: {
    syncCollectQuestion(e) {
      let select = e.detail.value;
      let storageName =
        uni.getStorageSync("userInfo").xcxOpenid +
        "_userCollectionIds_" +
        this.query.subject;
      uni.getStorageSync(storageName)
        ? ""
        : uni.setStorageSync(storageName, []);
      switch (select.value) {
        case 0:
          api.exam
            .studentQuestionCollectionCollections({
              km: Number(this.query.subject),
              cols: uni.getStorageSync(storageName).map((item) => item),
            })
            .then((res) => {
              uni.showToast({
                title: "合并成功",
              });
              api.exam
                .studentQuestionCollectionCollectionByUser({
                  km: Number(this.query.subject),
                })
                .then((result) => {
                  let userCollectionIds = result.data.map((item) => {
                    return item;
                  });
                  uni.setStorageSync(storageName, userCollectionIds);
                  this.collectionListCount = userCollectionIds.length;
                });
            });
          break;
        case 1:
          api.exam
            .studentQuestionCollectionBakCollections({
              km: Number(this.query.subject),
              cols: uni.getStorageSync(storageName).map((item) => item),
            })
            .then((res) => {
              uni.showToast({
                title: "备份成功",
              });
              api.exam
                .studentQuestionCollectionCollectionByUser({
                  km: Number(this.query.subject),
                })
                .then((result) => {
                  let userCollectionIds = result.data.map((item) => {
                    return item;
                  });
                  uni.setStorageSync(storageName, userCollectionIds);
                  this.collectionListCount = userCollectionIds.length;
                });
            });
          break;
        case 2:
          api.exam
            .studentQuestionCollectionCollectionByUser({
              km: Number(this.query.subject),
            })
            .then((result) => {
              uni.showToast({
                title: "恢复成功",
              });
              let userCollectionIds = result.data.map((item) => {
                return item;
              });
              uni.setStorageSync(storageName, userCollectionIds);
              this.collectionListCount = userCollectionIds.length;
            });
          break;
        default:
          break;
      }
      this.collectSyncShow = false;
    },
    syncWrongQuestion(e) {
      let select = e.detail.value;
      let storageName =
        uni.getStorageSync("userInfo").xcxOpenid +
        "_userWrongIds_" +
        this.query.subject;
      uni.getStorageSync(storageName)
        ? ""
        : uni.setStorageSync(storageName, []);

      console.log(e);
      switch (select.value) {
        case 0:
          api.exam
            .studentQuestionWrongWrongs({
              km: Number(this.query.subject),
              wrongs: uni.getStorageSync(storageName).map((item) => item),
            })
            .then((res) => {
              uni.showToast({
                title: "合并成功",
              });
              api.exam
                .studentQuestionWrongWrongByUser({
                  km: Number(this.query.subject),
                })
                .then((result) => {
                  let userWrongIds = result.data.map((item) => {
                    return item;
                  });
                  uni.setStorageSync(storageName, userWrongIds);
                  this.wrongListCount = userWrongIds.length;
                });
            });
          break;
        case 1:
          api.exam
            .studentQuestionWrongBakWrongs({
              km: Number(this.query.subject),
              wrongs: uni.getStorageSync(storageName).map((item) => item),
            })
            .then((res) => {
              uni.showToast({
                title: "备份成功",
              });
              api.exam
                .studentQuestionWrongWrongByUser({
                  km: Number(this.query.subject),
                })
                .then((result) => {
                  let userWrongIds = result.data.map((item) => {
                    return item;
                  });
                  uni.setStorageSync(storageName, userWrongIds);
                  this.wrongListCount = userWrongIds.length;
                });
            });
          break;
        case 2:
          api.exam
            .studentQuestionWrongWrongByUser({
              km: Number(this.query.subject),
            })
            .then((result) => {
              uni.showToast({
                title: "恢复成功",
              });
              let userWrongIds = result.data.map((item) => {
                return item;
              });
              uni.setStorageSync(storageName, userWrongIds);
              this.wrongListCount = userWrongIds.length;
            });
          break;
        default:
          break;
      }
      this.wrongSyncShow = false;
    },
    goExercise(type) {
      let storageName1 =
        uni.getStorageSync("userInfo").xcxOpenid +
        "_userWrongIds_" +
        this.query.subject;

      let storageName2 =
        uni.getStorageSync("userInfo").xcxOpenid +
        "_userCollectionIds_" +
        this.query.subject;
      let query = Object.assign({}, this.query);
      console.log(query);
      if (type == "wrong" && this.wrongListCount == 0) {
        uni.showToast({
          title: "没有题目了",
          icon: "none",
        });
        return;
      }
      if (type == "collect" && this.collectionListCount == 0) {
        uni.showToast({
          title: "没有题目了",
          icon: "none",
        });
        return;
      }

      if (type == "wrong") {
        // query.questionIds =uni.getStorageSync(storageName1)? uni.getStorageSync(storageName1).map((item) => {
        //   return item.id;
        // }).join(','):'';
        uni.navigateTo({
          url: "/otherPages/exerciseWrong/index?" + utils.mapToUrlQuery(query),
        });
      }
      if (type === "collect") {
        // query.questionIds =uni.getStorageSync(storageName2)? uni.getStorageSync(storageName2).map((item) => {
        //   return item.id;
        // }).join(','):'';
        uni.navigateTo({
          url:
            "/otherPages/exerciseCollect/index?" + utils.mapToUrlQuery(query),
        });
      }
    },
    clearTopics(type) {
      let that = this;
      let storageName = "";
      if (type === "wrong") {
        storageName = uni.showModal({
          title: "是否清空错题",
          success(res) {
            let storageName =
              uni.getStorageSync("userInfo").xcxOpenid +
              "_userWrongIds_" +
              that.query.subject;
            if (res.confirm) {
              api.exam
                .studentQuestionWrongCancelAll({
                  carType: that.gsMap[that.query.gs],
                  km: Number(that.query.subject),
                })
                .then((res) => {
                  uni.setStorageSync(storageName, []);
                  api.exam
                    .studentQuestionWrongWrongCountByUser({
                      km: Number(that.query.subject),
                      pageNum: 1,
                      pageSize: 10000,
                    })
                    .then((res) => {
                      that.wrongListCount = res.data;
                    });
                });
            }
          },
        });
      } else if (type === "collect") {
        uni.showModal({
          title: "是否清空收藏题",
          success(res) {
            let storageName =
              uni.getStorageSync("userInfo").xcxOpenid +
              "_userCollectionIds_" +
              that.query.subject;
            if (res.confirm) {
              api.exam
                .studentQuestionCollectionCancelAll({
                  km: Number(that.query.subject),
                })
                .then((res) => {
                  uni.setStorageSync(storageName, []);
                  api.exam
                    .studentQuestionCollectionCollectionCountByUser({
                      carType: that.gsMap[that.query.gs],
                      km: Number(that.query.subject),
                      pageNum: 1,
                      pageSize: 10000,
                    })
                    .then((res) => {
                      that.collectionListCount = res.data;
                    });
                });
            }
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.sync {
  width: 690rpx;
  height: 90rpx;
  background: #498ef5;
  border-radius: 80rpx 80rpx 80rpx 80rpx;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  color: #fff;
}
.bottom {
  bottom: 0;
  image {
    width: 100%;
  }
}
.choose {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  align-items: space-between;
  flex-wrap: wrap;
  margin-top: 40rpx;
  .choose-bg {
    position: absolute;
    top: 142rpx;
    left: 424rpx;
    width: 212rpx;
  }
  .choose-img {
    width: 690rpx;
    position: relative;
    margin-bottom: 25rpx;
    height: 548rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;

    .bg {
      width: 690rpx;
    }
    .choose-tool {
      .clear {
        background: #ccedff;
        border-radius: 30rpx;
        position: absolute;
        bottom: 40rpx;
        width: 200rpx;
        height: 60rpx;
        left: 54rpx;
        bottom: 40rpx;
        border: 0;
        font-size: 26rpx;
        line-height: 60rpx;
        text-align: center;
        color: #0067a7;
      }
      .sync {
        background: #ccedff;
        border-radius: 30rpx;
        position: absolute;
        bottom: 40rpx;
        width: 200rpx;
        height: 60rpx;
        left: 422rpx;
        bottom: 40rpx;
        border: 0;
        font-size: 26rpx;
        line-height: 60rpx;
        text-align: center;
        color: #0067a7;
      }
    }

    .goArrow {
      margin-left: 40rpx;
      width: 56rpx;
      height: 56rpx;
    }
    .choose-text1 {
      position: absolute;
      top: 0;
      font-size: 34rpx;
      line-height: 90rpx;
      height: 90rpx;
      color: #fff;

      top: 0rpx;
      color: #004e81;
      width: 50%;
      text-align: center;
    }
    .choose-text2 {
      position: absolute;
      top: 212rpx;
      left: 46rpx;
      color: #1477b4;
      width: 100%;
      font-size: 38rpx;
      display: flex;
    }
    img {
      width: 100%;
    }
  }
  .choose-wrong {
    background: linear-gradient(315deg, #cdf2db 0%, #6be69b 100%);
  }
  .choose-collection {
   
background: linear-gradient(135deg, #59B6FC 0%, #D5EDFF 100%);
  }
}
.collectionHeader {
  width: 100%;
}
.collection-box {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 30rpx;
  background: #fff;
}
</style>
