<template>
  <div>
    <h1 v-if="title">{{title}}</h1>

    <div v-if="showParamDemo">
      <h2>在下方【Controls】界面，通过修改a, b , body的值，来改变接口参数进行测试</h2>
      <button @click="api1">{{`点击获取https://syman/api?a=${a} 接口参数`}}</button>
      <div>接口返回值: {{params1}}</div>

      <button @click="api2">{{`点击返回动态接口 https://syman/user/${b} 和 请求体拼接的字符串`}}</button>
      <div>接口返回值: {{params2}}</div>
    </div>

    <div v-if="showStatusDemo">
      <h2>在下方【Mock Request】界面，通过切换Status状态码进行测试</h2>
      <button @click="api3">请求接口</button>
      <div>返回接口状态码: {{msg}}</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: '',

  props: {
    /**
     * https://syman/api?a=* 的接口参数
     */
    a: {
      type: String,
      default: '测试接口'
    },
    /**
     * https://syman/user/:id 的接口:id参数
     */
    b: {
      type: String,
      default: '123456'
    },
    /**
     * https://syman/user/:id 的接口的body请求参数
     */
    body: {
      type: String,
      default: '我是body数据'
    },
    /**
     * 显示接口传参测试
     */
    showParamDemo: {
      type: Boolean,
      default: false
    },
    /**
     * 显示接口状态测试
     */
    showStatusDemo: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      title: '',
      params1: '',
      params2: '',
      status: '',
      msg: ''
    }
  },

  methods: {
    api1() {
      this.params1 = '请求中...'
      axios.get(`https://syman/api?a=${this.a}`).then(res => {
        console.log(res);
        this.params1 = res.data.value
      })
    },

    api2() {
      this.params2 = '请求中...'
      axios.post(`https://syman/user/${this.b}`, { demo: this.body }).then(res => {
        console.log(res);
        this.params2 = res.data.value
      })
    },

    api3() {
      this.msg = '请求中...'
      axios.get(`https://syman/api`).then(res => {
        console.log(res);
        this.msg = res.status
      }).catch(err => {
        this.msg = err
      })
    }
  },

  mounted() {
    axios.post('https://syman/render').then(res => {
      console.log(res);
      this.title = res.data.title
    })

  }
}
</script>

<style lang="scss" scoped>
</style>