<template>
  <!-- <Tit title="地区交通概览" style="margin-bottom: 8px" :class="{ loaded: loaded }">
    <div class="leftOne-content">
    </div>
  </Tit> -->
  <div>
    <img src="@/assets/imgs/dituc.png" alt style="width: 100%;height: 100%;margin-left: 40px;" />
  </div>
</template>

<script setup>
import { ref, defineExpose, reactive } from 'vue'
import Tit from "./Tit/index.vue";
// import * as CockpitApi from '@/api/cockpit'
// import Tit 
const loading = ref(false)
const loaded = ref(false)
const percentage = ref()
const state = reactive({
  // seriesData: {}
})

// const percentage = computed(() => {
//   return (state.seriesData.lastYearEmissions / state.seriesData.lastYearTarget) * 100 >= 100
//     ? 100
//     : (state.seriesData.lastYearEmissions / state.seriesData.lastYearTarget) * 100 || 0
// })

const getData = (data) => {
  loading.value = true
  // CockpitApi.getCoreIndicators_1(data)
  //   .then((res) => {
  //     loading.value = false
  //     nextTick(() => {
  //       loaded.value = true
  //     })
  //     state.seriesData = res
  //     percentage.value = Number(res.lastCompletionRate.replace('%', ''))
  //     // state.seriesData = res.reduce((pre, cur) => {
  //     //   pre[cur.code] = cur.value
  //     //   return pre
  //     // }, {})
  //   })
  //   .catch(() => {
  //     loading.value = false
  //   })
}

const search = (data) => {
  // getData(data)
}

// search()

defineExpose({
  search
})
</script>

<style lang="scss" scoped>
.leftOne-content {
  padding: 0 73px 0 43px;
  width: 340px;
  height: 800px;
  background-color: #05151a;
  color: aliceblue;
}

.label {
  font-family: SourceHanSansCN;
  font-weight: 500;
  font-size: 14px;
  color: #c6d8e4;
  margin-bottom: 18px;
  padding-top: 21px;
}

.value-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.value {
  font-family: Bebas;
  font-size: 32px;
  color: transparent;
  background: linear-gradient(180deg, #3ff1b6 0%, #08dae8 100%);
  background-clip: text;
  margin-bottom: 12px;
}

.value-pre {
  font-family: Bebas;
  font-size: 14px;
  color: #cedce6;
  margin-left: 16px;
}

.value-text {
  &-l {
    margin-right: 5px;
    font-size: 14px;
  }

  &-v {
    font-size: 20px;
    font-family: Bebas;
  }
}

.total {
  margin-top: 16px;
}

.total-label {
  font-family: SourceHanSansCN;
  font-weight: 500;
  font-size: 14px;
  color: #c6d8e4;
}

.total-value {
  font-family: Bebas;
  font-size: 16px;
  color: #cedce6;
  margin-left: 10px;
}

.total-value-pre {
  font-family: Bebas;
  font-size: 14px;
  color: #cedce6;
  margin-left: 7px;
}

// :deep(.el-progress-bar__inner) {
//   background: linear-gradient(90deg, #00fdc7 0%, #0dc2ff 100%);
// }
</style>
