<template>
<div class="mb-60">
      <!-- 财务审批页面 -->
      <div class="bg-white p-4 flex text-gray-500 flex-col">
        <div>
          <span class="font-semibold" id="finance-audit">财务审批</span> <span class="ml-2">对员工提交的申请进行审批</span>
        </div>
        <Search />
        <FinanceExamine />
      </div>
      <!-- 财务统计页面 -->
       <div class="bg-white p-4 mt-5 text-gray-500 flex-col">
          <div>
            <span class="font-semibold" id="finance-statistical">财务统计</span>
            <span class="ml-2">财务明细统计查看</span>
          </div>
            <!-- 任务支出统计 -->
          <div class="h-64 overflow-hidden">
            <div class="mt-5 flex justify-between">
              <div>
                <span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
                <span>任务支出统计</span>
              </div>
              <div>
                <el-button :type="taskState ? 'primary' : 'default'" size="mini" @click="taskState = true">图表</el-button>
                <el-button :type="!taskState ? 'primary' : 'default'" size="mini" @click="taskState = false">表格</el-button>
              </div>
            </div>
            <!-- 任务支出统计的图表展示 -->
            <div v-show="taskState">
              <!-- <el-empty description="暂无图表数据信息" /> -->
              <RingEcharts class="w-full h-full" id="taskEcharts"/>
            </div>
            <!-- 任务支出统计的表格展示 -->
            <div v-show="!taskState">
              <FinanceExamine />
            </div>
          </div>
           <!-- 名目支出统计 -->
          <div class="h-64 overflow-hidden">
              <div class="mt-5 flex justify-between">
                <div>
                  <span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
                  <span>名目支出统计</span>
                </div>
                <div>
                  <el-button :type="nameState ? 'primary' : 'default'" size="mini" @click="nameState = true">图表</el-button>
                  <el-button :type="!nameState ? 'primary' : 'default'" size="mini" @click="nameState = false">表格</el-button>
                </div>
              </div>
              <!-- 名目支出统计的图表展示 -->
              <div v-show="nameState">
                <!-- <el-empty description="暂无图表数据信息" /> -->
                <RingEcharts class="w-full h-full" id="nameEcharts"/>
              </div>
              <!-- 名目支出统计的表格展示 -->
              <div v-show="!nameState">
                <FinanceExamine />
              </div>
          </div>
          <!-- 成员财务图 -->
          <div class="h-64 overflow-hidden">
            <div class="mt-5">
              <span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
              <span>成员财务图</span>
            </div>
            <RingEcharts class="w-full h-full" id="memberEcharts"/>
          </div>
          <!-- 时间财务图 -->
          <div class="overflow-hidden">
              <div>
                <span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
                <span>时间财务图</span>
              </div>
              <BarEcharts class="w-full h-full mt-5"  />
              <!-- 没有数据展示空组件 -->
              <!-- <el-empty description="暂无图表数据信息" /> -->
          </div>
        </div>
    <!-- 悬浮跳转 -->
  <ul class="menu">
    <a href="#finance-audit">财务审批</a>
    <a href="#finance-statistical">财务统计</a>
  </ul>
</div>
</template>

<script>
export default {
  layout: 'default',
};
</script>

<script setup>
import {ref} from 'vue'
const taskState = ref(true);
const nameState = ref(true);


</script>

<style lang="less" scoped>
.menu{
  position: fixed;
  right: 0;
  bottom: 15px;
  z-index: 99
}
.menu a {
  display: block;
  width: 72px;
  color: #fff;
  background: rgba(25, 137, 250, 0.6);
  padding: 8px 20px;
  border-radius: 30px 0 0 30px;
  margin-bottom: 15px;
}
.el-button--mini{
  padding: 0.5rem 1rem;
}
.el-button--mini+.el-button--mini{
  margin-left: 0px;
}
</style>
