<template>
  <view class="statistical-page" ref="container">
    <view class="navs">
      <view class="list">
        <view
          class="item"
          :class="time == 'today' ? 'on' : ''"
          @click="setTime('today')">
          今天
        </view>
        <view
          class="item"
          :class="time == 'yesterday' ? 'on' : ''"
          @click="setTime('yesterday')">
          昨天
        </view>
        <view
          class="item"
          :class="time == 'seven' ? 'on' : ''"
          @click="setTime('seven')">
          最近7天
        </view>
        <view
          class="item"
          :class="time == 'month' ? 'on' : ''"
          @click="setTime('month')">
          本月
        </view>
        <view
          class="item"
          :class="time == 'date' ? 'on' : ''"
          @click="dateTitle">
          自定义
        </view>
      </view>
    </view>
    <view class="wrapper">
      <view class="title">
        {{ title }}{{ where.type == 1 ? '营业额' : '订单量' }}
      </view>
      <view v-if="where.type == 1" class="money">{{ dataObj.all || 0 }}</view>
      <view v-else class="money">{{ dataObj.all || 0 }}</view>
      <view class="increase">
        <view>
          {{ time === 'date' ? '' : title }}增长率：<text
            :class="dataObj.growthRate >= 0 ? 'red' : 'green'">
            {{ dataObj.growthRate }}%
            <text
              class="iconfont"
              :class="
                dataObj.growthRate >= 0 ? 'icon-xiangshang1' : 'icon-xiangxia2'
              "></text
          ></text>
        </view>
        <view>
          {{ time === 'date' ? '' : title }}增长：<text
            :class="dataObj.growthNumber >= 0 ? 'red' : 'green'"
            >{{ dataObj.growthNumber }}
            <text
              class="iconfont"
              :class="
                dataObj.growthNumber >= 0
                  ? 'icon-xiangshang1'
                  : 'icon-xiangxia2'
              "></text
          ></text>
        </view>
      </view>
    </view>
    <view class="chart">
      <canvas
        canvas-id="myChart"
        style="width: 100%; height: 250px"
        :ontouch="true"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd" />
    </view>

    <view class="Card">
      <view class="top"
        ><text class="iconfont icon-xiangxishuju icon"></text
        ><text>详细数据</text></view
      >
      <view v-if="dataObj?.list?.length > 0">
        <nut-table
          :bordered="true"
          class="table"
          :columns="columns"
          :data="dataObj?.list"></nut-table>
      </view>
      <nut-empty v-else description="暂无订单数据"></nut-empty>
    </view>

    <!-- 日期选择 -->
    <nut-calendar
      v-model:visible="isVisible"
      type="range"
      :default-value="pickerVal"
      :start-date="date_start"
      @close="isVisible = false"
      @choose="setChooseValue">
    </nut-calendar>
  </view>
</template>

<script setup lang="ts">
import {ref, computed, h} from 'vue';
import Taro from '@tarojs/taro';
import {growthRate} from '../../../api/admin';
import dayjs from 'dayjs';
import uCharts from '../../../utils/js_sdk/u-charts.min.js';

const time = ref('');

const isVisible = ref(false);

let canvas_obj;

const w = Taro.getSystemInfoSync().windowWidth;

const chartWH = ref({
  width: w * 0.9,
  height: 250,
  pixelRatio: 1,
});

const columns = ref([
  {
    title: '日期',
    key: 'Date',
    align: 'center',
  },
  {
    title: '订单数',
    key: 'TotalCount',
    align: 'center',
  },
  {
    title: '交易额',
    key: 'NumberSum',
    align: 'center',
    render: row => {
      return h(
        'view',
        {
          style: {
            color: 'red',
          },
        },
        row.NumberSum,
      );
    },
  },
]);

const date_start = computed(() => {
  return dayjs().startOf('year').format('YYYY-MM-DD');
});

const title = ref('');

const where = ref({
  type: 1,
  status: 2,
  start: '',
  end: '',
});

const dataObj = ref<any>({});

const opts = ref<any>({
  categories: [],
  series: [
    {
      name: '营业额',
      data: [],
    },
    {
      name: '订单量',
      data: [],
    },
  ],
});

const pickerVal = ref<any>([]);

Taro.useLoad(options => {
  where.value.type = options.type === 'price' ? 1 : 2;
  time.value = options.time;
  setTime(options.time);
  // getData();
  pickerVal.value = [
    dayjs().format('YYYY-MM-DD'),
    dayjs().format('YYYY-MM-DD'),
  ];
});

const setTime = (type: string) => {
  time.value = type;
  switch (type) {
    case 'today':
      title.value = '今日';
      where.value.status = 2;
      where.value.start = dayjs().format('YYYY-MM-DD');
      where.value.end = dayjs().format('YYYY-MM-DD');
      break;
    case 'yesterday':
      title.value = '昨日';
      where.value.status = 2;
      where.value.start = dayjs().add(-1, 'day').format('YYYY-MM-DD');
      where.value.end = dayjs().add(-1, 'day').format('YYYY-MM-DD');
      break;
    case 'seven':
      title.value = '7天';
      where.value.status = 2;
      where.value.start = dayjs().add(-6, 'day').format('YYYY-MM-DD');
      where.value.end = dayjs().format('YYYY-MM-DD');
      break;
    case 'month':
      title.value = '本月';
      where.value.status = 1;
      where.value.start = dayjs().startOf('month').format('YYYY-MM-DD');
      where.value.end = dayjs().format('YYYY-MM-DD');
      break;
  }
  getData();
};

const dateTitle = () => {
  where.value.status = 1;
  time.value = 'date';
  isVisible.value = true;
};

const setChooseValue = (ref: any) => {
  where.value.start = ref[0][3];
  where.value.end = ref[1][3];
  title.value = `${where.value.start}-${where.value.end}`;
  getData();
};

const getData = async () => {
  try {
    const user_info = Taro.getStorageSync('userInfo');
    const res = await growthRate({
      bid: user_info.data.bid,
      status: where.value.status,
      StartTime: where.value.start,
      EndTime: where.value.end,
    });
    dataObj.value = res.data;
    opts.value.categories = [];
    opts.value.series[0].data = [];
    opts.value.series[1].data = [];
    res.data.list.forEach((item: any) => {
      opts.value.categories.push(item.Date);
      opts.value.series[0].data.push(item.NumberSum);
      opts.value.series[1].data.push(item.TotalCount);
    });
    create_canvas();
  } catch (error) {
    Taro.showToast({
      title: error.msg,
      icon: 'none',
    });
    throw error;
  }
};

const create_canvas = () => {
  const ctx = Taro.createCanvasContext('myChart');
  canvas_obj = new uCharts({
    type: 'column',
    context: ctx,
    width: chartWH.value.width,
    height: chartWH.value.height,
    categories: opts.value.categories,
    series: opts.value.series,
    pixelRatio: chartWH.value.pixelRatio,
    animation: true,
    background: '#FFFFFF',
    color: [
      '#1890FF',
      '#91CB74',
      '#FAC858',
      '#EE6666',
      '#73C0DE',
      '#3CA272',
      '#FC8452',
      '#9A60B4',
      '#ea7ccc',
    ],
    padding: [15, 15, 0, 15],
    enableScroll: true,
    legend: {},
    xAxis: {
      disableGrid: true,
      scrollShow: true,
      itemCount: 3,
    },
    yAxis: {
      data: [
        {
          min: 0,
        },
      ],
    },
    extra: {
      column: {
        type: 'group',
        width: 20,
        activeBgColor: '#000000',
        activeBgOpacity: 0.08,
      },
    },
  });
};

const touchStart = (e: any) => {
  canvas_obj.showToolTip(e, {
    format: function (item: any, category: any) {
      return category + ' ' + item.name + ':' + item.data;
    },
  });
  canvas_obj.scrollStart(e);
};

const touchMove = (e: any) => {
  canvas_obj.scroll(e);
};

const touchEnd = (e: any) => {
  canvas_obj.scrollEnd(e);
};
</script>

<style lang="scss">
.statistical-page {
  .navs {
    width: 100%;
    height: 96px;
    background-color: #fff;
    overflow: hidden;
    line-height: 96px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;

    .list {
      overflow-y: hidden;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
      width: 100%;

      .item {
        font-size: 32px;
        color: #282828;
        margin-left: 60px;
        display: inline-block;
      }

      .on {
        color: #fa2c19;
      }
    }
  }

  .wrapper {
    width: 95%;
    background-color: #fff;
    border-radius: 10px;
    margin: 119px auto 0 auto;
    padding: 50px 60px;

    .title {
      font-size: 30px;
      color: #999;
      text-align: center;
    }

    .money {
      font-size: 72px;
      color: #fba02a;
      text-align: center;
      margin-top: 10px;
    }

    .increase {
      font-size: 28px;
      color: #999;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .red {
        color: #ff6969;
      }

      .green {
        color: #1abb1d;
      }
      .iconfont {
        font-size: 23px;
        margin-left: 15px;
      }
    }
  }

  .chart {
    width: 95%;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 10px;
    margin: 23px auto;
    padding: 10px;
  }

  .Card {
    width: 95%;
    background-color: #fff;
    border-radius: 10px;
    margin: 10px auto;
    padding: 25px;

    .top {
      display: flex;
      align-items: center;
      text {
        margin-right: 5px;
      }

      .iconfont {
        color: #fa2c19;
      }
    }
    .table {
      margin-top: 10px;
    }
  }
}
</style>
