<template>
    <div class="contenBox">
        <div class="table-action flex-b">
            <div class="customList">{{ contentConfig.header.title ? contentConfig.header.title : '' }}</div>
            <div class="btns">
                <slot name="button"></slot>
            </div>
        </div>
        <el-table :data="pageList" style="width: 100%; max-height: 55vh; overflow: auto"
            @selection-change="handleSelectionChange" ref="multipleTableRef" v-bind="props.contentConfig?.tableProps"
            :row-key="getRowKeys" v-loading="loading">
            <template v-for="item in contentConfig.propsList">
                <!-- 序号 -->
                <el-table-column :fixed="item.fixed" v-if="item.type === 'index'" type="index" :key="item.prop" center>
                </el-table-column>
                <!-- 选择 -->
                <el-table-column :fixed="item.fixed" type="selection" width="55" align="center" :key="item.prop"
                    v-if="item.type === 'selection'" :reserve-selection="true" />
                <!-- 操作类 -->
                <el-table-column :key="item" :fixed="item.fixed" align="center" v-bind="item"
                    v-else-if="item.type === 'handler'">
                    <template #default="scope">
                        <slot :name="item.slotName" v-bind="scope"></slot>
                    </template>
                </el-table-column>

                <!-- 自定义类 -->
                <el-table-column show-overflow-tooltip :fixed="item.fixed" :key="item.label"
                    v-else-if="item.type === 'custom'" :label="item.label" :width="item.width" :prop="item.prop"
                    :sortable="item.sortable || false" :column-key="item.prop">
                    <template #default="scope">
                        <slot :name="item.slotName" v-bind="scope"></slot>
                    </template>
                </el-table-column>
                <!-- 时间类 -->
                <el-table-column show-overflow-tooltip :fixed="item.fixed" :key="item.label"
                    v-else-if="item.type === 'time'" align="center" :label="item.label" :width="item.width">
                    <template #default="scope">
                        {{ parseTime(scope.row[item.prop]) }}
                    </template>
                </el-table-column>
                <!-- 普通渲染类 -->
                <el-table-column :fixed="item.fixed" show-overflow-tooltip v-else-if="item.type === 'normal'"
                    :key="item.label" v-bind="item" :prop="item.prop" :sortable="item.sortable || false"
                    :column-key="item.prop" />
                <!-- 倒序类 -->
                <el-table-column :fixed="item.fixed" show-overflow-tooltip v-else-if="item.type === 'sortable'"
                    :key="item.label" sortable v-bind="item" />
            </template>
        </el-table>
    </div>
</template>

<script setup lang="ts" name="content">
import useSystemStore from '@/store/main';
import { parseTime } from '@/utils/ruoyi';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore().userInfo.userName === 'admin' ? '' : useUserStore().userInfo.userId;
import { ref, watch } from 'vue';
const props = withDefaults(
    defineProps<{
        contentConfig: {
            pageName: string;
            status: string;
            createUser: string;
            oneself: number;
            header: {
                title: string;
            };
            tableProps: any;
            propsList: any[];
            pageListParams?: {};
            moneyTotal?: boolean;
            energyConsumption?: boolean;
            energyConsumptionType?: boolean;
            energyMonery?: boolean;
            moneyTotalType?: boolean;
            customSubtotal?: boolean;
        };
        sizes?: number[];
        showSummary?: boolean;
        summaryMethod?: () => any;
        subtotalNum?: number;
    }>(),
    {
        sizes: [10, 50, 100, 300, 500],
        customSubtotal: false,
    }
);
const emit = defineEmits(['handleSelect', 'pageChanged']);
const loading = ref(true);

// 请求数据
const systemStore = useSystemStore();

// 获取列表
async function fetchPageListData(queryInfo: any = {}) {
    loading.value = true;
    await systemStore
        .getPageListDataAction(props.contentConfig.pageName, {
            pageNum: systemStore.pageInfo.pageNum,
            pageSize: systemStore.pageInfo.pageSize,
            userId: userStore,
            status: props.contentConfig.status,
            createUser: props.contentConfig.createUser,
            oneself: props.contentConfig.oneself,
            ...queryInfo,
            ...props.contentConfig.pageListParams,
        })
        .then(res => {
            loading.value = false;
        });
}

fetchPageListData();
systemStore.$onAction(arg => {
    if (arg.name === 'newPageDataAction' || arg.name === 'deletePageDataAction') {
        systemStore.pageInfo.pageNum = 1;
        systemStore.pageInfo.pageSize = 50;
    }
});

const { pageList, pageTotalCount, resDate } = storeToRefs(systemStore);
const multipleTableRef = ref();
let subtotal = ref(0 as any);
let subNumber = ref(0 as any);
const clearFlag = ref(true);
const rowDate = reactive<any>([]);
const electricityDosage = ref();
const gasDosage = ref();
const waterDosage = ref();
const electricityTotalPrice = ref();
const gasTotalPrice = ref();
const waterTotalPrice = ref();
watch(
    () => resDate,
    (newValue: any) => {
        if (props.contentConfig?.energyConsumption === true) {
            if (props.contentConfig?.energyConsumptionType === false) {
                rowDate.value = newValue._object.resDate.otherEnergyList
            } else {
                electricityDosage.value = newValue._object.resDate.electricityDosage
                gasDosage.value = newValue._object.resDate.gasDosage
                waterDosage.value = newValue._object.resDate.waterDosage
            }
        } if (props.contentConfig?.energyMonery === true) {
            electricityTotalPrice.value = newValue._object.resDate.electricityDosage
            gasTotalPrice.value = newValue._object.resDate.gasDosage
            waterTotalPrice.value = newValue._object.resDate.waterDosage
        }

    },
    { deep: true }
);
watch(
    () => pageList,
    (newValue: any) => {
        if (clearFlag.value) {
            multipleTableRef.value!.clearSelection();
            subtotal.value = 0;
            subNumber.value = 0;
        }
        clearFlag.value = true;
    },
    { deep: true }
);
// 处理选中状态
const selectedItems = ref([] as any);

const getRowKeys = row => {
    return row.checkId;
};

// 清空多选
function clearSelection() {
    if (pageList) {
        multipleTableRef.value!.clearSelection();
    }
}
// 多选框切换
function handleSelectionChange(e: any) {
    emit('handleSelect', e);
}

// 暴露函数
defineExpose({
    clearSelection,
    fetchPageListData,
});
</script>

<style scoped lang="scss">
.contenBox {
    padding: 15px 20px 20px 20px;
    margin-top: 20px;
    background-color: #fff;

    .table-action {
        margin-bottom: 15px;

        button {
            margin-right: 10px;
        }
    }

    .ivu-table-header thead tr th {
        background-color: #f0f9fe;
    }
}

.customList {
    color: #606266;
    font-weight: 700;
}

.itemName {
    margin: 0 10px 5px 10px;
}

.energyClass {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
}
</style>
