<template>
  <div class="flex flex-wrap pt-6 pl-6 pr-[6px] space-x-8 relative w-[720px] rounded-xl bg-white shadow-[3px_3px_0_0_rgba(0,0,0,0.10)]">
    <div class="flex-1 justify-between">
      <div class="text-justify text-[#808080] text-12 font-normal leading-[18px] mb-2">
        {{ formatDate(customer.addTime) }}
      </div>
      <ScrollView class="relative h-[356px]" scrollbar :list="[]">
        <div class="text-justify text-[#C70082] text-16 font-normal leading-normal whitespace-normal pr-[14px]">
          Q:{{ customer.suggestionContent }}
        </div>
      </ScrollView>
    </div>
    <div class="flex-1">
      <div class="text-justify text-[#808080] text-12 font-normal leading-[18px] mb-2">
        {{ formatDate(customer.updateTime) }}
      </div>
      <ScrollView class="relative h-[356px]" scrollbar observe-image :list="[]">
        <div class="text-justify text-[##333333] text-16 font-normal leading-normal whitespace-normal pr-[14px]">
          A:
          <div>
            {{ customer.replyContent }}
            <template v-if="customer.fileList?.length">
              <img
                v-for="item of customer.fileList"
                :key="item.fileName"
                :src="config.smallUrl + item.filePath"
                class="block w-full"
                alt=""
              />
            </template>
          </div>
        </div>
      </ScrollView>
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs } from 'vue'
import { useRootStore } from '@/store/root'
import ScrollView from '@/base/ScrollView/ScrollView.vue'

type Props = {
  customer: Customer
}

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

const store = useRootStore()
const { config } = toRefs(store)

function formatDate(date: string) {
  return new Date(date).toLocaleString().replace(/\//g, '-').substring(0, 16)
}
</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>
