<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="	创建人名称	" prop="createName">
				<el-input v-model="queryParams.createName" placeholder="请输入	创建人名称	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	更新人名称	" prop="updateName">
				<el-input v-model="queryParams.updateName" placeholder="请输入	更新人名称	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	甲烷C1	" prop="ngC1">
				<el-input v-model="queryParams.ngC1" placeholder="请输入	甲烷C1	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	氮气N2	" prop="ngN2">
				<el-input v-model="queryParams.ngN2" placeholder="请输入	氮气N2	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	二氧化碳CO2	" prop="ngCo2">
				<el-input v-model="queryParams.ngCo2" placeholder="请输入	二氧化碳CO2	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	乙烷C2	" prop="ngC2">
				<el-input v-model="queryParams.ngC2" placeholder="请输入	乙烷C2	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	丙烷C3	" prop="ngC3">
				<el-input v-model="queryParams.ngC3" placeholder="请输入	丙烷C3	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	水H2O	" prop="ngH2o">
				<el-input v-model="queryParams.ngH2o" placeholder="请输入	水H2O	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	硫化氢H2S	" prop="ngH2s">
				<el-input v-model="queryParams.ngH2s" placeholder="请输入	硫化氢H2S	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	氢气H2	" prop="ngH2">
				<el-input v-model="queryParams.ngH2" placeholder="请输入	氢气H2	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	一氧化碳CO	" prop="ngCo">
				<el-input v-model="queryParams.ngCo" placeholder="请输入	一氧化碳CO	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	氧气O2	" prop="ngO2">
				<el-input v-model="queryParams.ngO2" placeholder="请输入	氧气O2	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	异丁烷iC4	" prop="ngIc4">
				<el-input v-model="queryParams.ngIc4" placeholder="请输入	异丁烷iC4	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	正丁烷nC4	" prop="ngNc4">
				<el-input v-model="queryParams.ngNc4" placeholder="请输入	正丁烷nC4	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	异戊烷iC5	" prop="ngIc5">
				<el-input v-model="queryParams.ngIc5" placeholder="请输入	异戊烷iC5	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	正戊烷nC5	" prop="ngNc5">
				<el-input v-model="queryParams.ngNc5" placeholder="请输入	正戊烷nC5	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	己烷C6	" prop="ngC6">
				<el-input v-model="queryParams.ngC6" placeholder="请输入	己烷C6	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	庚烷C7	" prop="ngC7">
				<el-input v-model="queryParams.ngC7" placeholder="请输入	庚烷C7	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	辛烷C8	" prop="ngC8">
				<el-input v-model="queryParams.ngC8" placeholder="请输入	辛烷C8	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	壬烷C9	" prop="ngC9">
				<el-input v-model="queryParams.ngC9" placeholder="请输入	壬烷C9	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	癸烷C10	" prop="ngC10">
				<el-input v-model="queryParams.ngC10" placeholder="请输入	癸烷C10	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	氦气He	" prop="ngHe">
				<el-input v-model="queryParams.ngHe" placeholder="请输入	氦气He	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="	氩气Ar	" prop="ngAr">
				<el-input v-model="queryParams.ngAr" placeholder="请输入	氩气Ar	" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="合计" prop="sum">
				<el-input v-model="queryParams.sum" placeholder="请输入合计" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="取样编号" prop="sampleno">
				<el-input v-model="queryParams.sampleno" placeholder="请输入取样编号" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="仪表编号" prop="meterno">
				<el-input v-model="queryParams.meterno" placeholder="请输入仪表编号" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="常用组分" prop="cyzf">
				<el-select v-model="queryParams.cyzf" placeholder="请选择常用组分" clearable>
					<el-option v-for="dict in ngtools_cyzf" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
				<el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['ngtools:components:add']">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['ngtools:components:edit']">修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['ngtools:components:remove']">删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['ngtools:components:export']">导出</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="componentsList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="	ID	" align="center" prop="id" />
			<el-table-column label="	创建人名称	" align="center" prop="createName" />
			<el-table-column label="	更新人名称	" align="center" prop="updateName" />
			<el-table-column label="	甲烷C1	" align="center" prop="ngC1" />
			<el-table-column label="	氮气N2	" align="center" prop="ngN2" />
			<el-table-column label="	二氧化碳CO2	" align="center" prop="ngCo2" />
			<el-table-column label="	乙烷C2	" align="center" prop="ngC2" />
			<el-table-column label="	丙烷C3	" align="center" prop="ngC3" />
			<el-table-column label="	水H2O	" align="center" prop="ngH2o" />
			<el-table-column label="	硫化氢H2S	" align="center" prop="ngH2s" />
			<el-table-column label="	氢气H2	" align="center" prop="ngH2" />
			<el-table-column label="	一氧化碳CO	" align="center" prop="ngCo" />
			<el-table-column label="	氧气O2	" align="center" prop="ngO2" />
			<el-table-column label="	异丁烷iC4	" align="center" prop="ngIc4" />
			<el-table-column label="	正丁烷nC4	" align="center" prop="ngNc4" />
			<el-table-column label="	异戊烷iC5	" align="center" prop="ngIc5" />
			<el-table-column label="	正戊烷nC5	" align="center" prop="ngNc5" />
			<el-table-column label="	己烷C6	" align="center" prop="ngC6" />
			<el-table-column label="	庚烷C7	" align="center" prop="ngC7" />
			<el-table-column label="	辛烷C8	" align="center" prop="ngC8" />
			<el-table-column label="	壬烷C9	" align="center" prop="ngC9" />
			<el-table-column label="	癸烷C10	" align="center" prop="ngC10" />
			<el-table-column label="	氦气He	" align="center" prop="ngHe" />
			<el-table-column label="	氩气Ar	" align="center" prop="ngAr" />
			<el-table-column label="合计" align="center" prop="sum" />
			<el-table-column label="取样编号" align="center" prop="sampleno" />
			<el-table-column label="仪表编号" align="center" prop="meterno" />
			<el-table-column label="常用组分" align="center" prop="cyzf">
				<template #default="scope">
					<dict-tag :options="ngtools_cyzf" :value="scope.row.cyzf" />
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template #default="scope">
					<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['ngtools:components:edit']">修改</el-button>
					<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['ngtools:components:remove']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

		<!-- 添加或修改天然气组分对话框 -->
		<el-dialog :title="title" v-model="open" width="500px" append-to-body>
			<el-form ref="componentsRef" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="	创建人名称	" prop="createName">
					<el-input v-model="form.createName" placeholder="请输入	创建人名称	" />
				</el-form-item>
				<el-form-item label="	更新人名称	" prop="updateName">
					<el-input v-model="form.updateName" placeholder="请输入	更新人名称	" />
				</el-form-item>
				<el-form-item label="	甲烷C1	" prop="ngC1">
					<el-input v-model="form.ngC1" placeholder="请输入	甲烷C1	" />
				</el-form-item>
				<el-form-item label="	氮气N2	" prop="ngN2">
					<el-input v-model="form.ngN2" placeholder="请输入	氮气N2	" />
				</el-form-item>
				<el-form-item label="	二氧化碳CO2	" prop="ngCo2">
					<el-input v-model="form.ngCo2" placeholder="请输入	二氧化碳CO2	" />
				</el-form-item>
				<el-form-item label="	乙烷C2	" prop="ngC2">
					<el-input v-model="form.ngC2" placeholder="请输入	乙烷C2	" />
				</el-form-item>
				<el-form-item label="	丙烷C3	" prop="ngC3">
					<el-input v-model="form.ngC3" placeholder="请输入	丙烷C3	" />
				</el-form-item>
				<el-form-item label="	水H2O	" prop="ngH2o">
					<el-input v-model="form.ngH2o" placeholder="请输入	水H2O	" />
				</el-form-item>
				<el-form-item label="	硫化氢H2S	" prop="ngH2s">
					<el-input v-model="form.ngH2s" placeholder="请输入	硫化氢H2S	" />
				</el-form-item>
				<el-form-item label="	氢气H2	" prop="ngH2">
					<el-input v-model="form.ngH2" placeholder="请输入	氢气H2	" />
				</el-form-item>
				<el-form-item label="	一氧化碳CO	" prop="ngCo">
					<el-input v-model="form.ngCo" placeholder="请输入	一氧化碳CO	" />
				</el-form-item>
				<el-form-item label="	氧气O2	" prop="ngO2">
					<el-input v-model="form.ngO2" placeholder="请输入	氧气O2	" />
				</el-form-item>
				<el-form-item label="	异丁烷iC4	" prop="ngIc4">
					<el-input v-model="form.ngIc4" placeholder="请输入	异丁烷iC4	" />
				</el-form-item>
				<el-form-item label="	正丁烷nC4	" prop="ngNc4">
					<el-input v-model="form.ngNc4" placeholder="请输入	正丁烷nC4	" />
				</el-form-item>
				<el-form-item label="	异戊烷iC5	" prop="ngIc5">
					<el-input v-model="form.ngIc5" placeholder="请输入	异戊烷iC5	" />
				</el-form-item>
				<el-form-item label="	正戊烷nC5	" prop="ngNc5">
					<el-input v-model="form.ngNc5" placeholder="请输入	正戊烷nC5	" />
				</el-form-item>
				<el-form-item label="	己烷C6	" prop="ngC6">
					<el-input v-model="form.ngC6" placeholder="请输入	己烷C6	" />
				</el-form-item>
				<el-form-item label="	庚烷C7	" prop="ngC7">
					<el-input v-model="form.ngC7" placeholder="请输入	庚烷C7	" />
				</el-form-item>
				<el-form-item label="	辛烷C8	" prop="ngC8">
					<el-input v-model="form.ngC8" placeholder="请输入	辛烷C8	" />
				</el-form-item>
				<el-form-item label="	壬烷C9	" prop="ngC9">
					<el-input v-model="form.ngC9" placeholder="请输入	壬烷C9	" />
				</el-form-item>
				<el-form-item label="	癸烷C10	" prop="ngC10">
					<el-input v-model="form.ngC10" placeholder="请输入	癸烷C10	" />
				</el-form-item>
				<el-form-item label="	氦气He	" prop="ngHe">
					<el-input v-model="form.ngHe" placeholder="请输入	氦气He	" />
				</el-form-item>
				<el-form-item label="	氩气Ar	" prop="ngAr">
					<el-input v-model="form.ngAr" placeholder="请输入	氩气Ar	" />
				</el-form-item>
				<el-form-item label="合计" prop="sum">
					<el-input v-model="form.sum" placeholder="请输入合计" />
				</el-form-item>
				<el-form-item label="取样编号" prop="sampleno">
					<el-input v-model="form.sampleno" placeholder="请输入取样编号" />
				</el-form-item>
				<el-form-item label="仪表编号" prop="meterno">
					<el-input v-model="form.meterno" placeholder="请输入仪表编号" />
				</el-form-item>
				<el-form-item label="常用组分" prop="cyzf">
					<el-select v-model="form.cyzf" placeholder="请选择常用组分">
						<el-option v-for="dict in ngtools_cyzf" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="Components">
import { listComponents, getComponents, delComponents, addComponents, updateComponents } from '@/api/ngtools/components';

const { proxy } = getCurrentInstance();
const { ngtools_cyzf } = proxy.useDict('ngtools_cyzf');

const componentsList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref('');

const data = reactive({
	form: {},
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		createName: null,
		updateName: null,
		ngC1: null,
		ngN2: null,
		ngCo2: null,
		ngC2: null,
		ngC3: null,
		ngH2o: null,
		ngH2s: null,
		ngH2: null,
		ngCo: null,
		ngO2: null,
		ngIc4: null,
		ngNc4: null,
		ngIc5: null,
		ngNc5: null,
		ngC6: null,
		ngC7: null,
		ngC8: null,
		ngC9: null,
		ngC10: null,
		ngHe: null,
		ngAr: null,
		sum: null,
		sampleno: null,
		meterno: null,
		cyzf: null
	},
	rules: {}
});

const { queryParams, form, rules } = toRefs(data);

/** 查询天然气组分列表 */
function getList() {
	loading.value = true;
	listComponents(queryParams.value).then((response) => {
		componentsList.value = response.rows;
		total.value = response.total;
		loading.value = false;
	});
}

// 取消按钮
function cancel() {
	open.value = false;
	reset();
}

// 表单重置
function reset() {
	form.value = {
		id: null,
		createName: null,
		createBy: null,
		createTime: null,
		updateName: null,
		updateBy: null,
		updateTime: null,
		ngC1: null,
		ngN2: null,
		ngCo2: null,
		ngC2: null,
		ngC3: null,
		ngH2o: null,
		ngH2s: null,
		ngH2: null,
		ngCo: null,
		ngO2: null,
		ngIc4: null,
		ngNc4: null,
		ngIc5: null,
		ngNc5: null,
		ngC6: null,
		ngC7: null,
		ngC8: null,
		ngC9: null,
		ngC10: null,
		ngHe: null,
		ngAr: null,
		sum: null,
		sampleno: null,
		meterno: null,
		cyzf: null
	};
	proxy.resetForm('componentsRef');
}

/** 搜索按钮操作 */
function handleQuery() {
	queryParams.value.pageNum = 1;
	getList();
}

/** 重置按钮操作 */
function resetQuery() {
	proxy.resetForm('queryRef');
	handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
	ids.value = selection.map((item) => item.id);
	single.value = selection.length != 1;
	multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
	reset();
	open.value = true;
	title.value = '添加天然气组分';
}

/** 修改按钮操作 */
function handleUpdate(row) {
	reset();
	const _id = row.id || ids.value;
	getComponents(_id).then((response) => {
		form.value = response.data;
		open.value = true;
		title.value = '修改天然气组分';
	});
}

/** 提交按钮 */
function submitForm() {
	proxy.$refs['componentsRef'].validate((valid) => {
		if (valid) {
			if (form.value.id != null) {
				updateComponents(form.value).then((response) => {
					proxy.$modal.msgSuccess('修改成功');
					open.value = false;
					getList();
				});
			} else {
				addComponents(form.value).then((response) => {
					proxy.$modal.msgSuccess('新增成功');
					open.value = false;
					getList();
				});
			}
		}
	});
}

/** 删除按钮操作 */
function handleDelete(row) {
	const _ids = row.id || ids.value;
	proxy.$modal
		.confirm('是否确认删除天然气组分编号为"' + _ids + '"的数据项？')
		.then(function () {
			return delComponents(_ids);
		})
		.then(() => {
			getList();
			proxy.$modal.msgSuccess('删除成功');
		})
		.catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
	proxy.download(
		'ngtools/components/export',
		{
			...queryParams.value
		},
		`components_${new Date().getTime()}.xlsx`
	);
}

getList();
</script>
