<template>
  <Search :name="'供应商名称'" />
  <view class="c-card">
    <StatisticCard :list="list" />
    <view class="detail">
      <view v-for="(item, index) in 10" :key="index" @click="getDetail(item)">
        <text>华明基地{{ item }}</text>
        <text class="num">¥1800.00 <text class="tip">付</text></text>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import Search from "@/components/Search/index.vue";
import StatisticCard from "@/components/StatisticCard/index.vue";
const list = reactive([
  {
    num: 2,
    name: "应付供应商",
  },
  {
    num: 8923,
    name: "应付金额",
  },
]);
const getDetail = (item: any) => {
  uni.navigateTo({
    url: "/pages/statistics/supplier/billDetail", // 要跳转到的页面路径
  });
};
</script>
<style lang="scss" scoped>
.c-card {
  background: #ffffff;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
  border-radius: 13rpx;
  margin: 30rpx 25rpx;
}
.detail {
  border-top: 18rpx solid #f8f8f8;
  padding: 20rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 21rpx;
  color: #000000;
  > view {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 10rpx;
    .num {
      color: #ec0f3e;
    }
    .tip {
      color: $u-primary;
      margin-left: 20rpx;
      font-weight: 500;
      font-size: 24rpx;
    }
  }
  > view + view {
    border-top: 1px solid rgba(233, 233, 233, 0.76);
  }
}
</style>
