<template>
  <view class="indexpage">
    <view class="topBox">
      <image
        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/bg.png"
        mode="widthFix"
        class="bg"
      />
      <view class="topinfo">
        <view class="flex-center">
          <image
            :src="photo"
            class="headimg"
          />
          <view class="name1">饭粒汪</view>
        </view>
        <view
          style="
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 100rpx;
          "
        >
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/qr_code.png"
            class="ewmimg"
            mode="aspectFill"
          />
          <view class="name2">收款码</view>
        </view>
      </view>
      <view class="msgBox flex-center">
        <view class="itemBox">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/order.png"
            mode=""
            class="imgicon"
          />
          <view class="iconname">订单消息</view>
          <view class="tipNum">1</view>
        </view>
        <view class="itemBox">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/msg.png"
            mode=""
            class="imgicon"
          />
          <view class="iconname">审核消息</view>
        </view>
        <view class="itemBox">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/cash.png"
            mode=""
            class="imgicon"
          />
          <view class="iconname">提现申请</view>
        </view>
        <view class="itemBox">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/comment.png"
            mode=""
            class="imgicon"
          />
          <view class="iconname">评论管理</view>
        </view>
        <view class="itemBox" @click="goUserList()">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/user.png"
            mode=""
            class="imgicon"
          />
          <view class="iconname">用户管理</view>
        </view>
      </view>
    </view>
    <view class="conditionOfBusiness">
      <view class="title">经营状况</view>
      <view class="day flex-center">
        <view
          class="dayitem"
          @click="handleClickDate('today')"
          :class="{ choose: clickDate == 'today' }"
          >今日</view
        >
        <view
          class="dayitem"
          @click="handleClickDate('yesterday')"
          :class="{ choose: clickDate == 'yesterday' }"
          >昨日</view
        >
        <view
          class="dayitem"
          @click="handleClickDate('first')"
          :class="{ choose: clickDate == 'first' }"
          >7日</view
        >
        <view
          class="dayitem"
          @click="handleClickDate('second')"
          :class="{ choose: clickDate == 'second' }"
          >30日</view
        >
      </view>
      <view class="BusinessData">
        <view class="dataitem">
          <view class="dataNum">{{ salesData.OrderCount || 0 }}</view>
          <view class="dataName">支付订单数</view>
        </view>
        <view class="dataitem">
          <view class="dataNum">{{ salesData.Income || 0 }}</view>
          <view class="dataName">支付金额(元)</view>
        </view>
        <view class="dataitem">
          <view class="dataNum">{{ salesData.UserCount || 0 }}</view>
          <view class="dataName">支付人数</view>
        </view>
        <view class="dataitem">
          <view class="dataNum">{{ salesData.GoodCount || 0 }}</view>
          <view class="dataName">支付件数</view>
        </view>
      </view>
    </view>
    <view class="fastHandle">
      <view class="title">快速处理</view>
      <view class="flex-center HandleBox">
        <view class="handleItem">
          <view class="handleItemNum">{{ basicData.NoSendOrderNum }}</view>
          <view class="handleItemName">待发货订单</view>
          <view
            class="handleItemBtn"
            @click="jumpPage('/pages/MallMange/order?orderType=1&tab=2')"
            >立即发货 <u-icon name="arrow"></u-icon>
          </view>
        </view>
        <view class="handleItem">
          <view class="handleItemNum">{{ basicData.ActivistOrderNum }}</view>
          <view class="handleItemName">售后订单</view>
          <view
            class="handleItemBtn"
            @click="jumpPage('/pages/MallMange/order?orderType=2')"
            >立即处理 <u-icon name="arrow"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="echartsBox">
      <view class="title flex-center">
        <!-- <picker
          @change="bindPickerChange"
          :value="key"
          :range="array"
          range-key="name"
        >
          <view class="payType"
            >{{ payType }}
            <u-icon name="arrow-down"></u-icon>
          </view>
        </picker> -->
        <view></view>
        <picker
          @change="bindPickerChange1"
          :value="key"
          :range="array1"
          range-key="name"
        >
          <view class="payType"
            >{{ payType1 }}
            <u-icon name="arrow-down"></u-icon>
          </view>
        </picker>
      </view>
      <view class="day flex-center">
        <view
          class="dayitem"
          @click="handleClickDate('today')"
          :class="{ choose: clickDate == 'today' }"
          >今日</view
        >
        <view
          class="dayitem"
          @click="handleClickDate('yesterday')"
          :class="{ choose: clickDate == 'yesterday' }"
          >昨日</view
        >
        <view
          class="dayitem"
          @click="handleClickDate('first')"
          :class="{ choose: clickDate == 'first' }"
          >7日</view
        >
        <view
          class="dayitem"
          @click="handleClickDate('second')"
          :class="{ choose: clickDate == 'second' }"
          >30日</view
        >
      </view>
      <view style="height: 100rpx"></view>
      <canvas
        canvas-id="canvasColumn"
        id="canvasColumn"
        class="charts"
        disable-scroll="true"
        @touchstart="touchColumn"
        @touchmove="moveColumn"
        @touchend="touchEndColumn"
      >
      </canvas>
    </view>
    <tabbar></tabbar>
  </view>
</template>

<script>
import uCharts from "../school/components/u-charts/u-charts.min.js";
import tabbar from "./components/tabbar.vue";
let canvaColumn = null;
let _self;
export default {
  components: {
    tabbar,
  },
  data() {
    return {
      photo:"",//头像
      array: [
        {
          name: "支付金额",
          key: 1,
        },
        {
          name: "支付订单数",
          key: 2,
        },
        {
          name: "支付人数",
          key: 3,
        },
        {
          name: "支付件数",
          key: 4,
        },
      ],
      payType: "",
      array1: [
        {
          name: "全部",
          key: 0,
        },
        {
          name: "微信",
          key: 1,
        },
        {
          name: "支付宝",
          key: 2,
        },
        {
          name: "抖音/头条",
          key: 3,
        },
        {
          name: "百度",
          key: 4,
        },
      ],
      payType1: "",
      //加载
      loading: false,
      clickDate: "today",
      dateStr: [], //日期
      //查询数据
      basicQMsg: {
        Source: 0, //来源
        StartDate: "", //开始时间
        EndDate: "", //结束时间
        SalesTimeType: 0, //默认今日
        OrderBy: "",
        UserType: -1, //0-普通用户,1-领队导游
      },
      basicData: {}, //基础数据
      salesData: {}, //销售数据
      cWidth: "",
      cHeight: "",
      pixelRatio: 1,
    };
  },
  methods: {
    bindPickerChange(e) {
      this.payType = this.array[e.detail.value].name;
    },
    bindPickerChange1(e) {
      this.payType1 = this.array1[e.detail.value].name;
      this.basicQMsg.Source = this.array1[e.detail.value].Id;
      this.getBasicData();
    },
    showColumn(canvasId, chartData) {
      canvaColumn = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: "line",
        fontSize: 11,
        padding: [5, 15, 15, 15],
        legend: {
          show: false,
          position: "top",
        },
        dataLabel: true,
        dataPointShape: true,
        background: "#FFFFFF",
        pixelRatio: _self.pixelRatio,
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        enableScroll: true,
        xAxis: {
          rotateLabel: true,
          disableGrid: true,
          type: "grid",
          gridType: "dash",
          itemCount: 4,
          labelCount: chartData.categories.length,
          scrollShow: true,
          scrollAlign: "right",
          dashLength: 8,
          gridColor: "#FFFFFF",
        },
        yAxis: {
          disabled: true,
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        extra: {
          line: {
            type: "curve",
          },
        },
        tooltip: {
          horizentalLine: true,
          xAxisLabel: true,
          yAxisLabel: true,
          labelFontColor: "#ffffff",
        },
      });
    },
    touchColumn(e) {
      canvaColumn.scrollStart(e);
    },
    moveColumn(e) {
      canvaColumn.scroll(e);
    },
    touchEndColumn(e) {
      canvaColumn.scrollEnd(e);
      canvaColumn.touchLegend(e, {
        animation: true,
      });
      canvaColumn.showToolTip(e, {
        format: function (item, category) {
          //今日
          let now = new Date();
          let year = now.getFullYear(); //年
          let month = now.getMonth() + 1; //月
          let day = now.getDate(); //日
          let nowDay = year + "-" + month + "-" + day;
          //昨日
          now.setTime(now.getTime() - 24 * 60 * 60 * 1000);
          let yesDay =
            now.getFullYear() +
            "-" +
            (now.getMonth() + 1) +
            "-" +
            now.getDate();
          if (_self.clickDate == "today") {
            return (
              nowDay +
              " " +
              category +
              "时" +
              " " +
              item.name +
              ":" +
              item.data +
              "元"
            );
          } else if (_self.clickDate == "yesterday") {
            return (
              yesDay +
              " " +
              category +
              "时" +
              " " +
              item.name +
              ":" +
              item.data +
              "元"
            );
          } else {
            return category + " " + item.name + ":" + item.data + "元";
          }
        },
      });
    },
    //日期切换
    handleClickDate(name) {
      this.clickDate = name;
      this.dateStr = [];
      if (name == "today") {
        this.basicQMsg.SalesTimeType = 0;
      } else if (name == "yesterday") {
        this.basicQMsg.SalesTimeType = 1;
      }
      //7日
      if (name == "first") {
        this.dateStr.push(this.$utils.AddDay("", -7));
        this.basicQMsg.SalesTimeType = 7;
      }
      //30日
      else if (name == "second") {
        this.dateStr.push(this.$utils.AddDay("", -30));
      }
      this.getBasicData();
    },
    //获取基础数据
    getBasicData() {
      this.loading = true;
      if (this.dateStr && this.dateStr.length > 0) {
        this.basicQMsg.StartDate = this.dateStr[0];
        this.basicQMsg.EndDate = this.dateStr[1];
      } else {
        this.basicQMsg.StartDate = "";
        this.basicQMsg.EndDate = "";
      }
      this.requestAdmin(
        "/api/Tenant/MallIndexStatistics",
        this.basicQMsg,
        (res) => {
          this.loading = false;
          if (res.resultCode == 1) {
            //基础数据统计
            this.basicData = res.data.basicData;
            //销售情况统计
            this.salesData = res.data.salesData;
            let chartsData = {
              categories: [],
              series: [
                {
                  data: [],
                  name: "支付订单数",
                  textColor: "#FFF",
                },
                {
                  data: [],
                  name: "支付金额(元)",
                  textColor: "#FFF",
                },
                {
                  data: [],
                  name: "支付人数",
                  textColor: "#FFF",
                },
                {
                  data: [],
                  name: "支付件数",
                  textColor: "#FFF",
                },
              ],
            };
            this.salesData.subList.forEach((item) => {
              chartsData.categories.push(item.TimeStr);
              chartsData.series[0].data.push(item.OrderCount);
              chartsData.series[1].data.push(item.Income);
              chartsData.series[2].data.push(item.UserCount);
              chartsData.series[3].data.push(item.GoodCount);
            });
            this.showColumn("canvasColumn", chartsData);
          }
        }
      );
    },
    //跳转到用户管理
    goUserList() {
      uni.navigateTo({
        url: "/pages/MallMange/userManage",
      });
    },
    //跳转页面
    jumpPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
  onLoad() {
    _self = this;
    this.cWidth = uni.upx2px(600);
    this.cHeight = uni.upx2px(400);
    this.payType = this.array[0].name;
    this.payType1 = this.array1[0].name;
    uni.setNavigationBarTitle({
      title: "商城管理",
    });
    this.getBasicData();
    this.photo=uni.getStorageSync('mall_UserInfo')?.Photo
  },
};
</script>

<style lang="scss" scoped>
.indexpage {
  min-height: 100vh;
  background-color: #f7f7f7;
  box-sizing: border-box;
  padding-bottom: 100rpx;
}

.flex-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topBox {
  height: 350rpx;
  position: relative;
  margin-bottom: 20rpx;
}

.bg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.topinfo {
  height: 130rpx;
  box-sizing: border-box;
  padding: 0 50rpx 0 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.headimg {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}

.name1 {
  margin-left: 24rpx;
  font-size: 40rpx;
  color: #fff;
}

.ewmimg {
  width: 50rpx;
  height: 50rpx;
}

.name2 {
  font-size: 24rpx;
  color: #fff;
}

.msgBox {
  box-sizing: border-box;
  width: 700rpx;
  height: 200rpx;
  border-radius: 12rpx;
  background-color: #fff;
  z-index: 5;
  position: absolute;
  top: 130rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  padding: 0 30rpx;

  .itemBox {
    width: 100rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;

    .imgicon {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      margin-bottom: 20rpx;
    }

    .tipNum {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      background-color: #f00;
      text-align: center;
      line-height: 28rpx;
      color: #fff;
      font-size: 20rpx;
    }

    .iconname {
      font-size: 24rpx;
    }
  }
}

.conditionOfBusiness,
.echartsBox {
  height: 480rpx;
  width: 700rpx;
  margin: 0 auto;
  border-radius: 12rpx;
  background-color: #fff;
  box-sizing: border-box;
  padding: 30rpx 50rpx;
  margin-bottom: 40rpx;

  .day {
    width: 600rpx;
    height: 50rpx;
    border-radius: 25rpx;
    border: 2rpx solid #667cb8;
    overflow: hidden;
    margin: 0 auto;

    .dayitem {
      width: 150rpx;
      height: 100%;
      font-size: 24rpx;
      text-align: center;
      line-height: 48rpx;
    }
  }

  .choose {
    background-color: #446dfc;
  }

  .BusinessData {
    width: 590rpx;
    height: 280rpx;
    display: flex;
    flex-wrap: wrap;

    .dataitem {
      width: 50%;
      height: 50%;
      padding-top: 50rpx;
      padding-left: 30rpx;

      .dataNum {
        font-size: 40rpx;
        color: #446dfc;
        margin-bottom: 2rpx;
      }

      .dataName {
        font-size: 24rpx;
      }
    }
  }
}

.title {
  font-size: 30rpx;
  margin-bottom: 30rpx;
}

.fastHandle {
  width: 700rpx;
  //   height: 300rpx;
  margin: 0 auto;
  margin-bottom: 40rpx;
  border-radius: 12rpx;
  background-color: #fff;
  padding: 40rpx;

  .HandleBox {
    .handleItem {
      width: 300rpx;
      height: 180rpx;
      border-radius: 12rpx;
      box-shadow: 0rpx 0rpx 10rpx 0px rgba(36, 36, 36, 0.2);
      padding: 10rpx 20rpx;

      .handleItemNum {
        font-size: 40rpx;
        margin-bottom: 10rpx;
      }

      .handleItemName {
        font-size: 26rpx;
        margin-bottom: 15rpx;
        color: #9b9b9b;
      }

      .handleItemBtn {
        font-size: 22rpx;
        color: #9b9b9b;
        display: flex;
        align-items: center;
      }
    }
  }
}

.echartsBox {
  width: 700rpx;
  height: auto;
  margin: 0 auto;
  margin-bottom: 40rpx;

  .payType {
    display: flex;
    font-size: 26rpx;
    color: #9b9b9b;
  }
}
.charts {
  width: 100%;
  height: 400rpx;
  background-image: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mystudybg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
