<template>
  <div class="app-container home">
    <el-row :gutter="16" style="margin-bottom: 10px">
      <el-col :span="4">
        <div class="statistic-card">
          <el-statistic :value="recentInfo.sevenDaysScanCount">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                <el-tooltip
                  effect="dark"
                  content="近7天累积核销酒款数"
                  placement="top"
                >
                  <el-icon style="margin-right: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
                近7天累积核销酒款数
              </div>
            </template>
          </el-statistic>
          <!-- <div class="statistic-footer">
            <div class="footer-item">
              <span>than yesterday</span>
              <span class="green">
                24%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div> -->
        </div>
      </el-col>
      <el-col :span="4">
        <div class="statistic-card">
          <el-statistic :value="recentInfo.sevenDaysBarCount">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                <el-tooltip
                  effect="dark"
                  content="近7天核销门店数"
                  placement="top"
                >
                  <el-icon style="margin-right: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
                近7天核销门店数
              </div>
            </template>
          </el-statistic>
          <!-- <div class="statistic-footer">
            <div class="footer-item">
              <span>than yesterday</span>
              <span class="green">
                24%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div> -->
        </div>
      </el-col>
      <el-col :span="4">
        <div class="statistic-card">
          <el-statistic :value="recentInfo.processingBarCount">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                <el-tooltip
                  effect="dark"
                  content="累积进行中门店数"
                  placement="top"
                >
                  <el-icon style="margin-right: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
                累积进行中门店数
              </div>
            </template>
          </el-statistic>
          <!-- <div class="statistic-footer">
            <div class="footer-item">
              <span>than yesterday</span>
              <span class="green">
                24%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div> -->
        </div>
      </el-col>
      <el-col :span="4">
        <div class="statistic-card">
          <el-statistic :value="recentInfo.waitingRewardCount">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                <el-tooltip effect="dark" content="待兑付订单" placement="top">
                  <el-icon style="margin-right: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
                待兑付订单
              </div>
            </template>
          </el-statistic>
          <!-- <div class="statistic-footer">
            <div class="footer-item">
              <span>than yesterday</span>
              <span class="green">
                24%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div> -->
        </div>
      </el-col>
      <el-col :span="4">
        <div class="statistic-card">
          <el-statistic :value="recentInfo.sevenDaysReviewCount">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                <el-tooltip effect="dark" content="新增酒评数" placement="top">
                  <el-icon style="margin-right: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
                新增酒评数
              </div>
            </template>
          </el-statistic>
          <!-- <div class="statistic-footer">
            <div class="footer-item">
              <span>than yesterday</span>
              <span class="green">
                24%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div> -->
        </div>
      </el-col>
    </el-row>
    <el-card
      class="update-log"
      shadow="never"
      style="margin-bottom: 10px; border: none"
    >
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div class="header-title">
          <span>核销酒款数量</span>
        </div>
        <!-- <div>
          <el-date-picker
            v-model="timeData"
            type="month"
            placeholder="选择年月"
            @change="changeTime"
          />
        </div> -->
      </div>
      <div ref="monthRef" style="height: 300px"></div>
    </el-card>
    <el-row :gutter="10" style="height: calc(100vh - 414px)">
      <el-col :sm="12" :lg="12" style="margin-bottom: 10px">
        <el-card
          class="update-log"
          shadow="never"
          style="height: 100%; border: none"
        >
          <div class="body">
            <div class="header-title">
              <span>近30天热门酒款TOP</span>
            </div>
            <el-table :data="beerList" class="zd-table">
              <el-table-column
                type="index"
                width="100"
                label="排名"
                align="center"
              />
              <el-table-column label="酒款名称" prop="beerName" align="center">
                <template #default="scope">
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                  >
                    <el-image
                      style="width: 60px; height: 60px"
                      :src="scope.row.beerCover"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-src-list="[scope.row.beerCover]"
                      :initial-index="4"
                      fit="cover"
                      title="点击查看大图"
                      preview-teleported
                    />
                    <span style="margin-left: 10px">{{
                      scope.row.beerName
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="核销数量"
                prop="verifyCount"
                align="center"
                width="200"
              >
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="12" :lg="12" style="margin-bottom: 10px">
        <el-card
          class="update-log"
          shadow="never"
          style="height: 100%; border: none"
        >
          <div class="header-title">
            <span>近30天核销城市占比</span>
          </div>
          <div ref="cityRef" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="height: calc(100vh - 414px)">
      <el-col :sm="12" :lg="12" style="margin-bottom: 10px">
        <el-card
          class="update-log"
          shadow="never"
          style="height: 100%; border: none; background-color: #fff"
        >
          <div class="body">
            <div class="header-title">
              <span>一周TOP门店排行</span>
            </div>
            <el-table :data="checkOutBarCount" class="zd-table">
              <el-table-column
                type="index"
                width="100"
                label="排名"
                align="center"
              />
              <el-table-column label="门店ID" prop="barCode" align="center" />
              <el-table-column label="所在城市" prop="barCity" align="center" />
              <el-table-column
                label="核销数量"
                prop="verifyCount"
                align="center"
                width="200"
              >
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="12" :lg="12" style="margin-bottom: 10px">
        <el-card
          class="update-log"
          shadow="never"
          style="height: 100%; border: none"
        >
          <div class="header-title">
            <span>酒款评分TOP榜</span>
          </div>
          <el-table :data="topReviewBeers" class="zd-table">
            <el-table-column
              type="index"
              width="100"
              label="排名"
              align="center"
            />
            <el-table-column label="酒款名称" prop="beerName" align="center" />
            <el-table-column
              label="酒款评分"
              prop="beerOverallRating"
              align="center"
            />
            <el-table-column
              label="点评人数"
              prop="beerReviewsCount"
              align="center"
              width="200"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import {
  recentData,
  popularBeerData,
  checkOutBarData,
  monthVerifyData,
  recentPopularCityData,
} from "@/api/brewery/home";
import useUserStore from "@/store/modules/user";
import { topReview10BeersList } from "@/api/brewery/review";
import * as echarts from "echarts";
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
const userInfo = useUserStore().userInfo;
const myChart = ref(null);
const cityChart = ref(null);
const option = ref({
  title: {
    text: ``,
    subtext: "",
    left: "center",
  },
  xAxis: {
    type: "category",
    data: [],
    name: "日期",
  },
  yAxis: {
    type: "value",
    name: "核销数量",
  },
  series: [
    {
      data: [],
      type: "line",
    },
  ],
  tooltip: {
    show: true,
  },
});
const year = ref(2025);
const month = ref("");
function initTime() {
  const now = new Date();
  year.value = now.getFullYear();
  month.value = now.getMonth() + 1;
  getmonthVerifyData();
}

onMounted(() => {
  myChart.value = echarts.init(monthRef.value);
  cityChart.value = echarts.init(cityRef.value);
  initTime();

  getRecentData();
  getPopularBeerData(); // 30天热门酒款TOP
  getCheckOutBarData(); // 一周核销门店数
  getTopReviewBeers(); // 评分前10酒款
  getCityData();
});
const recentInfo = ref({});
function getRecentData() {
  recentData().then((res) => {
    recentInfo.value = res.data;
  });
}
// 30天热门酒款TOP
const beerList = ref([]);
function getPopularBeerData() {
  popularBeerData({ lastDays: 30 }).then((res) => {
    beerList.value = res.data;
  });
}
// 一周核销门店数
const checkOutBarCount = ref([]);
function getCheckOutBarData() {
  checkOutBarData({ lastDays: 7 }).then((res) => {
    checkOutBarCount.value = res.data;
  });
}
// 评分前10酒款
const topReviewBeers = ref([]);
function getTopReviewBeers() {
  topReview10BeersList().then((res) => {
    topReviewBeers.value = res.data;
  });
}
const timeData = ref("");
function changeTime() {
  console.log(timeData.value);
  let date = new Date(timeData.value);
  year.value = date.getFullYear();
  month.value = date.getMonth() + 1;
  getmonthVerifyData();
}
const monthRef = ref(null);

function getmonthVerifyData() {
  monthVerifyData({ year: year.value, month: month.value }).then((res) => {
    console.log(res);
    const data = res.data;
    option.value.xAxis.data = [];
    option.value.series[0].data = [];
    for (const key in data) {
      if (Object.prototype.hasOwnProperty.call(data, key)) {
        const element = data[key];

        option.value.xAxis.data.push(key);
        option.value.series[0].data.push(element);
      }
    }
    option.value.title.text = `${year.value}年${month.value}月核销数量统计`;
    console.log(option.value);
    option.value && myChart.value.setOption(option.value);
  });
}

// 近30天核销城市占比
const cityRef = ref(null);
const cityOption = ref({
  title: {
    // text: "城市占比",
    subtext: "",
    left: "center",
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    type: "scroll",
    orient: "vertical",
    right: 10,
    top: 20,
    bottom: 20,
    data: [],
  },
  series: [
    {
      name: "占比",
      type: "pie",
      radius: "55%",
      center: ["40%", "50%"],
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
});
function getCityData() {
  recentPopularCityData({ lastDays: 30 }).then((res) => {
    const data = res.data;
    console.log(data);
    cityOption.value.legend.data = [];
    cityOption.value.series[0].data = [];
    for (const key in data) {
      if (Object.prototype.hasOwnProperty.call(data, key)) {
        const element = data[key];
        cityOption.value.legend.data.push(key);
        cityOption.value.series[0].data.push({
          name: key,
          value: element,
        });
      }
    }
    // cityOption.value.title.text = `近30天核销城市占比`;
    cityOption.value && cityChart.value.setOption(cityOption.value);
    console.log(cityOption.value);
  });
}
</script>

<style scoped lang="scss">
ul {
  // padding: 0;
  margin: 0;
}
li {
  list-style: none;
  margin-bottom: 10px;
}
.app-container {
  padding: 20px;
  .header-title {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .name {
    font-size: 18px;
    font-weight: bold;
    margin-left: 40px;
    margin-bottom: 15px;
  }
}
.user-info-head {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 120px;
}

.user-info-head:hover:after {
  content: "+";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .el-divider--vertical {
  height: 85%;
}

.row {
  display: flex;
  .label {
    width: 100px;
  }
}
.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

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

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}
.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>
