<template>
  <view class="page">
    <uni-nav-bar title="首页" :border="false" fixed>
      <template #right>
        <view class="right">
          <view class="">
            <image src="@/static/images/index/ic_scan.png" mode=""></image>
          </view>
          <view class="">
            <image src="@/static/images/index/ic_search.png" mode=""></image>
          </view>
        </view>
      </template>
    </uni-nav-bar>

    <!-- 数据表 -->
    <Statistics v-if="!showBannerFlag" />

    <!-- Banner -->
    <Banner v-if="showBannerFlag" />

    <!-- 功能菜单 -->
    <Menu @changeHome="changeHome" />

    <!-- 通知公告 -->
    <Notice />

    <!-- 商品 -->
    <Goods />
    <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
    <u-button type="primary">主要按钮</u-button>
    <view class="charts-box">
      <qiun-data-charts type="demotype" :chartData="state.chartData"></qiun-data-charts>
    </view>
  </view>
</template>

<script setup>
import Banner from './components/banner.vue';
import Menu from './components/menu.vue';
import Statistics from './components/statistics.vue';
import Notice from './components/notice.vue';
import Goods from './components/goods.vue';
import { ref, reactive, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
const keyword = ref('')
const showBannerFlag = ref(false);
let state = reactive({
  chartData: {},
  opts: {}
})
state.opts = {
  color: ["#188df0", "#73C0DE"],
  padding: [15, 15, 0, 5],
  legend: {
    positon: 'top'
  },
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    data: [
      {
        min: 0
      }
    ]
  },
  extra: {
    column: {
      type: "group",
      width: 10,
      activeBgColor: "#000000",
      activeBgOpacity: 0.08,
      linearType: "opacity",
      seriesGap: 5,
      linearOpacity: 0.5,
      barBorderCircle: true,
      customColor: [
        "#188df0"
      ]
    }
  }
}
function getServerData(xData, yData, name) {
  let res = {
    categories: xData,
    series: [
      {
        name: name,
        data: yData
      }
    ]
  }
  state.chartData = JSON.parse(JSON.stringify(res));
}
function changeHome() {
  showBannerFlag.value = !showBannerFlag.value;
}
onMounted(() => {
  let xData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24];
  let yData = [410, 425, 400, 580, 460, 458, 498, 488, 417, 506, 520, 538, 469, , , , , , , , , , ,];
  getServerData(xData, yData, "总功率");
})
onShow(() => {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300,
  });
});
</script>

<style lang="scss" scoped>
.charts-box {
  width: 100%;
  height: 300px;
}

.page {
  background-color: #f5f5f5;
}

:deep(.uni-navbar__header-btns) {
  width: 150rpx !important;
}

.right {
  position: relative;
  display: flex;
  z-index: 999;

  view {
    width: 56rpx;
    height: 56rpx;
    margin-left: 36rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
