<template>
  <div class="header_wrap">
    <div v-for="(item, index) in data" :key="index" class="header_item">
      <SvgIcon :name="item.link"/>
      <div class="data_wrap">
        <div class="data_title" :style="hasColor?`color:${item.color || ''}`:''">{{ item.count }}</div>
        <div class="data_content">{{ item.title }}</div>
      </div>
    </div>
    <SvgIcon size="14px" style="cursor: pointer" name="setting" class="settingSvg"></SvgIcon>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, onMounted } from "vue";

defineProps({
  hasColor: {
    type: Boolean,
    default: () => false,
  },
});
const initRem = () => {
  const designWidth = 1440;
  const rempPx = 16;
  const scale = window.innerWidth / designWidth;
  document.documentElement.style.fontSize = scale * rempPx + "px";
};
onMounted(()=>{
  initRem();
})

const data = [
  {
    link: "count",
    title: "任务总数",
    count: 6399,
  },
  {
    link: "wait",
    title: "待审批",
    count: 6290,
  },
  {
    link: "done",
    title: "已审批",
    count: 109,
  },
  {
    link: "resolve",
    title: "通过",
    count: 3290,
    color: "#03c984",
  },
  {
    link: "reject",
    title: "不通过",
    count: 3000,
    color: "#ff8b8b",
  },
  {
    link: "reimg",
    title: "图片重复数",
    count: 230,
  },
  {
    link: "breakcount",
    title: "小结重复数",
    count: 365,
  },
];
</script>

<style scoped lang="less">
.header_wrap {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 1rem 3.125rem;
  background: #fff;
  margin-bottom: 1rem;

  .header_item {
    min-width: 10%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    svg {
      width: 2.75rem !important;
      height: 2.75rem !important;
    }
    .data_wrap {
      margin-left: .8125rem;
      .data_title {
        font-size: 1.125rem;
        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Bold;
        font-weight: 900;
        text-align: left;
        color: #202020;
        line-height: 1.4375rem;
        text-align: center;
        white-space: nowrap;
      }
      .data_content {
        opacity: 0.6;
        font-size: .75rem;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 500;
        text-align: center;
        color: #202020;
        line-height: 1rem;
        text-align: center;
        white-space: nowrap;
      }
    }
  }
}
.settingSvg{
  width: 1rem !important;
  height: 1rem !important;
}
</style>
