<template>
  <div class="dashboard-container">
    <div class="chart-row">
      <div class="chart-container">
        <h2>资源调查进度</h2>
        <div ref="lineChart" class="chart"></div>
      </div>
    </div>

    <div class="chart-row">
      <div class="info-cards">
        <div class="info-card">
          <h3>地块总数</h3>
          <p class="number"><countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum1)" :duration="2000"></countTo> 宗</p>
        </div>
        <div class="info-card">
          <h3>承包总金额</h3>
          <p class="number">¥ <countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum6)" :duration="2000"></countTo></p>
        </div>
      </div>

      <div class="info-cards">
        <div class="info-card">
          <h3>待调查总数</h3>
          <p class="number"><countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum2)" :duration="2000"></countTo> 宗</p>
        </div>
        <div class="info-card">
          <h3>兑现总金额</h3>
          <p class="number">¥ <countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum7)" :duration="2000"></countTo></p>
        </div>
      </div>

      <div class="info-cards">
        <div class="info-card">
          <h3>已调查总数</h3>
          <p class="number"><countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum3)" :duration="2000"></countTo> 宗</p>
        </div>
        <div class="info-card">
          <h3>尚欠总金额</h3>
          <p class="number">¥ <countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum8)" :duration="2000"></countTo></p>
        </div>
      </div>

      <div class="info-cards">
        <div class="info-card">
          <h3>地块总面积</h3>
          <p class="number"><countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum4)" :duration="2000"></countTo> 亩</p>
        </div>
        <div class="info-card">
          <h3>年总收益</h3>
          <p class="number">¥ <countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum10)" :duration="2000"></countTo></p>
        </div>
      </div>

      <div class="info-cards">
        <div class="info-card">
          <h3>机动地总面积</h3>
          <p class="number"><countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum5)" :duration="2000"></countTo> 亩</p>
        </div>
        <div class="info-card">
          <h3>经营总面积</h3>
          <p class="number"><countTo v-if="homepageStatistics" :startVal="0" :endVal="Number(homepageStatistics.dataNum9)" :duration="2000"></countTo> 亩</p>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import { homepageStatistics } from "@/api/big/resource"
  import countTo from "vue-count-to";

  export default {
    name: 'Dashboard',
    data() {
        return {
          homepageStatistics:null,
          progressResourceInvestigationList:[],
        }
    },
    components: { countTo},
    mounted() {
      this.progressResourceInvestigation();
      this.initLineChart();
    },
    methods: {
      progressResourceInvestigation(){
        homepageStatistics().then((res) => {
          if (res.code == 200) {
            this.homepageStatistics = res.data.homepageStatistics;
            this.progressResourceInvestigationList = res.data.progressResourceInvestigation;
            this.initLineChart();
          }
        });
      },
      initLineChart() {
        const chart = echarts.init(this.$refs.lineChart);
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['已调查', '待调查']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.progressResourceInvestigationList.map(item => item.deptName)
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '已调查',
              type: 'line',
              data: this.progressResourceInvestigationList.map(item => item.dataNum1),
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#91CC75'
              },
              itemStyle: {
                color: '#91CC75'
              }
            },
            {
              name: '待调查',
              type: 'line',
              data: this.progressResourceInvestigationList.map(item => item.dataNum2),
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#EE6666'
              },
              itemStyle: {
                color: '#EE6666'
              }
            }
          ]
        };
        chart.setOption(option);
        window.addEventListener('resize', function() {
          chart.resize();
        });
      },
    }
  };
</script>

<style scoped>
  .dashboard-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
  }

  h1 {
    color: #333;
    margin-bottom: 30px;
  }

  .chart-row {
    display: flex;
    margin-bottom: 20px;
    gap: 20px;
  }

  .chart-container {
    flex: 1;
    background-color: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .chart {
    height: 350px;
  }

  .info-cards {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .info-card {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .info-card h3 {
    color: #666;
    margin-bottom: 10px;
    font-size: 16px;
  }

  .info-card .number {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
  }

  .info-card .trend {
    font-size: 14px;
  }

  .trend.up {
    color: #67C23A;
  }

  .trend.down {
    color: #F56C6C;
  }

  @media (max-width: 1200px) {
    .chart-row {
      flex-direction: column;
    }

    .info-cards {
      flex-direction: row;
      flex-wrap: wrap;
    }

    .info-card {
      flex: 1;
      min-width: 200px;
    }
  }
</style>
