<template>
  <div class="app-container home">
    <!--    <el-row :gutter="20" class="mb20">-->
    <!--      <el-col :span="6">-->
    <!--        <el-card shadow="hover" body-class="card-body">-->
    <!--          <el-icon class="card-icon bg1">-->
    <!--            <User />-->
    <!--          </el-icon>-->
    <!--          <div class="card-content">-->
    <!--            <countup class="card-num color1" :end="6666" />-->
    <!--            <div>用户访问量</div>-->
    <!--          </div>-->
    <!--        </el-card>-->
    <!--      </el-col>-->
    <!--      <el-col :span="6">-->
    <!--        <el-card shadow="hover" body-class="card-body">-->
    <!--          <el-icon class="card-icon bg2">-->
    <!--            <ChatDotRound />-->
    <!--          </el-icon>-->
    <!--          <div class="card-content">-->
    <!--            <countup class="card-num color2" :end="168" />-->
    <!--            <div>系统消息</div>-->
    <!--          </div>-->
    <!--        </el-card>-->
    <!--      </el-col>-->
    <!--      <el-col :span="6">-->
    <!--        <el-card shadow="hover" body-class="card-body">-->
    <!--          <el-icon class="card-icon bg3">-->
    <!--            <Goods />-->
    <!--          </el-icon>-->
    <!--          <div class="card-content">-->
    <!--            <countup class="card-num color3" :end="8888" />-->
    <!--            <div>商品数量</div>-->
    <!--          </div>-->
    <!--        </el-card>-->
    <!--      </el-col>-->
    <!--      <el-col :span="6">-->
    <!--        <el-card shadow="hover" body-class="card-body">-->
    <!--          <el-icon class="card-icon bg4">-->
    <!--            <ShoppingCartFull />-->
    <!--          </el-icon>-->
    <!--          <div class="card-content">-->
    <!--            <countup class="card-num color4" :end="568" />-->
    <!--            <div>今日订单量</div>-->
    <!--          </div>-->
    <!--        </el-card>-->
    <!--      </el-col>-->
    <!--    </el-row>-->

    <el-divider />
  </div>
</template>

<script setup name="Index" lang="ts">
import { queryLogisticsOrder } from '@/api/amz/logisticsOrder';
import { Action } from 'element-plus';
import { ChatDotRound, Goods, ShoppingCartFull, User } from '@element-plus/icons-vue';

const goTarget = (url: string) => {
  window.open(url, '__blank');
};

onMounted(async () => {
  console.log('物流商管理系统');
  const res = await queryLogisticsOrder();
  console.log('res', res);
  if (res.code === 200) {
    console.log('res.data', res.data);
    if (res.data.length > 0) {
      console.log('有快到期的订单');
      ElMessage.warning('有快到期的订单');
      ElMessageBox.alert('有快到期的订单', '订单提醒', {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: '好的我知道了',
        callback: (action: Action) => {
          // ElMessage({
          //   type: 'info',
          //   message: `action: ${action}`
          // });
        }
      });
    } else {
      console.log('没有快到期的订单');
      // ElMessage.warning('没有快到期的订单');
    }
  }
});
</script>
<style>
.card-body {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0;
}

.bg1 {
  background: #2d8cf0;
}

.bg2 {
  background: #64d572;
}

.bg3 {
  background: #f25e43;
}

.bg4 {
  background: #e9a745;
}
</style>
<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.countup {
  font-size: 24px;
}

.card-content {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
  padding: 0 20px;
}

.card-num {
  font-size: 30px;
}

.card-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.color0 {
  color: #fff;
}

.color1 {
  color: #2d8cf0;
}

.color2 {
  color: #64d572;
}

.color3 {
  color: #f25e43;
}

.color4 {
  color: #e9a745;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}
</style>
