<template>
  <div class="app-container home">

    <el-card>
      <el-row>
        <el-col :span="6" @click="router.push('/member/member')" class="pointer">
          <el-statistic title="用户数量" :value="indexObj?.memberCount" />
        </el-col>
        <el-col :span="6" @click="router.push('/tenant/tenant')" class="pointer">
          <el-statistic title="店铺数量" :value="indexObj?.storeCount" />
        </el-col>
        <el-col :span="6" @click="router.push('/pms/product')" class="pointer">
          <el-statistic title="商品数量" :value="indexObj?.productCount" />
        </el-col>
        <el-col :span="6" @click="router.push('/order/list')" class="pointer">
          <el-statistic title="订单数量" :value="indexObj?.orderCount" />
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-row>
        <el-col :span="4" @click="router.push('/pms/product')" class="pointer">
          <el-row> {{ indexObj?.productAudit }} </el-row>
          <el-row> 待审核商品 </el-row>
        </el-col>
        <el-col :span="4" @click="router.push('/tenant/tenant')" class="pointer">
          <el-row> {{ indexObj?.StoreAudit }} </el-row>
          <el-row> 待审核店铺 </el-row>
        </el-col>
        <el-col :span="4" @click="router.push('/videoManage/video')" class="pointer">
          <el-row> {{ indexObj?.vlogCount }} </el-row>
          <el-row> 待审核视频 </el-row>
        </el-col>
        <el-col :span="4">
          <el-row> {{ indexObj?.orderAudit }} </el-row>
          <el-row> 待审核退款 </el-row>
        </el-col>
        <el-col :span="4" @click="router.push('/videoManage/report')" class="pointer">
          <el-row> {{ indexObj?.feedbackCount }} </el-row>
          <el-row> 待审核举报 </el-row>
        </el-col>
        <el-col :span="4" @click="router.push('/transaction/withdraw')" class="pointer">
          <el-row> {{ indexObj?.WithdrawCount }} </el-row>
          <el-row> 待审核提现 </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-divider />
    <el-row>
      <el-col :span="12">
        <el-card header="分佣额">
          <el-row> 待审核提现 </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card header="收入支出（万）">
          <LineChartnew v-if="isbar" :chartData="barchartData" id="barchart" />
          <!-- <LineChartnew v-if="lineChartsShow" :chartData="LinechartData" id="lineChartsShow" /> -->
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card header="用户量" @click="router.push('/member/member')" class="pointer">
          <LineChartnew v-if="lineChartsShow" :chartData="LinechartData" id="lineChartsShow" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card header="短视频" @click="router.push('/videoManage/video')" class="pointer">
          <LineChartnew v-if="monthlyVlogShow" :chartData="monthlyVlogList" id="monthlyVlogShow" />
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card header="店铺TOP20" @click="router.push('/tenant/tenant')" class="pointer">
          <div class="table-head" v-if="istopstores">
            <div>排名</div>
            <div>店铺名称</div>
            <div>销量量</div>
            <div>总交易额</div>
          </div>
          <div class="body">
            <div class="table-body" v-for="(item, index) in topStoresList" :key="index">
              <div>{{ index + 1 }}</div>
              <div>{{ item.company_name }}</div>
              <div>{{ item.sales }}</div>
              <div>{{ item.total_amount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card header="商品TOP20" @click="router.push('/pms/product')" class="pointer">
          <div class="table-head" v-if="istopproduct">
            <div>排名</div>
            <div>店铺名称</div>
            <div>销量量</div>
            <div>总交易额</div>
          </div>
          <div class="body">
            <div class="table-body" v-for="(item, index) in topProductList" :key="index">
              <div>{{ index + 1 }}</div>
              <div>{{ item.name }}</div>
              <div>{{ item.sales }}</div>
              <div>{{ item.total_amount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index" lang="ts">
import * as echarts from 'echarts';
import { getIndex } from '@/api/login';
import { indexObjOV, top20Stores, top20Product } from '@/api/types';
import LineChartnew from '@/views/dashboard/LineChartnew.vue'; //引入折线图
import router from '@/router';
const goTarget = (url: string) => {
  window.open(url, '__blank');
};
const indexObj = ref<indexObjOV>();
const lineChartsShow = ref(false);

const LinechartData = ref({
  // color: 'red',
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  series: [
    { name: '用户量', type: 'line', data: [] },
    { name: '在线用户', type: 'line', data: [] },
    { name: '活跃', type: 'line', data: [] },
    { name: '下单用户', type: 'line', data: [] }
  ]
});
const monthlyVlogShow = ref(false);
const monthlyVlogList = ref({
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  series: [
    {
      name: '视频',
      type: 'line',
      smooth: true,
      showSymbol: false,
      lineStyle: {
        width: 0
      },
      data: [],
      areaStyle: {
        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
          {
            offset: 0,
            color: 'rgba(58,77,233,0.8)'
          },
          {
            offset: 1,
            color: 'rgba(58,77,233,0.3)'
          }
        ])
      }
    }
  ]
});
//店铺
const topStoresList = ref<top20Stores[]>([]);
const istopstores = ref(false);
//商品
const topProductList = ref<top20Product[]>([]);
const istopproduct = ref(false);
//饼形

const barchartData = ref({
  xAxis: {
    type: 'category',
    boundaryGap: [0, 0],
    data: []
  },
  legend: {
    show: false
  },
  series: [
    {
      name: '收入',
      type: 'bar',
      data: [],
      barCategoryGap: '20%',
      // 方案2：直接设柱子宽度（如像素值或百分比）
      barWidth: '30%',
      itemStyle: {
        // 线性渐变填充：从上到下透明度递减
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(255, 99, 132, 1)' }, // 顶部：完全不透明
            { offset: 1, color: 'rgba(255, 99, 132, 0.3)' } // 底部：30% 透明度
          ],
          global: false
        }
      }
    },
    {
      name: '支出',
      type: 'bar',
      data: [],
      barCategoryGap: '20%',
      // 方案2：直接设柱子宽度（如像素值或百分比）
      barWidth: '30%',
      itemStyle: {
        // 线性渐变填充：从上到下透明度递减
        color: {
          type: 'linear',
          x: 0,
          y: 0, // 渐变起点（左上角）
          x2: 0,
          y2: 1, // 渐变终点（左下角）
          colorStops: [
            { offset: 0, color: 'rgba(54, 162, 235, 1)' }, // 顶部：完全不透明
            { offset: 1, color: 'rgba(54, 162, 235, 0.3)' } // 底部：30% 透明度
          ],
          global: false // 只在当前图形内生效
        }
      }
    }
  ]
});
const isbar = ref(false);
const getList = async () => {
  const res = await getIndex();
  indexObj.value = res.data;
  res.data?.monthlyUserVolume.forEach((item: any) => {
    LinechartData.value.xAxis.data.push(item.month);
    LinechartData.value.series[0].data.push(Number(item.registerMemberCount));
    LinechartData.value.series[1].data.push(Number(item.loginMemberCount));
    LinechartData.value.series[2].data.push(Number(item.addCartMemberCount));
    LinechartData.value.series[3].data.push(Number(item.dealMemberCount));
  });
  lineChartsShow.value = true;
  res.data?.monthlyVlog.forEach((item: any) => {
    monthlyVlogList.value.xAxis.data.push(item.month);
    monthlyVlogList.value.series[0].data.push(Number(item.vlog_count));
  });
  console.log(monthlyVlogList.value);
  monthlyVlogShow.value = true;
  topStoresList.value = res.data?.top20Stores;
  istopstores.value = true;
  topProductList.value = res.data?.top20Product;
  istopproduct.value = true;
  res.data?.monthlyIncomeExpense.forEach((item: any) => {
    barchartData.value.xAxis.data.push(item.month);
    barchartData.value.series[0].data.push(Number(item.income_amount));
    barchartData.value.series[1].data.push(Number(item.expense_amount));
  });
  isbar.value = true;
};
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.table-head {
  width: 100%;
  display: flex;
  div {
    width: 25%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    background: #d8d8d8;
  }
}
.body {
  width: 100%;
  height: 250px;
  overflow: auto;
  .table-body {
    width: 100%;
    display: flex;
    div {
      width: 25%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 15px;
      box-shadow: 0 1px 0px rgba(0, 0, 0, 0.1);
    }
  }
}
.pointer {
  cursor: pointer;
}
// ::v-deep {
//   .el-card__body {
//     height: 300px;
//   }
// }
</style>
