<script>
import accountInfo from "@/components/modals/profile/accountInfo.vue";
import addAddress from "@/components/modals/profile/addAddress.vue";
import moment from "jalali-moment";
import addressList from "@/components/modals/profile/addressList.vue";
import Layout from "@/layout/custom.vue";
import { computed, onMounted, ref } from "vue";
import { useStore } from "vuex";
import ApiServiece from "@/services/ApiService";
export default {
  name: "ACCOUNT-PROFILE",
  components: {
    Layout,
    addAddress,
    accountInfo,
    addressList,
  },
  setup() {
    const addresses = ref([]);
    const store = useStore();
    const user = computed(() => store.getters["user/getUser"]);
    const convertToJalali = (date) => {
      return moment(date, "YYYY-MM-DD HH:mm:ss")
        .locale("fa")
        .format("YYYY/MM/DD");
    };
    const getAddress = () => {
      ApiServiece.get(`wholesale/my-addresses`).then((resp) => {
        addresses.value = resp.data.data;
        console.log(addresses.value);
      });
    };
    onMounted(() => {
      getAddress();
    });
    return {
      user,
      convertToJalali,
      addresses,
    };
  },
};
</script>

<template>
  <Layout>
    <BRow>
      <BCol class="col-sm-12">
        <!-- <BCard
      
          no-body
          class="alert alert-warning p-0"
        >
          <BCardBody>
            <div class="d-flex align-items-center">
              <div class="flex-grow-1 me-3">
                <h4 class="alert-heading">!هشدار</h4>
                <p class="mb-2">
                  شما هنوز هیچ آدرسی را ثبت نکرده اید برای اضافه کردن آدرس لینک
                  زیر را کلیک کنید
                </p>
                <a href="#" class="alert-link"><u>اضافه کردن آدرس</u></a>
              </div>
              <div class="flex-shrink-0">
                <img
                  src="@/assets/images/application/img-accout-password-alert.png"
                  alt="img"
                  class="img-fluid wid-80"
                />
              </div>
            </div>
          </BCardBody>
        </BCard> -->
        <BRow>
          <BCol class="col-lg-5 col-xxl-3">
            <BCard no-body class="overflow-hidden">
              <BCardBody class="position-relative">
                <div class="text-center mt-3">
                  <div class="chat-avtar d-inline-flex mx-auto">
                    <img
                      class="rounded-circle img-fluid wid-90 img-thumbnail"
                      src="@/assets/images/user/avatar-1.jpg"
                      alt="User image"
                    />
                  </div>
                  <h5 class="mb-2">{{ user.name }}</h5>
                </div>
              </BCardBody>
              <div
                class="nav flex-column nav-pills list-group list-group-flush account-pills mb-0"
                id="user-set-tab"
                role="tablist"
                aria-orientation="vertical"
              >
                <a
                  class="nav-link list-group-item list-group-item-action active"
                  id="user-set-profile-tab"
                  data-bs-toggle="pill"
                  href="#user-set-profile"
                  role="tab"
                  aria-controls="user-set-profile"
                  aria-selected="true"
                >
                  <span class="f-w-500"
                    ><i class="ph-duotone ph-user-circle m-r-10"></i>اطلاعات
                    حساب
                  </span>
                </a>
                <!-- <a
                  class="nav-link list-group-item list-group-item-action"
                  id="user-set-information-tab"
                  data-bs-toggle="pill"
                  href="#user-set-information"
                  role="tab"
                  aria-controls="user-set-information"
                  aria-selected="false"
                >
                  <span class="f-w-500"
                    ><i class="ph-duotone ph-clipboard-text m-r-10"></i> اضافه
                    کردن آدرس</span
                  >
                </a> -->
                <!-- <a
                  class="nav-link list-group-item list-group-item-action"
                  id="user-list-address-tab"
                  data-bs-toggle="pill"
                  href="#addressList"
                  role="tab"
                  aria-controls="addressList"
                  aria-selected="false"
                >
                  <span class="f-w-500"
                    ><i class="ph-duotone ph-map-pin m-r-10"></i> مشاهده آدرس ها
                  </span>
                </a> -->
              </div>
            </BCard>
          </BCol>
          <BCol class="col-lg-7 col-xxl-9">
            <div class="tab-content" id="user-set-tabContent">
              <addAddress  :initMap="true"/>
              <accountInfo :user="user" />
              <addressList :addresses="addresses" />
            </div>
          </BCol>
        </BRow>
      </BCol>
    </BRow>
  </Layout>
</template>
