<template>
  <ld-page>
    <l-space direction="vertical" size="16px">
      <h2>路由</h2>
      <l-button @click="goHome">回到首页</l-button>
      <h2>Request数据请求：</h2>
      <div>
        <l-space>
          <l-button :loading="loading" @click="getUserInfo">获取登录信息</l-button>
          <l-button @click="onUpload">调用外部方法</l-button>
        </l-space>
        <div style="height:100px;overflow: auto;width:300px;background-color: #f5f5f5;border-radius: 6px;margin-top:24px;" v-if="userInfo">
          <p>登录用户：{{ userInfo.userflag || userInfo.fullName }}</p>
          <p>岗位信息：{{ userInfo.positionCNName }}</p>
        </div>
      </div>
      <h2>store</h2>
      <l-button @click="setInfo">改变</l-button>
      <p>{{ test }}</p>
      <h3>用户信息</h3>
      <p>{{ $userInfo }}</p>
    </l-space>
  </ld-page>
</template>
<script>
import {upload} from '@/utils'
import {useTestStore} from '@/store/test'
const testStore = useTestStore()
export default {
  computed: {
    test: () => testStore.info,
  },
  inject: [
    '$userInfo'
  ],
  data () {
    return {
      userInfo: null,
      loading: false
    }
  },
  created () {
  },
  methods: {
    setInfo () {
      testStore.$setInfo('我是更改后的')
    },
    onUpload () {
      upload().then(res => {
        console.log(res)
      })
    },
    goHome () {
      this.$router.router.push('/')
    },
    getUserInfo () {
      this.loading = true
      this.$request('app_getUserInfo', 'leap').then((res) => {
        this.userInfo = res
        console.log(res)
        this.loading = false
      })
    }
  }
}
</script>