<script lang="ts" setup>
  import { Card, Row, Col, Statistic } from 'ant-design-vue';
  import { useInitData } from '/@/hooks/data/useInitData';
  import { statisticIndexApi } from '/@/api/dashboard/workbench';

  const { optionsData } = useInitData(statisticIndexApi);
</script>

<template>
  <Row :gutter="20">
    <Col :lg="12" :xl="12" :md="16" :sm="24" :xs="24">
      <Card title="供货商管理/投诉管理">
        <div class="flex-center">
          <div class="await-card" style="flex: 1; text-align: center">
            <Statistic
              :value="optionsData.complain?.sum"
              class="await"
              style="text-align: center"
            />
            <div>待处理</div>
          </div>
          <div style="flex: 1">
            <div class="card-item flex-center">
              <div class="circle"></div>
              30日以上预警
              <span class="value">{{ optionsData.complain?.gt30 }}</span>
            </div>
            <div class="card-item flex-center">
              <div class="circle"></div>
              15日至30日预警
              <span class="value">{{ optionsData.complain?.ge15lt30 }}</span>
            </div>
            <div class="card-item flex-center">
              <div class="circle"></div>
              15日以下预警
              <span class="value">{{ optionsData.complain?.lt15 }}</span>
            </div>
          </div>
        </div>
      </Card>
    </Col>
    <Col :lg="12" :xl="12" :md="16" :sm="24" :xs="24">
      <Card title="订单管理/仲裁管理">
        <div class="flex-center">
          <div class="await-card await-card2" style="flex: 1; text-align: center">
            <Statistic
              :value="optionsData.arbitrate?.sum"
              class="await2"
              style="text-align: center"
            />
            <div>待处理</div>
          </div>
          <div style="flex: 1">
            <div class="card-item flex-center">
              <div class="circle"></div>
              30日以上预警
              <span class="value">{{ optionsData.arbitrate?.gt30 }}</span>
            </div>
            <div class="card-item flex-center">
              <div class="circle"></div>
              15日至30日预警
              <span class="value">{{ optionsData.arbitrate?.ge15lt30 }}</span>
            </div>
            <div class="card-item flex-center">
              <div class="circle"></div>
              15日以下预警
              <span class="value">{{ optionsData.arbitrate?.lt15 }}</span>
            </div>
          </div>
        </div>
      </Card>
    </Col>
  </Row>
</template>

<style lang="less" scoped>
  .await,
  .await2 {
    :deep(.ant-statistic-content) {
      font-size: 50px;
      font-weight: 500;
      color: @primary-color;
    }
  }
  .await2 {
    :deep(.ant-statistic-content) {
      color: @warning-color;
    }
  }
  .await-card {
    color: @primary-color;
    font-weight: 500;
    font-size: 20px;
    border-right: 1px @border-color-base dotted;
  }

  .await-card2 {
    color: @warning-color;
  }

  .card-item {
    line-height: 30px;
    font-size: 14px;

    .circle {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: @primary-color;
      margin: 0 10px;
    }

    .value {
      margin-left: 10px;
    }
    &:nth-child(1) {
      .circle {
        background: @warning-color;
      }
      .value {
        color: @warning-color;
      }
    }
    &:nth-child(2) {
      .circle {
        background: @error-color;
      }
      .value {
        color: @error-color;
      }
    }
    &:nth-child(3) {
      .circle {
        background: @success-color;
      }
      .value {
        color: @success-color;
      }
    }
  }
</style>
