<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>已完成订单量</span></div>
          <div
            class="el-table el-table--enable-row-hover el-table--medium timkdos"
          >
            <div class="timkdos-time">
              <el-date-picker
                v-model="valueTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                style="width: 20em"
                @change="changeTimes"
              >
              </el-date-picker>
            </div>
            <div ref="commandstatst" style="height: 420px" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>已驳回订单量</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="commandstatsts" style="height: 420px" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>已退款订单量</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="commandstatstst" style="height: 420px" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>累计成交额</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <!-- <div ref="commandstats" style="height: 420px" /> -->
            <div class="ccumulated">
              <div class="ccumulated-year">
                <el-date-picker
                  v-model="valueYear"
                  type="year"
                  placeholder="选择年"
                  @change="checkYear"
                  value-format="yyyy"
                >
                </el-date-picker>
              </div>
              <div
                class="ccumulated-item"
                v-for="(item, index) in ccumulatedList"
                :key="index"
              >
                <span>{{ item.month }}月：￥{{ item.transactionVolume }}</span>
                <el-progress
                  :text-inside="false"
                  :stroke-width="26"
                  :percentage="100"
                  :color="colorF"
                  :show-text="false"
                ></el-progress>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header">
            <span>已完成/未完成订单对比</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="usedmemory" style="height: 420px" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-button type="primary" size="medium " @click="clickStatement"
          >导出报表</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import { getCache } from "@/api/monitor/cache";
import * as echarts from "echarts";
import {
  reportFormsGET,
  accumulatedTransactionVolumeGET,
} from "@/api/orderform/index";

export default {
  name: "Cache",
  data() {
    return {
      // 统计命令信息
      commandstats: null,
      // 使用内存
      usedmemory: null,
      // cache信息
      cache: {},
      ccumulatedList: [],
      valueYear: "",
      valueTime: "",
    };
  },
  created() {
    this.getList();
    this.accumulatedTransactionVolumeAxios();
    this.openLoading();
  },
  methods: {
    changeTimes(e) {
      console.log(e, "====changeTimes");
      this.valueTime = e;
      if (this.valueTime != null && this.valueTime.length > 0) {
        this.getList({
          startTime: e[0],
          endTime: e[1],
        });
      }else{
        this.getList({
          startTime: '',
          endTime: '',
        });
      }
    },
    checkYear(e) {
      // console.log(e,"=======checkYear")
      this.valueYear = e;
      this.accumulatedTransactionVolumeAxios();
    },
    async accumulatedTransactionVolumeAxios() {
      let self = this;
      const data_back = await accumulatedTransactionVolumeGET({
        year: self.valueYear,
      });
      // console.log(
      //   data_back,
      //   "=============accumulatedTransactionVolumeGET back"
      // );
      const { code, data } = data_back;
      if (code === 200) {
        self.ccumulatedList = data;
      }
    },
    monthNow() {
      var date = new Date();
      var month = date.getMonth() + 1;
      return month;
    },
    colorF() {
      //十六进制颜色随机
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      const color = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
      return color;
    },
    //导出报表
    clickStatement() {
      this.download(
        "/xinrenli/order/exportReportForms",
        {},
        `role_${new Date().getTime()}.xlsx`
      );
    },
    /** 查缓存询信息 */
    getList(values) {
      reportFormsGET({
        startTime: values && values.startTime ? values.startTime : "",
        endTime: values && values.endTime ? values.endTime : "",
      }).then((response) => {
        console.log(response.data,'相应')
        this.cache = response.data;
        this.$modal.closeLoading();

        // this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
        // this.commandstats.setOption({
        //   tooltip: {
        //     trigger: 'item'
        //   },
        //   legend: {
        //     top: '5%',
        //     left: 'center'
        //   },
        //   series: [
        //     {
        //       // name: 'Access From',
        //       type: 'pie',
        //       radius: ['40%', '70%'],
        //       avoidLabelOverlap: false,
        //       label: {
        //         show: false,
        //         position: 'center'
        //       },
        //       emphasis: {
        //         label: {
        //           show: false,
        //           fontSize: 40,
        //           fontWeight: 'bold'
        //         }
        //       },
        //       labelLine: {
        //         show: false
        //       },
        //       data: [
        //         { value: this.cache.money, name: '累计成交额' }
        //       ]
        //     }
        //   ]
        // });
        this.commandstatst = echarts.init(this.$refs.commandstatst, "macarons");
        this.commandstatst.setOption({
          title: [
            {
              text: `{name|已完成订单量}\n{val|${this.cache.completed}}`,
              top: "center",
              left: "center",
              textStyle: {
                rich: {
                  name: {
                    fontSize: 14,
                    color: "#666666",
                    padding: [10, 0],
                  },
                  val: {
                    fontSize: 32,
                    fontWeight: "bold",
                    color: "#333333",
                  },
                },
              },
            }
          ],
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          series: [
            {
              // name: 'Access From',
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [{ value: this.cache.completed, name: "已完成订单量" }],
            },
          ],
        });
        this.commandstatsts = echarts.init(
          this.$refs.commandstatsts,
          "macarons"
        );
        this.commandstatsts.setOption({
          title: [
            {
              text: `{name|已驳回订单量}\n{val|${this.cache.reject}}`,
              top: "center",
              left: "center",
              textStyle: {
                rich: {
                  name: {
                    fontSize: 14,
                    color: "#666666",
                    padding: [10, 0],
                  },
                  val: {
                    fontSize: 32,
                    fontWeight: "bold",
                    color: "#333333",
                  },
                },
              },
            }
          ],
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          series: [
            {
              // name: 'Access From',
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [{ value: this.cache.reject, name: "已驳回订单量" }],
            },
          ],
        });
        this.commandstatstst = echarts.init(
          this.$refs.commandstatstst,
          "macarons"
        );
        this.commandstatstst.setOption({
          title: [
            {
              text: `{name|已退款订单量}\n{val|${this.cache.refund}}`,
              top: "center",
              left: "center",
              textStyle: {
                rich: {
                  name: {
                    fontSize: 14,
                    color: "#666666",
                    padding: [10, 0],
                  },
                  val: {
                    fontSize: 32,
                    fontWeight: "bold",
                    color: "#333333",
                  },
                },
              },
            }
          ],
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          series: [
            {
              // name: 'Access From',
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [{ value: this.cache.refund, name: "已退款订单量" }],
            },
          ],
        });
        this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
        this.usedmemory.setOption({
          // title: {
          //   text: 'Referer of a Website',
          //   subtext: 'Fake Data',
          //   left: 'center'
          // },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              // name: 'Access From',
              type: "pie",
              radius: "50%",
              data: [
                { value: this.cache.accomplish, name: "已完成订单" },
                { value: this.cache.noAccomplish, name: "未完成订单" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        });
      });
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载缓存监控数据，请稍候！");
    },
  },
};
</script>

<style lang="scss" scoped>
.ccumulated {
  height: 420px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  &-year {
    width: 100%;
  }
  &-item {
    width: 48%;
    height: 30px;
    margin: 0px;
  }
}

.timkdos {
  position: relative;
  &-time {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999999999;
  }
}
</style>
