<script setup lang="ts">
import { shallowRef, ref } from "vue";
import apis from "../config/apis";


const emit = defineEmits(["refresh"]);

const visible = shallowRef(false);
const loading = shallowRef(false);
const formRef = ref<any>(null);

const rules = {
  date: {
    type: "array",
    required: true,
    trigger: 'change',
    message:'请选择时间区间'
  },
  id: {
   required: true,
    trigger: 'change',
    message:'请选择报表'
  }
}

const formData = ref<any>({
  date: [],
  id: "",
  rep_name: ""
})

function handleClose() { 
  visible.value = false;
}

async function handleSubmit() {
  loading.value = true;
  try {
    await formRef.value.validate()
    const { date, id } = formData.value;
    const [start, end ] = date;
    const data = await apis.update({ start, end, id });
    visible.value = false;
    emit("refresh")
  } catch (error) {
    console.log(error)
  } finally { 
    loading.value = false;
  }
}

defineExpose({
  onDisplay({ start, end, rep_name, id }) { 
    formData.value = {
      date: [start, end],
      rep_name,
      id
    }

    visible.value = true;
  }
})
</script>

<template>
  <el-dialog title="编辑每日统计" v-model="visible" @close="handleClose" center>
    <el-form :rules="rules" :model="formData" ref="formRef">
      <el-form-item label="报表名称" prop="id">
        <el-input disabled v-model="formData.rep_name" />
      </el-form-item>
      
      <el-form-item label="时间区间" prop="date">
        <el-date-picker v-model="formData.date" type="daterange" style="width:100%" start-placeholder="开始时间" end-placeholder="结束时间" />
      </el-form-item>

      <el-form-item>
        <div class="w-full flex justify-end">
          <el-button type="primary" @click="handleSubmit" :loading="loading">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
