<template>
  <view>
    <view class="card-view">
      <image src="../../static/img/train-banner1.png" mode="aspectFill" style="width: 100%;"></image>
    </view>

    <view class="card-view">
      <!-- <tui-divider width="80%" gradual>选择要练习的题目类型</tui-divider> -->

      <view class="margin">
        <tn-radio-group activeColor="#5677fc" v-model="mode">
          <tn-radio name="normal">正常模式</tn-radio>
          <tn-radio name="memory">记忆模式</tn-radio>
          <tn-radio name="random">随机模式</tn-radio>
        </tn-radio-group>
      </view>

      <view class="margin-left text-sm tn-color-gray">
        <view v-if="mode == 'normal'">* 按顺序出题，不记忆当前做题题标</view>
        <view v-if="mode == 'memory'">* 按顺序出题，记忆当前做题题标，下次进入直接跳至题标</view>
        <view v-if="mode == 'random'">* 随机出题，不记忆当前做题题标</view>
      </view>

      <tui-cascade-selection height="200px" :itemList="cateList" @complete="complete" text="请选择题库"
                             :defaultItemList="defaultCateList"></tui-cascade-selection>
    </view>

    <view style="width:90%; margin: 10rpx auto;" class="padding-bottom-xl">
      <tui-button shape="circle" shadow bold preventClick :disabled="questionCount == 0" @click="goTrain">{{ btnText }}</tui-button>
    </view>

    <login ref="login" v-on:succ="getCate"></login>
  </view>
</template>

<script>
export default {
  data () {
    return {
      page: '',
      cateList: [],
      cateId: 0,
      cateName: '',
      questionCount: 0,
      btnText: '开始练习',
      mode: 'normal',
      defaultCateList: []
    }
  },
  onLoad (e) {
    this.page = e?.page
    this.getCate()
  },
  methods: {
    // 获取分类
    getCate () {
      this.http('cate/getThree', {
        kind: 'QUESTION'
      }).then(res => {
        this.cateList = res.data

        // 模拟分类点击事件
        if (this.cateId) {
          this.complete({
            value: this.cateId,
            result: [
              {
                text: this.cateName
              }
            ]
          })
        } else {
          let defaultCate = this.utils.getData('default_cate-QUESTION')
          console.log('defaultCate', defaultCate)
          if (defaultCate) {
            let lastCate = [...defaultCate.result].pop()
            console.log('lastCate', lastCate)

            let defaultCateList = []
            for (var i = 0; i < defaultCate.result.length; i++) {
              defaultCateList.push(defaultCate.result[i].text)
            }
            this.defaultCateList = defaultCateList

            this.cateId = lastCate.value
            this.cateName = lastCate.text

            this.complete({
              value: this.cateId,
              result: [
                {
                  text: this.cateName
                }
              ]
            })
          }

          // let user = this.utils.getData('user')
          // if (user?.info && user.info?.default_cate_ids) {
          // 	this.defaultCateList = [...user.info.default_cate_names]

          // 	this.cateId = [...user.info.default_cate_ids].pop()
          // 	this.cateName = [...user.info.default_cate_names].pop()

          // 	this.complete({
          // 		value: this.cateId,
          // 		result: [
          // 			{
          // 				text: this.cateName
          // 			}
          // 		]
          // 	})
          // }
        }

        // this.defaultCateList = ["消防","灭火救援常识",]
      })
    },
    // 选择分类
    complete (e) {
      console.log(e);
      console.log('您选择的数据为：', e);

      this.cateId = e.value
      this.cateName = e.result[e.result.length - 1].text

      let params = {
        cate_id: this.cateId,
        just_get_count: 1
      }

      this.$refs.login.afterMethod = () => {
        this.complete(e)
      }
      console.log('afterMethod', this.$refs.login.afterMethod)
      this.http('question/train', params).then(res => {

        if (res.code == 1) {
          this.questionCount = res.data.total
          if (this.questionCount) {
            this.btnText = '开始练习（' + this.questionCount + '题）'
          } else {
            this.btnText = '当前分类无试题'
          }
        } else {
          this.utils.toast(res.msg)
        }
      })

    },
    // 开始练习
    goTrain () {
      if (!this.cateId) {
        this.utils.toast('请先选择练习题分类')
        return
      }

      this.page = this.page == 'train' ? 'train' : 'look'
      this.utils.goto(this.page + '?cateId=' + this.cateId + '&cateName=' + this.cateName + '&mode=' + this.mode)
    }
  }
}
</script>

<style>
.tn-radio__label {
  color: #333 !important;
  font-size: 15px !important;
}
</style>
