<template>
  <div class="app-container home">
    <div class="header" style="width: 100%">
      <el-row class="row" :gutter="12">
        <el-col :span="4">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>总销售额（元）</span>
              </div>
              <div class="count">
                {{ statistics.totalSalePrice ? statistics.totalSalePrice : 0 }}
              </div>

              <div class="zz">
                <div>
                  <span>
                    +{{
                      statistics.totalSalePriceRate
                        ? statistics.totalSalePriceRate + "%"
                        : "0%"
                    }}
                  </span>
                </div>
                <div>
                  <span> 今日新增</span>
                  <span>
                    {{ statistics.daySalePrice ? statistics.daySalePrice : 0 }}元
                  </span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>访问量(人)</span>
              </div>
              <div class="count">
                {{ statistics.totalSeeCount ? statistics.totalSeeCount : 0 }}
              </div>
              <div class="zz">
                <div>
                  <span>
                    +{{
                      statistics.totalSeeCountRate
                        ? statistics.totalSeeCountRate + "%"
                        : "0%"
                    }}
                  </span>
                </div>
                <div>
                  <span> 今日新增</span>
                  <span>
                    {{ statistics.daySeeCount ? statistics.daySeeCount : 0 }}人
                  </span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>总订单数（单 ）</span>
              </div>
              <div class="count">
                {{ statistics.totalOrderCount ? statistics.totalOrderCount : 0 }}
              </div>
              <div class="zz">
                <div>
                  <span>
                    +{{
                      statistics.totalOrderCountRate
                        ? statistics.totalOrderCountRate + "%"
                        : "0%"
                    }}
                  </span>
                </div>
                <div>
                  <span> 今日新增</span>
                  <span>
                    {{ statistics.dayOrderCount ? statistics.dayOrderCount : 0 }}笔
                  </span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="always">
            <div class="item">
              <div style="padding: 10px">
                <span>退款(元)</span>
              </div>
              <div class="count">
                {{ statistics.totalRefundPrice ? statistics.totalRefundPrice : 0 }}
              </div>
              <div class="zz">
                <div>
                  <span>
                    +{{
                      statistics.totalRefundPriceRate
                        ? statistics.totalRefundPriceRate + "%"
                        : "0%"
                    }}
                  </span>
                </div>
                <div>
                  <span> 今日新增</span>
                  <span>
                    {{ statistics.dayRefundPrice ? statistics.dayRefundPrice : 0 }}元
                  </span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="mains">
      <el-row>
        <el-col :span="18">
          <div class="title">成交金额（元）</div>
          <div
            style="
              display: flex;
              flex-direction: row;
              align-items: center;
              height: 40px;
              margin-top: 10px;
            "
          >
            <el-radio-group v-model="params.queryType" @input="radiochange">
              <el-radio :label="3">今日</el-radio>
              <el-radio :label="4" :value="4">昨日</el-radio>
              <el-radio :label="5" :value="5">本月</el-radio>
              <el-radio :label="6" :value="6">本年</el-radio>
              <el-radio :label="0" :value="0">按天</el-radio>
              <el-radio :label="1" :value="1">按月</el-radio>
              <el-radio :label="2" :value="2">按年</el-radio>
            </el-radio-group>
            <el-date-picker
              @change="pickerChange"
              style="margin-left: 20px"
              v-if="params.queryType == 0"
              v-model="picker"
              type="daterange"
              range-separator="至"
              format="yyyy-MM-dd"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            >
            </el-date-picker>
            <el-date-picker
              @change="pickerChange"
              style="margin-left: 20px"
              v-if="params.queryType == 1"
              v-model="pickerMonth"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              value-format="yyyy-MM"
              format="yyyy-MM"
            >
            </el-date-picker>
            <YearRangePicker
              @updateTimeRange="pickerChange"
              style="margin-left: 20px"
              v-if="params.queryType == 2"
              start-placeholder="开始年份"
              end-placeholder="结束年份"
            ></YearRangePicker>
          </div>
          <div id="transaction" style="height: 600px; width: 100%"></div>
        </el-col>
        <el-col :span="6">
          <div class="title">待处理事项</div>
          <div
            style="width: 100%; height: 600px; border: 1px solid #ccc; margin-top: 10px"
          >
            <div
              id="processed"
              style="
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding: 25px;
              "
            >
              <div style="line-height: 50px">
                待付款订单
                <el-progress
                  :stroke-width="26"
                  :format="format"
                  :percentage="statistics.waitPayOrderRate"
                ></el-progress>
              </div>
              <div style="line-height: 50px">
                待发货订单
                <el-progress
                  :stroke-width="24"
                  :percentage="statistics.waitSendOrderRate"
                  :format="format"
                ></el-progress>
              </div>
              <div style="line-height: 50px">
                待收货订单
                <el-progress
                  :stroke-width="22"
                  :percentage="statistics.waitReceiveOrderRate"
                  :format="format"
                ></el-progress>
              </div>
              <div style="line-height: 50px">
                待处理退款订单
                <el-progress
                  :stroke-width="20"
                  :percentage="statistics.waitRefundOrderRate"
                  :format="format"
                ></el-progress>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <div class="footer">
      <div class="item" style="width: 65%">
        <span>访问量</span>
        <div class="userzb" id="Pageview" style="width: 100%; height: 90%"></div>
      </div>
      <div class="item">
        <span>周商品销量占比</span>
        <div class="addgys" id="volume" style="width: 100%; height: 90%"></div>
      </div>
    </div> -->
  </div>
</template>

<script>
import YearRangePicker from "@/components/YearRangePicker/index";
import { getHome } from "@/api/home/home.js";
import * as echarts from "echarts";
import chat from "./chat";
import moment from "moment";
export default {
  components: {
    YearRangePicker,
  },
  name: "Index",
  data() {
    return {
      tabsRadio: 1,
      statistics: {},
      params: {
        queryType: 3,
        startTime: "",
        endTime: "",
      },
      picker: "",
      pickerMonth: "",
    };
  },
  mounted() {
    this.init(1);
    window.onresize = function () {
      this.init(1);
    };
  },

  methods: {
    pickerChange(val) {
      console.log(val);
      if (this.params.queryType == 0) {
        this.params.startTime = moment(this.picker[0]).format("yyyy-MM-DD");
        this.params.endTime = moment(this.picker[1]).format("yyyy-MM-DD");
      } else if (this.params.queryType == 1) {
        this.params.startTime = moment(this.pickerMonth[0]).format("yyyy-MM");
        this.params.endTime = moment(this.pickerMonth[1]).format("yyyy-MM");
      } else if (this.params.queryType == 2) {
        this.params.startTime = val.startYear;
        this.params.endTime = val.endYear;
      }
      this.init();
      console.log(this.params);
    },
    tabsChange() {
      this.init(this.tabsRadio);
    },
    radiochange() {
      switch (this.params.queryType) {
        case 3:
          this.init();
          break;
        case 4:
          this.init();
          break;
        case 5:
          this.init();
          break;
        case 6:
          this.init();
          break;
      }
    },
    init() {
      //
      //
      // this.Pageview();
      // this.volume();
      getHome(this.params).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.statistics = res.data;
          this.transaction(res.data.voMap);
          // this.processed(res.data);
        }
      });
    },
    transaction(data) {
      var chartDom = document.getElementById("transaction");
      var myChart = echarts.init(chartDom);
      let option = chat.transaction(data, this.params.queryType);
      option && myChart.setOption(option);
    },
    processed(data) {
      var chartDom = document.getElementById("processed");
      var myChart = echarts.init(chartDom);
      let option = chat.processed(data);
      option && myChart.setOption(option);
    },
    volume() {
      var chartDom = document.getElementById("volume");
      var myChart = echarts.init(chartDom);
      let option = chat.volume();
      option && myChart.setOption(option);
    },
    Pageview() {
      var chartDom = document.getElementById("Pageview");
      var myChart = echarts.init(chartDom);
      let option = chat.addUserChat();
      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  .item {
    height: 100px;
  }
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: calc(100vh - 420px - 291px);
  .item {
    padding: 20px;
    height: 100%;
    width: 33%;
    border: 1px solid #ccc;
  }
}
.home {
  min-height: calc(100vh - 84px);
  // display: flex;
  // flex-direction: row;
  // justify-content: space-around;
  // align-items: center;
  .row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .count {
      padding: 10px;
      font-size: 23px;
      font-weight: 500;
    }
    .zz {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 14px;
      // color: #18c918;
      color: red;
      padding: 0px 10px;
    }
  }
}
.mains {
  height: 420px;
  margin-top: 30px;
  .title {
    text-align: left;
    font-size: 20px;
    font-weight: 500;
  }
  .tabs {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
