<script setup lang="ts">
import { ref } from 'vue';
import AppBox from 'components/app/AppBox.vue';
import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';

const inputSearch = ref<string>('');

withDefaults(
  defineProps<{
    color: 'purple' | 'green';
  }>(),
  {
    color: 'green',
  },
);
</script>

<template>
  <AppBox no-padding bordered>
    <div class="row no-wrap justify-between q-pa-md bordered-b surface-2">
      <div class="row items-center">
        <q-btn
          round
          icon="mdi-arrow-left"
          flat
          dense
          @click="$emit('back')"
          class="q-mr-md"
        />
        <q-card-section
          class="q-pa-sm q-pt-md bg-green q-mr-md"
          style="border-radius: 0 0 40px 40px; position: relative; bottom: 20px"
        >
          <q-avatar no-padding size="50px">
            <img src="https://cdn.quasar.dev/img/avatar1.jpg" />
          </q-avatar>
        </q-card-section>
        <div>
          <div>นายสุขใจ แสนดี</div>
          <div class="flex items-center">
            <i
              class="isax isax-frame5"
              style="font-size: 1rem; color: var(--stone-6)"
            />
            {{ '10' }}
            <q-icon name="mdi-home" size="16px" style="color: var(--stone-6)" />
            {{ '2' }}
          </div>
        </div>
      </div>
      <div class="row items-center">
        <q-btn
          id="btn-add-customer"
          dense
          unelevated
          :label="'+ ' + $t('customerAdd')"
          padding="4px 16px"
          @click="console.log('add')"
          style="background-color: var(--cyan-6); color: white"
        />
        <q-separator vertical inset class="q-mx-lg" />
        <q-input
          style="width: 250px"
          outlined
          dense
          label="ค้นหา"
          class="q-mr-lg"
          :bg-color="$q.dark.isActive ? 'dark' : 'white'"
          v-model="inputSearch"
          debounce="500"
        ></q-input>
        <q-btn
          icon="mdi-tune-vertical-variant"
          size="sm"
          class="bordered rounded"
          unelevated
        >
          <q-menu class="bordered">
            <q-list v-close-popup dense>
              <q-item
                clickable
                class="flex items-center"
                @click="console.log('test')"
              >
                {{ $t('all') }}
              </q-item>
              <q-item
                clickable
                class="flex items-center"
                @click="console.log('test')"
              >
                {{ $t('statusACTIVE') }}
              </q-item>
              <q-item
                clickable
                class="flex items-center"
                @click="console.log('test')"
              >
                {{ $t('statusINACTIVE') }}
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </div>
    </div>
    <div class="row q-pa-lg q-col-gutter-xl">
      <div v-for="i in 2" class="col-4">
        <BranchCardCustomer></BranchCardCustomer>
      </div>
    </div>
  </AppBox>
</template>

<style scoped></style>
