<template>
    <div class="root">
        <div class="search-box">
            <el-input v-model="script.filterData.projectName" style="width: 240px; margin-right: 10px" size="large"
                placeholder="项目名称" :suffix-icon="Search" />
            <el-input v-model="script.filterData.siteName" style="width: 240px; margin-right: 10px" size="large"
                placeholder="驻地名称" :suffix-icon="Search" />
            <el-input v-model="script.filterData.constructionUnit" style="width: 240px; margin-right: 10px" size="large"
                placeholder="建设单位" :suffix-icon="Search" />
            <el-input v-model="script.filterData.constructionCompany" style="width: 240px; margin-right: 10px" size="large"
                placeholder="施工单位" :suffix-icon="Search" />
            <el-select v-model="script.filterData.projectType" style="width: 240px; margin-right: 10px" size="large"
                placeholder="项目类型" :suffix-icon="ArrowDown" :options="script.typeOptions" clearable />
            <el-select v-model="script.filterData.siteType" style="width: 240px; margin-right: 10px" size="large"
                placeholder="驻地类型" :suffix-icon="ArrowDown" :options="script.warningLevelOptions" clearable />
            <el-select v-model="script.filterData.riskLevel" style="width: 240px; margin-right: 10px" size="large"
                placeholder="驻地风险等级" :suffix-icon="ArrowDown" :options="script.warningLevelOptions" clearable />
            <el-select v-model="script.filterData.districtCounty" style="width: 240px; margin-right: 10px" size="large"
                placeholder="所属区县" :suffix-icon="ArrowDown" :options="script.warningLevelOptions" clearable />
            <el-input v-model="script.filterData.whistleblowerName" style="width: 240px; margin-right: 10px" size="large"
                placeholder="吹哨人姓名" :suffix-icon="Search" />
            <el-input v-model="script.filterData.constructorResponsiblePerson" style="width: 240px; margin-right: 10px" size="large"
                placeholder="建设单位责任人姓名" :suffix-icon="Search" />
            <el-input v-model="script.filterData.districtResponsiblePerson" style="width: 240px; margin-right: 10px" size="large"
                placeholder="区县级责任人姓名" :suffix-icon="Search" />
            <el-input v-model="script.filterData.cityResponsiblePerson" style="width: 240px; margin-right: 10px" size="large"
                placeholder="市级责任人姓名" :suffix-icon="Search" />
            <el-input v-model="script.filterData.ownerResponsiblePerson" style="width: 240px; margin-right: 10px" size="large"
                placeholder="施工单位责任人姓名" :suffix-icon="Search" />
            <el-input v-model="script.filterData.siteResponsiblePerson" style="width: 240px; margin-right: 10px" size="large"
                placeholder="驻地责任人姓名" :suffix-icon="Search" />
        </div>
        <div class="event-box">
            <el-button type="primary" color="#952DE6" @click="script.exportExcel">导出</el-button>
            <el-button type="primary" @click="">导入</el-button>
        </div>
        <DynamicTable :dataSource="script.tableData.value" :columns="script.columns" :autoHeight="true"
            :pagination="script.pagination">

        </DynamicTable>
        <div class="model-box">
            <MyDialog v-model="script.modelVisible.value" :title="script.model?.title"
                :dynamicComponent="script.model?.content" :component-props="script.model?.props"
                :onConfirm="script.model?.onConfirm" :onCancel="script.model?.onCancel" ref="dialogRef"
                :width="script.model?.width">
            </MyDialog>
            <MyDrawer v-model="script.drawerVisible.value" :title="script.drawer?.title"
                :dynamicComponent="script.drawer?.content" :component-props="script.drawer?.props"
                :onConfirm="script.drawer?.onConfirm" :onCancel="script.drawer?.onCancel" ref="drawerRef"
                :direction="script.drawer?.direction" :size="script.drawer?.size"></MyDrawer>
        </div>
    </div>
</template>

<script setup>
import DynamicTable from "../../component/DynamicTable";
import { Search, ArrowDown, CaretBottom } from "@element-plus/icons-vue";
import MyDialog from "../../component/MyDialog";
import MyDrawer from "../../component/MyDrawer";

import scriptFn from "./index.js";
const script = scriptFn();
const { dialogRef, drawerRef } = script;
</script>

<style scoped>
.search-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.root {
    height: 100%;
    padding: 25px;
}

.event-box {
    margin: 20px 0;
    display: flex;
    justify-content: flex-start;
}
</style>