<template>
  <div class="countrybill-wrapper">
    <div class="header-box">我是州法案</div>
    <div class="main-box">
      <div class="info-box">
        <div class="switch-box" @click="handleSwitchChartData">
          <img v-if="!isShowChart" src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
          <img v-else src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
        </div>
        <div class="num-box text-title-3-bold">
          {{ `共 ${totalNum} 条数据` }}
        </div>
      </div>
      <div class="content-box"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 图表/数据
const isShowChart = ref(true)

const handleSwitchChartData = () => {
  isShowChart.value = !isShowChart.value
}

// 总计数据
const totalNum = ref(12)

</script>

<style lang="scss" scoped>
.countrybill-wrapper {
  width: 1600px;
  height: 968px;

  .headere-box {
    width: 1568px;
    height: 112px;
    border-radius: 10px;
    background: rgb(255, 255, 255);
    border: 1px solid var(--bg-black-5);
    margin: 16px auto;
  }

  .header-box {
    width: 1568px;
    height: 112px;
    border-radius: 10px;
    background: rgb(255, 255, 255);
    border: 1px solid var(--bg-black-5);
    margin: 16px auto;
  }

  .main-box {



    .info-box {
      margin: 0 auto;
      width: 1568px;
      height: 30px;
      display: flex;
      justify-content: space-between;

      .switch-box {
        width: 160px;
        border-radius: 20px;
        border: 1px solid var(--color-primary-100);
        height: 30px;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .num-box {
        color: var(--color-red-100);
      }
    }

    .content-box {
      margin: 0 auto;
      margin-top: 16px;
      width: 1568px;
      height: 766px;
      border-radius: 10px;
      background: rgba(255, 255, 255);
      border: 1px solid var(--bg-black-5);
    }
  }
}
</style>