<template>
	<el-dialog width="80%" v-model="visible" :show-close="false">
		<template #title>
			<div class="title-detail">
				<!-- <img src="@/assets/images/tableIcon/look.png" alt="" /> -->
				<span>{{ newTitle }}</span>
				<el-icon>
					<close @click="closeMain" />
				</el-icon>
			</div>
		</template>
		<div>
			<el-tabs v-model="activeName" type="card" class="demo-tabs">
				<el-tab-pane label="工程概况" name="first">
					<div class="littleTitle">基本信息</div>
					<div class="overview">
						<el-form ref="formRef" :model="formData" label-width="180px" :rules="rules" class="basic-form" size="default">
							<!-- <el-form ref="formDataRef" :model="formData" label-width="150px" class="basic-form"> -->
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="设备类型:" prop="devName">
										<el-select
											v-model="formData.structureType"
											:disabled="newTitle == '查看设备'"
											placeholder="请选择"
											style="width: 100%"
										>
											<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="是否外地设备:" prop="isForeignDev">
										<el-radio-group placeholder="请选择" v-model="formData.isForeignDev">
											<el-radio :label="1">是</el-radio>
											<el-radio :label="0">否</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="编号性质:" prop="devName">
										<el-select
											v-model="formData.structureType"
											:disabled="newTitle == '查看设备'"
											placeholder="请选择"
											style="width: 100%"
										>
											<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="是否全新设备:" prop="isForeignDev">
										<el-radio-group placeholder="请选择" v-model="formData.isForeignDev">
											<el-radio :label="1">是</el-radio>
											<el-radio :label="0">否</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="规格型号:" prop="model">
										<el-input v-model="formData.model" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="许可证发证机关:" prop="licensingAuthority">
										<el-input v-model="formData.licensingAuthority" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="出厂(合格证):" prop="factoryCertificate">
										<el-input v-model="formData.factoryCertificate" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="工作幅度(m):" prop="workingRange">
										<el-input v-model.number="formData.workingRange" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="最大额定起重量(kg):" prop="maxLiftingCapacity">
										<el-input
											v-model.number="formData.maxLiftingCapacity"
											placeholder="请输入"
											:disabled="newTitle == '查看设备'"
										/>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="独立起升高度(m):" prop="independentLiftingHeight">
										<el-input
											v-model.number="formData.independentLiftingHeight"
											placeholder="请输入"
											:disabled="newTitle == '查看设备'"
										/>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="购置日期:" prop="acquisitionDate">
										<el-date-picker
											:disabled="newTitle == '查看设备'"
											style="width: 100%"
											v-model="formData.acquisitionDate"
											format="YYYY-MM-DD"
											value-format="YYYY-MM-DD"
											type="date"
											placeholder="请选择时间"
										/>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="编号有效期:" prop="numberValidityPeriod">
										<el-date-picker
											:disabled="newTitle == '查看设备'"
											style="width: 100%"
											v-model="formData.numberValidityPeriod"
											format="YYYY-MM-DD"
											value-format="YYYY-MM-DD"
											type="date"
											placeholder="请选择时间"
										/>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="设备原值:" prop="originalValue">
										<el-input v-model.number="formData.originalValue" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="设备改造次数:" prop="renovations">
										<el-input v-model.number="formData.renovations" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="发票编码:" prop="invoiceCode">
										<el-input v-model="formData.invoiceCode" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="购买合同编码:" prop="contractCode">
										<el-input v-model="formData.contractCode" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="生产厂家:" prop="manufacturer">
										<el-input v-model="formData.manufacturer" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="出厂日期:" prop="productionDate">
										<el-date-picker
											:disabled="newTitle == '查看设备'"
											style="width: 100%"
											v-model="formData.productionDate"
											format="YYYY-MM-DD"
											value-format="YYYY-MM-DD"
											type="date"
											placeholder="请选择时间"
										/>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="制造许可证编号:" prop="manufacturerLicense">
										<el-input v-model="formData.manufacturerLicense" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="是否为原购产品:" prop="isOriginalProduct">
										<el-radio-group placeholder="请选择" v-model="formData.isOriginalProduct">
											<el-radio :label="1">是</el-radio>
											<el-radio :label="0">否</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="设备用途:" prop="useTo">
										<el-input v-model="formData.useTo" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="黑匣子信息:" prop="blackBox">
										<el-input v-model="formData.blackBox" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</el-tab-pane>
				<el-tab-pane label="附件信息" name="second">
					<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>
			<el-button class="cancelButtonStyle" @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitForm">保存</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>
</template>
<script lang="ts" setup name="addHoistMachinery">
import { ref, watch, onMounted } from "vue";
import { getDicList, exportApp } from "@/api/modules/jxjview";
import { ElMessage, ElMessageBox } from "element-plus";
import { useDownload } from "@/hooks/useDownload";
const props = defineProps({
	addDialog: Boolean,
	newTitle: String
});
const emits = defineEmits(["update:addDialog"]);
const typeList = ref([]);
const current = ref([]);
const dialogVisible = ref(false);
const annexFiles = ref([]);
const formRef = ref();
const visible = ref(false);
const activeName = ref("first");
const rules = ref({
	devName: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	installTime: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	blackBox: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	structureType: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	installImage: [
		{
			required: true,
			message: "请上传",
			trigger: "change"
		}
	],
	isForeignDev: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],
	isNewDev: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],
	model: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	factoryCertificate: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	workingRange: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	maxLiftingCapacity: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	independentLiftingHeight: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	acquisitionDate: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],
	numberValidityPeriod: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],
	originalValue: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	renovations: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],

	invoiceCode: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],

	manufacturer: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],

	productionDate: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],

	manufacturerLicense: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	isOriginalProduct: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],
	useTo: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	forearmLength: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	posteriorArmLength: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	towerHeight: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	forearmFlag: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	rearArmFlag: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	towerCapFlag: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	upwardTurntableFlag: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	lowerTurntableFlag: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	mastSectionFlag: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	]
});
const formData = ref({
	devName: "",
	installTime: "",
	blackBox: "",
	structureType: "",
	useState: "",
	installImage: "",
	isForeignDev: 0,
	isNewDev: 0,
	model: "",
	licensingAuthority: "",
	factoryCertificate: "",
	workingRange: "",
	maxLiftingCapacity: "",
	independentLiftingHeight: "",
	acquisitionDate: "",
	numberValidityPeriod: "",
	originalValue: "",
	renovations: "",
	invoiceCode: "",
	contractCode: "",
	manufacturer: "",
	productionDate: "",
	manufacturerLicense: "",
	isOriginalProduct: 0,
	useTo: "",
	forearmLength: "",
	posteriorArmLength: "",
	towerHeight: "",
	forearmFlag: "",
	rearArmFlag: "",
	towerCapFlag: "",
	upwardTurntableFlag: "",
	lowerTurntableFlag: "",
	mastSectionFlag: ""
});
const onDowmload = row => {
	ElMessageBox.confirm("确认下载数据?", "温馨提示", { type: "warning" }).then(() =>
		useDownload(exportApp, `${row.fileName}`, { fileUrl: row.fileUrl })
	);
};
// 附件信息的查看点击
const onAppendix = row => {
	dialogVisible.value = true;

	// current.value = form.value.annexFiles.filter(item => item.label == row.dictLabel);
};
// 提交整改情况
const submitForm = async () => {
	console.log(666);
};
// 关闭两个对话框
const closeMain = () => {
	visible.value = false;
};
// 监听父组件的visible，用来简介控制el-dialog的弹框开关，一般是用于开
watch(
	() => props.addDialog,
	(n, o) => {
		visible.value = n;
		if (n) {
			formRef.value?.resetFields();
			formData.value = {
				devName: "",
				installTime: "",
				blackBox: "",
				structureType: "",
				useState: "",
				installImage: "",
				isForeignDev: 0,
				isNewDev: 0,
				model: "",
				licensingAuthority: "",
				factoryCertificate: "",
				workingRange: "",
				maxLiftingCapacity: "",
				independentLiftingHeight: "",
				acquisitionDate: "",
				numberValidityPeriod: "",
				originalValue: "",
				renovations: "",
				invoiceCode: "",
				contractCode: "",
				manufacturer: "",
				productionDate: "",
				manufacturerLicense: "",
				isOriginalProduct: 0,
				useTo: "",
				forearmLength: "",
				posteriorArmLength: "",
				towerHeight: "",
				forearmFlag: "",
				rearArmFlag: "",
				towerCapFlag: "",
				upwardTurntableFlag: "",
				lowerTurntableFlag: "",
				mastSectionFlag: ""
			};
		}
	}
);
// 监听el-dialog显示状态，再通过@update:visible 通知父组件，一般是用于关
watch(visible, (n, o) => {
	emits("update:addDialog", n);
});

onMounted(async () => {
	const res = await getDicList({ dictType: "attachment_name" });
	annexFiles.value = res.result.map(item => ({ ...item, files: [] }));
});
</script>
<style scoped lang="scss">
@mixin flex {
	display: flex;
	align-items: center;
}
.title-detail {
	@include flex;
	border-left: 4px solid #008bff;
	padding-left: 6px;
	// > img {
	// 	width: 16px;
	// 	height: 18px;
	// }
	> span {
		font-size: 18px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-left: 5px;
		margin-right: auto;
	}
	:deep(.el-icon) {
		cursor: pointer;
		color: #a8abb2;
	}
}
.littleTitle {
	margin-top: 23px;
	margin-bottom: 35px;
	border-left: 3px solid #008bff;
	padding-left: 6px;
}
: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: 220px;
		text-align: center;
		// background: #fff;
		color: #333;

		border: 1px solid #aeaeae;
		// border-radius: 8px;
	}
	.el-tabs__item.is-active {
		background-color: #008bff;
		border: 1px solid #008bff;
		color: #fff;
	}
}
:deep(#tab-first) {
	border-radius: 4px 0 0 4px;
	border-left: 1px solid #aeaeae;
}
:deep(#tab-second) {
	border-radius: 0 4px 4px 0;
}
</style>
