<template>
  <div class="cell-container">
    <div class="cell-box" :class="{
      'is-row':isRow

    }" >
      <van-cell
        class="cell"
        :title="
          item.excellIssueName ||
          item.placeIssueName ||
          item.classIssueName ||
          item.sequeIssueName
        "
        is-link
        center
        v-for="(item, index) in classDataLeft"
        :key="index"
        :border="false"
        @click="
          () => {
            goExercise({
              excellIssueName: item.excellIssueName,
            });
          }
        "
      >
        <template #icon>
          <div class="icon-blue">{{ index + 1 }}</div>
        </template>
      </van-cell>
      <!-- <van-cell
        v-if="query.title !== '地方专题'"
        @click="
          () => {
            push({
              name: 'classify',
              query: {
                ...query,
                title: '地方专题',
                path: 'selectDfQuestionInfo',
                sort: 4,
              },
            });
          }
        "
        class="cell"
        title="地方专题"
        is-link
        center
        :border="false"
      >
        <template #icon>
          <div class="icon-blue">{{ "地" }}</div>
        </template>
      </van-cell> -->
    </div>
    <div style="padding-right:0rpx" class="cell-box">
      <van-cell
        class="cell"
        :title="
          item.placeIssueName ||
          item.classIssueName ||
          item.excellIssueName ||
          item.sequeIssueName
        "
        @click="
          () => {
            goExercise({
              excellIssueName: item.excellIssueName,
            });
          }
        "
        is-link
        center
        v-for="(item, index) in classDataRight"
        :key="index"
        :border="false"
      >
        <template #icon>
          <div class="icon-red">{{ index + 1 }}</div>
        </template>
      </van-cell>
    </div>
     <div style="height:40rpx;width: 750rpx;"></div>
    <m-classify-tip :content="classifyTip"></m-classify-tip>
  </div>
</template>

<script>
import api from "@/api/index";
import utils from "@/utils/index";
export default {
  data() {
    return {
      isRow:false,
      classifyTip:['软件题库已同步更新至车管所最新,左边的红色必学题,每套题必须学完.',
      '模拟考试能连续5次以上达到96分左右,即可参加考试','如果模拟考试达不到要求,请把右边的选学题也学习一遍'],
      classDataRight: [],
      classDataLeft: [],
      query: {
        vehicle:""
      },
    };
  },
  onLoad(query) {
    this.query = query;
    this.isRow = this.query.vehicle ==='摩托车'
    this.getClassData();
  },
  methods: {
    goExercise(extraQuery) {
      let query = Object.assign({}, this.query);
      if (extraQuery) {
        query = {
          ...query,
          ...extraQuery,
        };
      } else {
      }

      uni.navigateTo({
        url: "/otherPages/exercise/index?" + utils.mapToUrlQuery(query),
      });
    },
    getClassData() {
      if (this.query.vehicle === "摩托车") {
        api.exam
          .studentQuestionInfoSelectJxQuestionInfo({
            ...this.query,
          })
          .then((res) => {
            this.classDataLeft = res.data;
          });
      } else {
        api.exam
          .studentQuestionInfoSelectJxQuestionInfo({
            ...this.query,
            excellIssueName: "选学",
          })
          .then((res) => {
            this.classDataRight = res.data;
          });
        api.exam
          .studentQuestionInfoSelectJxQuestionInfo({
            ...this.query,
            excellIssueName: "必",
          })
          .then((res) => {
            // res.data.shift();
            this.classDataLeft = res.data;
            api.exam
              .studentQuestionInfoSelectJxQuestionInfo({
                ...this.query,
                excellIssueName: "新增",
              })
              .then((res) => {
                this.classDataLeft = [...this.classDataLeft, ...res.data];
              });
          });
      }
    },
  },
};

// getTopicClass(query.path as string, {
// 	...query,
// 	excellIssueName: "必",
// }).then(({ data }) => {
// 	// res.data.data.shift();
// 	console.log(data);
// 	classDataLeft.value = data.data;
// 	getTopicClass(query.path as string, {
// 		...query,
// 		excellIssueName: "新增",
// 	}).then(({ data }) => {
// 		// data.data.shift();
// 		classDataLeft.value = [...classDataLeft.value, ...data.data];
// 	});
// 	getTopicClass(query.path as string, {
// 		...query,
// 		excellIssueName: "地方",
// 	}).then(({ data }) => {
// 		// data.data.shift();
// 		classDataLeft.value = [...classDataLeft.value, ...data.data];
// 	});

// });

// getTopicClass(query.path as string, {
// 	...query,
// 	excellIssueName: "选学",
// }).then(({ data }) => {
// 	classDataRight.value = data.data;
// });
</script>

<style lang="scss" scoped>

.cell-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
    padding: 5px 15px;
    justify-content: space-between;
}
.cell-box {
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;

  box-sizing: border-box;

  .cell {
    width: 167px;
    margin-top: 10px;
    box-shadow: 0px 0px 10px rgba(124, 129, 136, 0.2);
  }
  .icon-blue {
    width: 20px;
    height: 20px;
    background: #498ef5;
    border-radius: 50%;
    font-weight: 500;
    font-family: PingFang SC;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    margin-right: 5px;
  }
  .icon-red {
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    font-weight: 500;
    font-family: PingFang SC;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    margin-right: 5px;
  }
}
.is-row{
  flex-direction: row;
  width: 100%;
    justify-content: space-between;
}
</style>
