<template>
  <NavBar title="违约金明细" left-arrow @click-left="goBack" />
  <Collapse v-model="activeNames" v-for="(item, index) of damageDetailInfo">
    <CollapseItem :title="item.periods" :name="index+1" :value="item.amount">
      <CellGroup v-for="(k) of item.detail">
        <Cell :title="k.name" :value="k.debait" :label="k.date" />
      </CellGroup>
    </CollapseItem>
  </Collapse>
</template>

<script setup>
import { Collapse, CollapseItem, Cell, CellGroup, NavBar } from 'vant';
import {ref, reactive} from "vue";


const damageDetailInfo = ref([
  {
    periods: '第一期',
    amount: '4300.88',
    detail: [
      {
         name: '违约金1',
         debait: '2300',
         date: '2022-12-08',
      },
      {
        name: '违约金2',
        debait: '2300.88',
        date: '2022-12-08',
      }
    ]
  },
  {
    periods: '第二期',
    amount: '4300.88',
    detail: [
      {
        name: '违约金1',
        debait: '2300',
        date: '2022-12-08',
      },
      {
        name: '违约金2',
        debait: '2300.88',
        date: '2022-12-08',
      }
    ]
  }
])
const activeNames = ref([]);
</script>

<style lang="less" scoped>

</style>