<script setup name="ProjectHome">
import { ref, toRefs, reactive, getCurrentInstance, proxyRefs, onMounted } from 'vue'
import { useDict } from '@/utils/dict'

import biao from '@/assets/images/project/biao.png'
import jiamibiao from '@/assets/images/project/jiamibiao.png'
import jiamiziduan from '@/assets/images/project/jiamiziduan.png'
import shujuyuan from '@/assets/images/project/shujuyuan.png'
import yingyong from '@/assets/images/project/yingyong.png'
import ziduan from '@/assets/images/project/ziduan.png'
import cpu from '@/assets/images/project/cpu.png'
import neicun from '@/assets/images/project/neicun.png'

import rateChart from './modules/rateChart.vue'
import DiskUsageChart from './modules/DiskUsageChart.vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const { proxy } = getCurrentInstance()
// const { eo_province, eo_city, eo_district, invoice_type, tax_rate, plan_type, invoice_status } = useDict('eo_province', 'eo_city', 'eo_district', 'invoice_type', 'tax_rate', 'plan_type', 'invoice_status')
const detailLoading = ref(false)
function getInfo() {
  detailLoading.value = true
  // console.log(props.projectId)
  setTimeout(() => {
    detailLoading.value = false
  }, 3000);
}

const projectId = ref('')

onMounted(()=>{
  projectId.value =proxy.$route.query.projectId
  console.log('projectId',projectId.value)
})
// const props = defineProps({
//   projectId: String, // 主键

// })

const stats = ref([
  { label: '应用', value: 1,url: yingyong },
  { label: '数据源', value: 10, url: shujuyuan},
  { label: '表', value: 340, url:biao },
  { label: '字段', value: 4043, url: ziduan},
  { label: '加密表数量', value: 0, url: jiamibiao},
  { label: '加密字段数量', value: 0, url:jiamiziduan }
])

const cpuData = reactive({
  cpuUsage: 0,
  value: 8
})


const neicunData = reactive({
  cpuUsage: 77,
  value: 16
})

const diskData = ref([
 { name: '/run/user/0', total: 100, used: 10 },
  { name: '/boot/efi', total: 100, used: 20 },
  { name: '/boot', total: 100, used: 30 },
  { name: '/run/lock', total: 100, used: 5 },
  { name: '/dev/shm', total: 100, used: 15 },
  { name: '/', total: 100, used: 90 },
  { name: '/run', total: 100, used: 25 }
])


getInfo()


function pageProjectManage() {
  router.push({
    path: '/projectManage'
  })
}

defineExpose({
  // handleRedInk,
  // handleVoid
})

</script>
<template>
  <div class="app-container scroller">
    <PageTitle :back="true" @back="pageProjectManage" >
      <template #title>
        返回项目管理
      </template>

    </PageTitle>

    <div class="app-container__body">
      <el-card class="image-card">
        <template #header>
          <div class="card-header">
            <span>数据统计</span>
          </div>
        </template>
        <div class="card-content">
          <!-- <img src="您的图片路径" alt="数据统计" /> -->
          <el-row :gutter="20">
            <el-col :span="4" v-for="(item,index) in stats">
              <div class="stats-content">
                <img class="stats-img" :src="item.url" alt="">
                <div class="stats-title">{{item.label}}</div>
                <div class="stats-value">{{ item.value }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="image-card">
        <template #header>
          <div class="card-header">
            <span>系统资源</span>
          </div>
        </template>
        <div class="card-content">
          <!-- <img src="您的图片路径" alt="数据统计" /> -->
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="chart-content">
                <img class="chart-logo" :src="cpu" alt="">
                <div class="chart-text">
                  <div class="value color-blue">{{ cpuData.value }}</div>
                  <div class="unit color-blue">核</div>
                </div>
                <div class="chart-title">
                  cpu
                </div>
                <div class="chart-container">
                  <rateChart :usage="cpuData.cpuUsage" color="#1890ff"/>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="chart-content">
                <img class="chart-logo" :src="neicun" alt="">
                <div class="chart-text">
                  <div class="value color-yellowred">{{ neicunData.value }}</div>
                  <div class="unit color-yellowred">G</div>
                </div>
                <div class="chart-title">
                  内存
                </div>
                <div class="chart-container">
                  <rateChart :usage="neicunData.cpuUsage" color="#fa7257"/>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="chart-content">
                <div class="chart-container">
                  <DiskUsageChart :disk-data="diskData" />
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.image-card {
  width: 100%;
  // max-width: 800px;
  margin: 20px auto;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  padding: 15px;
}

.card-content {
  padding: 40px 0;
  .stats-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .stats-img {
      height: 64px;
      width: 64px;
    }
    .stats-title {
      font-size: 16px;
      color: #999;
      margin-top: 20px;
    }
    .stats-value {
      font-size: 20px;
      font-weight: bold;
      color: #333;
       margin-top: 20px;
    }
  }
  .chart-content {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .chart-logo {
      height: 64px;
      width: 64px;
    }
    .chart-text {
        margin-top: 10px;
        display: flex;
        align-items: flex-end;
      .value {
        font-size: 20px;
        font-weight: bold;
      
      }
      .unit{
        font-size: 14px;
        margin-left: 2px;
      }
    }
    .chart-title {
       font-size: 14px;
       color: #999;
       margin-top: 5px;
    }
    .chart-container {
      flex: 1;
      width: 100%;
    }
  }
  
}
.color-blue{
  color: #1890ff;
}
.color-yellowred {
  color: #fa7257;
}
</style>

