<template>
  <div>
    <Form
      label-position="left"
      :label-width="100"
    >
      <FormItem
        v-if="name"
        :label="$t('SHOP_USERNAME')"
      >
        <Input
          v-model="username"
          readonly
        />
      </FormItem>
      <FormItem :label="$t('SHOP_SPCF')">
        <Input
          v-model="spcf"
          readonly
        />
      </FormItem>
      <FormItem
        v-if="isShopAuthed"
        :label="$t('SHOP_PHONE_NUMBER')"
      >
        <Input
          v-model="phone"
          readonly
        />
      </FormItem>
      <FormItem
        v-if="isShopAuthed"
        :label="$t('SHOP_EMAIL')"
      >
        <Input
          v-model="email"
          readonly
        />
      </FormItem>
      <FormItem
        v-if="isShopAuthed"
        :label="$t('SHOP_ID')"
      >
        <Input
          v-model="id"
          readonly
        />
      </FormItem>
    </Form>
    <div
      v-if="isShopAuthed"
      class="text-right mt-10"
    >
      <span style="float: left">{{ msg }}</span>
    </div>
  </div>
</template>

<script>
import { imageUrl } from '@/adapter/shopee/render/index';
import { getShopeeSpcfValue, getShopeeProfileClient } from '@/api/shopee/client/shop';
import { getShopeeSellerFallbackInfo } from '@/api/shopee/seller';

export default {
  name: 'ShopInfo',
  data() {
    return {
      msg: '',
      name: '',
      username: '',
      id: '',
      image: '',
      phone: '',
      email: '',
      spcf: '',
      data: {},
      loading: false,
    };
  },
  methods: {
    async init() {
      const spcfValue = await getShopeeSpcfValue();
      this.spcf = spcfValue;

      const profileClient = await getShopeeProfileClient();

      if (profileClient) {
        this.name = profileClient.display_name;
        this.username = profileClient.username;
        this.phone = profileClient.phone;
        this.email = profileClient.email;
        this.id = profileClient.shopid;
        this.image = imageUrl(profileClient.portrait);
        this.data = profileClient;

        return true;
      }

      const sellerFallback = await getShopeeSellerFallbackInfo();

      this.name = sellerFallback.shopName;
      this.username = sellerFallback.username;
      this.id = sellerFallback.shopId;

      return true;
    },
  },
  created() {
    this.init();
  },
  computed: {
    isShopAuthed() {
      return !!this.id;
    },
  },
};
</script>
