<template>
  <div
    class="flex flex-wrap pt-6 pl-6 pr-[6px] gap-x-8 relative w-[556px] h-[430px] rounded-xl bg-white shadow-[3px_3px_0_0_rgba(0,0,0,0.10)]"
  >
    <div class="flex-1 shrink-0 justify-between">
      <div class="flex items-center text-justify text-[#808080] text-20 font-normal leading-[18px] mb-2">
        <div class="flex-center mr-3 w-8 h-8 bg-[#B60081] rounded-xl">
          <svg class="w-4 h-6" xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24" fill="none">
            <path
              d="M7.71206 16.7038C10.6401 16.7038 12.5601 14.0638 12.5601 9.7918C12.5601 5.6638 10.6401 3.1198 7.71206 3.1198C4.78406 3.1198 2.88806 5.6638 2.88806 9.7918C2.88806 14.0638 4.78406 16.7038 7.71206 16.7038ZM13.2561 23.3038C9.84806 23.3038 7.49606 21.4318 6.39206 18.9358C2.57606 18.3118 0.00805664 14.9038 0.00805664 9.7918C0.00805664 4.0798 3.17606 0.695801 7.71206 0.695801C12.2721 0.695801 15.4161 4.1038 15.4161 9.7918C15.4161 14.7598 13.0161 18.0958 9.39206 18.8638C10.1841 20.3278 11.7921 20.9998 13.5681 20.9998C14.3361 20.9998 14.9601 20.8798 15.4641 20.7118L15.9921 22.8238C15.3921 23.0878 14.4081 23.3038 13.2561 23.3038Z"
              fill="white"
            />
          </svg>
        </div>
        {{ formatDate(customer.addTime) }}
      </div>
      <ScrollView class="relative h-[380px]" scrollbar :list="customer.suggestionContent">
        <div class="text-[#C70082] text-24 font-normal leading-normal whitespace-normal pr-[14px]">
          <div v-html="customer.suggestionContent"></div>
        </div>
      </ScrollView>
    </div>
    <div class="flex-1 shrink-0">
      <div class="flex items-center text-justify text-[#808080] text-20 font-normal leading-[18px] mb-2">
        <div class="flex-center mr-3 w-8 h-8 rounded-xl bg-[#F5F5F5] border border-solid border-[#808080]">
          <svg class="w-4 h-6" xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18" fill="none">
            <path
              d="M0.535889 17.8438L6.39189 0.155762H9.60789L15.4639 17.8438H12.5119L11.0239 12.8278H4.87989L3.39189 17.8438H0.535889ZM5.55189 10.6198H10.3519L9.65589 8.24376C9.07989 6.32376 8.55189 4.35576 7.99989 2.36376H7.90389C7.37589 4.37976 6.82389 6.32376 6.24789 8.24376L5.55189 10.6198Z"
              fill="#808080"
            />
          </svg>
        </div>
        {{ formatDate(customer.updateTime) }}
      </div>
      <ScrollView class="relative h-[356px]" scrollbar observe-image :list="customer.replyContent">
        <div class="text-[##333333] text-24 font-normal leading-normal whitespace-normal pr-2">
          <div v-html="customer.replyContent"></div>
          <div v-if="customer.sign" class="text-[#333] text-24">店铺店长: {{ customer.sign }}</div>
          <div class="flex items-center text-[#333] text-24 pt-2">
            总经理: 能岛拓也
            <svg
              class="w-12 h-12 ml-2.5 shrink-0"
              width="48"
              height="48"
              viewBox="0 0 48 48"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle cx="24" cy="24" r="22.9655" stroke="#E62222" stroke-width="2.06897" />
              <path
                d="M21.3975 14.2267H17.723V15.6568H21.3975V14.2267ZM15.9751 12.6576H23.2446V21.953C23.2446 22.8468 23.0857 23.3434 22.47 23.6214C21.8742 23.8995 20.9804 23.9392 19.7688 23.9392C19.6695 23.4427 19.3914 22.7078 19.1332 22.2311C19.9873 22.2708 20.8016 22.2708 21.0797 22.251C21.318 22.251 21.3975 22.1715 21.3975 21.9332V20.0463H17.723V23.9591H15.9751V12.6576ZM17.723 17.0868V18.5963H21.3975V17.0868H17.723ZM31.0107 6.93731L32.2422 8.30779C30.6929 9.04268 28.667 9.718 26.8198 10.2543V11.9028C26.8198 12.5781 26.9588 12.6774 27.8129 12.6774C28.1903 12.6774 30.0375 12.6774 30.534 12.6774C31.249 12.6774 31.3881 12.3596 31.4874 10.4926C31.8449 10.7905 32.6195 11.0686 33.1359 11.1878C32.9175 13.6705 32.401 14.3459 30.7128 14.3459C30.2559 14.3459 28.0115 14.3459 27.5944 14.3459C25.489 14.3459 24.9726 13.7897 24.9726 11.9227V5.58668H26.8198V8.74475C28.369 8.18862 29.958 7.5133 31.0107 6.93731ZM31.2093 15.8157L32.4606 17.206C30.9114 18.0799 28.7862 18.8148 26.8397 19.3908V21.377C26.8397 22.0523 27.0184 22.1715 27.8725 22.1715C28.2499 22.1715 30.1368 22.1715 30.6532 22.1715C31.4278 22.1715 31.5668 21.7941 31.6463 19.649C32.0435 19.947 32.7983 20.225 33.3147 20.3442C33.0962 23.0852 32.5798 23.8201 30.8121 23.8201C30.3553 23.8201 28.0711 23.8201 27.6342 23.8201C25.5288 23.8201 24.9925 23.2639 24.9925 21.377V14.8623H26.8397V17.8416C28.4882 17.2457 30.1566 16.5108 31.2093 15.8157ZM15.7566 11.4659C15.6573 11.0885 15.3395 10.1947 15.121 9.69813C15.4388 9.61868 15.7368 9.34062 16.0744 8.90365C16.3922 8.50641 17.425 6.99689 18.0209 5.48737L20.0071 6.04351C19.3715 7.29482 18.5175 8.566 17.6833 9.59882L21.4173 9.36048C21.0399 8.66531 20.603 7.97013 20.1859 7.35441L21.755 6.73868C22.7481 8.08931 23.8206 9.87689 24.198 11.0885L22.5296 11.8035C22.4303 11.4857 22.2913 11.1481 22.1125 10.7707C16.9484 11.1679 16.2135 11.2871 15.7566 11.4659ZM17.5839 27.0962H22.1522C22.3508 26.5401 22.5495 25.9243 22.6488 25.4675L24.8733 25.686C24.6548 26.1825 24.3768 26.6592 24.1384 27.0962H29.9977V33.3726H19.4311V34.6041H32.977V36.0341H19.4311V37.1265H32.262C32.262 37.1265 32.2422 37.6032 32.2024 37.8416C31.9244 41.3373 31.6264 42.7872 31.11 43.3632C30.7326 43.7406 30.3751 43.8797 29.8388 43.9392C29.382 43.9988 28.5478 43.9988 27.6342 43.9392C27.6143 43.4625 27.4355 42.7674 27.1773 42.3304C27.9519 42.4099 28.667 42.4297 28.945 42.4297C29.243 42.4297 29.4217 42.3701 29.5806 42.2112C29.8786 41.8934 30.1169 40.9202 30.3354 38.5368H17.5839V27.0962ZM28.1108 30.87H19.4311V32.0419H28.1108V30.87ZM28.1108 29.6584V28.427H19.4311V29.6584H28.1108ZM15.8758 39.371H17.5839V41.2976H20.5235V38.8347H22.2515V41.2976H25.1514V39.3312H26.8595V43.3434H25.1514V42.7475H15.8758V39.371Z"
                fill="#E62222"
              />
            </svg>
          </div>
        </div>
      </ScrollView>
    </div>
  </div>
</template>

<script setup lang="ts">
import ScrollView from '@/base/ScrollView/ScrollView.vue'

type Props = {
  customer: Customer
}

withDefaults(defineProps<Props>(), {
  customer: () => ({} as Customer)
})

function formatDate(date: string) {
  if (!date) {
    return
  }
  const newDate = new Date(date)
  const year = newDate.getFullYear()
  const month = String(newDate.getMonth() + 1).padStart(2, '0')
  const week = String(newDate.getDate()).padStart(2, '0')
  return `${year}-${month}-${week}  ${newDate.getHours().toString().padStart(2, '0')}:${newDate.getMinutes().toString().padStart(2, '0')}`
}
</script>

<style>
.bscroll-vertical-scrollbar {
  width: 4px !important;
  height: 120px !important;
  background-color: rgb(0 0 0 / 3%) !important;
  opacity: 1 !important;
}
.bscroll-indicator {
  width: 4px !important;
  height: 60px !important;
  background-color: rgb(0 0 0 / 6%) !important;
  border: none !important;
}
</style>
