<template>
  <div
    class="flex flex-wrap pt-6 pl-6 pr-[6px] gap-x-8 relative w-[436px] h-[440px] rounded-xl bg-white shadow-[0px_4px_10px_0px_rgba(0,0,0,0.06)]"
  >
    <div class="flex-1 shrink-0 justify-between">
      <div class="flex items-center text-justify text-[#808080] text-16 font-normal leading-[18px] mb-2">
        <div class="flex-center mr-3 w-6 h-6 bg-[#B60081] rounded-xl">
          <img src="../../assets/images/q.svg" class="w-3 h-5" alt="" />
        </div>
        {{ formatDate(customer.addTime) }}
      </div>
      <ScrollView class="relative h-[355px]" scrollbar :list="customer.suggestionContent">
        <div class="text-black/50 text-20 font-normal leading-normal pr-[14px] pb-10 break-all">
          <div v-html="customer.suggestionContent"></div>
        </div>
      </ScrollView>
    </div>
    <div class="flex-1 shrink-0">
      <div class="flex items-center text-justify text-[#333] text-16 font-normal leading-[18px] mb-2">
        <div class="flex-center mr-3 w-6 h-6 rounded-xl bg-[#F5F5F5] border border-solid border-[#808080]">
          <img src="../../assets/images/a.svg" class="w-3 h-5" alt="" />
        </div>
        {{ formatDate(customer.updateTime) }}
      </div>
      <ScrollView class="relative h-[356px]" scrollbar observe-image :list="customer.replyContent">
        <div class="text-[##333333] text-20 font-normal leading-normal break-all pr-2">
          <div class="mb-2" v-html="customer.replyContent"></div>
          <div v-if="customer.sign" class="text-[#333] text-16">店铺店长: {{ customer.sign }}</div>
          <div class="flex items-center text-[#333] text-16 pt-2">
            总经理: 能岛拓也
            <img src="../../assets/images/manager.svg" class="w-10 h-10 ml-2.5 shrink-0" />
          </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>
