<template>
    <div class="layout-container">
        <From v-if="loading" :form-items="dynamicFormItems" @formSubmitted="handleFormSubmitted" @formReset="handleFormReset" />

        <div class="layout-container-table">
            <Table @getTableData="changeTableData" v-model:page="page" ref="table" :data="tableData"
                :height="isFullscreen ? 'calc(100vh - 300px)' : 'calc(100vh - 400px)'">
                <el-table-column prop="userId" label="用户ID" width="120" />
                <el-table-column prop="adSourceId" label="广告源ID" width="100" />
                <el-table-column prop="loginStatus" label="登录状态" width="100">
                    <template #default="scope">
                        {{ scope.row.loginStatus === 1 ? '登录前' : '登录后' }}
                    </template>
                </el-table-column>
                <el-table-column prop="beginTime" label="开始时间" width="100" />
                <el-table-column prop="finishTime" label="完成时间" width="100" />
                <el-table-column prop="ecpm" label="ECPM" width="100">
                    <template #default="scope">
                        {{ roundPrice(scope.row.ecpm) || 0.00 }}
                    </template>
                </el-table-column>
                <el-table-column prop="adSourceType" label="广告源类型" width="160">
                    <template #default="scope">
                        {{ getDictionaryName('ad_source_type', scope.row.adSourceType) }}
                    </template>
                </el-table-column>
                <el-table-column prop="adSourceIndex" label="竞价匹配优先级" width="130" />
                <el-table-column prop="networkFormId" label="广告平台ID" width="100" />
                <el-table-column prop="networkName" label="广告平台名称" width="120" />
                <el-table-column prop="networkPlacementId" label="广告平台广告位ID" width="160" />
                <el-table-column prop="nickName" label="用户昵称" min-width="100" />
                <el-table-column prop="placementId" label="广告位ID" width="100" />
                <el-table-column prop="recordId" label="广告记录ID" width="160" />
                <el-table-column prop="revenue" label="收益" width="100">
                    <template #default="scope">
                        {{ roundPrice(scope.row.revenue) || 0.00 }}
                    </template>
                </el-table-column>
            </Table>
        </div>
    </div>
</template>

<script setup>
import { onBeforeMount, ref, reactive, watch } from "vue";
import { useGetDictList } from '@/hooks/useGetDictList.js'
import { roundPrice } from '@/utils/index.js'
import { appUserEcpm } from '@/api/userModule.js'
import From from "@/components/from/index.vue";
import Table from "@/components/table/index.vue";

// const emit = defineEmits(['handleFormSubmitted', 'handleFormReset'])
const props = defineProps({
    // 表格数据
    isFullscreen: {
        type: Boolean,
        default: false
    },
    ecpmData: {
        type: Object,
        default: {}
    },
});

const { loadDictData, getOptions, getDictionaryName } = useGetDictList();
const table = ref(null)
const loading = ref(false)
const tableData = ref([]);

const dynamicFormItems = ref([
    {
        label: '广告源类型',
        prop: 'adsourceType',
        type: 'select',
        labelWidth: 100,
        options: [],
    },
    {
        label: '登录状态',
        prop: 'loginStatus',
        type: 'select',
        labelWidth: 100,
        defaultVal: 2,
        options: [
            { label: '登陆前', value: 1 },
            { label: '登录后', value: 2 },
        ],
    }
])

// 分页参数, 供table使用
const page = reactive({
    pageNum: 1,
    pageSize: 20,
    total: 0,
});

const formSearch = ref({
    appId: undefined, // 应用ID
    userId: undefined, //用户ID
    adsourceType: undefined,// 广告源类型
    loginStatus: 2, //登录类型
    page: 1, // 当前页码
    limit: 20, // 当前页数量(查询量)
});

// 分页数据
const getList = async () => {
    let res = await appUserEcpm({ ...formSearch.value });
    tableData.value = res.data;
    page.total = res.pageMeta.total;
};


// 分页切换
const changeTableData = (type) => {
    formSearch.value.page = type ? 1 : page.pageNum;
    formSearch.value.limit = page.pageSize;

    getList();
};

// 搜索
const handleFormSubmitted = (formData) => {
    console.log("接收到子组件传递的数据", formData);
    formSearch.value.adsourceType = formData.adsourceType === '' ? undefined : formData.adsourceType;
    formSearch.value.loginStatus = formData.loginStatus || undefined;

    getList();
};

// 表单重置
const handleFormReset = async() => {
    formSearch.value = {
        appId: props.ecpmData.appId, // 应用ID
        userId: props.ecpmData.userId, //用户ID
        adsourceType: undefined,// 广告源类型
        loginStatus: 2, //登录类型
        page: 1, // 当前页码
        limit: 20, // 当前页数量(查询量)
    };
    page.pageNum = 1
    page.pageSize = 20
    page.total = 0

    await getFormOptions()
    await getList();
};

const getFormOptions = async() => {
    loading.value = false
    loadDictData().then(() => {
        dynamicFormItems.value[0].options = getOptions('ad_source_type')
        dynamicFormItems.value[1].defaultVal = 2
    }).finally(() => {
        loading.value = true
    })
}

watch(() => props.ecpmData, (newVal) => {
    formSearch.value.appId = props.ecpmData.appId
    formSearch.value.userId = props.ecpmData.userId

    getList()
}, { immediate: true, deep: true })

onBeforeMount(() => {
    getFormOptions()
})

</script>

<style lang='scss' scoped></style>