<template>
	<div class="table-box">
		<ProTable
			ref="proTable"
			title="用户列表"
			:columns="columns"
			:requestApi="getTableList"
			:initParam="initParam"
			:dataCallback="dataCallback"
			:tool-button="false"
			:pagination="true"
			background
			:isShowSearch="false"
		>
			<!-- 表格操作 -->
			<template #operation="{ row }">
				<div class="txtLeft">
					<el-button type="primary" link @click="onSee(row)"
						><img src="@/assets/images/tableIcon/look.png" alt="" class="configureIcon" /><span>查看</span></el-button
					>
					<el-button type="primary" link @click="onEdit(row)"
						><img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" /><span>编辑</span></el-button
					>
					<el-button type="primary" link @click="openMap(row)"
						><img src="@/assets/images/tableIcon/修正定位.png" alt="" class="configureIcon" /><span>修正定位</span></el-button
					>
					<el-button v-if="row.examineState !== 3" type="primary" link @click="onApprove(row)"
						><img src="@/assets/images/tableIcon/seal.png" alt="" class="configureIcon" /><span>审批</span></el-button
					>
					<el-button v-if="row.examineState === 3" type="primary" link @click="onState(row)"
						><img src="@/assets/images/tableIcon/修改状态.png" alt="" class="configureIcon" /><span>修改状态</span></el-button
					>
				</div>
				<!-- <el-button type="primary" text @click="onConfiguration(scope.row)">
					<img src="@/assets/images/tableIcon/configureIcon.png" alt="" class="configureIcon" />
					<span>授权配置</span>
				</el-button> -->
				<!-- <el-button @click="test"> test</el-button> -->
			</template>
		</ProTable>
	</div>
	<el-dialog title="审批" width="26%" v-model="aproveVisible" show-close>
		<div style="display: flex; align-items: center">
			<el-icon style="color: #e6a23c; margin: 0 12px; font-size: 20px"><WarningFilled /></el-icon>
			<span>是否通过审批?</span>
		</div>

		<template #footer>
			<span class="dialog-footer">
				<el-button style="background: rgba(0, 0, 0, 0.1); opacity: 1; color: #333; margin-right: 25%" @click="reject"
					>驳回</el-button
				>
				<el-button type="primary" @click="onSubmit">通过</el-button>
			</span>
		</template>
	</el-dialog>
	<el-dialog title="驳回原因" width="26%" v-model="rejectedVisible" show-close>
		<div style="display: flex; align-items: center">
			<el-input v-model="textarea2" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入" />
		</div>

		<template #footer>
			<span class="dialog-footer">
				<el-button
					style="background: rgba(0, 0, 0, 0.1); opacity: 1; color: #333; margin-right: 25%"
					@click="rejectedVisible = false"
					>取消</el-button
				>
				<el-button type="primary" @click="onComfirm">确认</el-button>
			</span>
		</template>
	</el-dialog>
	<el-dialog title="查看工程信息" width="70%" v-model="ennMEssageVisible" show-close>
		<div>
			<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="工程概况" name="first">
					<div class="littleTitle">基本信息</div>
					<div class="overview">
						<el-form ref="formRef" :model="form" disabled label-width="150px" class="form">
							<el-form-item label="项目名称:">
								<el-input v-model="form.projectName" disabled />
							</el-form-item>
							<el-form-item label="工程名称:">
								<el-input v-model="form.engineeringName" />
							</el-form-item>
							<div class="row">
								<el-form-item label="工程编码:">
									<el-input v-model="form.engineeringCode" />
								</el-form-item>
								<el-form-item label="工程类别:">
									<el-select class="select" v-model="form.engineeringTypeName">
										<!-- <el-option
											v-for="item in engineeringTypeOptions"
											:key="item.dictCode"
											:label="item.dictValue"
											:value="item.dictLabel"
										/> -->
									</el-select>
								</el-form-item>
							</div>
							<div class="row">
								<el-form-item label="工程用途:">
									<el-select class="select" v-model="form.engineeringUseName">
										<!-- <el-option
											v-for="item in engineeringPurpose"
											:key="item.dictCode"
											:label="item.dictValue"
											:value="item.dictLabel"
										/> -->
									</el-select>
								</el-form-item>
								<el-form-item label="工程造价（万元）:">
									<el-input v-model="form.engineeringCost" />
								</el-form-item>
							</div>
							<div class="row">
								<el-form-item label="工程总面积（㎡）:">
									<el-input v-model="form.engineeringArea" />
								</el-form-item>
								<el-form-item label="工程总长度（m）:">
									<el-input v-model="form.engineeringLength" />
								</el-form-item>
							</div>
							<div class="row">
								<el-form-item label="是否重点工程:">
									<el-radio-group v-model="form.isImportant">
										<el-radio :label="1">是</el-radio>
										<el-radio :label="0">否</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="工程位置:">
									<!-- <div class="continuous">
										<label class="label"><span>经度</span> <el-input v-model="form.longitude" size="small" /></label>
										<label class="label"><span>纬度</span> <el-input v-model="form.latitude" size="small" /></label> -->

									<el-input v-model="form.position">
										<template #append>
											<el-icon size="22"><Location /></el-icon> </template
									></el-input>
									<!-- </div> -->
									<!-- <el-icon style="background-color: #008bff; color: #fff; height: 42px; width: 30px" size="22"
										><Location
									/></el-icon> -->
								</el-form-item>
							</div>
							<el-form-item label="所属管辖区域:">
								<el-form-item prop="adress">
									<area-selected v-if="ennMEssageVisible" v-model="addressList"></area-selected>
								</el-form-item>
							</el-form-item>
							<el-form-item label="建设地址:">
								<el-input v-model="form.address" />
							</el-form-item>
							<div class="row">
								<el-form-item label="施工许可证号:">
									<el-input v-model="form.licenseKey" />
								</el-form-item>
								<el-form-item label="施工许可发放时间:">
									<el-date-picker
										ref="licenseCreateTimeRef"
										class="date"
										format="YYYY-MM-DD"
										value-format="YYYY-MM-DD"
										v-model="form.licenseCreateTime"
										type="date"
										placeholder="选择日期"
									/>
									<!-- <div class="calendar" @click="licenseCreateTimeRef?.focus()">
										<el-icon class="icon"><Calendar /></el-icon>
									</div> -->
								</el-form-item>
							</div>
							<div class="row">
								<el-form-item label="安全监督站:">
									<el-input v-model="form.safetySupervision" />
								</el-form-item>
								<el-form-item label="质量监督站:">
									<el-input v-model="form.qualitySupervision" />
								</el-form-item>
							</div>
							<div class="row">
								<el-form-item label="监督编号（安全）:">
									<el-input v-model="form.safetySupervisionCode" />
								</el-form-item>
								<el-form-item label="监督编号（质量）:">
									<el-input v-model="form.qualitySupervisionCode" />
								</el-form-item>
							</div>
							<div class="row">
								<el-form-item label="安全监督员:">
									<el-input v-model="form.safetySupervisionPerson" />
								</el-form-item>
								<el-form-item label="质量监督员:">
									<el-input v-model="form.qualitySupervisionPerson" />
								</el-form-item>
							</div>
							<div class="row">
								<el-form-item label="安全监督工程状态:">
									<el-input v-model="form.safetySupervisionState"> </el-input>
								</el-form-item>
								<el-form-item label="质量监督工程状态:">
									<el-input v-model="form.qualitySupervisionState"> </el-input>
								</el-form-item>
							</div>
							<div class="row">
								<el-form-item label="安全监督形象进度:">
									<el-input v-model="form.safetySupervisionPlan"> </el-input>
								</el-form-item>
								<el-form-item label="质量监督形象进度:">
									<el-input v-model="form.qualitySupervisionPlan"> </el-input>
								</el-form-item>
							</div>
							<div class="row">
								<el-form-item label="合同开工日期:">
									<el-date-picker
										ref="startTimeRef"
										class="date"
										format="YYYY-MM-DD"
										value-format="YYYY-MM-DD"
										v-model="form.startTime"
										type="date"
										placeholder="选择日期"
									/>
									<!-- <div class="calendar" @click="startTimeRef?.focus()">
										<el-icon class="icon"><Calendar /></el-icon>
									</div> -->
								</el-form-item>
								<el-form-item label="合同竣工日期:">
									<el-date-picker
										format="YYYY-MM-DD"
										value-format="YYYY-MM-DD"
										ref="endTimeRef"
										class="date"
										v-model="form.endTime"
										type="date"
										placeholder="选择日期"
									/>
									<!-- <div class="calendar" @click="endTimeRef?.focus()">
										<el-icon class="icon"><Calendar /></el-icon>
									</div> -->
								</el-form-item>
							</div>
						</el-form>
						<div class="littleTitle">单体工程</div>
						<div class="table">
							<div class="el-table_main">
								<!-- max-height="340" -->
								<el-table
									:data="form.engineeringSingles"
									border
									:header-cell-style="{ backgroundColor: '#D6E7FF', textAlign: 'center' }"
									:cell-style="{ textAlign: 'center' }"
								>
									<el-table-column prop="name" label="单体工程名称">
										<!-- <template #default="{ row }">
											<el-input class="test" disabled v-model="row.name" />
										</template> -->
									</el-table-column>
									<el-table-column prop="shape" label="结构形式">
										<template #default="{ row }">
											<el-select disabled class="select" v-model="row.shapeName" size="small"> </el-select>
										</template>
									</el-table-column>

									<el-table-column prop="area" label="工程面积（㎡）">
										<!-- <template #default="{ row }">
											<el-input class="test" disabled v-model="row.area" />
										</template> -->
									</el-table-column>
									<el-table-column prop="floorNum" label="地面层数">
										<!-- <template #default="{ row }">
											<el-input class="test" disabled v-model="row.floorNum" />
										</template> -->
									</el-table-column>
									<el-table-column prop="underNum" label="地下层数">
										<!-- <template #default="{ row }">
											<el-input class="test" disabled v-model="row.underNum" />
										</template> -->
									</el-table-column>
									<el-table-column prop="remark" label="备注">
										<!-- <template #default="{ row }">
											<el-input class="test" disabled v-model="row.remark" />
										</template> -->
									</el-table-column>
								</el-table>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="五方责任主体" name="second">
					<div v-for="item in form.engineeringMains">
						<span class="littleTitle">{{ item.typeName }}</span>
						<el-form class="form" ref="formRef" disabled :model="form" label-width="150px" size="default">
							<el-row :gutter="24">
								<el-col :span="12">
									<el-form-item :label="`${item.typeName + '名称：'}`">
										<el-input v-model="item.enterpriseName"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="统一社会信用代码：">
										<el-input v-model="item.creditCode"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="12">
									<el-form-item label="联系人：">
										<el-input v-model="item.legalPerson"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="联系人手机号：">
										<el-input v-model="item.legalPersonTel"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="12">
									<el-form-item v-if="item.contractType" label="承包类型：">
										<el-input v-model="item.contractType"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
						<div class="el-table_main">
							<el-table
								:data="item.engineeringMainPersonList"
								border
								max-height="240"
								style="margin-bottom: 30px"
								:header-cell-style="{ backgroundColor: '#e1eeff', textAlign: 'center' }"
								:cell-style="{ textAlign: 'center' }"
							>
								<el-table-column prop="name" label="姓名">
									<!-- <template #default="{ row }">
										<el-input class="test" disabled v-model="row.name" />
									</template> -->
								</el-table-column>
								<el-table-column prop="jobId" label="职务">
									<template #default="{ row }">
										<el-select class="select" disabled v-model="row.jobName" size="small">
											<el-option v-for="item in jobOptions" :key="item" :label="item" :value="item" />
										</el-select>
									</template>
								</el-table-column>
								<el-table-column prop="station" label="职称/岗位">
									<!-- <template #default="{ row }">
										<el-input class="test" disabled v-model="row.station" />
									</template> -->
								</el-table-column>
								<el-table-column prop="stationCode" label="职称证号/岗位证号">
									<!-- <template #default="{ row }">
										<el-input class="test" disabled v-model="row.stationCode" />
									</template> -->
								</el-table-column>
								<el-table-column prop="idCard" label="身份证号">
									<!-- <template #default="{ row }">
										<el-input class="test" disabled v-model="row.idCard" />
									</template> -->
								</el-table-column>
								<el-table-column prop="phone" label="联系电话">
									<!-- <template #default="{ row }">
										<el-input class="test" disabled v-model="row.phone" />
									</template> -->
								</el-table-column>
							</el-table>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="附件信息" name="third">
					<h4 class="littleTitle">工程附件</h4>
					<div style="width: 90%; margin: 0 auto">
						<el-table
							:data="annexFiles"
							class="el-table"
							:header-cell-style="{ backgroundColor: '#f5f7fa', textAlign: 'center' }"
							:cell-style="{ textAlign: 'center' }"
						>
							<el-table-column type="index" label="序号" width="200" />
							<el-table-column prop="dictValue" label="附件名称" />
							<el-table-column label="操作" width="200">
								<template #default="{ row }">
									<el-button type="primary" link size="small" @click="onAppendix(row)">查看</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>

		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="ennMEssageVisible = false">关闭</el-button>
			</span>
		</template>
	</el-dialog>
	<el-dialog title="编辑工程信息" width="60%" v-model="editennMEssageVisible" show-close>
		<div class="overview">
			<div class="littleTitle">概况信息</div>
			<el-form ref="formRef" :model="editFormData" label-width="150px" class="form" size="default">
				<el-form-item label="项目名称:">
					<el-input v-model="editProjectName" disabled />
				</el-form-item>
				<el-form-item label="工程名称:">
					<el-input v-model="editFormData.engineeringName" />
				</el-form-item>
				<div class="row">
					<el-form-item label="工程编码:">
						<el-input v-model="editFormData.engineeringCode" />
					</el-form-item>
					<el-form-item label="工程造价（万元）:">
						<el-input v-model="editFormData.engineeringCost" />
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="工程总面积（㎡）:">
						<el-input v-model="editFormData.engineeringArea" />
					</el-form-item>
					<el-form-item label="工程总长度（m）:">
						<el-input v-model="editFormData.engineeringLength" />
					</el-form-item>
				</div>

				<el-form-item label="所属管辖区域:">
					<el-form-item prop="adress">
						<area-selected v-if="editennMEssageVisible" v-model="addressList" @get-address="handleGetAdress"></area-selected>
					</el-form-item>
				</el-form-item>
				<el-form-item label="建设地址:">
					<el-input v-model="editFormData.address" />
				</el-form-item>

				<div class="row">
					<el-form-item label="安全监督站:">
						<el-input v-model="editFormData.safetySupervision" />
					</el-form-item>
					<el-form-item label="质量监督站:">
						<el-input v-model="editFormData.qualitySupervision" />
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="监督编号（安全）:">
						<el-input v-model="editFormData.safetySupervisionCode" />
					</el-form-item>
					<el-form-item label="监督编号（质量）:">
						<el-input v-model="editFormData.qualitySupervisionCode" />
					</el-form-item>
				</div>

				<div class="row">
					<el-form-item label="安全监督员:">
						<el-input v-model="editFormData.safetySupervisionPerson" />
					</el-form-item>
					<el-form-item label="质量监督员:">
						<el-input v-model="editFormData.qualitySupervisionPerson" />
					</el-form-item>
				</div>
				<div class="littleTitle" style="margin-left: -10%">补录信息</div>
				<div class="row">
					<el-form-item label="是否重点工程:">
						<el-radio-group v-model="editFormData.isImportant">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="工程类别:">
						<el-select class="select" v-model="editFormData.engineeringType">
							<el-option
								v-for="item in engineeringTypeOptions"
								:key="item.dictCode"
								:label="item.dictValue"
								:value="item.dictLabel"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="工程用途:">
						<el-select class="select" v-model="editFormData.engineeringUse">
							<el-option
								v-for="item in engineeringPurpose"
								:key="item.dictCode"
								:label="item.dictValue"
								:value="item.dictLabel"
							/>
						</el-select>
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="施工许可证号:">
						<el-input v-model="editFormData.licenseKey" />
					</el-form-item>
					<el-form-item label="施工许可发放时间:">
						<el-date-picker
							ref="licenseCreateTimeRef"
							class="date"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							v-model="editFormData.licenseCreateTime"
							type="date"
							placeholder="选择日期"
						/>
						<div class="calendar" @click="licenseCreateTimeRef?.focus()">
							<el-icon class="icon"><Calendar /></el-icon>
						</div>
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="安全监督工程状态:">
						<el-input v-model="editFormData.safetySupervisionState"> </el-input>
					</el-form-item>
					<el-form-item label="质量监督工程状态:">
						<el-input v-model="editFormData.qualitySupervisionState"> </el-input>
					</el-form-item>
				</div>
				<div class="row">
					<el-form-item label="安全监督形象进度:">
						<el-input v-model="editFormData.safetySupervisionPlan"> </el-input>
					</el-form-item>
					<el-form-item label="质量监督形象进度:">
						<el-input v-model="editFormData.qualitySupervisionPlan"> </el-input>
					</el-form-item>
				</div>
			</el-form>
		</div>

		<template #footer>
			<el-button class="cancelButtonStyle" @click="editennMEssageVisible = false">取消</el-button>
			<el-button type="primary" @click="confirm"> 保存 </el-button>
		</template>
	</el-dialog>
	<el-dialog v-model="dialogVisible" title="查看附件" width="30%" show-close>
		<el-table
			:data="current"
			border
			class="el-table"
			:header-cell-style="{ backgroundColor: '#f5f7fa', textAlign: 'center' }"
			:cell-style="{ textAlign: 'center' }"
		>
			<el-table-column prop="fileName" label="文件名称" />
			<el-table-column label="操作" width="200">
				<template #default="{ row }">
					<el-button type="primary" link size="small" @click="onDowmload(row)">下载</el-button>
				</template>
			</el-table-column>
		</el-table>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="dialogVisible = false"> 关闭 </el-button>
			</span>
		</template>
	</el-dialog>
	<el-dialog v-model="stateVisible" title="修改工程状态" width="30%" show-close>
		<el-form :model="stateForm" style="display: flex; justify-content: center" label-width="120px">
			<el-form-item label="工程状态：">
				<el-select v-model="stateForm.stateName" @change="onChange">
					<el-option v-for="item in DicStatusList" :key="item.dictCode" :label="item.dictValue" :value="item.dictLabel" />
				</el-select>
			</el-form-item>
		</el-form>

		<template #footer>
			<span class="dialog-footer">
				<el-button class="cancelButtonStyle" @click="stateVisible = false">取消</el-button>
				<el-button type="primary" @click="onConfirm"> 保存 </el-button>
			</span>
		</template>
	</el-dialog>
	<AMap v-model="isOpen" @get-address="getAddress" :default-address="address" />
	<FileUpload v-model="showFilesUpload"></FileUpload>
</template>

<script setup lang="tsx" name="governMentEngineering">
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";
import { ColumnProps } from "@/components/ProTable/interface";
import ProTable from "@/components/ProTable/index.vue";
import {
	getEngineeringApproveList,
	editProjectApprove,
	getIdEngApproveList,
	getIdEngApprovettable,
	getEditEngApprove,
	rejectEngineeringApprove,
	editEngineeringApprovePosition,
	getEngineeringApproveArea,
	editEngineeringApproveState
} from "@/api/modules/goverment";
import { getDicList, exportApp } from "@/api/modules/jxjview";
import { useDownload } from "@/hooks/useDownload";
import type { TabsPaneContext } from "element-plus";
import AreaSelected from "@/components/ChinaAreaData/index.vue";
import AMap from "@/components/AMap/AMap.vue";
import FileUpload from "@/components/FilesUpload/FilesUpload.vue";
import type { ReqQueryDictData, EngineeringSingle } from "@/api/types";

type DictDataList = Array<ReqQueryDictData>;

const activeName = ref("first");
const textarea2 = ref("");
const route = useRoute();
const aproveVisible = ref(false);
const ennMEssageVisible = ref(false);
const editennMEssageVisible = ref(false);
const rejectedVisible = ref(false);
const isOpen = ref(false);
const showFilesUpload = ref(false);
const dialogVisible = ref(false);
const stateVisible = ref(false);
const form = ref({});
const stateForm = ref({
	dictValue: "",
	dictLabel: undefined,
	dictCode: "",
	stateName: ""
});
const addressList = ref({});
const editProjectName = ref("");
const editFormData = ref();
const annexFiles = ref([]);
const engineeringTypeOptions = ref<DictDataList>([]);
const engineeringPurpose = ref<DictDataList>([]);
const engineeringArea = ref([]);
const address = ref({
	lng: undefined,
	lat: undefined,
	address: ""
});

const handleClick = (tab: TabsPaneContext, event: Event) => {
	console.log(tab, event);
};

const DicTypeList = ref([]);
const DicStatusList = ref([]);

const getDicTypeList = async () => {
	const { result } = await getDicList({ dictType: "engineering_type" });
	DicTypeList.value.length = 0;
	DicTypeList.value.push(...result);
};
getDicTypeList();

const getDicStatusList = async () => {
	const { result } = await getDicList({ dictType: "engineering_state" });
	DicStatusList.value.length = 0;

	DicStatusList.value.push(...result);
};
getDicStatusList();

const getAreaList = async () => {
	const { result } = await getEngineeringApproveArea();
	engineeringArea.value.length = 0;
	engineeringArea.value.push(...result);
};
getAreaList();
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();
// 表格配置项
const columns: ColumnProps[] = [
	{ type: "index", label: "序号", width: 80 },
	{ prop: "engineeringName", label: "工程名称", search: { el: "input" } },
	{
		prop: "engineeringCode",
		label: "工程编号",
		search: { el: "input" }
	},
	// 多级 prop
	{
		prop: "district",
		label: "所在区域",
		enum: engineeringArea?.value,
		search: { el: "select", props: { filterable: true } }
	},
	{
		prop: "engineeringType",
		label: "工程类型",
		enum: DicTypeList.value,
		search: { el: "select", props: { filterable: true } },
		fieldNames: { label: "dictValue", value: "dictLabel" }
	},
	{
		prop: "state",
		label: "工程状态",
		enum: DicStatusList.value,
		search: { el: "select", props: { filterable: true } },
		fieldNames: { label: "dictValue", value: "dictLabel" }
	},
	{
		prop: "examineState",
		label: "审核状态",
		enum: [
			{ label: "全部", value: "" },
			{ label: "已提交", value: 1 },
			{ label: "已退回", value: 2 },
			{ label: "已审核", value: 3 }
		],
		fieldNames: { label: "label", value: "value" },
		search: { el: "select", props: { filterable: true } },
		isShow: false
	},
	{
		prop: "createTime",
		label: "提交时间",
		search: {
			el: "date-picker",
			props: {
				type: "daterange",
				format: "YYYY-MM-DD",
				valueFormat: "YYYY-MM-DD"
				// defaultTime: defaultTime2
			}
		}
	},
	{
		prop: "examineState",
		label: "审核状态"
		// enum: [
		// 	{ label: "全部", value: "" },
		// 	{ label: "已提交", value: 1 },
		// 	{ label: "已退回", value: 2 },
		// 	{ label: "已审核", value: 3 }
		// ],
		// fieldNames: { label: "label", value: "value" },
		// search: { el: "select", props: { filterable: true } }
	},
	{ prop: "operation", label: "操作", fixed: "right", width: 300 }
];

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	// state: 0
});

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
	return {
		list: data.records,
		total: Number(data.total),
		pageNo: Number(data.current),
		pageSize: Number(data.size)
	};
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
	let newParams = JSON.parse(JSON.stringify(params));
	if (newParams.createTime) {
		newParams.createTime_begin = newParams.createTime[0];
		newParams.createTime_end = newParams.createTime[1];
		delete newParams.createTime;
	}

	return getEngineeringApproveList(newParams);
};

const onSee = async row => {
	// console.log(row);
	const res = await getIdEngApproveList({ id: row.id });
	form.value = res.result;
	addressList.value = {
		province: res.result.province,
		city: res.result.city,
		district: res.result.district
	};
	form.value.position = `${"经度：" + res.result.longitude + "，纬度：" + res.result.latitude}`;

	ennMEssageVisible.value = true;
};

const onEdit = async row => {
	// 标记
	const data1 = await getIdEngApprovettable({ id: row.id });
	editProjectName.value = data1.result.projectName;

	const data = await getDicList({ dictType: "engineering_type" });
	engineeringTypeOptions.value = data.result;
	const res = await getDicList({ dictType: "engineering_purpose" }); //工程用途
	engineeringPurpose.value = res.result;
	addressList.value = {
		province: row.province,
		city: row.city,
		district: row.district
	};
	editennMEssageVisible.value = true;
	editFormData.value = reactive({ ...row });
};

const stateId = ref("");

// 修改弹窗
const onState = (row: any) => {
	stateVisible.value = true;
	stateId.value = row.id;
	stateForm.value = reactive({ ...row });
};

const onChange = (val: number) => {
	stateForm.value.dictLabel = val;
};

// 修改工程状态
const onConfirm = async () => {
	// 标记下拉框
	await editEngineeringApproveState({ state: stateForm.value.dictLabel, id: stateId.value });
	ElMessage.success("修改成功");
	stateVisible.value = false;
	proTable.value.getTableList();
};

const reject = async () => {
	rejectedVisible.value = true;
};
const onSubmit = async () => {
	await rejectEngineeringApprove({ id: id.value, suggest: 3 });
	ElMessage.success("通过成功");
	aproveVisible.value = false;
	proTable.value.getTableList();
};

const onComfirm = async () => {
	await rejectEngineeringApprove({ id: id.value, suggest: 2, rejectReason: textarea2.value });
	ElMessage.success("驳回成功");
	rejectedVisible.value = false;
	aproveVisible.value = false;
	proTable.value.getTableList();
};

const id = ref("");
// 审批用户信息
const onApprove = async (row: any) => {
	aproveVisible.value = true;
	id.value = row.id;
};
const confirm = async () => {
	await getEditEngApprove(editFormData.value);
	ElMessage.success("保存成功");
	editennMEssageVisible.value = false;
	proTable.value.getTableList();
};

const openMap = row => {
	console.log(row);
	address.value = { lng: row.longitude, lat: row.latitude, address: row.address };
	isOpen.value = true;
	id.value = row.id;
};

const getAddress = async (e: any) => {
	await editEngineeringApprovePosition({ id: id.value, latitude: e.lat, longitude: e.lng, address: e.address });
	isOpen.value = false;
	ElMessage.success("修改成功");
	proTable.value.getTableList();
};

const current = ref([]);

// 附件信息的查看点击
const onAppendix = row => {
	dialogVisible.value = true;

	current.value = form.value.annexFiles.filter(item => item.label == row.dictLabel);
};

const handleGetAdress = (data: any) => {
	// form.value.address = data;
	editFormData.value.province = data.name[0];
	editFormData.value.city = data.name[1];
	editFormData.value.district = data.name[2];
};

const onDowmload = row => {
	ElMessageBox.confirm("确认下载数据?", "温馨提示", { type: "warning" }).then(() =>
		useDownload(exportApp, `${row.fileName}`, { fileUrl: row.fileUrl })
	);
};

onMounted(async () => {
	const res = await getDicList({ dictType: "attachment_name" });
	annexFiles.value = res.result.map(item => ({ ...item, files: [] }));
});
</script>

<style lang="scss" scoped>
@import "../../../project/supervision/ProjectSupervision/overview.scss";
@import "../../../project/supervision/ProjectSupervision/duty.scss";
.littleTitle {
	border-left: 3px solid #008bff;
	padding-left: 6px;
}
.form {
	padding: 2% 14% 0 8%;
}

.el-table_main {
	padding: 2% 4% 0 4%;
}
:deep(.el-tabs--card > .el-tabs__header) {
	border-bottom: none;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
	width: 600px;
	border: none;
}
:deep(.el-tabs__nav-scroll) {
	display: flex;
	justify-content: center;
	.el-tabs__item {
		width: 33.33%;
		text-align: center;
		// background: #fff;
		color: #333;

		border: 1px solid #aeaeae;
		// border-radius: 8px;
	}
	.el-tabs__item.is-active {
		background-color: #008bff;
		color: #fff;
	}
}
:deep(#tab-first) {
	border-radius: 4px 0 0 4px;
	border-left: 1px solid #aeaeae;
}
:deep(#tab-third) {
	border-radius: 0 4px 4px 0;
}
:deep(.el-input--suffix) {
	width: 100%;
}
.test :deep(.el-input__wrapper) {
	box-shadow: 0 0 0 0;
}
.test :deep(.el-input__inner) {
	text-align: center;
}
</style>
