<template>
  <div class="main">
    <!-- Breadcrumb: Start -->
    <div class="breadcrumb-section">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"
          >電商管理中心</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- Breadcrumb: End -->
    <hr />
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <div class="con_box">
          <div>
            <i class="icon-coin-stack"></i>
          </div>
          <div>
            <div class="title">今日銷售總額</div>
            <div class="content">{{ today.money }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <div class="con_box">
          <div>
            <i class="icon-order"></i>
          </div>
          <div>
            <div class="title">今日訂單總數</div>
            <div class="content">{{ today.order }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <div class="con_box">
          <div>
            <i class="icon-user"></i>
          </div>
          <div>
            <div class="title">今日註冊會員</div>
            <div class="content">{{ today.user }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4">
        <div class="op_box">
          <div class="img">
            <i class="icon-check" />
          </div>
          <div class="text">
            <div class="title">未確認訂單</div>
            <div class="content">{{ order.unconfirmed }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4">
        <div class="op_box">
          <div class="img">
            <i class="icon-money" />
          </div>
          <div class="text">
            <div class="title">待支付訂單</div>
            <div class="content">{{ order.await_pay }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4">
        <div class="op_box">
          <div class="img">
            <i class="icon-order" />
          </div>
          <div class="text">
            <div class="title">待發貨訂單</div>
            <div class="content">{{ order.await_ship }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4">
        <div class="op_box">
          <div class="img">
            <i class="icon-order" />
          </div>
          <div class="text">
            <div class="title">已成交訂單</div>
            <div class="content">{{ order.finished }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4">
        <div class="op_box">
          <div class="img">
            <i class="icon-order" />
          </div>
          <div class="text">
            <div class="title">新缺貨登記</div>
            <div class="content">{{ order.new_booking }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4">
        <div class="op_box">
          <div class="img">
            <i class="icon-order" />
          </div>
          <div class="text">
            <div class="title">售後申請</div>
            <div class="content">{{ order.after_sale }}</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div
          id="order-chart"
          ref="orderChart"
          :style="{ width: '100%', height: '400px' }"
        ></div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div
          id="member-chart"
          ref="memberChart"
          :style="{ width: '100%', height: '400px' }"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, reactive, onMounted, toRefs } from "vue";

import { getMain } from '@/api/index.js'

const orderChart = ref(null);
const memberChart = ref(null);

const state = reactive({
  today: {},
  echart: {},
  order: {}
});

const { today,order,echart } = toRefs(state);

onMounted(async () => {
  let res = await getMain();
  if(res.code === 200) {
    console.log(res.data)
    state.today = res.data.today;
    state.echart = res.data.echart;
    state.order = res.data.order;

    initOrderChart();
    initMemberChart();
  }
});

function initOrderChart() {
  let orderchart = echarts.init(orderChart.value);
  // 指定圖表的配置項和數據
  var option = {
    title: {
      text: "",
    },
    tooltip: {},
    legend: {
      data: ["訂單數"],
    },
    xAxis: {
      data: [],
    },
    yAxis: {},
    series: [
      {
        name: "訂單數",
        type: "bar",
        data: state.echart.order_num,
      },
    ],
  };

  let date = new Date();
  let month = date.getMonth() + 1;
  option.title.text = month + "月訂單統計";
  //產生這個月份從1號到今天的日期array
  let day = date.getDate();
  let days = [];
  for (let i = 1; i <= day; i++) {
     days.push(i);
  }

  option.xAxis.data = days;

  orderchart.setOption(option);

  window.onresize = function () {
    //自適應大小
    orderchart.resize();
  };
}
function initMemberChart() {
  let memberchart = echarts.init(memberChart.value);
  // 指定圖表的配置項和數據
  var option = {
    title: {
      text: "訂單統計",
    },
    tooltip: {},
    legend: {
      data: ["銷售額"],
    },
    xAxis: {
      data: [],
    },
    yAxis: {},
    series: [
      {
        name: "銷售額",
        type: "bar",
        data: state.echart.order_amount,
      },
    ],
  };

  let date = new Date();
  let month = date.getMonth() + 1;
  option.title.text = month + "月銷售額統計";
  //產生這個月份從1號到今天的日期array
  let day = date.getDate();
  let days = [];
  for (let i = 1; i <= day; i++) {
     days.push(i);
  }

  option.xAxis.data = days;

  memberchart.setOption(option);

  window.onresize = function () {
    //自適應大小
    memberchart.resize();
  };
}

</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.con_box {
  display: flex;
  background-color: #409eff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 10px;
  div:nth-child(1) {
    text-align: center;
    flex: 0 1 30%;
    i {
      font-size: 60px;
      color: #fff;
    }
  }
  div:nth-child(2) {
    flex: 0 1 70%;
    .title {
      font-size: 20px;
      color: #fff;
      margin-bottom: 10px;
      text-align: right;
    }
    .content {
      font-size: 30px;
      color: #fff;
      text-align: right;
    }
  }
}

.op_box {
  display: flex;
  background-color: #eee;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  margin-bottom: 5px;
  .img {
    flex: 0 1 30%;
    text-align: center;
    border-right: 1px solid #d4d4d4;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      font-size: 40px;
      color: #333;
    }
  }
  .text {
    flex: 0 1 70%;
    padding: 5px 15px;

    .title {
      text-align: left;
      color: #333;
    }
    .content {
      color: blue;
      font-size: 24px;
      font-weight: bold;
    }
  }
}
</style>
