<script setup lang="ts">
import { Check, Close } from "@element-plus/icons-vue";
import YlLine from "@/components/charts/yl-line.vue";
import { ref } from "vue";
import router from "@/router/router.ts";
import { account } from "@/store/store.ts";
defineProps<{
  data?: accountBillData[];
  loading: boolean;
  detail?: boolean;
}>();
const currentIndex = ref(-1);
</script>

<template>
  <div v-loading="loading">
    <div class="bill-chart">
      <yl-line
        v-if="data"
        :x-data="data.map((e) => e.date)"
        :y-data="[{ name: '', value: data.map((e) => e.balance) }]"
        :set-index="(e) => (currentIndex = e)"
        :span-limit="12"
        clickable
        smooth
      />
      <el-empty v-else description="暂无数据" />
    </div>
  </div>
  <div class="center">
    显示余额：<el-switch v-model="account.show">
      <template #active-action><Check /></template>
      <template #inactive-action><Close /></template>
    </el-switch>
  </div>
  <div class="center" v-if="data?.[currentIndex]">
    <div>
      {{ data[currentIndex].duration || data[currentIndex].date }} :
      <el-button
        link
        v-if="detail && data[currentIndex].duration"
        @click="router.push(`/bill/${data[currentIndex].duration}`)"
        >{{
          data[currentIndex].changes === 0
            ? "无变动"
            : data[currentIndex].changes > 0
              ? `收入 ${account.show ? data[currentIndex].changes : "*****"}`
              : `支出 ${account.show ? -data[currentIndex].changes : "*****"}`
        }}</el-button
      ><span v-else-if="data[currentIndex].duration">{{
        data[currentIndex].changes === 0
          ? "无变动"
          : data[currentIndex].changes > 0
            ? `收入 ${account.show ? data[currentIndex].changes : "*****"}`
            : `支出 ${account.show ? -data[currentIndex].changes : "*****"}`
      }}</span
      ><span v-else>---------</span>
    </div>
    <el-table :data="data[currentIndex].detail">
      <el-table-column prop="card" label="项目" align="center" />
      <el-table-column prop="balance" label="余额" align="center"
        ><template #default="scope">
          {{ account.show ? scope.row.balance : "*****" }}
        </template></el-table-column
      >
      <el-table-column prop="changes" label="收支" align="center">
        <template #default="scope">
          {{
            scope.row.changes === 0
              ? "-----"
              : scope.row.changes > 0
                ? `收入 ${account.show ? scope.row.changes : "*****"}`
                : `支出 ${account.show ? -scope.row.changes : "*****"}`
          }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.bill-chart {
  padding: 1rem 1rem;
  height: 20rem;
}
</style>
