<script setup>
import { date } from 'alga-js'
const router = useRouter()
const quickView = useQuickView()
const quickViewParam = useQuickViewParam()

const props = defineProps({
  modelName: String 
})

const showQuickViewContent = ref(false)
const handleQuickViewContent = () => {
  if(quickView.value === 'partner') {
    setTimeout(() => {
      showQuickViewContent.value = true
    }, 400)
  }
}
onMounted(handleQuickViewContent)
watch(quickView, handleQuickViewContent)

const viewHandler = () => {
  router.push(`/partners/partners/${quickViewParam.value.id}/view`)
  setTimeout(() => {
    quickView.value = ''
    quickViewParam.value = {}
  }, 400)
}
const closeQuickView = () => {
  showQuickViewContent.value = false
  setTimeout(() => {
    quickView.value = ''
    quickViewParam.value = {}
  }, 400)
}
</script>

<template>
  <div class="offCanvas right" :class="{'active': quickView === 'partner'}" :style="{display: quickView === 'partner' ? 'block' : 'none'}">
    <div class="offCanvasBackdrop" @click.self="closeQuickView"></div>
    <Transition name="slideRight">
    <div v-if="showQuickViewContent" class="offCanvasContent">
      <div class="offCanvasHeader">
        <h3 class="offCanvasTitle">Business Partner Details</h3>
        <div class="cursor-pointer" @click="closeQuickView">
          <span class="tf-icon ti ti-x ti-sm me-1"></span>
        </div>
      </div>
      <div class="offCanvasBody">
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Tenant</strong>
          <div class="textAlign-right">{{ quickViewParam.client }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Organization</strong>
          <div class="textAlign-right">{{ quickViewParam.organization }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Name</strong>
          <div class="textAlign-right">{{ quickViewParam.name }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>2nd Name</strong>
          <div class="textAlign-right">{{ quickViewParam.name2 }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Business Partner Group</strong>
          <div class="textAlign-right">{{ quickViewParam.partnerGroup }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Search Key</strong>
          <div class="textAlign-right">{{ quickViewParam.value }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Reference No</strong>
          <div class="textAlign-right">{{ quickViewParam.referenceNo }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Rating</strong>
          <div class="textAlign-right">{{ quickViewParam.rating }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Representative/Agent</strong>
          <div class="textAlign-right">{{ quickViewParam.salesRep }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Credit Status</strong>
          <div class="textAlign-right">{{ quickViewParam.soCreditStatus }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Credit Limit</strong>
          <div class="textAlign-right">{{ quickViewParam.soCreditLimit }}</div>
        </div>
        <div class="d-flex justify-between gap-10px">
          <strong>Open Balance</strong>
          <div class="textAlign-right">{{ quickViewParam.totalOpenBalance }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Tax ID</strong>
          <div class="textAlign-right">{{ quickViewParam.taxID }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>URL</strong>
          <div class="textAlign-right">{{ quickViewParam.URL }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Description</strong>
          <div class="textAlign-right">{{ quickViewParam.description }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Invoice Rule</strong>
          <div class="textAlign-right">{{ quickViewParam.invoiceRule }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Payment Rule</strong>
          <div class="textAlign-right">{{ quickViewParam.paymentRule }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Payment Term</strong>
          <div class="textAlign-right">{{ quickViewParam.paymentTerm }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Invoice Schedule</strong>
          <div class="textAlign-right">{{ quickViewParam.invoiceRule }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Delivery Rule</strong>
          <div class="textAlign-right">{{ quickViewParam.deliveryRule }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Delivery Via</strong>
          <div class="textAlign-right">{{ quickViewParam.deliveryViaRule }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Price List</strong>
          <div class="textAlign-right">{{ quickViewParam.priceList }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Discount Schema</strong>
          <div class="textAlign-right">{{ quickViewParam.discountSchema }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Flat Discount %</strong>
          <div class="textAlign-right">{{ quickViewParam.flatDiscount }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Dunning</strong>
          <div class="textAlign-right">{{ quickViewParam.dunning }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Dunning Grace Date</strong>
          <div class="textAlign-right">{{ quickViewParam.dunningGrace }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Min Shelf Life %</strong>
          <div class="textAlign-right">{{ quickViewParam.shelfLifeMinPct }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Payment Rule</strong>
          <div class="textAlign-right">{{ quickViewParam.paymentRulePO }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Payment Term</strong>
          <div class="textAlign-right">{{ quickViewParam.poPaymentTerm }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>PO Price List</strong>
          <div class="textAlign-right">{{ quickViewParam.poPriceList }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>PO Discount Schema</strong>
          <div class="textAlign-right">{{ quickViewParam.poDiscountSchema }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Order Reference</strong>
          <div class="textAlign-right">{{ quickViewParam.poReference }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Document Copies</strong>
          <div class="textAlign-right">{{ quickViewParam.documentCopies }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Order Description</strong>
          <div class="textAlign-right">{{ quickViewParam.soDescription }}</div>
        </div>
        <div class=" mb-2 d-flex justify-between gap-10px">
          <strong>Greeting</strong>
          <div class="textAlign-right">{{ quickViewParam.greeting }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Invoice Print Format</strong>
          <div class="textAlign-right">{{ quickViewParam.printFormat }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Language</strong>
          <div class="textAlign-right">{{ quickViewParam.language }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Share</strong>
          <div class="textAlign-right">{{ quickViewParam.shareOfCustomer }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Acquisition Cost</strong>
          <div class="textAlign-right">{{ quickViewParam.acqusitionCost }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Potential Life Time Value</strong>
          <div class="textAlign-right">{{ quickViewParam.potentialLifeTimeValue }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Sales Volume in</strong>
          <div class="textAlign-right">{{ quickViewParam.salesVolume }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>First Sale</strong>
          <div class="textAlign-right">{{ quickViewParam.firstSale }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Actual Life Time Value</strong>
          <div class="textAlign-right">{{ quickViewParam.actualLifeTimeValue }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>Employees</strong>
          <div class="textAlign-right">{{ quickViewParam.numberEmployees }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>NAICS</strong>
          <div class="textAlign-right">{{ quickViewParam.NAICS }}</div>
        </div>
        <div class="mb-2 d-flex justify-between gap-10px">
          <strong>D-U-N-S</strong>
          <div class="textAlign-right">{{ quickViewParam.DUNS }}</div>
        </div>
        <div class="mb-3">
          <strong class="label d-block mb-2 fw-bold">Status</strong>
          <div class="check">
            <input type="checkbox" v-model="quickViewParam.isCustomer" class="checkInput" id="isCustomer" :checked="quickViewParam.isCustomer" disabled>
            <label class="checkLabel" for="isCustomer">Customer</label>
          </div>
          <div class="check">
            <input type="checkbox" v-model="quickViewParam.isVendor" class="checkInput" id="isVendor" :checked="quickViewParam.isVendor" disabled>
            <label class="checkLabel" for="isVendor">Vendor</label>
          </div>
          <div class="check">
            <input type="checkbox" v-model="quickViewParam.isEmployee" class="checkInput" id="isEmployee" :checked="quickViewParam.isEmployee" disabled>
            <label class="checkLabel" for="isEmployee">Employee</label>
          </div>
          <div class="check">
            <input type="checkbox" v-model="quickViewParam.isProspect" class="checkInput" id="isProspect" :checked="quickViewParam.isProspect" disabled>
            <label class="checkLabel" for="isProspect">Prospect</label>
          </div>
          <div class="check">
            <input type="checkbox" v-model="quickViewParam.isSalesRep" class="checkInput" id="isSalesRep" :checked="quickViewParam.isSalesRep" disabled>
            <label class="checkLabel" for="isSalesRep">Sales Representative</label>
          </div>
          <div class="check">
            <input type="checkbox" v-model="quickViewParam.isTaxExempt" class="checkInput" id="isTaxExempt" :checked="quickViewParam.isTaxExempt" disabled>
            <label class="checkLabel" for="isTaxExempt">SO Tax Exempt</label>
          </div>
          <div class="check">
            <input type="checkbox" v-model="quickViewParam.isPOTaxExempt" class="checkInput" id="isPOTaxExempt" :checked="quickViewParam.isPOTaxExempt" disabled>
            <label class="checkLabel" for="isPOTaxExempt">PO Tax Exempt</label>
          </div>
          <div class="check">
            <input type="checkbox" v-model="quickViewParam.isActive" class="checkInput" id="isActive" :checked="quickViewParam.isActive" disabled>
            <label class="checkLabel" for="isActive">Active</label>
          </div>
          <div class="check">
            <input type="checkbox" v-model="quickViewParam.isSummary" class="checkInput" id="isSummary" :checked="quickViewParam.isSummary" disabled>
            <label class="checkLabel" for="isSummary">Summary Level</label>
          </div>
          <div class="check">
            <input type="checkbox" v-model="quickViewParam.isManufacturer" class="checkInput" id="isManufacturer" :checked="quickViewParam.isManufacturer" disabled>
            <label class="checkLabel" for="isManufacturer">Manufacturer</label>
          </div>
          <div class="check">
            <input type="checkbox" v-model="quickViewParam.is1099Vendor" class="checkInput" id="is1099Vendor" :checked="quickViewParam.is1099Vendor" disabled>
            <label class="checkLabel" for="is1099Vendor">1099 Vendor</label>
          </div>
          <div class="check">
            <input type="checkbox" v-model="quickViewParam.isDiscountPrinted" class="checkInput" id="isDiscountPrinted" :checked="quickViewParam.isDiscountPrinted" disabled>
            <label class="checkLabel" for="isDiscountPrinted">Discount Printed</label>
          </div>
        </div>
      </div>
      <div class="offCanvasFooter">
        <div></div>
        <div class="d-flex justify-flexEnd gap-5px">
          <button type="button" class="button" @click="viewHandler">View More Details</button>
          <button type="button" class="button" @click="closeQuickView">Close</button>
        </div>
      </div>
    </div>
    </Transition>
  </div>
</template>

<style scoped>

</style>