<template>
  <view class="left">
    <view v-for="(item, index) in leftList" :key="index" class="left-item">
      <image @click="goPath(item, index)" :src="item.img"></image>
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
import utils from "@/utils/index";
export default {
  data() {
    return {};
  },
  computed: {
    isVip() {
      return this.$store.getters.isVip;
    },
  },
  methods: {
    goPath(item, index) {
      let query = Object.assign({}, this.query);
      query.title = item.text;
      switch (query.title) {
        case "分类练习":
          query.sort = 1;
          break;
        case "精选考题":
          query.sort = 2;
          break;
        case "顺序练习":
          query.sort = 3;
          break;
        case "地方练习":
          query.sort = 4
          break;
      }
      if (item.path) {
        let str = utils.mapToUrlQuery(query);
        console.log(item.path + "?" + str, "str");
        uni.navigateTo({
          url: item.path + "?" + str,
        });
      }
    },
  },
  props: {
    needVipList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    leftList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    query: {
      type: Object,
      default: () => {
        return {};
      },
    },
    subject: {
      type: Number,
      default: 1,
    },
  },
};
</script>

<style lang="scss" scoped>
.left {
  width: 160rpx;
  font-size: 30rpx;
  padding-top: 50rpx;
  .left-item {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-content: center;
    align-items: center;

    text-align: center;
    height: 220rpx;

    image {
      width: 100rpx;
      height: 100rpx;
    }
  }

  .separate {
    width: 100%;
    height: 40rpx;
    background: gray;
  }
}
</style>