<template>
  <div class="port-chart">
    <div style="width: 100%;">
      <div class="subTitle">{{subTitle_oa}}</div>
      <div class="chart chart-oa"></div>
      <div class="subTitle">{{subTitle_oc}}</div>
      <div class="chart chart-oc"></div>
      <div class="subTitle" v-if="show">{{subTitle_dp}}</div>
      <div class="chart chart-dp" v-if="show"></div>
      <div class="subTitle" v-if="show">{{subTitle_cr}}</div>
      <div class="chart chart-cr" v-if="show"></div>
    </div>

    <Modal v-model="showModal" title="详细情况" width="700" class-name="modalbg">
      <top-data ref="topdata"></top-data>
    </Modal>
  </div>
</template>
<script>
import echart from "common/echart";
import * as service from "service.wap";
import topData from "./top-data";

let oaChart, ocChart, dpChart, crChart;

export default {
  name: "port-chart",
  components: {
    topData
  },
  data() {
    return {
      subTitle_oa: "",
      subTitle_oc: "",
      subTitle_dp: "",
      subTitle_cr: "",
      expression: {},
      show: this.cId != 3,
      showModal: false
    };
  },
  props: ["cId"],
  mounted() {
    echart.then(chart => {
      this.ECharts = chart;

      this.$nextTick(() => {
        this.initOfflineChart();
        this.getOfflineData();
      });

      this.interval = setInterval(() => {
        this.$nextTick(() => {
          this.initExtendChart();
          this.getExtendData();
        });
      }, 1000 * 60 * 5);
    });
  },
  beforeDestroy() {
    if (this.interval) {
      clearInterval(this.interval);
    }
  },
  watch: {
    cId() {
      this.show = this.cId != 3;
      echart.then(chart => {
        this.ECharts = chart;

        this.$nextTick(() => {
          this.initOfflineChart();
          this.getOfflineData();
        });
      });
    }
  },
  methods: {
    clearChart() {
      if (oaChart != null && oaChart != "" && oaChart != undefined) {
        oaChart.dispose();
      }

      if (ocChart != null && ocChart != "" && ocChart != undefined) {
        ocChart.dispose();
      }

      if (
        dpChart != null &&
        dpChart != "" &&
        dpChart != undefined &&
        this.cId != 3
      ) {
        dpChart.dispose();
      }

      if (
        crChart != null &&
        crChart != "" &&
        crChart != undefined &&
        this.cId != 3
      ) {
        crChart.dispose();
      }
    },
    initOfflineChart() {
      let $oa = document.querySelector(".chart-oa"),
        $oc = document.querySelector(".chart-oc");

      this.clearChart();

      if ($oa) {
        oaChart = this.ECharts.init($oa);
      }
      if ($oc) {
        ocChart = this.ECharts.init($oc);
      }

      let $dp = document.querySelector(".chart-dp"),
        $cr = document.querySelector(".chart-cr");
      if ($dp) {
        dpChart = this.ECharts.init($dp);
      }
      if ($cr) {
        crChart = this.ECharts.init($cr);
      }
    },
    setChartData(opt) {
      opt.chartName.setOption({
        title: {
          text: opt.title,
          x: "center",
          textStyle: {
            color: "#2CB1B2"
          }
        },
        legend: {
          data: ["今天", "昨天"],
          x: "right",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: [
          {
            type: "category",
            data: opt.times,

            axisLabel: {
              textStyle: {
                color: "#fff"
              },
              rotate: 45
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                width: 1,
                type: "solid"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            min: parseInt(opt.min / 2, 10),
            max: opt.max,
            axisLabel: {
              formatter: function(p) {
                var new_v = opt.max > 10000 ? p / 1000 : p;
                var per = opt.max > 10000 ? "k" : "";

                return Math.round(new_v.toFixed(0)) + per;
              },
              textStyle: {
                color: "#fff"
              },
              rotate: 45
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                width: 1,
                type: "solid"
              }
            }
          }
        ],
        grid: {
          left: "3%",
          right: "3%",
          borderWidth: 0,
          containLabel: true
        },
        color: ["#FFCA4B", "#9AC4C9"],
        series: [
          {
            name: "今天",
            type: "bar",
            data: opt.t,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#FFCA4B"
                  },
                  formatter: function(p) {
                    var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
                    var per = opt.max > 10000 ? "k" : "";

                    return Math.round(new_v.toFixed(0)) + per;
                  }
                }
              }
            }
          },
          {
            name: "昨天",
            type: "bar",
            data: opt.y,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  textStyle: {
                    color: "#9AC4C9"
                  },
                  formatter: function(p) {
                    var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
                    var per = opt.max > 10000 ? "k" : "";

                    return Math.round(new_v.toFixed(0)) + per;
                  }
                }
              }
            }
          }
        ]
      });
    },
    async getOfflineData() {
      let hourMap = {};

      Promise.all([
        service.get("v2/rs/b2c/24sale", {}),
        service.get("v2/rs/b2c/24pay", {})
      ]).then(([ret, ret1]) => {
        let oa = _.map(ret.today, i => i.amount),
          oay = _.map(ret.yesterday, i => i.amount),
          oc = _.map(ret.today, "count"),
          ocy = _.map(ret.yesterday, "count"),
          dp = _.map(ret1.today, i => i.amount),
          dpy = _.map(ret1.yesterday, i => i.amount),
          cr = _.map(ret1.today, "count"),
          cry = _.map(ret1.yesterday, "count"),
          times = _.map(ret.data, i => {
            let hour = (i.dayHour + "").substring((i.dayHour + "").length - 2);

            hourMap[hour] = i.dayHour;
            return hour;
          });

        this.setChartData({
          title: "收订金额-24小时",
          chartName: oaChart,
          t: oa,
          y: oay,
          times,
          min: 0,
          max: _.max([...oa, ...oay])
        });

        oaChart.on("click", params => {
          const hour = hourMap[params.name];
          this.$refs.topdata.fetchData(hour);
          this.showModal = true;
        });

        this.setChartData({
          title: "收订单数-24小时",
          chartName: ocChart,
          t: oc,
          y: ocy,
          times,
          min: 0,
          max: _.max([...oc, ...ocy])
        });

        this.setChartData({
          title: "有效支付金额-24小时",
          chartName: dpChart,
          t: dp,
          y: dpy,
          times,
          min: 0,
          max: _.max([...dp, ...dpy])
        });

        this.setChartData({
          title: "有效支付单数-24小时",
          chartName: crChart,
          t: cr,
          y: cry,
          times,
          min: 0,
          max: _.max([...cr, ...cry])
        });
      });
    }
  }
};
</script>
<style lang="scss">
.port-chart {
  .buttons {
    text-align: center;

    button {
      margin: 20px 10px;

      a {
        width: 120px;
        display: block;
        padding: 0.75rem 8px;
        color: #fff;
        background: #0c2e5d;
        border-radius: 0.4rem;
      }
    }

    .ivu-btn {
      border: none;
    }
  }

  .chart {
    width: 100%;
    height: 300px;
    margin: 20px 0;
  }

  .subTitle {
    text-align: center;
    font-size: 16px;
    color: #fff;
    margin: 30px auto -20px;
  }

  .expression-title {
    margin: 0 auto 15px;
  }
}

.modalbg {
  .ivu-modal-content {
    background: url(../../img/back.png);
  }
}
</style>