<template>
  <div class="app-container">
    <template v-if="!$store.state.user.businessId">
      <div class="top">
        <div class="top_l">
          <div class="top_l_title">👏 欢迎回来</div>
          <div class="top_l_list">
            <div class="top_l_list_item">
              <img src="@/assets/images/icon1.png" alt="">
              <div>
                <div class="top_l_list_item_lab">用户数</div>
                <div class="top_l_list_item_val">{{homeTopObj.userSum}}</div>
                <!-- <div class="top_l_list_item_btn" @click="goAfterSaleOrder()">查看详情</div> -->
              </div>
            </div>
            <div class="top_l_list_item">
              <img src="@/assets/images/icon2.png" alt="">
              <div>
                <div class="top_l_list_item_lab">医院数</div>
                <div class="top_l_list_item_val">{{homeTopObj.hospitalSum}}</div>
                <!-- <div class="top_l_list_item_btn" @click="goPointsMallOrder()">查看详情</div> -->
              </div>
            </div>
            <div class="top_l_list_item">
              <img src="@/assets/images/icon3.png" alt="">
              <div>
                <div class="top_l_list_item_lab">订单数</div>
                <div class="top_l_list_item_val">{{homeTopObj.orderSum}}</div>
              </div>
            </div>
            <div class="top_l_list_item">
              <img src="@/assets/images/icon4.png" alt="">
              <div>
                <div class="top_l_list_item_lab">护工数</div>
                <div class="top_l_list_item_val">{{homeTopObj.nurseSum}}</div>
              </div>
            </div>
            <!-- <div class="top_l_list_item">
              <img src="@/assets/images/icon3.png" alt="">
              <div>
                <div class="top_l_list_item_lab">订单数</div>
                <div class="top_l_list_item_val">{{homeTopObj.ticketOrderSum}}</div>
              </div>
            </div>
            <div class="top_l_list_item">
              <img src="@/assets/images/icon4.png" alt="">
              <div>
                <div class="top_l_list_item_lab">参与PK数</div>
                <div class="top_l_list_item_val">{{homeTopObj.gameSum}}</div>
              </div>
            </div> -->
          </div>
          <div class="top_l_chart">
            <div class="top_l_chart_t">
              <div class="top_l_chart_t_title">用户数据<span>（近7日）</span></div>
              <div class="top_l_chart_t_more" @click="goPath('/user/user/index')">查看更多</div>
            </div>
            <div class="top_l_chart_b" ref="chart" style="height: 300px;"></div>
          </div>
        </div>
        <div class="top_r">
          <div class="top_r_quick">
            <div class="top_r_quick_title">快捷入口</div>
            <div class="top_r_quick_list">
              <div class="top_r_quick_item" @click="goPath('/hospital/list')">
                <i class="el-icon-document"></i>
                <span>医院管理</span>
              </div>
              <div class="top_r_quick_item" @click="goPath('/service/list')">
                <i class="el-icon-shopping-bag-2"></i>
                <span>服务管理</span>
              </div>
              <div class="top_r_quick_item" @click="goPath('/order/list')">
                <i class="el-icon-collection-tag"></i>
                <span>订单管理</span>
              </div>
              <div class="top_r_quick_item" @click="goPath('/finance/list')">
                <i class="el-icon-sell"></i>
                <span>财务管理</span>
              </div>
              <div class="top_r_quick_item" @click="goPath('/user/user/index')">
                <i class="el-icon-user"></i>
                <span>用户管理</span>
              </div>
            </div>
          </div>
          <div class="top_r_chart">
            <div class="top_r_chart_title">服务分类</div>
            <div class="top_r_chart_content" ref="pieChart" style="height: 300px;"></div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom_t">
          <div class="bottom_t_title">医院订单数<span>（top10）</span></div>
          <div class="bottom_t_more"></div>
        </div>
        <div class="bottom_b" ref="categoryChart" style="height: 300px;"></div>
      </div>
    </template>
    <template v-else>
      <div class="welcome">
        👏 欢迎访问商户端管理平台
      </div>
    </template>
  </div>
</template>

<script>
import { homeQuantity, userStatistics, serviceCategorizeStatistics, hospitalOrderStatistics } from '@/api/home'
import * as echarts from "echarts";
export default {
  data () {
    return {
      chart: null,
      pieChart: null,
      categoryChart: null,
      chartData: {
        dates: [],
        values: []
      },
      pieData: [],
      homeTopObj: {},
      shopChartData: {
        xData: [],
        yData: []
      }
    }
  },
  mounted () {
    // this.initChart()
    // this.initPieChart();
    // this.initCategoryChart();
    window.addEventListener('resize', this.resizeChart)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resizeChart)
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
    if (this.pieChart) {
      this.pieChart.dispose()
      this.pieChart = null
    }
  },
  created () {
    this.getHomeTop();
    this.getUserStatistics();
    this.getBusinessStatistics();
    this.getTicketOrderStatistics();
  },
  methods: {
    goPath (path) {
      this.$router.push({
        path: path
      })
    },
    goAfterSaleOrder () {
      this.$router.push({
        path: '/order/afterSaleOrder',
        query: { refundStatus: 0 }

      })
    },
    goPointsMallOrder () {
      this.$router.push({
        path: '/pointsMall/order/index',
        query: { orderStatus: 10 }

      })
    },
    // 获取头部集合
    getHomeTop () {
      homeQuantity().then(res => {
        this.homeTopObj = res.data
      })
    },
    // 获取用户数量
    getUserStatistics () {
      userStatistics().then(res => {
        this.chartData.dates = res.data.map(v => v.createDay);
        this.chartData.values = res.data.map(v => v.userSum);
        this.initChart()
      })
    },
    // 获取服务分类
    getBusinessStatistics () {
      serviceCategorizeStatistics().then(res => {
        res.data.map(v => {
          v.name = v.name;
          v.value = v.serviceProductNum;
        })
        this.pieData = res.data;
        this.initPieChart();
      })
    },
    initChart () {
      this.chart = echarts.init(this.$refs.chart)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.chartData.dates,
          axisLine: {
            lineStyle: {
              color: '#eee'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        series: [{
          name: '用户数',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#4B9EFF'
          },
          lineStyle: {
            width: 2,
            color: '#4B9EFF'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(75,158,255,0.3)'
            }, {
              offset: 1,
              color: 'rgba(75,158,255,0.1)'
            }])
          },
          data: this.chartData.values
        }]
      }
      this.chart.setOption(option)
    },
    resizeChart () {
      if (this.chart) {
        this.chart.resize()
      }
      if (this.pieChart) {
        this.pieChart.resize()
      }
    },
    initPieChart () {
      this.pieChart = echarts.init(this.$refs.pieChart)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)',
          textStyle: {
            fontSize: 14
          }
        },
        legend: {
          bottom: '0',
          left: 'center',
          itemWidth: 20,
          itemHeight: 15,
          textStyle: {
            color: '#666',
            fontSize: 14
          }
        },
        series: [{
          name: '商户类型',
          type: 'pie',
          radius: ['40%', '60%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 4
          },
          label: {
            normal: {
              position: 'outside',
              show: true,
              formatter: (d) => {
                return d.name + '-' + d.percent + '%'
              }
            }
          },
          // data: [{
          //   value: 16,
          //   name: '景区',
          //   itemStyle: {
          //     color: '#249eff'
          //   }
          // }, {
          //   value: 48,
          //   name: '展览展馆',
          //   itemStyle: {
          //     color: '#21ccff'
          //   }
          // }, {
          //   value: 36,
          //   name: '动植物园',
          //   itemStyle: {
          //     color: '#313ca9'
          //   }
          // }]
          data: this.pieData
        }]
      }
      this.pieChart.setOption(option)
    },
    // 获取商户订单数
    getTicketOrderStatistics () {
      hospitalOrderStatistics().then(res => {
        this.shopChartData.xData = res.data.map(v => v.name);
        this.shopChartData.yData = res.data.map(v => v.orderNum);
        this.initCategoryChart()
      })
    },
    initCategoryChart () {
      this.categoryChart = echarts.init(this.$refs.categoryChart)
      var option;

      option = {
        xAxis: {
          type: 'category',
          data: this.shopChartData.xData
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          show: true,
        },
        series: [
          {
            data: this.shopChartData.yData,
            type: 'bar',
            itemStyle: {
              color: '#5087ec',
            },
            barWidth: 80,
          }
        ]
      };

      option && this.categoryChart.setOption(option);
    }
  }
}
</script>

<style lang='scss' scoped>
.top {
  display: flex;
  gap: 20px;
  .top_l {
    width: 70%;
    padding: 20px 20px 0 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    .top_l_title {
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      font-weight: 700;
    }
  }
  .top_r {
    flex: 1;
    padding: 20px 20px 0 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    .top_r_quick {
      border-bottom: 1px solid #eee;
      padding-bottom: 20px;
      &_title {
        font-weight: 700;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
      }
      &_list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        padding-top: 20px;
      }
      &_item {
        height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        // background: #f7f8fa;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s;
        i {
          background: #f7f8fa;
          font-size: 30px;
          display: inline-block;
          padding: 10px;
          border-radius: 10px;
          margin-bottom: 5px;
        }
        &:hover {
          // background: #e6f7ff;
          color: #165dff;
          transform: translateY(-2px);
        }
        .svg-icon {
          font-size: 28px;
          margin-bottom: 10px;
        }
        span {
          font-size: 14px;
        }
      }
    }
    .top_r_chart {
      padding: 20px 0;
      &_title {
        font-weight: 700;
      }
    }
  }
}
.top_l_list {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  .top_l_list_item {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    position: relative;
    &::after {
      content: "";
      display: block;
      position: absolute;
      width: 1px;
      height: 60px;
      right: 0;
      top: 30px;
      background: #eee;
    }
    &:last-child {
      &::after {
        display: none;
      }
    }
    img {
      width: 50px;
      height: 50px;
    }
    > div {
      margin-left: 20px;
      .top_l_list_item_lab {
        font-size: 14px;
      }
      .top_l_list_item_val {
        font-weight: 700;
        font-size: 22px;
        margin-top: 10px;
        text-align: center;
      }
      .top_l_list_item_btn {
        color: #409eff;
        font-size: 14px;
        cursor: pointer;
        text-align: center;
      }
    }
  }
}
.top_l_chart {
  .top_l_chart_t {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    .top_l_chart_t_title {
      font-weight: 700;
      > span {
        font-weight: normal;
      }
    }
    .top_l_chart_t_more {
      color: #165dff;
      cursor: pointer;
    }
  }
}
.bottom {
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin-top: 20px;
  .bottom_t {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    .bottom_t_title {
      font-weight: 700;
      > span {
        font-weight: normal;
      }
    }
    .bottom_t_more {
      color: #165dff;
    }
  }
}
.welcome {
  padding-top: 200px;
  text-align: center;
  font-size: 30px;
}
</style>