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

    <!-- <el-divider /> -->
    <el-row :gutter="20">
      <el-col :span="11">
        <el-card class="update-log" >
          <template v-slot:header>
            <div class="titleBox">
              <div class="line"></div>
              <div class="name">
                <div>配送订单总览</div>
                <el-date-picker
                  v-model="dateInventoryTypeObj"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="YYYY-MM-DD"
                  style="margin: 0 20px;"
                />
                <el-button type="primary" size="small" @click="getTotalOverview">搜索</el-button>
              </div>
            </div>
          </template>
          <div class="body"  id="orderOverview">
          </div>
        </el-card>
      </el-col>
      <el-col :span="13">
        <el-card class="update-log" >
          <template v-slot:header>
            <div class="titleBox">
              <div class="line"></div>
              <div class="name">
                <div>配送费统计</div>
                <el-date-picker
                  v-model="twoTimeArr"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="YYYY-MM-DD"
                  style="margin: 0 20px;"
                />
                <el-button type="primary" size="small" @click="getFee">搜索</el-button>
              </div>
            </div>
          </template>
          <div class="body"  id="orderFee">
          </div>
        </el-card>
      </el-col>

    </el-row> 
    <el-row :gutter="20" style="margin-top: 20px;">
      
      <el-col :span="13">
        <el-card class="update-log" >
          <template v-slot:header>
            <div class="titleBox">
              <div class="line"></div>
              <div class="name">
                <div>每日订单统计</div>
                <!-- <el-date-picker
                  v-model="dateInventoryTypeObj"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="YYYY-MM-DD"
                  style="margin: 0 20px;"
                /> -->
                <el-select v-model="monthValue" placeholder="选择月份" style="width: 200px;margin: 0 20px;">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-button type="primary" size="small" @click="getDayOrder('search')">搜索</el-button>
              </div>
            </div>
          </template>
          <div class="body"  id="everyDayCount"> 
          </div>
        </el-card>
      </el-col>
      <el-col :span="11" >
        <el-card class="update-log" >
          <template v-slot:header>
            <div class="titleBox">
              <div class="line"></div>
              <div class="name">
                <div>各类车型配送统计</div>
                <el-date-picker
                  v-model="threeTimeArr"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="YYYY-MM-DD"
                  style="margin: 0 20px;"
                />
                <el-button type="primary" size="small" @click="getOrderCarType">搜索</el-button>
              </div>
            </div>
          </template>
          <div class="body"  id="orderCarType"> 
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- @click="goAi" -->
    <div class="imgBox" ref="iconRef" @mousedown="startDrag"  :style="{
      left: position.x ? position.x + 'px' :'',
      top: position.y + 'px'
    }" >
      <img src="@/assets/images/rgzn.png" style="width: 100%;height: 100%;" @click="goAi" />
    </div>
  </div>
</template>

<script setup name="Index">
  import * as echarts from 'echarts';
  import {getOrderStatus,getDeliveryFee,getOrderCar,everyDayOrder} from "@/api/index/index";
  const version = ref('3.9.0')
  import { parseTime } from '@/utils/ruoyi'
  //  import { getTime } from '@/utils/index'
import { get } from '@vueuse/core';
  // let statDate = parseTime(new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), '{y}-{m}-{d}')  // 14天前
  // let endDate = parseTime(new Date(), '{y}-{m}-{d}')  // 当前时间

  let currentDate = new Date();
  let currentYear = currentDate.getFullYear();
  let monthVal = currentDate.getMonth() + 1;
  let statDate = parseTime(new Date(currentYear,monthVal-1,1), '{y}-{m}-{d}')
  let endDate = parseTime(new Date(currentYear,monthVal,0), '{y}-{m}-{d}')
  

  // let statDate = parseTime(getTime('start'))
  // let endDate = parseTime(getTime(''))
  const dateInventoryTypeObj = ref([statDate,endDate])  //第一个接口时间参数
  const twoTimeArr = ref([statDate,endDate])  //第二个接口时间参数
  const threeTimeArr = ref([statDate,endDate])  //第三个接口、各类车型 时间参数
  const fourTimeArr = ref([statDate,endDate])  //第四个接口、每日订单时间参数
  const { proxy } = getCurrentInstance()
  const options = [
    { value: '01', label: '1月' },
    { value: '02', label: '2月' },
    { value: '03', label: '3月' },
    { value: '04', label: '4月' },
    { value: '05', label: '5月' },
    { value: '06', label: '6月' },
    { value: '07', label: '7月' },
    { value: '08', label: '8月' },
    { value: '09', label: '9月' },
    { value: '10', label: '10月' },
    { value: '11', label: '11月' },
    { value: '12', label: '12月' }
  ]
  const monthValue = ref('')
  onMounted(() => {
    getTotalOverview()
    getFee()
    getOrderCarType()
    getDayOrder('')   //每日订单统计
  });
  //第一个接口，订单总览
  function getTotalOverview(){
    
    const dataArr = {
      statDate: dateInventoryTypeObj.value[0],
      endDate: dateInventoryTypeObj.value[1]
    }
    getOrderStatus(dataArr).then(Response => { 
      const dataInfo = Response.data
      const data = [
        {name:'已完成',value:dataInfo.signedCount},
        {name:'配送中',value:dataInfo.deliveringCount},
        {name:'待配送',value:dataInfo.waitCount},
      ]
      getChart(data)
      // console.log(Response)
    })
  }
  //第二个接口,各月配送费用
  function getFee(){
    const dataArr = {
      statDate: twoTimeArr.value[0],
      endDate: twoTimeArr.value[1]
    }
    getDeliveryFee(dataArr).then(Response => { 
      // console.log(Response)
      getFeeChart(Response.data)
    })
  }
  //第三个接口，各类车型订单数
  function getOrderCarType(){
    const dataArr = {
      statDate: threeTimeArr.value[0],
      endDate: threeTimeArr.value[1]
    }
    getOrderCar(dataArr).then(Response => { 
      const dataInfo = Response.data
      getCarTypeChart(dataInfo)
      // const data = [
      //   {name:'小车',value:dataInfo.smallCarCount},
      //   {name:'中车',value:dataInfo.middleCarCount},
      // ]
    })
  }
  //第四个接口，每日订单数
  function getDayOrder(isSearch){
    
    // monthValue.value = monthVal+''  //下拉框显示
    
    if(isSearch == 'search'){
      if(monthValue.value == ''){
        proxy.$modal.msgError("请选择月份");
        return
      }
      
      
      // console.log(currentYear)
      fourTimeArr.value[0] = parseTime(new Date(currentYear,monthValue.value-1,1), '{y}-{m}-{d}')
      fourTimeArr.value[1] = parseTime(new Date(currentYear,monthValue.value,0), '{y}-{m}-{d}')
      
    }
    else{
      monthValue.value = monthVal+''
    }
    // console.log(11111)
    // console.log(dateInventoryTypeObj.vlaue[0])
    const dataArr = {
      statDate: fourTimeArr.value[0],
      endDate: fourTimeArr.value[1]
    }
    // console.log(dataArr)
    everyDayOrder(dataArr).then(Response => { 
      const dataInfo = Response.data
      getEveryDayChart(dataInfo)
    })
  }
  //第一个图表
  function getChart(data) { 
    let chartDom = document.getElementById('orderOverview');
  let myChart = echarts.init(chartDom, null, {
      // width: 600, // 宽度
      height: 300 // 高度
  });
  // console.log(data)
  myChart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: '50%',
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  });
  }
  //第二个图表，各月配送费用
  function getFeeChart(dataInfo){ 
    // dataInfo = [
    //   {statMonth:'2025-01',totalActualFee:1000},
    //   {statMonth:'2025-02',totalActualFee:1221},
    //   {statMonth:'2025-03',totalActualFee:1543},
    //   {statMonth:'2025-04',totalActualFee:2000},
    //   {statMonth:'2025-05',totalActualFee:699},
    //   {statMonth:'2025-06',totalActualFee:4000},
    //   {statMonth:'2025-07',totalActualFee:6000},
    //   {statMonth:'2025-08',totalActualFee:5000},
    //   {statMonth:'2025-09',totalActualFee:3000},
    //   {statMonth:'2025-10',totalActualFee:2000},
    //   {statMonth:'2025-11',totalActualFee:1288},
    //   {statMonth:'2025-12',totalActualFee:1000},
    // ]
    var chartDom = document.getElementById('orderFee');
    var myChart = echarts.init(chartDom, null, {
      // width: 600, // 宽度
        height: 300 // 高度
    });
    var option;
    let xAxisData = []
    let seriesData = []
    if(dataInfo.length > 0){
      dataInfo.forEach(item => {
        xAxisData.push(item.statMonth)
        seriesData.push(item.totalActualFee)
      })
    }
    option = {
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          rotate: 30, 
        },
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: seriesData,
          type: 'line',
          label: {
            show: true, // 显示数值
            position: 'top', // 数值显示的位置，可以是'top', 'bottom', 'left', 'right'等
            formatter: '{c}',
          
          }
        }
      ]
    };

    option && myChart.setOption(option);
  }
  //第三个图表，各类车型订单数
  function getCarTypeChart(dataInfo){
    let xAxisData = []  //车型
    let totalOrder = []  //订单数
    let totalActualFee = [] //总费用
    let totalKm = []  //总里程
    if(dataInfo.length > 0){
      dataInfo.forEach(item => {
        xAxisData.push(item.vehicleTypeName)
        totalOrder.push(item.orderCount)
        totalActualFee.push(item.totalActualFee)
        totalKm.push(item.totalKm)
      })
    }
    
    var chartDom = document.getElementById('orderCarType');
    var myChart = echarts.init(chartDom, null, {
      // width: 600, // 宽度
        height: 300 // 高度
    });
    myChart.setOption({
      // title: {
      //   text: 'World Population'
      // },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        // bottom: '8%',
      },
      legend: {},
      yAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          rotate: 30, 
        },
      },
      series: [
        {
          name: '订单数',
          type: 'bar',
          data: totalOrder
        },
        {
          name: '总费用',
          type: 'bar',
          data: totalActualFee
        },
        {
          name: '公里数',
          type: 'bar',
          data: totalKm
        }
      ]
    });
  }
  //第四个图表，每日订单数
  function getEveryDayChart(dataInfo){ 
    // let xAxisData = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]  //日期
    // let totalOrder = [10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10]  //订单数
    // let totalActualFee = [20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20] //总费用
    // let totalKm = [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]  //总里程
    let xAxisData = []  //日期
    let totalOrder = []  //订单数
    let totalActualFee = [] //总费用
    let totalKm = []  //总里程
    if(dataInfo.length > 0){
      dataInfo.forEach(item => {
        xAxisData.push(item.statDate)
        totalOrder.push(item.orderCount)
        totalActualFee.push(item.totalActualFee)
        totalKm.push(item.totalKm)
      })
    }
    
    var chartDom = document.getElementById('everyDayCount');
    var myChart = echarts.init(chartDom, null, {
      // width: 600, // 宽度
        height: 300 // 高度
    });
    myChart.setOption({
      // title: {
      //   text: 'World Population'
      // },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        // bottom: '8%',
      },
      legend: {},
      yAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          // rotate: 50, 
        },
      },
      series: [
        {
          name: '订单数',
          type: 'bar',
          data: totalOrder
        },
        {
          name: '总费用',
          type: 'bar',
          data: totalActualFee
        },
        {
          name: '公里数',
          type: 'bar',
          data: totalKm
        }
      ]
    });
  }
  function goTarget(url) {
    window.open(url, '__blank')
  }

  // 图标元素引用
const iconRef = ref(null)

// 图标当前位置
const position = reactive({ x: 0, y: 300 })

// 拖拽状态
let isDragging = false
let offsetX = 0
let offsetY = 0
let isMove
// 获取边界限制
function getBoundaries() {
  if (!iconRef.value) return { minX: 0, maxX: 0, minY: 0, maxY: 0 }
  const rect = iconRef.value.getBoundingClientRect()
  const width = rect.width
  const height = rect.height

  // 浏览器视口尺寸
  const viewportWidth = window.innerWidth
  const viewportHeight = window.innerHeight

  return {
    minX: 0,
    maxX: viewportWidth - width,     // 最大 left 值
    minY: 0,
    maxY: viewportHeight - height    // 最大 top 值
  }
}
// 开始拖拽
function startDrag(e) {
  // console.log(1111)
  if (!iconRef.value) return
  isDragging = true
  isMove = false
  const rect = iconRef.value.getBoundingClientRect()
  offsetX = e.clientX - rect.left
  offsetY = e.clientY - rect.top

  e.preventDefault()
}

// 全局鼠标移动监听
function handleMouseMove(e) {
  if (!isDragging || !iconRef.value) return
  isMove = true
  const boundaries = getBoundaries()
  let newX = e.clientX - offsetX
  let newY = e.clientY - offsetY

  // 限制在视口内
  // console.log(boundaries.minX+'--'+)
  newX = Math.max(boundaries.minX, Math.min(newX, boundaries.maxX))
  newY = Math.max(boundaries.minY, Math.min(newY, boundaries.maxY))

  position.x = newX
  position.y = newY
}

// 停止拖拽
function handleMouseUp() {
  // console.log(2222)
  // if(!isMove && iconRef.value){
  //   window.open('http://192.168.1.28:8000/#/chat/index', '_blank')
  // }
  isDragging = false
}

// 绑定全局事件（组件挂载时）
window.addEventListener('mousemove', handleMouseMove)
window.addEventListener('mouseup', handleMouseUp)

// 可选：组件卸载时清理（防止内存泄漏）
// 在 Vue 3 中，如果使用 <script setup>，可以用 onBeforeUnmount
import { onBeforeUnmount } from 'vue'
onBeforeUnmount(() => {
  window.removeEventListener('mousemove', handleMouseMove)
  window.removeEventListener('mouseup', handleMouseUp)
})
 
function goAi(){
  // console.log(33333)
  // setTimeout(() => {
    if(!isMove){
      window.open('http://192.168.1.28:8000/#/chat/index', '_blank')
    }
  // }, 200);
  // window.open('http://192.168.1.28:8000/#/chat/index', '_blank')
}
</script>

<style scoped lang="scss">
.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;
    }
  }
  .titleBox{
    display: flex;
    align-items: center;
    .line {
      width: 6px;
      height: 15px;
      background: #199793;
      border-radius: 12px 12px 12px 12px;
      transform: rotateX(360deg);
    }
    .name{
      margin-left: 8px;
      display: flex;
      align-items: center;
      height: 28px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20px;
      color: #333333;
      line-height: 23px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  .imgBox{
    width: 40px;
    height: 40px;
    position:fixed;
    right: 0;
    // top: 50%;
    cursor: pointer;
  }
}
</style>

