<template lang="pug">
.container
  .alert.alert-danger(role='alert', v-if='errors.length')
    b Пожалуйста исправьте указанные ошибки:
      ul
        li(v-for='error in errors') {{ error }}

  .d-flex.justify-content-center.h-100
    .card
      .card-header
        h3 Авторизация
        .d-flex.justify-content-end.social_icon
          span
            i.fab.fa-facebook-square
          span
            i.fab.fa-google-plus-square
          span
            i.fab.fa-twitter-square
      .card-body
        form
          .input-group.form-group
            .input-group-prepend
              span.input-group-text
                i.fas.fa-user
            input.form-control(type='text', placeholder='Логин' v-model='login')
          .input-group.form-group
            .input-group-prepend
              span.input-group-text
                i.fas.fa-key
            input.form-control(type='password', placeholder='Пароль' v-model='password')
          .row.align-items-center.remember
            input(type='checkbox')
            | Запомнить меня
          .form-group
            input.btn.float-right.login_btn(type='button', value='Войти' v-on:click='loginAction')
      .card-footer
        .d-flex.justify-content-center.links
          | Нет аккаунта? Зарегистрируйтесь сейчас!
          a(href='#') Войти
        .d-flex.justify-content-center
          a(href='#') Забыли свой пароль?
</template>

<script>
export default{
  data () {
    return {
      errors: [],
      login: null,
      password: null,
      data: ''
    }
  },
  created () {
    // console.log(this.$cookies.get('rpc-api-session'))
    // Получить доступ к списку каналов
    /* this.$http.get('http://192.168.85.3/android/rpc/get-tv-contents?result_format=json&type=unicast&mode=internet&options=0', {withCredentials: true})
      .then(response => console.log(response.data)) */
  },
  methods: {
    validateForm: function (event) {
      if (this.login && this.password) {
        return true
      }

      this.errors = []

      if (!this.login) {
        this.errors.push('Требуется ввести логин!')
      }

      if (!this.password) {
        this.errors.push('Требуется ввести пароль!')
      }
    },
    loginAction: function () {
      this.validateForm()

      var dataReq = new FormData()
      dataReq.set('login', this.login)
      dataReq.set('password', this.password)

      this.$http.post('http://192.168.85.3/android/rpc/login?result_format=json', dataReq, {
        headers: {
          'Accept': 'application/json, text/plain, */*',
          'Accept-Language': 'ru-RU,ru;q=0.8,en-US;q=0.5,en;q=0.3',
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
        .then((response) => {
          this.$cookies.set('isLoggedIn', true)
          this.$cookies.set('rpc-api-session', response.data.session_id)
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  margin-top 35px
</style>