<script>
import moment from "jalali-moment";
import { watch, toRef } from "vue";
export default {
  name: "PRODUCT-LIST",
  props: {
    addresses: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const convertToJalali = (date) => {
      return moment(date, "YYYY-MM-DD HH:mm:ss")
        .locale("fa")
        .format("YYYY/MM/DD");
    };
    const localAddresses = toRef(props.addresses);
    watch(
      () => props.addresses,
      (newVal) => (localAddresses.value = newVal)
    );
    return {
      localAddresses,
      convertToJalali,
    };
  },
};
</script>

<template>
  <div
    class="tab-pane fade"
    id="addressList"
    role="tabpanel"
    aria-labelledby="user-list-address-tab"
  >
    <BRow>
      <BCol class="col-sm-12">
        <BCard no-body class="table-card">
          <BCardBody>
            <div class="table-responsive">
              <table
                v-if="localAddresses.length > 0"
                class="table table-hover tbl-product"
                id="pc-dt-simple"
              >
                <thead>
                  <tr>
                    <th>آدرس</th>
                    <th>استان</th>
                    <th class="text-end">شهر</th>
                    <th class="text-end">کد پستی</th>
                    <th class="text-center">عنوان</th>
                    <th class="text-center">تاریخ ایجاد</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- Iterate over localAddresses -->
                  <tr v-for="addres in localAddresses" :key="addres.id">
                    <td>
                      <BRow>
                        <BCol>
                          <h6 class="mb-1">
                            {{ addres.address.slice(0, 20) }}...
                          </h6>
                          <p class="text-muted f-12 mb-0">
                            عرض جغرافیایی:
                            {{ addres.location.lat }} | طول جغرافیایی:
                            {{ addres.location.lng }}
                          </p>
                        </BCol>
                      </BRow>
                    </td>
                    <td>{{ addres.city }}</td>
                    <td class="text-end">{{ addres.town }}</td>
                    <td class="text-end">{{ addres.postcode }}</td>
                    <td v-if="!addres.title" class="text-center">
                      <i
                        class="ph-duotone ph-x-circle text-danger f-24"
                        data-bs-toggle="tooltip"
                        data-bs-title="danger"
                      ></i>
                    </td>
                    <td v-if="addres.title" class="text-center">
                      {{ addres.title }}
                    </td>
                    <td class="text-center">
                      <div class="prod-action-links">
                        <ul class="list-inline me-auto mb-0">
                          <li
                            class="list-inline-item align-bottom"
                            data-bs-toggle="tooltip"
                            title="Edit"
                          >
                            <router-link
                              to="/add-product"
                              class="avtar avtar-xs btn-link-success btn-pc-default"
                            >
                              <i class="ti ti-edit-circle f-18"></i>
                            </router-link>
                          </li>
                          <li
                            class="list-inline-item align-bottom"
                            data-bs-toggle="tooltip"
                            title="Delete"
                          >
                            <a
                              href="#"
                              class="avtar avtar-xs btn-link-danger btn-pc-default"
                            >
                              <i class="ti ti-trash f-18"></i>
                            </a>
                          </li>
                        </ul>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- Message when no addresses are available -->
              <div v-else class="text-center p-5">
                <BRow>
                  <BCol
                    class="col-lg-12 d-flex justify-content-center align-items-center"
                  >
                    <p class="text-muted">هیچ آدرسی برای نمایش وجود ندارد.</p>
                  </BCol>
                  <BCol
                    class="col-lg-10 d-flex justify-content-center align-items-center ms-5"
                  >
                    <img
                      class="img-fluid"
                      src="@/assets/images/pages/img-connection-lost.png"
                      alt="img"
                    />
                  </BCol>
                </BRow>
              </div>
            </div>
          </BCardBody>
        </BCard>
      </BCol>
    </BRow>
  </div>
</template>
