<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';
import { ElButton, ElForm, ElFormItem } from 'element-plus';
import { useUserInfo } from "/@/hooks/core/useUser";
import { httpRequsetExport } from '/@/utils/export';
import { useVModel } from '@vueuse/core';
import dayjs from 'dayjs';

const props = defineProps<{ visible: boolean }>()
const { userInfo } = useUserInfo()

const formData = reactive({
    month: '',
    manager_id: '',
    manager_name: ''
})


const rules = {
    month: [{ required: true, trigger: 'change', message: '请选择月份' }],
    manager_id: [{ required: true, trigger: 'change', message: '想选择业务公司' }],
}


const visible = useVModel(props, 'visible')
const formRef = ref<InstanceType<typeof ElForm> | null>(null)
const loading = ref(false)

async function handleExport(){
    const { month, manager_id } = formData

    const days = dayjs(month).daysInMonth()
    const start = month + '-' + '01'
    const end = month + '-' + days


    const params = {
        manager_id,
        start,
        end,
        is_show_cgd: '1'
    }

    if (userInfo.value.itemid == '52'){
        params.is_show_cgd = '0'
    }

    await httpRequsetExport({
        url: "http://rep.report.caixiao365.com/admin/Everyday/EveryInvBy",
        name: "发票申请订单明细导出(业务经理)",
        noBaseUrl: true,
        onStart: () => (loading.value = true),
        onSuccess: () => {
            loading.value = false; 
            visible.value = false;
        },
        onFail: () => (loading.value = false),
        params: {
            manager_id,
            start,
            end,
        }
    });
}

function handleClose(){
    formData.manager_id = ''
    formData.manager_name = ''
    formData.month = ''
}

watch(() => props.visible, () => {
    formData.manager_id = userInfo.value.id
    formData.manager_name = userInfo.value.nickname
})
</script>

<template>
    <ElDialog title="发票申请订单明细导出(业务经理)" v-model="visible" center @close="handleClose" class="custom-dialog">
        <ElForm label-width="100px" :model="formData" :rules="rules" ref="formRef" v-loading="loading">
            <ElFormItem label="月份" prop="month">
                <ElDatePicker v-model="formData.month" style="width: 100%" placeholder="月份" value-format="YYYY-MM"
                    type="month" :disabledDate="time => time.getTime() > Date.now()" />
            </ElFormItem>

            <ElFormItem label="业务经理" prop="manager_id">
                <ElInput :disabled="true" placeholder="业务经理" :modelValue="formData.manager_name" />
            </ElFormItem>

            <ElFormItem label="业务公司" >
                <ElInput :disabled="true" placeholder="业务经理" :modelValue="'不限'" />
            </ElFormItem>



            <ElFormItem>
                <div style="width: 100%;display: flex;justify-content: flex-end;">
                    <ElButton type="primary" @click="handleExport">提交</ElButton>
                </div>
            </ElFormItem>
        </ElForm>
    </ElDialog>
</template>