<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card class="box-card" shadow="hover">
          <div class="title">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <p>数据统计</p>
          </div>
          <p style="margin: 10px 0">经营数据</p>
          <div class="operating-data">
            <div class="data-item">
              <p class="amount">￥8642.00</p>
              <p class="label">交易额</p>
            </div>
            <div class="data-item">
              <p class="amount">￥86142.00</p>
              <p class="label">实际结算</p>
            </div>
            <div class="data-item">
              <p class="amount">42</p>
              <p class="label">订单数</p>
            </div>
            <div class="data-item">
              <p class="amount">36</p>
              <p class="label">退款订单</p>
            </div>
            <div class="data-item">
              <p class="amount">￥8642.00</p>
              <p class="label">退款金额</p>
            </div>
            <div class="data-item">
              <p class="amount">￥8642.00</p>
              <p class="label">交易额</p>
            </div>
            <div class="data-item">
              <p class="amount">11</p>
              <p class="label">积分消费</p>
            </div>
            <div class="data-item">
              <p class="amount">8</p>
              <p class="label">积分订单</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" shadow="hover">
          <div class="title">
            <p>今日订单对比</p>
          </div>
          <div class="order-comparison">
            <div class="comparison-item">
              <p class="titles">在线买单</p>
              <div class="comparison-item-p">
                <span class="lable">订单</span>
                <p class="value">
                  <span>28</span>
                  <span>+12%</span>
                </p>
              </div>
              <div class="comparison-item-p">
                <span class="lable">交易</span>
                <span class="value">￥ 6200.00</span>
              </div>
            </div>
            <div class="comparison-item">
              <p class="titles">线上商城</p>
              <div class="comparison-item-p">
                <span class="lable">订单</span>
                <p class="value">
                  <span>28</span>
                  <span>+12%</span>
                </p>
              </div>
              <div class="comparison-item-p">
                <span class="lable">交易</span>
                <span class="value">￥ 6200.00</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" shadow="hover">
          <div class="title">
            <p>近七日交易趋势</p>
          </div>
          <div ref="chart1" style="height: 260px"></div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="box-card" shadow="hover">
          <div class="title">
            <p>近七日订单趋势</p>
          </div>
          <div ref="chart2" style="height: 260px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      value: "",
      options: [
        {
          value: "1",
          label: "今天",
        },
        {
          value: "2",
          label: "近七天",
        },
      ],
    };
  },
  mounted() {
    this.chart1Handle();
    this.chart2Handle();
  },
  created() {},
  methods: {
    chart1Handle() {
      let myChart = echarts.init(this.$refs.chart1);
      let option;
      option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            color: "#f39423",
          },
          {
            data: [100, 500, 400, 200, 700, 500, 200],
            type: "line",
            color: "#000",
          },
        ],
      };
      option && myChart.setOption(option);
    },
    chart2Handle() {
      let myChart = echarts.init(this.$refs.chart2);
      let option;
      option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            color: "#f39423",
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 20px;
  min-height: 300px;
  ::v-deep .el-card__body {
    padding: 10px;
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  p {
    margin: 0;
  }
}

.operating-data {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
  .data-item {
    min-width: 150px;
    text-align: center;
    margin-bottom: 20px;
    .amount {
      font-size: 18px;
      color: #13b31d;
      margin-bottom: 5px;
    }
    .label {
      font-size: 15px;
      color: #000;
    }
  }
}

.order-comparison {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .comparison-item {
    width: 45%;
    background-color: rgba(221, 250, 228, 0.52);
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    .titles {
      margin-bottom: 20px;
    }
    .comparison-item-p {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
  }
}
</style>
