<template>
  <el-date-picker
      type="daterange"
      range-separator="-"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      v-model="chooseMonth"
      @change="handleSelect"
      :disabledDate="disabledDateFun"
      :default-value="defaultDates"
      style="flex:3;width: 25%;"
  />
  {{ parentMessage }}
  <el-popover v-if="numTable.globalList != null"  :visible="popoverVisible" placement="right" :width="400" trigger="click" ref="myPopover">
      <template #reference>
          <el-button @click="popoverVisible = true" style="width: 15%;margin-left: 16px">{{ formData.totalDays }}</el-button>
      </template>
      <el-table :data="numTable.globalList">
          <template v-for="item in numTable.heading">
              <el-table-column :label="item.name" :prop="item.field" show-overflow-tooltip>
                  <template #default="scope" v-if="item.name === '天数'">
                      <el-input v-model="scope.row.between"></el-input>
                  </template>
              </el-table-column>
          </template>
      </el-table>
      <div class='flex-cc mt15'>
          <el-button type="primary" @click="confirmAndClose(numTable.globalList)">确定</el-button>
          <el-button @click="cancelAndClose">取消</el-button>
      </div>
  </el-popover>
  <el-input
      v-else
      style="margin-left: 10px; margin-right: 10px;flex:1"
      v-model="totalDays"
      type="number"
      :min="0"
      :max="999999999999"
      :maxlength="12"
      @change="dataBlur(totalDays)"
  />天
  
</template>
<script setup lang="ts">
import request from "@/utils/request";
import { parseTime } from "@/utils/ruoyi";
/*
需要传入的参数
1、接口 Furl
2、接口参数 getData
3、起始时间 FstartDate
4、结束时间 FendDate
*/ 
/*
需要传出的参数
1、选择的日期范围 chooseMonth
2、总额 moneyTotal
2、总天数 totalDays
*/
// ------------处理选择月份 开始-------------
const { Furl,FgetData,FstartDate,FendDate } = defineProps<{
  Furl:string,
  FgetData:object,
  FstartDate:string,
  FendDate:string
}>()


const parentMessage = inject('parentMessage');

const emit = defineEmits(["getValue"]); 
const chooseMonth = ref([] as any)
let moneyTotal = ref()
let totalDays = ref()
// 根据日期获取金额总计的接口
function getMoney(data) {
  return request({
      url: Furl,
      method: 'post',
      data
  })
}
// 根据日期获取金额总数
const numTable = ref({} as any)
const getMoneyMeth = (obj?) => {
  
  let data = {
    totalDays:0,
    ...obj,
    ...FgetData
  }
    getMoney(data).then(res => {
        moneyTotal.value = res.data.moneyTotal
        totalDays.value = res.data.totalDays
        numTable.value = res.data
        // 子传父
        emit('getValue',chooseMonth.value,moneyTotal.value,totalDays.value)
    })
}
// 确认按钮点击时关闭气泡卡片
const myPopover = ref(null); 
const popoverVisible = ref(false)
const confirmAndClose = (list) => {
    popoverVisible.value = false;
    let data = {
        globalList:list
    } as any
    getMoneyMeth(data)
};
// 取消按钮点击时关闭气泡卡片
const cancelAndClose = () => {
    popoverVisible.value = false

};
// 下拉框的change事件
const handleSelect = async(custom) => {
    await nextTick()
    if(chooseMonth.value){
        chooseMonth.value[0] = parseTime(chooseMonth[0])?.slice(0,10)
        chooseMonth.value[1] = parseTime(chooseMonth[1])?.slice(0,10)
        getMoneyMeth()
    }else{
        numTable.value = {}
        totalDays.value = 0
    }
}
// 选择月份后数字框的blur事件
const dataBlur = (e:any) => {
    // 处理根据天数计算费用总计
    if(!totalDays.value) {
        totalDays.value = 0
    }
    getMoneyMeth({totalDays:totalDays.value})
}
// ------------处理选择月份 结束---------------

//  ------------日期筛选器 开始---------------
const startDate = ref()
const endDate = ref()
let defaultDates
// 监听 formData 的变化，更新 startDate 和 endDate
watch(
    () => [FstartDate, FendDate],
    ([newStartDate, newEndDate]) => {
        startDate.value = newStartDate ? new Date(newStartDate).setHours(0, 0, 0, 0)  : null;
        endDate.value = newEndDate ? new Date(newEndDate).setHours(0, 0, 0, 0)  : null;
    },
    { immediate: true }
);
// disabledDate 函数逻辑
const disabledDateFun = (time) => {
    const inputTime = new Date(time);
    defaultDates = computed(() => {
        return [startDate.value,endDate.value]
    })
    if (!startDate.value || !endDate.value) return false;
    // 判断 inputTime 是否在 startDate 和 endDate 之间
    return !(inputTime >= startDate.value && inputTime <= endDate.value);
};
//  ------------日期筛选器 结束---------------
</script>
<style scoped></style>