<template>
  <div class="page">
    <div v-for="(item, index) in list" :key="index" class="mb-20px">
      <div class="flex justify-between bg-#fff b-rd-12px p-24">
        <div class="flex">
          <img v-if="item.type === 'customer'" src="@/assets/images/people_single.png" class="w-30px mt-20px h-30px" alt="" srcset="" />
          <img v-if="item.type === 'order'" src="@/assets/images/bill.png" class="w-30px mt-20px h-30px" alt="" srcset="" />
          <div class="ml-16px">
            <div class="text-20px fw-700 mb-14px">{{ getTitle(item) }}</div>
            <div class="text-14px c-#999 mb-8px">Creation Time：{{ item.createTime }}</div>
            <div class="text-14px fw-500 c-#333">Distribution details</div>
            <div
              v-if="isOpen === index"
              class="flex gap-40px c-#999 text-14px mt-10px max-h-0 h-0 overflow-hidden transition-all duration-300"
              :class="{ 'h-auto': isOpen === index }"
            >
              <div>Customer Name：XXXXX</div>
              <div>{{ item.type === 'customer' ? 'Clue Encoding' : 'Order code' }}：XXXXXXX</div>
            </div>
          </div>
        </div>
        <div class="flex items-center flex-col">
          <div class="text-36px c-#000 fw-700">{{ item.value }}</div>
          <div class="text-20px c-#000 mt-14px cursor-pointer" :class="{ 'rotate-180': isOpen === index }" @click="handleClick(index)">
            <DownOutlined />
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-end">
      <a-pagination v-model:current="current" :show-size-changer="false" :total="total" :show-less-items="true" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { DownOutlined } from '@ant-design/icons-vue'
import { ref } from 'vue'
const isOpen = ref<number | null>(null)
const current = ref(1)
const total = ref(100)
const getTitle = (item: any) => {
  return item.type === 'customer'
    ? 'Unissued-Customer Commission'
    : item.orderType === 'Unissued'
      ? 'Unissued-Order Commission'
      : 'Issued-Order Commission'
}
const list = ref<any[]>([
  {
    type: 'customer',
    name: 'Customer Name',
    value: '100',
    createTime: '2024-04-05',
  },
  {
    type: 'order',
    name: 'Order Name',
    value: '100',
    createTime: '2024-04-05',
    orderType: 'Unissued',
  },
  {
    type: 'order',
    name: 'Order Name',
    value: '100',
    createTime: '2024-04-05',
    orderType: 'Issued',
  },
])

const handleClick = (index: number) => {
  isOpen.value = isOpen.value === index ? null : index
}
</script>
<style scoped lang="less">
.rotate-180 {
  transform: rotate(180deg);
  transform-origin: center center;
  transition: all 0.3s ease-in-out;
}
.h-auto {
  max-height: 200px;
}
</style>
