<template>
  <div class="container">
    <el-card>
      <!-- <template #header>
        <div class="card-header">
          <span>首页-国家局</span>
        </div>
      </template> -->
      <div class="card_home">
        <div class="card_title">
          <div class="card_icon">
            <el-icon size="30px" color="white">
              <Stamp />
            </el-icon>
            <span>出入库审核</span>
          </div>
        </div>
        <div class="card_content">
          <div class="card_content_item">
            <div class="content_left">
              <div class="num">{{ formData.outaudi }}</div>
              <div class="title">出库信息审核</div>
            </div>
            <div class="content_right"></div>
          </div>
          <div class="card_content_item card_content_right">
            <div class="content_left">
              <div class="num">{{ formData.inaudi }}</div>
              <div class="title">入库信息审核</div>
            </div>
            <div class="content_right"></div>
          </div>
        </div>
      </div>
      <div class="card_home">
        <div class="card_title">
          <div class="card_icon">
            <el-icon size="30px" color="white">
              <TrendCharts />
            </el-icon>
            <span>统计</span>
          </div>
        </div>
        <div class="card_content">
          <div class="card_content_item">
            <div class="content_left">
              <div class="num">{{ formData.warecount }}</div>
              <div class="title">库点总数</div>
            </div>
            <div class="content_right"></div>
          </div>
          <div class="card_content_item card_content_right" v-if="0"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { statistics } from "@/api/home/index";
import { reactive, toRefs, onMounted } from "vue";
import { Stamp, TrendCharts } from "@element-plus/icons-vue";

const data = reactive({
  deptId: ""
});
const formData = reactive({
  inaudi: "",
  outaudi: "",
  warecount: ""
});

let { deptId } = toRefs(data);

// 获取统计数据
const getStatistics = () => {
  statistics().then((res: any) => {
    if (res.code === 0) {
      formData.inaudi = res.data.inaudi;
      formData.outaudi = res.data.outaudi;
      formData.warecount = res.data.warecount;
    }
  });
};

onMounted(() => {
  getStatistics();
});
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}
:deep(.el-card) {
  width: 100%;
  height: 100%;
  .card-header {
    height: 60px;
    font-size: 30px;
    line-height: 60px;
    font-weight: bolder;
  }
  .el-card__body {
    height: 100%;
  }
}
.card_home {
  width: 100%;
  height: 40%;
  // background: pink;
  padding-bottom: 40px;
  .card_title {
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    .card_icon {
      width: 200px;
      height: 50px;
      // line-height: 50px;
      // border-radius: 15px;
      // background: #53acfe;
      margin: auto;
      background-image: linear-gradient(to right, #4a6efd, #55beff);
      color: #ffffff;
      font-weight: 900;
      text-align: center;
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: center;
      box-sizing: border-box;
      padding: 0 20px;
      span {
        font-size: 19px;
        display: inline-block;
        width: 95px;
      }
    }
    .card_icon::before {
      content: "";
      display: inline-block;
      width: 30px;
      height: 30px;
      background: #4a6efd;
      position: absolute;
      left: -15px;
      top: 10px;
      transform: rotate(45deg) skew(10deg, 10deg);
    }
    .card_icon::after {
      content: "";
      display: inline-block;
      width: 30px;
      height: 30px;
      background: #55beff;
      position: absolute;
      right: -15px;
      top: 10px;
      transform: rotate(45deg) skew(10deg, 10deg);
    }
  }
  .card_content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 8%;
    .card_content_item {
      width: 40%;
      height: 160px;
      background: #e9f6fe;
      border-radius: 20px;
      display: flex;
      justify-content: space-between;
      .content_left {
        width: 30%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .num {
          font-size: 46px;
          font-weight: 900;
          font-family: "黑体";
          margin-bottom: 10px;
        }
        .title {
          font-weight: 700;
          font-size: 20px;
          color: #666666;
        }
      }
    }
    .card_content_right {
      background: #e9feea;
    }
  }
}
</style>
