<template>
  <div class="app-container mod-home">
    <div class="grand1" v-if="statistics">
      <div class="box1">
        <img :src="require('@/assets/images/order.png')" />
        <div class="right">
          <p>今日订单数</p>
          <p>{{ statistics.todayOrderNum }}</p>
        </div>
      </div>

      <div class="box1">
        <img :src="require('@/assets/images/total-money.png')" />
        <div class="right">
          <p>今日销售总额</p>
          <p>{{ statistics.todayOrderAmount }}</p>
        </div>
      </div>

      <div class="box1">
        <img :src="require('@/assets/images/yesterday.png')" />
        <div class="right">
          <p>昨日销售总额</p>
          <p>{{ statistics.yesterdayOrderAmount }}</p>
        </div>
      </div>

      <div class="box1">
        <img :src="require('@/assets/images/7day.png')" />
        <div class="right">
          <p>近7天销售总额</p>
          <p>{{ statistics.sevenDayOrderAmount }}</p>
        </div>
      </div>
    </div>
    <el-card class="box-card" v-if="statistics">
      <div slot="header" class="clearfix">
        <span>待处理事务</span>
      </div>
      <div class="card1">
        <div class="flex">
          <div>
            <p>待付款订单</p>
            <p>
              (<span>{{ statistics.waitPayOrderNum }}</span>)
            </p>
          </div>
          <div>
            <p>退款成功维权单数</p>
            <p>(<span>{{ statistics.refundSuccessRightsOrderNum }}</span>)</p>
          </div>
        </div>
        <div class="flex">
          <div>
            <p>待发货订单</p>
            <p>
              (<span>{{ statistics.waitShipOrderNum }}</span>)
            </p>
          </div>
          <div>
            <p>待退款维权订单数</p>
            <p>(<span>{{ statistics.waitRefundRightsOrderNum }}</span>)</p>
          </div>
        </div>
        <div class="flex">
          <div>
            <p>待收货订单数</p>
            <p>(<span>{{ statistics.waitReceiptOrderNum }}</span>)</p>
          </div>
          <div>
            <p>待收货维权单数</p>
            <p>
              (<span>{{ statistics.waitReceiptRightsOrderNum }}</span>)
            </p>
          </div>

        </div>
        <div class="flex">
          <div>
            <p>已完成订单</p>
            <p>
              (<span>{{ statistics.completeOrderNum }}</span>)
            </p>
          </div>
          <div>
            <p>待处理维权订单</p>
            <p>(<span>{{ statistics.waitDisposeRightsOrderNum }}</span>)</p>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>运营快捷入口</span>
      </div>
      <div class="card2">
        <div @click="goRouter('/goods/list')" v-hasPermi="['product:product:list']">
          <img :src="require('@/assets/images/add.png')" />
          <p>添加商品</p>
        </div>
        <div @click="goRouter('/order/order/orderList')">
          <img :src="require('@/assets/images/order-list.png')" />
          <p>订单列表</p>
        </div>
        <div @click="goRouter('/user/user/index')" v-hasPermi="['system:miniapp:user:page']">
          <img :src="require('@/assets/images/user.png')" />
          <p>用户管理</p>
        </div>
        <!-- <div v-if="(roleType==0||roleType==1)" @click="goRouter(roleType==2||roleType==3?'/merchant-content/advertisingList':'/platform-ad/list')">
          <img :src="require('@/assets/images/banner.png')" />
          <p>广告管理</p>
        </div>
        <div v-if="roleType==0" @click="goRouter('/platform-content/classifyList')">
          <img :src="require('@/assets/images/zhuan.png')" />
          <p>专题管理</p>
        </div>
        <div v-if="roleType==2||roleType==3||roleType==0" @click="goRouter('/merchant-marketing/seckillList')">
          <img :src="require('@/assets/images/time.png')" />
          <p>秒杀管理</p>
        </div> -->
      </div>
    </el-card>
    <div class="card-2">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>商品总览</span>
        </div>
        <div class="card3" v-if="goodsInfo">
          <div>
            <h3>{{ goodsInfo.unShelvedCount }}</h3>
            <p>已下架</p>
          </div>
          <div>
            <h3>{{ goodsInfo.shelvedCount }}</h3>
            <p>已上架</p>
          </div>
          <div>
            <h3>{{ goodsInfo.stockTenseCount }}</h3>
            <p>库存紧张</p>
          </div>
          <div>
            <h3>{{ goodsInfo.allCount }}</h3>
            <p>全部商品</p>
          </div>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>用户总览</span>
        </div>
        <div class="card3" v-if="memberInfo">
          <div>
            <h3>{{ memberInfo.todayNum }}</h3>
            <p>今日新增</p>
          </div>
          <div>
            <h3>{{ memberInfo.yesterdayNum }}</h3>
            <p>昨日新增</p>
          </div>
          <div>
            <h3>{{ memberInfo.monthNum }}</h3>
            <p>本月新增</p>
          </div>
          <div>
            <h3>{{ memberInfo.totalNum }}</h3>
            <p>会员总数</p>
          </div>
        </div>
      </el-card>
    </div>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>订单统计</span>
      </div>
      <div class="card4">
        <div class="left">
          <div class="row1" v-if="orderInfo && (isActive == 1 || isActive == 2)">
            <p>
              <span v-if="isActive == 1">本周</span><span v-if="isActive == 2">本月</span>订单总数
            </p>
            <h3>{{ orderInfo.current }}</h3>
            <p>
              {{ orderInfo.rate }}% 同比<span v-if="isActive == 1">上周</span><span v-if="isActive == 2">上月</span>
            </p>
          </div>
        </div>
        <div class="right">
          <div class="date-piker">
            <div class="date">
              <span :class="isActive == 1 ? 'active' : ''" @click="dateChange(1)">本周</span>
              <span :class="isActive == 2 ? 'active' : ''" @click="dateChange(2)">本月</span>
            </div>
            <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" @change="changeDate">
            </el-date-picker>
          </div>
          <div>
            <!-- <chart ref="chart1" :options="orderOption" :auto-resize="true" style="width: 100%"></chart> -->
            <div ref="categoryChart" style="height: 300px;"></div>
          </div>
          <div></div>
          <div></div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>销售统计</span>
      </div>
      <div class="card4">
        <div class="left">
          <div class="row1" v-if="moneyInfo && (isActive2 == 1 || isActive2 == 2)">
            <p>
              <span v-if="isActive2 == 1">本周</span><span v-if="isActive2 == 2">本月</span>销售额
            </p>
            <h3>{{ moneyInfo.current }}</h3>
            <p>
              {{ moneyInfo.rate }}% 同比<span v-if="isActive2 == 1">上周</span><span v-if="isActive2 == 2">上月</span>
            </p>
          </div>
        </div>
        <div class="right">
          <div class="date-piker">
            <div class="date">
              <span :class="isActive2 == 1 ? 'active' : ''" @click="dateChange2(1)">本周</span>
              <span :class="isActive2 == 2 ? 'active' : ''" @click="dateChange2(2)">本月</span>
            </div>
            <el-date-picker v-model="date2" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDate2">
            </el-date-picker>
          </div>
          <div>
            <!-- <chart ref="chart1" :options="saleOption" :auto-resize="true" style="width: 100%"></chart> -->
            <div ref="categoryChart1" style="height: 300px;"></div>
          </div>
          <div></div>
          <div></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { montYearData } from '@/utils/index'
import { shopOrderSingleCount, shopOrderDaysCount, statisticsOrderNum, statisticsOrderAmount, productCount, userBusinessRoleCount } from '@/api/home.js'
import * as echarts from "echarts";
export default {
  data() {
    return {
      orderOption: {
        title: {
          text: '订单统计'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#17B3A3'
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [

          {
            itemStyle: {
              normal: {
                color: '#17B3A3'
              }
            },
            smooth: true,
            data: [],
            type: 'line',
            areaStyle: {}
          }
        ]
      },
      saleOption: {
        title: {
          text: '销售统计'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#17B3A3'
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            itemStyle: {
              normal: {
                color: '#17B3A3'
              }
            },
            smooth: true,
            data: [],
            type: 'line',
            areaStyle: {}
          }
        ]
      },
      date: null,
      date2: null,
      statistics: null,
      isActive: 1,
      isActive2: 1,
      weekOrMonthOrYear: null,
      memberInfo: null,
      goodsInfo: null,
      orderInfo: null,
      moneyInfo: null,
      params: {
        data_type: null,
        type: null
      },
      roleType: null,
      userInfo: {},
      categoryChart: null,
      categoryChart1: null,
    }
  },
  created() {

  },
  async mounted() {
    this.weekOrMonthOrYear = montYearData()
    this.getBaseData()
    this.dateChange(1)
    setTimeout(() => {
      this.dateChange2(1)
    }, 1000)
  },
  methods: {
    goRouter(url) {
      if (url) {
        this.$router.push({
          path: url

        })
      } else {
        this.$message.error('暂未开放，敬请期待！')
      }
    },
    // 第一个时间段筛选
    changeDate() {
      this.params.data_type = 'count'
      this.params.type = 'custom'
      this.params.startDay = this.date[0]
      this.params.endDay = this.date[1]
      this.isActive = 4
      this.statisticsBuyDays()
    },
    // 第二个时间段筛选
    changeDate2() {
      this.params.data_type = 'amount'
      this.params.type = 'custom'
      this.params.startDay = this.date2[0]
      this.params.endDay = this.date2[1]
      this.isActive2 = 4
      this.statisticsBuyDays()
    },
    // 第一个时间段tab筛选
    dateChange(number) {
      delete this.params.startDay
      delete this.params.endDay
      this.params.data_type = 'count'
      this.isActive = number
      switch (number) {
        case 0:
          this.date = null
          break
        case 1:
          this.date = [
            this.weekOrMonthOrYear.begin,
            this.weekOrMonthOrYear.end
          ]
          this.params.type = 'week'
          this.statisticsOrderNum()
          this.statisticsBuyDays()
          break
        case 2:
          this.date = [
            this.weekOrMonthOrYear.firstMonthDay,
            this.weekOrMonthOrYear.lastMonthDay
          ]
          this.params.type = 'month'
          this.statisticsOrderNum()
          this.statisticsBuyDays()
          break

        default:
          this.date = [
            this.weekOrMonthOrYear.begin,
            this.weekOrMonthOrYear.end
          ]
          this.statisticsOrderNum()
      }
    },
    // 第二个时间段tab筛选
    dateChange2(number) {
      this.params.data_type = 'amount'
      this.isActive2 = number
      switch (number) {
        case 0:
          this.date2 = null
          break
        case 1:
          this.date2 = [
            this.weekOrMonthOrYear.begin,
            this.weekOrMonthOrYear.end
          ]
          this.params.type = 'week'
          this.statisticsMoney()
          this.statisticsBuyDays()
          break
        case 2:
          this.date2 = [
            this.weekOrMonthOrYear.firstMonthDay,
            this.weekOrMonthOrYear.lastMonthDay
          ]
          this.params.type = 'month'
          this.statisticsMoney()
          this.statisticsBuyDays()
          break

        default:
          this.date2 = [
            this.weekOrMonthOrYear.begin,
            this.weekOrMonthOrYear.end
          ]
          this.statisticsMoney()
      }
    },

    getBaseData() {
      shopOrderSingleCount().then((res) => {
        if (res && res.code == 200) {
          this.statistics = res.data
        }
      })
      userBusinessRoleCount().then((res) => {
        if (res && res.code == 200) {
          this.memberInfo = res.data
        }
      })
      productCount().then((res) => {
        if (res && res.code == 200) {
          this.goodsInfo = res.data
        }
      })
    },
    statisticsBuyDays() {
      shopOrderDaysCount(this.params).then((res) => {
        if (res && res.code == 200) {
          if (this.params.data_type == 'count') {
            this.orderOption.xAxis.data = res.data.map(
              (val) => val.timeStr
            )
            this.orderOption.series[0].data = res.data.map(
              (val) => val.orderNum
            )
            this.$nextTick(() => {
              this.categoryChart = echarts.init(this.$refs.categoryChart);
              this.categoryChart.setOption(this.orderOption);
            })
          } else {
            this.saleOption.xAxis.data = res.data.map(
              (val) => val.timeStr
            )
            this.saleOption.series[0].data = res.data.map(
              (val) => val.orderAmount
            )
            this.$nextTick(() => {
              this.categoryChart1 = echarts.init(this.$refs.categoryChart1);
              this.categoryChart1.setOption(this.saleOption);
            })
          }
        }
      })
    },
    statisticsMoney() {
      statisticsOrderAmount({ type: this.isActive2 == 1 ? 'week' : 'month' })
        .then((res) => {
          if (res && res.code == 200) {
            this.moneyInfo = res.data
          }
        })
    },
    statisticsOrderNum() {
      statisticsOrderNum({ type: this.isActive == 1 ? 'week' : 'month', })
        .then((res) => {
          if (res && res.code == 200) {
            this.orderInfo = res.data
          }
        })
    },
    initCategoryChart() {
      this.categoryChart = echarts.init(this.$refs.categoryChart);
      this.categoryChart.setOption(this.orderOption);
    }
  }
}
</script>

<style lang='scss' scoped>
.mod-home {
  line-height: 1.5;
}

.grand1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .box1 {
    display: flex;
    align-items: center;
    width: 20%;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 #f0f0f0;
    font-size: 14px;

    img {
      width: 50px;
      height: 50px;
      margin-left: 20px;
    }

    .right {
      margin-left: 10px;
    }
  }
}

.card1 {
  display: flex;
  justify-content: space-between;

  .flex {
    display: flex;
    width: 25%;
    flex-direction: column;
    align-items: center;

    div {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ebeef5;
      font-size: 14px;

      span {
        color: red;
      }
    }
  }
}

.card2 {
  display: flex;
  // justify-content: space-between;
  justify-content: space-around;

  div {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    // img {
    //   width: 50px;
    //   height: 50px;
    // }
  }
}

.card-2 {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

  .box-card {
    width: 48%;
  }
}

.card3 {
  display: flex;
  justify-content: space-between;

  div {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;

    p {
      margin: 0;
      font-size: 14px;
    }

    h3 {
      font-weight: 700;
      font-size: 18px;
    }
  }
}

.card4 {
  display: flex;

  .left {
    width: 200px;
    font-size: 14px;

    .row1 {
      margin-bottom: 60px;
    }
  }

  .right {
    width: 100%;
  }

  .date-piker {
    display: flex;
    justify-content: flex-end;
    align-content: center;
    align-items: center;

    .date {
      display: flex;
      margin-right: 20px;

      span {
        margin-right: 20px;
        cursor: pointer;
      }

      .active {
        color: #17b3a3;
      }
    }
  }
}
</style>
