<template>
  <div class="statistical-page" ref="container">
    <div class="navs">
      <div class="list">
        <div
          class="item"
          :class="time == 'today' ? 'on' : ''"
          @click="setTime('today')"
        >
          今天
        </div>
        <div
          class="item"
          :class="time == 'yesterday' ? 'on' : ''"
          @click="setTime('yesterday')"
        >
          昨天
        </div>
        <div
          class="item"
          :class="time == 'lately7' ? 'on' : ''"
          @click="setTime('lately7')"
        >
          最近7天
        </div>
        <div
          class="item"
          :class="time == 'month' ? 'on' : ''"
          @click="setTime('month')"
        >
          本月
        </div>
        <div
          class="item"
          :class="time == 'date' ? 'on' : ''"
          @click="dateTitle"
        >
          <!-- <span class="iconfont icon-xiangxia"></span>
          <span v-for="(value, index) in renderValues" :key="index">
            {{ value }}</span
          > -->
          自定义
        </div>
      </div>
    </div>
    <div class="wrapper">
      <div class="title">
        {{ title }}{{ this.where.type == 1 ? "营业额（元）" : "订单量（份）" }}
      </div>
      <div class="money">{{ time_price }}</div>
      <div class="increase acea-row row-between-wrapper">
        <div>
          {{ title }}增长率：<span
            :class="increase_time_status === 1 ? 'red' : 'green'"
            >{{ increase_time_status === 1 ? "" : "-" }}{{ growth_rate }}%
            <span
              class="iconfont"
              :class="
                increase_time_status === 1
                  ? 'icon-xiangshang1'
                  : 'icon-xiangxia2'
              "
            ></span
          ></span>
        </div>
        <div>
          {{ title }}增长：<span
            :class="increase_time_status === 1 ? 'red' : 'green'"
            >{{ Number(increase_time).toFixed(2) }}
            <span
              class="iconfont"
              :class="
                increase_time_status === 1
                  ? 'icon-xiangshang1'
                  : 'icon-xiangxia2'
              "
            ></span
          ></span>
        </div>
      </div>
    </div>
    <div class="chart">
      <div class="company">
        {{ where.type === 1 ? "单位（元）" : "单位（份）" }}
      </div>
      <ECharts :options="polar"></ECharts>
    </div>
    <!--<div class="public-wrapper">-->
      <!--<div class="title">-->
        <!--<span class="iconfont icon-xiangxishuju"></span>详细数据-->
      <!--</div>-->
      <!--<div class="nav acea-row row-between-wrapper">-->
        <!--<div class="data">日期</div>-->
        <!--<div class="browse">订单量</div>-->
        <!--<div class="turnover">成交额</div>-->
      <!--</div>-->
      <!--<div class="conter">-->
        <!--<div-->
          <!--class="item acea-row row-between-wrapper"-->
          <!--v-for="(item, index) in list"-->
          <!--:key="index"-->
        <!--&gt;-->
          <!--<div class="data">{{ item.time }}</div>-->
          <!--<div class="browse">{{ item.count }}</div>-->
          <!--<div class="turnover">{{ item.price }}</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
    <statistics-data :list="list"></statistics-data>
    <div class="calendar-wrapper" :class="current === true ? 'on' : ''">
      <div class="calendar">
        <Calendar
          :clean="clean"
          :lunar="lunar"
          ref="calendar"
          :range="isrange"
          :multi="ismulti"
          @select="select"
          @next="next"
          @prev="prev"
          :value="value"
          :weekSwitch="weekSwitch"
          :monthRange="monthRange"
          rangeMonthFormat="yyyy-mm-dd"
          monFirst
          responsive
          :begin="[1992, 5, 20]"
          :end="[2049, 5, 20]"
        />
      </div>
    </div>
    <div
      class="maskModel"
      @touchmove.prevent
      v-show="current === true"
      @click="close"
    ></div>
    <Loading :loaded="loaded" :loading="loading"></Loading>
  </div>
</template>
<script>
import statisticsData from "../components/statisticsData";
import ECharts from "vue-echarts";
import "echarts/lib/chart/line";
import "echarts/lib/component/polar";
import Calendar from "mpvue-calendar";
import "mpvue-calendar/src/browser-style.css";
import { statisticsDataApi, orderTimeApi } from '@/api/order';
import { parseTime } from '@/utils';
import Loading from "../components/Loading";
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
const day = new Date().getDate();
export default {
  name: "Statistics",
  components: {
    ECharts,
    Calendar,
    Loading,
    statisticsData
  },
  props: {},
  data: function() {
    return {
      polar: {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [""]
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#999",
                width: 1 //这里是为了突出显示加上的
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#f5f5f5"],
                width: 1,
                type: "solid"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#999",
                width: 1 //这里是为了突出显示加上的
              }
            }
          }
        ],
        series: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            itemStyle: {
              normal: {
                color: "#2291f8", //折点颜色
                lineStyle: {
                  color: "#2291f8" //折线颜色
                }
              }
            },
            data: [120, 132.5, 101, 134, 90, 150, 30]
          }
        ],
        grid: {
          x: 30,
          x2: 10,
          y: 20,
          y2: 110,
          left: 40
        },
        animationDuration: 2000
      },
      value: [[year, month, day - 1], [year, month, day]],
      isrange: true,
      weekSwitch: false,
      ismulti: false,
      monFirst: true,
      clean: true, //简洁模式
      lunar: false, //显示农历
      renderValues: [],
      monthRange: [],
      current: false,
      where: {
        dateLimit : '',
        type: ''
      },
      types: "", //类型|order=订单数|price=营业额
      time: "", //时间|today=今天|yesterday=昨天|month=本月
      title: "", //时间|today=今天|yesterday=昨天|month=本月
      growth_rate: "", //增长率
      increase_time: "", //增长率
      increase_time_status: "", //增长率
      time_price: "", //增长率
      loaded: false,
      loading: false,
      filter: {
        page: 1,
        limit: 10,
        dateLimit: ""
      },
      list: []
    };
  },
  watch: {
    "$route.params": function(newVal) {
      var that = this;
      if (newVal != undefined) {
        that.setType(newVal.type);
        that.setTime(newVal.time);
        that.getIndex();
      }
    }
  },
  mounted: function() {
    this.handelRenderValues();
    this.setTime(this.$route.params.time);
    this.setType(this.$route.params.type);
    this.getIndex();
    this.getInfo();
    this.$scroll(this.$refs.container, () => {
      !this.loading && this.getInfo();
    });
  },
  computed: {
    monthRangeText() {
      return this.monthRange.length ? "固定" : "指定范围";
    }
  },
  methods: {
    getIndex: function() {
      var that = this;
      orderTimeApi(that.where).then(
        res => {
          var _info = res.chart,
            day = [],
            num = [];
          _info.forEach(function(item) {
            day.push(item.time);
            num.push(item.num);
          });
          that.polar.xAxis[0].data = day;
          that.polar.series[0].data = num;
          that.growth_rate = res.growthRate;
          that.increase_time = res.increaseTime;
          that.increase_time_status = res.increaseTimeStatus;
          that.time_price = res.time;
        },
        error => {
          that.$dialog.error(error.msg);
        }
      );
    },
    setTime: function(time) {
      this.time = time;
      this.where.dateLimit = time
      this.filter.dateLimit = time
      this.list = [];
      this.filter.page = 1;
      this.loaded = false;
      this.loading = false;
      this.getIndex();
      this.getInfo();
    },
    setType: function(type) {
      switch (type) {
        case "price":
          this.where.type = 1;
          break;
        case "order":
          this.where.type = 2;
          break;
      }
    },
    handelRenderValues(data) {
      if (this.ismulti) {
        this.renderValues = this.value.map(v => v.join("-"));
      } else if (this.isrange) {
        const values = [];
        data || this.value;
        this.value.forEach((v, i) => {
          values.push(v.join("-"));
          // if (!i) {
          //   values.push("~");
          // }
        });
        this.renderValues = values;
      } else {
        this.renderValues = [this.value.join("-")];
      }
      this.where.dateLimit = this.renderValues.join(',')
      // this.where.dateLimit = parseTime(this.renderValues[0], '{y}-{m}-{d}')+','+parseTime(this.renderValues[1], '{y}-{m}-{d}')
      this.filter.dateLimit = this.where.dateLimit
    },
    prev(y, m, w) {
      console.log(y, m, w);
    },
    next(year, month, week) {
      console.log(year, month, week);
    },
    selectYear(year) {
    },
    setToday() {
      this.$refs.calendar.setToday();
    },
    dateInfo() {
      const info = this.$refs.calendar.dateInfo(2018, 8, 23);
    },
    renderer() {
      if (this.monthRange.length) {
        this.monthRange = ["2018-08", "2018-08"];
      }
      this.$refs.calendar.renderer(2018, 8); //渲染2018年8月份
    },
    select(val, val2) {
      if (this.isrange) {
        this.handelRenderValues([val, val2]);
      } else if (this.ismulti) {
        this.handelRenderValues(val);
      } else {
        this.handelRenderValues([val]);
      }
      this.list = [];
      this.filter.page = 1;
      this.loaded = false;
      this.loading = false;
      this.time = "date";
      this.title = "";
      // this.getIndex();
      // this.getInfo();
    },
    dateTitle: function() {
      this.current = true;
    },
    close: function() {
      this.current = false;
      this.getIndex();
      this.getInfo();
    },
    getInfo: function() {
      var that = this;
      if (that.loading || that.loaded) return;
      that.loading = true;
      statisticsDataApi(that.filter).then(
        res => {
          that.loading = false;
          that.loaded = res.length < that.filter.limit;
          that.list.push.apply(that.list, res);
          that.filter.page = that.filter.page + 1;
        },
        error => {
          that.$dialog.message(error.msg);
        }
      );
    }
  }
};
</script>
<style scoped lang="scss">
  .public-wrapper .title{font-size:0.3rem;color:#282828;padding:0 0.3rem;margin-bottom:0.2rem;}
  .public-wrapper .title .iconfont{color:#2291f8;font-size:0.4rem;margin-right:0.13rem;vertical-align:middle;}
  .public-wrapper{margin:0.18rem auto 0 auto;width:6.9rem;background-color:#fff;border-radius:0.1rem;padding-top:0.25rem;}
  .public-wrapper .nav{padding:0 0.3rem;height:0.7rem;line-height:0.7rem;font-size:0.24rem;color:#999;}
  .public-wrapper .data{width:2.1rem;text-align:left;}
  .public-wrapper .browse{width:1.92rem;text-align:right;}
  .public-wrapper .turnover{width:2.27rem;text-align:right;}
  .public-wrapper .conter{padding:0 0.3rem;}
  .public-wrapper .conter .item{border-bottom:1px solid #f7f7f7;height:0.7rem;font-size:0.24rem;}
  .public-wrapper .conter .item .turnover{color:#d84242;}
  .statistical-page .navs{width:100%;height:0.96rem;background-color:#fff;overflow:hidden;line-height:0.96rem;position:fixed;top:0;left:0;z-index:9;}
  .statistical-page .navs .list{overflow-y:hidden;overflow-x:auto;white-space: nowrap;-webkit-overflow-scrolling: touch;
    width: 100%;}
  .statistical-page .navs .item{font-size:0.32rem;color:#282828;margin-left:0.6rem;display: inline-block;}
  .statistical-page .navs .item.on{color:#2291f8;}
  .statistical-page .navs .item .iconfont{font-size:0.25rem;margin-left:0.13rem;}
  .statistical-page .wrapper{width:7.4rem;background-color:#fff;border-radius:0.1rem;margin:0.19rem auto 0 auto;padding:0.5rem 0.6rem;}
  .statistical-page .wrapper .title{font-size:0.3rem;color:#999;text-align:center;}
  .statistical-page .wrapper .money{font-size:0.72rem;color:#fba02a;text-align:center;margin-top:0.1rem;}
  .statistical-page .wrapper .increase{font-size:0.28rem;color:#999;margin-top:0.2rem;}
  .statistical-page .wrapper .increase .red{color:#ff6969;}
  .statistical-page .wrapper .increase .green{color:#1abb1d;}
  .statistical-page .wrapper .increase .iconfont{font-size:0.23rem;margin-left:0.15rem;}
  .statistical-page .chart{width:6.9rem;height:4.8rem;background-color:#fff;border-radius:0.1rem;margin:0.23rem auto 0 auto;padding: 0.25rem 0.22rem 0 0.22rem;}
  .statistical-page .chart .company{font-size:0.26rem;color:#999;}
  .statistical-page .mc-body{padding-bottom:0;}
  .statistical-page .mc-body tr{background-color: #edf8fe;border-top: 1px solid #fff;width:100%;}
.echarts {
  width: 100%;
  height: 5.5rem;
}
.calendar-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 777;
  transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.calendar-wrapper.on {
  transform: translate3d(0, 0, 0);
}
.statistical-page .wrapper .increase {
  font-size: 0.26rem;
}
.statistical-page .wrapper .increase .iconfont {
  margin-left: 0;
}
</style>
