<template>
    <div class="sensitive-words">
        <pageSearch ref="searchTableRef" :searchConfig="searchConfig" />

        <pageContent ref="tableListRef" :total="total" :contentConfig="contentConfig" :pageList="tableData">
            <template #button>
                <el-button type="primary" @click="handleAdd()"
                    v-hasPermi="['business:rentalCompany:add']">新增</el-button>
            </template>
            <!-- 水 -->
            <template #water="scope">
                <div class="flex">
                    <!-- <div class="mr5">
                        谷值:<span>{{ scope.row.energyList[0].peakUnitPrice }}</span>
                    </div>
                    <div class="mr5">
                        峰值:<span>{{ scope.row.energyList[0].valleyValueUnitPrice }}</span>
                    </div> -->
                    <div>
                        平段单价:<span>{{ scope.row.energyList[0].averageUnitPrice }}</span>
                    </div>
                </div>
            </template>
            <!-- 电 -->
            <template #electric="scope">
                <div class="flex">
                    <!-- <div class="mr5">
                        谷值:<span>{{ scope.row.energyList[1].peakUnitPrice }}</span>
                    </div>
                    <div class="mr5">
                        峰值:<span>{{ scope.row.energyList[1].valleyValueUnitPrice }}</span>
                    </div> -->
                    <div>
                        平段单价:<span>{{ scope.row.energyList[1].averageUnitPrice }}</span>
                    </div>
                </div>
            </template>
            <!-- 燃气 -->
            <template #coal="scope">
                <div class="flex">
                    <!-- <div class="mr5">
                        谷值:<span>{{ scope.row.energyList[2].peakUnitPrice }}</span>
                    </div>
                    <div class="mr5">
                        峰值:<span>{{ scope.row.energyList[2].valleyValueUnitPrice }}</span>
                    </div> -->
                    <div>
                        平段单价:<span>{{ scope.row.energyList[2].averageUnitPrice }}</span>
                    </div>
                </div>
            </template>
            <template #operate="scope">
                <el-button type="primary" link @click="handleEdit(scope.row.rentalCompanyId)"
                    v-hasPermi="['business:rentalCompany:edit']">
                    编辑
                </el-button>
                <el-button type="primary" link @click="handleDelete(scope.row.rentalCompanyId)"
                    v-hasPermi="['business:rentalCompany:remove']">
                    删除
                </el-button>
            </template>
        </pageContent>
        <pageDetail :modalConfig="detailConfig" ref="modalRef"> </pageDetail>
    </div>
</template>

<script setup lang="ts">
import { ComponentInternalInstance } from 'vue';
// import { useRouter } from 'vue-router';
import router from '@/router';
import contentConfig from './config/content.config';
import pageContent from '@/components/components/pageContent.vue';
import searchConfig from './config/search.config';
import pageSearch from '@/components/components/pageSearch.vue';
import detailConfig from './config/detail.config';
import pageDetail from './components/detail.vue';
import useSystemStore from '@/store/main';
// 使用pinia数据
const systemStore = useSystemStore();
const { pageDetailInfo } = storeToRefs(systemStore);

const total = ref(0);
const pageSize = ref([10, 20, 30]);
const tableData = ref([]);
const tableListRef = ref();

// 操作弹框
import usePageModal from '@/components/components/hooks/usePageDetails';
const { modalRef, handleNewDataClick, handleEditDataClick, handleCheckDataClick, handlePageDetail } =
    usePageModal();

const handleEdit = async (id: string) => {
    await handlePageDetail(id);
    await handleEditDataClick();
};

// 新增按钮
const handleAdd = () => {
    handleNewDataClick();
};
const searchTableRef = ref();
const onClickDeleta = async (row: any) => {
    ElMessageBox.confirm('确认删除此条数据吗？', '删除', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        // 删除后的回调
    });
};
// 删除按钮
function handleDelete(value: any) {
    ElMessageBox.confirm('是否删除这条数据？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            systemStore.deletePageDataAction(contentConfig.pageName, value);
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            });
        });
}

// 筛选-状态赋值
async function searchItem() {
    searchConfig.formItems.forEach(item => {
        if (item.prop === 'status') {
            // item.options = searchList.value;
        }
    });
}
searchItem();
</script>

<style scoped lang="scss">
.sensitive-words {
    margin: 20px;
    // background-color: #fff;
}

.status {
    cursor: pointer;
    position: relative;

    .status-tip {
        position: absolute;
        top: 2px;
        left: 60px;
    }
}

.dialog-tip {
    text-align: center;
}
</style>
