<template>
  <div class="home">
    甲情甲意流水，展示
    数据展示
  </div>
<!--=========================================================  -->

  <el-row :gutter="16">
    <el-col :span="6">
      <div class="statistic-card">
        <el-statistic :value="num0" >
          <template #title>
            <div style="display: inline-flex; justify-self: right;align-items: center;width: 100%">
              用户人数
              <el-tooltip
                  effect="dark"
                  content="Number of users who logged into the product in one day"
                  placement="top"
              >
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
              <el-icon style="float: right" size="24"><Odometer /></el-icon>
            </div>
          </template>
        </el-statistic>

      </div>
    </el-col>
    <el-col :span="6">
      <div class="statistic-card">
        <el-statistic :value="num1">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              商家人数
              <el-tooltip
                  effect="dark"
                  content="Number of users who logged into the product in one month"
                  placement="top"
              >
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>

      </div>
    </el-col>
    <el-col :span="6">
      <div class="statistic-card">
        <el-statistic :value="num2" title="New transactions today">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              订单数量
            </div>
          </template>
        </el-statistic>

      </div>
    </el-col>
    <el-col :span="6">
      <div class="statistic-card">
        <el-statistic :value="num3" title="New transactions today">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              美甲师人数
<!--              用户满意度-->
            </div>
          </template>
        </el-statistic>

      </div>
    </el-col>
  </el-row>








<!--  ================================================-->
  <div style="display: flex"  v-for="(item,index) in tableData" :key="index">
    <div style="flex: 1">

      <div id="t" style="height: 300px;width: 400px;border: 1px solid #ebebeb;border-radius: 2px;">
        <el-form
            :model="item"
            label-width="100px"
            style="height: auto"
        >
          <el-form-item label="门店头像" prop="businessAvatar">
            <img :src="item.businessAvatar" width="50" height="50"/>
          </el-form-item>
          <el-form-item label="门店名" prop="businessName">
            {{item.businessName}}
          </el-form-item>
          <el-form-item label="店主名" prop="shopkeeper">
            {{item.shopkeeper}}
          </el-form-item>
          <el-form-item label="店铺详细地址" prop="address">
            {{item.address}}
          </el-form-item>

          <el-form-item label="银行卡号" prop="bankCard">
            {{item.bankCard}}
          </el-form-item>
          <el-form-item label="营业时间段" prop="startBusiness">
            {{item.startBusiness}}~~{{item.endBusiness}}
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="flex: 1" >
      <div id="main" style="height: 300px;width: 400px;border: 1px solid #ebebeb;border-radius: 2px;"></div>
    </div>
    <div style="flex: 1" >
      <div id="main1" style="height: 300px;width: 400px;border: 1px solid #ebebeb;border-radius: 2px;"></div>
    </div>
  </div>
<!--  <el-pagination-->
<!--      v-model:currentPage="formPage.current"-->
<!--      v-model:page-size="formPage.pageSize"-->
<!--      :page-sizes="[10, 20, 30, 40,50]"-->
<!--      layout="total, sizes, prev, pager, next, jumper"-->
<!--      :total="total"-->
<!--      @size-change="handleSizeChange"-->
<!--      @current-change="handleCurrentChange"-->
<!--  />-->


</template>
<script setup>
import axios from "@/util/axios";
import * as echarts from "echarts";
import {onMounted, ref} from 'vue'

let num0=ref()
let num1=ref()
let num2=ref()
let num3=ref()



const total=ref(0)
const tableData =ref([])
const formPage=ref({
  current:1,
  pageSize:1
})

const initBusinessList=async()=>{
  //console.log(formPage.value)
  const res1=await axios.post("user/list/page");
  num0=res1.data.data.total


  const res3=await axios.post("orders/list/page");
  num2=res3.data.data.total
  const res4=await axios.post("manicurist/queryAll");
  num3=res4.data.data.length

  const res=await axios.post("business/list/page",formPage.value);
  num1=res.data.data.total
  //console.log(res.data.data.records)
  tableData.value=res.data.data.records;
  total.value=res.data.data.records.length;
 // console.log(num0)
  setTimeout(() => {hei();shi();}, 500)

}

initBusinessList();

const handleSizeChange = (pageSize) => {
  formPage.value.current=1;
  formPage.value.pageSize=pageSize;
  initBusinessList();
}
const handleCurrentChange = (pageNum) => {
  formPage.value.current=pageNum;
  initBusinessList();
}

//
// onMounted(async () => {
//   setTimeout(() => {hei();shi();}, 500)
// })

// onMounted(async () => {
//   setTimeout(() => {hei();shi();}, 500)
// })

const hei=()=>{

  var chartDom = document.getElementById('main1');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ]
      }
    ]
  };

  option && myChart.setOption(option);

}
const shi=()=>{
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Direct',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  };

  option && myChart.setOption(option);

}


</script>
<style lang="scss" scoped>
.home {
  padding: 40px;
  font-size: 30px;
  font-weight: bold;
}

.statistic-card {

  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
  background-color: #f0f2f5;
}
</style>


