<template>
  <div>
    <h3>内江师范学院录取查询<br><small>@Author: YD(AnonyEast)</small></h3>
    <hr>
    <div class="alert alert-info" role="alert">
      本网站是SpringBoot作为框架，Vue构建页面，BootStarp美化页面，Axios发送请求，Python从官网获取录取信息的前后端分离项目。
      <a href="https://gitee.com/AnonyEast/spring-boot-project/tree/master/Vue/admission-query" target="_blank">前端源码</a>
      <span>&nbsp;</span>
      <a href="https://gitee.com/AnonyEast/spring-boot-project/tree/master/AdmissionQuery" target="_blank">后端源码</a>
      <br>
      <span class="alert-link" v-show="queryCount!==''">本项目启动以来已完成{{queryCount}}次查询</span>
    </div>
    <form>
      <div class="form-group row">
        <label for="candidateNumber" class="col-sm-2 col-form-label">考生号</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" v-model="query_info.candidateNumber" id="candidateNumber">
        </div>
      </div>
      <div class="form-group row">
        <label for="studentName" class="col-sm-2 col-form-label">姓名</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" v-model="query_info.studentName" id="studentName">
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <legend class="col-form-label col-sm-2 pt-0">考生号类型</legend>
          <div class="col-sm-10">
            <div class="form-check">
              <input class="form-check-input" v-model="query_info.searchType" type="radio" name="searchType"
                     id="searchType0"
                     value="0" checked>
              <label class="form-check-label" for="searchType0">
                考生号
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" v-model="query_info.searchType" type="radio" name="searchType"
                     id="searchType1"
                     value="1">
              <label class="form-check-label" for="searchType1">
                准考证号
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-sm-10">
          <button type="button" class="btn btn-primary" @click="query()">查询</button>
          <div>{{msg}}</div>
        </div>
      </div>
    </form>
    <!--Info组件，当查询有结果时显示。传递result_info给该组件-->
    <Info :queryResult="result_info" v-show="showInfo"/>
  </div>
</template>

<script>
  import Vconsole from 'vconsole';

  let vConsole = new Vconsole();
  import Info from "./Info";//引入Info组件
  export default {
    name: 'Form',
    data() {
      return {
        query_info: {
          candidateNumber: '',
          studentName: '',
          searchType: '0',
        },
        result_info: {},
        showInfo: false,
        msg: '',
        queryCount: ''
      }
    },
    methods: {
      query() {//查询方法
        this.msg = "正在查询"
        //定义查询参数
        let params = new URLSearchParams();
        params.append('candidateNumber', this.query_info.candidateNumber);
        params.append('studentName', this.query_info.studentName);
        params.append('searchType', this.query_info.searchType);
        //向后台发送post请求查询录取信息
        this.$http.post(this.$api + "/searchAndSave", params)
            .then(res => {
              this.result_info = res.data;
              console.log(this.result_info);
              if (this.result_info !== '') {
                this.showInfo = true;
                this.msg = "";
              } else {
                this.showInfo = false;
                this.msg = "没有查询到结果"
              }
              this.count()
            })
            .catch(error => {
              console.log(error)
              this.msg = error
            });
      },
      count() {//从后台获取查询次数
        this.$http.get(this.$api + "/count").then(
            res => {
              this.queryCount = res.data;
            }
        )
      }
    },
    //在父组件注册子组件
    components: {
      Info
    },
    created() {//组件创建完成时获取查询次数
      this.count()
    },
    vConsole
  }
</script>