<template>
  <div class="wrap">
    <InOut v-if="inOutVal==='1'" :toflag = "0"/>
    <Pay v-else-if="inOutVal==='2'&&_getPayFlag" :title="title" :money="money"/>
    <InOut v-else :toflag = "1" @commitpass="transmit"/>
    <Loading v-show="_getshowflag"/>
  </div>
</template>

<script>
import Loading from './Loading'
import InOut from './InOut'
import Pay from './Pay'
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'HelloWorld',
  components: {
    Loading, InOut, Pay
  },
  data() {
    return {
      payFlag: false,
      inOutVal: this.$route.query.id,
      // isShow: ''
      title: '',
      money: ''
    }
  },
  computed: {
    ...mapGetters([
      '_getshowflag', '_getPayFlag'
    ])
  },
  created() {
    setTimeout(() => {
      this.handleHide()

      // $http.get('/user', {
      //   params: {
      //     ID: 12345
      //   }
      // })
      // .then(function (response) {
      //   console.log(response);
      // })
      // .catch(function (error) {
      //   console.log(error);
      // });

      // $http.post('/user', {
      //   firstName: 'Fred',
      //   lastName: 'Flintstone'
      // })
      // .then(function (response) {
      //   console.log(response);
      // })
      // .catch(function (error) {
      //   console.log(error);
      // });

      // 模拟请求
      // this.$fetch('/api/v2/movie/top250').then((response) => {
      //   console.log(response)
      // })
      // },
      // this.handlePayFlag()
      console.log(this._getPayFlag)
      // this.title = '手机: 13911137584'
      // this.money = '¥100.00'
    }, 2000)
  },
  methods: {
    ...mapActions([
      'handleHide',
      'handleShow',
      'handlePayFlag'
    ]),
    transmit(data) {
      console.log(data)
      this.title = data.title
      this.money = data.money
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .wrap {
    width: 100%;
    height: 100%;
    position: relative;
  }
</style>
