<template>
  <div class="xw-867px w-100" :class="window.height < 947 ? 'h-100' : 'h-100vh_136px'"> 
    <!-- mb-100px  -->
    <!-- {{window.height}} -->
    <form action="" @submit.prevent="submit">
      <div class="w-100 b-we bor-6px bo-1px bo-EDEDED d-fx fxd-c ai-c pr-20px pl-20px">
        <span class="f-15px c-999999 lh-18px mt-40px" style="letter-spacing: 0.32px">Privacy Information</span>
        <div class="d-fx jc-sb mt-28px xw-515px w-100">
          <div v-for="(data, key, index) in form_data.location" :key="index" class="w-100">
            <!-- <span>{{index}}</span> -->
            <span :class="[(key === 'City' ? 'o-0' : '')]" class="f-13px fw-500 c-767676 lh-14px ">{{key}}</span>
            <input type="text" :placeholder="data.placeholder" 
              class="bo-1px w-100_6px bor-3px pl-12px pt-11px pb-11px f-15px lh-14px fw-400 mt-12px"
              :class="[(index === 0 ? 'mr-6px' : 'ml-6px'), ($v.form_data.location[key].$error === true ? 'bo-rd  ' : 'bo-D3D3D3')]"
              :value="data.value === 'null'? '' : data.value" @input="data.value = $event.target.value"
              @blur="$v.form_data.location[key].$touch()"
            >
            <!-- {{$v}} -->
            <!-- , ($v.form_data.data[0].$error === true ? 'bo-rd' : 'bo-D3D3D3') -->
            <!-- @blur="$v.form_data.data[0].value.$touch()" -->
          </div>
        </div>
        <div class="mb-54px xw-515px w-100">
          <div class="mt-20px" v-for="(data, key, index) in form_data.contacts" :key="index">
            <!-- {{data[0]}} -->
            <span class="f-13px fw-500 c-767676 lh-14px">{{key}}</span>
            <input type="text" :placeholder="data.placeholder" 
            class="bo-1px w-100 bor-3px pl-12px pt-11px pb-11px f-15px lh-14px fw-400 mt-12px"
            :class="[($v.form_data.contacts[key].$error === true ? 'bo-rd  ' : 'bo-D3D3D3')]"
            v-model="data.value"
            @blur="$v.form_data.contacts[key].$touch()"
            >
          </div>
        </div>
      </div>
      <!-- {{this.form_data.contacts.Email.value}} -->
    <div class="d-fx jc-c mt-24px">
      <!-- FIXME - CONTINUE HERE... -->
      <ic-button value="Cancel" @click.native.prevent="cancel" :class="`c-${colors.first} bo-${colors.first} b-${colors.first}-h`" class="mr-5px h-56px f-18px c-we-h" p="54px"></ic-button>
      <ic-button value="Save" :disabled="$v.$anyError" @click.native.prevent="updateData" :class="`c-${colors.first} bo-${colors.first} b-${colors.first}-h`" class="mr-5px h-56px f-18px c-we-h" p="54px"></ic-button>
    </div>
    </form>
  </div>
</template>

<script>
import { required, email } from 'vuelidate/lib/validators'
import { UserM } from '@/models/Userist.js'

// mixins
import windowListener from '@/mixins/WindowEventListener_mixins';

export default {
  name: 'PrivacyInformationC',
  extends: {},
  props: {
    colors: Object
  },
  data(){
    return{
      form_data: {
        location: {
          Address: {
            value: '',
            placeholder: 'Country'
          },
          City: {
            value: '',
            placeholder: 'City'
          },
        },
        contacts: {
          Email: {
            value: '',
            placeholder: 'Enter Email',
          },
          Phone: {
            value: '',
            placeholder: 'Enter Phone number'
          }
        }
      },
      user_data: [],
      dataReady: false
    };
  },
  validations: {
    form_data: {
      location: {
        Address: {
          value: {
            required
          }
        },
        City: {
          value: {
            required
          }
        },
      },
      contacts: {
        Email: {
          value: {
            email,
            required
          }
        },
        Phone: {
          value: {
            authentication (value) {
              return (/^(\+\d{1,2}[-]?)?\d{11}$/.test(value))
            },
            required
          }
        }
      }
    }
  },
  components: {},
  computed: {},
  watch: {},
  methods: {
    cancel () { //UpdateCurrentComponent
      this.$store.state.myPageAndProfile.currentComponent = 'ic-myPage'
    },
    async getUser() {
      this.$store.state.ic_loader.loader = true
      // const { data } = await UserM.getId(this.$store.state.auth.id)
      this.user_data = this.$store.state.sign.user_data
      this.setDataValue()
      this.dataReady = true
      this.$store.state.ic_loader.loader = false
    },
    setDataValue() {
      const [{country, city, email, phone}] = this.user_data
      this.form_data.location.Address.value = `${country}`
      this.form_data.location.City.value = `${city}`
      this.form_data.contacts.Email.value = `${email}`
      this.form_data.contacts.Phone.value = `${phone}`
      // alert(`${email}`)
    },
    async updateData () {
      const [{id, password,}] = this.user_data
      UserM.update(id, {
        "email" : `${this.form_data.contacts.Email.value}`,
        "password" : `${password}`,
        "country" : `${this.form_data.location.Address.value}`,
        "city": `${this.form_data.location.City.value}`,
        "phone" : `${this.form_data.contacts.Phone.value}`,
      })
      this.$store.state.sign.user_data[0].email = await `${this.form_data.contacts.Email.value}`,
      this.$store.state.sign.user_data[0].country = await `${this.form_data.location.Address.value}`,
      this.$store.state.sign.user_data[0].city = await `${this.form_data.location.City.value}`,
      this.$store.state.sign.user_data[0].phone = await `${this.form_data.contacts.Phone.value}`,
      // Sweet Alert 2
      this.$swal.fire('Success!', '', 'success')
    }
  },
  beforeCreate () {},
  beforeUpdate () {},
  mounted(){},
  created () {
    this.getUser()
  },
  mixins: [windowListener]
}
</script>
