<template>
	<div>
		<van-pull-refresh v-if="$store.state.app.device == 'mobile'" class="mobile-app-container" v-model="loading" :success-text="$store.state.data.successText"
			@refresh="handlePullDownRefresh">
			<van-sticky :offset-top="$store.state.data.showNavBar?46:0">
				<van-search class="solid-bottom" v-model="queryParams.sn" show-action placeholder="请输入设备号"
					@search="handleQuery">
					<template #action>
						<div @click="handleQuery">搜索</div>
					</template>
				</van-search>
			</van-sticky>
			<van-list v-model:loading="loading" :finished="equipmentList.length >= total"
				:finished-text="$store.state.data.finishedText" @load="handleReachBottom"
				v-if="equipmentList.length > 0">
				<template v-for="item in equipmentList" :key="item.equipmentId">
					<van-cell-group class="margin-tb-xs">
						<!-- <van-cell title="备注" :value="item.id" /> -->
						<van-cell title="设备号" :value="item.sn" />
						<van-cell title="客户公司" :value="item.customerCompany" />
						<van-cell title="联系人" :value="item.customerContacts" />
						<van-cell title="联系方式" :value="item.phone" />
						<van-cell title="iccid卡号" :value="item.iccidNum" />
						<van-cell title="供应商" :value="item.supplier" />
						<van-cell title="运营商">
							<template #value>
								<dict-tag :options="com_operator" :value="item.operator" />
							</template>
						</van-cell>
						<van-cell title="流量套餐" :value="item.flowPackage" />
						<van-cell title="套餐费用" :value="item.packageFee" />
						<van-cell title="注册时间" :value="parseTime(item.registrationTime, '{y}-{m}-{d} {h}:{i}:{s}')" />
						<van-cell title="到期时间" :value="parseTime(item.expirationTime, '{y}-{m}-{d} {h}:{i}:{s}')" />
						<van-cell title="年费" :value="item.annualFee" />
						<van-cell title="所属项目">
							<template #value>
								<dict-tag :options="com_project" :value="item.project" />
							</template>
						</van-cell>
						<van-cell title="车名/船名" :value="item.deviceName" />
						<van-cell title="创建时间" :value="parseTime(item.establishTime, '{y}-{m}-{d} {h}:{i}:{s}')" />
						<van-cell title="备注" :value="item.remarks" />
					</van-cell-group>
				</template>
			</van-list>
			<van-skeleton :row="13" v-if="loading" class="margin-top" />
			<van-empty :description="$store.state.data.emptyDescription"
				v-else-if="loading == false&&equipmentList.length == 0" />


		</van-pull-refresh>



		<div v-else class="app-container">
			<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
				<el-form-item label="设备号" prop="sn">
					<el-input v-model="queryParams.sn" placeholder="请输入设备号" clearable @keyup.enter="handleQuery" />
				</el-form-item>
				<!-- <el-form-item label="客户公司" prop="customerCompany">
					<el-input v-model="queryParams.customerCompany" placeholder="请输入客户公司" clearable
						@keyup.enter="handleQuery" />
				</el-form-item>
				<el-form-item label="联系人" prop="customerContacts">
					<el-input v-model="queryParams.customerContacts" placeholder="请输入联系人" clearable
						@keyup.enter="handleQuery" />
				</el-form-item>
				<el-form-item label="联系方式" prop="phone">
					<el-input v-model="queryParams.phone" placeholder="请输入联系方式" clearable @keyup.enter="handleQuery" />
				</el-form-item>
				<el-form-item label="iccid卡号" prop="iccidNum">
					<el-input v-model="queryParams.iccidNum" placeholder="请输入iccid卡号" clearable
						@keyup.enter="handleQuery" />
				</el-form-item>
				<el-form-item label="供应商" prop="supplier">
					<el-input v-model="queryParams.supplier" placeholder="请输入供应商" clearable @keyup.enter="handleQuery" />
				</el-form-item>
				<el-form-item label="运营商" prop="operator">
					<el-select v-model="queryParams.operator" placeholder="请选择运营商" clearable>
						<el-option v-for="dict in operator" :key="dict.value" :label="dict.label" :value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="流量套餐" prop="flowPackage">
					<el-input v-model="queryParams.flowPackage" placeholder="请输入流量套餐" clearable
						@keyup.enter="handleQuery" />
				</el-form-item>
				<el-form-item label="套餐费用" prop="packageFee">
					<el-input v-model="queryParams.packageFee" placeholder="请输入套餐费用" clearable @keyup.enter="handleQuery" />
				</el-form-item>
				<el-form-item label="注册时间" prop="registrationTime">
					<el-date-picker clearable v-model="queryParams.registrationTime" type="date" value-format="YYYY-MM-DD"
						placeholder="请选择注册时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="到期时间" prop="expirationTime">
					<el-date-picker clearable v-model="queryParams.expirationTime" type="date" value-format="YYYY-MM-DD"
						placeholder="请选择到期时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="年费" prop="annualFee">
					<el-input v-model="queryParams.annualFee" placeholder="请输入年费" clearable @keyup.enter="handleQuery" />
				</el-form-item>
				<el-form-item label="所属项目" prop="project">
					<el-select v-model="queryParams.project" placeholder="请选择所属项目" clearable>
						<el-option v-for="dict in project" :key="dict.value" :label="dict.label" :value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="车名/船名" prop="deviceName">
					<el-input v-model="queryParams.deviceName" placeholder="请输入车名/船名" clearable
						@keyup.enter="handleQuery" />
				</el-form-item>
				<el-form-item label="创建名称" prop="establishTime">
					<el-date-picker clearable v-model="queryParams.establishTime" type="date" value-format="YYYY-MM-DD"
						placeholder="请选择创建名称">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="备注" prop="remarks">
					<el-input v-model="queryParams.remarks" placeholder="请输入备注" clearable @keyup.enter="handleQuery" />
				</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="['equipment:equipment:add']">
						新增
					</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
						v-hasPermi="['equipment:equipment:edit']">修改
					</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
						v-hasPermi="['equipment:equipment:remove']">删除
					</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button type="warning" plain icon="Download" @click="handleExport"
						v-hasPermi="['equipment:equipment:export']">导出
					</el-button>
				</el-col>
				<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
			</el-row>

			<el-table v-loading="loading" :data="equipmentList" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center" />
				<!-- <el-table-column label="备注" align="center" prop="id" /> -->
				<el-table-column label="设备号" align="center" prop="sn" width="100" />
				<el-table-column label="客户信息" align="center">
					<el-table-column label="客户公司" align="center" prop="customerCompany" />
					<el-table-column label="联系人" align="center" prop="customerContacts" />
					<el-table-column label="联系方式" align="center" prop="phone" />
				</el-table-column>
				<el-table-column label="流量卡信息" align="center">
					<el-table-column label="iccid卡号" align="center" prop="iccidNum" :show-overflow-tooltip="true" />
					<el-table-column label="供应商" align="center" prop="supplier" />
					<el-table-column label="运营商" align="center" prop="operator">
						<template #default="scope">
							<dict-tag :options="com_operator" :value="scope.row.operator" />
						</template>
					</el-table-column>
					<el-table-column label="流量套餐" align="center" prop="flowPackage" />
					<el-table-column label="套餐费用" align="center" prop="packageFee" />
				</el-table-column>
				<el-table-column label="客户缴费信息" align="center">
					<el-table-column label="注册时间" align="center" prop="registrationTime" width="100">
						<template #default="scope">
							<span>{{ parseTime(scope.row.registrationTime, '{y}-{m}-{d}') }}</span>
						</template>
					</el-table-column>
					<el-table-column label="到期时间" align="center" prop="expirationTime" width="100">
						<template #default="scope">
							<span>{{ parseTime(scope.row.expirationTime, '{y}-{m}-{d}') }}</span>
						</template>
					</el-table-column>
					<el-table-column label="年费" align="center" prop="annualFee">
						<template #default="scope">
							<span class="text-price">{{scope.row.annualFee}}</span>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column label="项目" align="center">
					<el-table-column label="所属项目" align="center" prop="project" :show-overflow-tooltip="true">
						<template #default="scope">
							<dict-tag :options="com_project" :value="scope.row.project" />
						</template>
					</el-table-column>
					<el-table-column label="车名/船名" align="center" prop="deviceName" :show-overflow-tooltip="true" />
				</el-table-column>
				<el-table-column label="创建时间" align="center" prop="establishTime" width="100">
					<template #default="scope">
						<span>{{ parseTime(scope.row.establishTime, '{y}-{m}-{d}') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true"/>
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200"
					fixed="right">
					<template #default="scope">
						<el-button type="text" icon="View" @click="handleView(scope.row)"
							v-hasPermi="['equipment:equipment:query']">账单</el-button>
						<el-button type="text" icon="Edit" @click="handleUpdate(scope.row)"
							v-hasPermi="['equipment:equipment:edit']">修改
						</el-button>
						<el-button type="text" icon="Delete" @click="handleDelete(scope.row)"
							v-hasPermi="['equipment:equipment: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="600px">
				<el-form ref="equipmentRef" :model="form" :rules="rules" label-width="80px">
					<el-row>
						<el-col :sm="24" :md="12">
							<el-form-item label="设备号" prop="sn">
								<el-input v-model="form.sn" placeholder="请输入设备号" />
							</el-form-item>
						</el-col>
						<el-col :sm="24" :md="12">
							<el-form-item label="客户公司" prop="customerCompany">
								<el-input v-model="form.customerCompany" placeholder="请输入客户公司" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :sm="24" :md="12">
							<el-form-item label="联系人" prop="customerContacts">
								<el-input v-model="form.customerContacts" placeholder="请输入联系人" />
							</el-form-item>
						</el-col>
						<el-col :sm="24" :md="12">
							<el-form-item label="联系方式" prop="phone">
								<el-input v-model="form.phone" placeholder="请输入联系方式" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :sm="24" :md="12">
							<el-form-item label="iccid卡号" prop="iccidNum">
								<el-input v-model="form.iccidNum" placeholder="请输入iccid卡号" />
							</el-form-item>
						</el-col>
						<el-col :sm="24" :md="12">
							<el-form-item label="供应商" prop="supplier">
								<el-input v-model="form.supplier" placeholder="请输入供应商" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :sm="24" :md="12">
							<el-form-item label="运营商" prop="operator">
								<el-select v-model="form.operator" placeholder="请选择运营商">
									<el-option v-for="dict in com_operator" :key="dict.value" :label="dict.label"
										:value="dict.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :sm="24" :md="12">
							<el-form-item label="流量套餐" prop="flowPackage">
								<el-input v-model="form.flowPackage" placeholder="请输入流量套餐" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :sm="24" :md="12">
							<el-form-item label="套餐费用" prop="packageFee">
								<el-input v-model="form.packageFee" placeholder="请输入套餐费用" />
							</el-form-item>
						</el-col>
						<el-col :sm="24" :md="12">
							<el-form-item label="注册时间" prop="registrationTime">
								<el-date-picker clearable v-model="form.registrationTime" type="date"
									value-format="YYYY-MM-DD" placeholder="请选择注册时间">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :sm="24" :md="12">
							<el-form-item label="到期时间" prop="expirationTime">
								<el-date-picker clearable v-model="form.expirationTime" type="date" :disabled="true"
									value-format="YYYY-MM-DD" placeholder="请选择到期时间">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :sm="24" :md="12">
							<el-form-item label="年费(元)" prop="annualFee">
								<el-input v-model="form.annualFee" placeholder="请输入年费" type="number" step="0.01"
									min="0" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :sm="24" :md="12">
							<el-form-item label="所属项目" prop="project">
								<el-select v-model="form.project" placeholder="请选择所属项目">
									<el-option v-for="dict in com_project" :key="dict.value" :label="dict.label"
										:value="dict.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :sm="24" :md="12">
							<el-form-item label="车名/船名" prop="deviceName">
								<el-input v-model="form.deviceName" placeholder="请输入车名/船名" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="备注" prop="remarks">
								<el-input v-model="form.remarks" placeholder="请输入备注" type="textarea" :rows="3"/>
							</el-form-item>
						</el-col>
					</el-row>
				</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>


			<paymentConfigDrawer ref="paymentConfigRef" :configId="equipment.sn" />

		</div>
	</div>







</template>

<script setup name="Equipment">
	import {
		nextTick
	} from 'vue'
	import paymentConfigDrawer from "@/views/desktop/components/paymentConfigDrawer.vue";
	import {
		listEquipment,
		getEquipment,
		delEquipment,
		addEquipment,
		updateEquipment,
		downloadEquipment
	} from "@/api/equipment/equipment";
	const {
		proxy
	} = getCurrentInstance();

	const {
		com_operator,
		com_project
	} = proxy.useDict('com_operator', 'com_project');

	const equipmentList = ref([]);
	const equipment = ref({});
	const open = ref(false);
	// const paymentDetailsOpen = 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,
			sn: null,
			customerCompany: null,
			customerContacts: null,
			phone: null,
			iccidNum: null,
			supplier: null,
			operator: null,
			flowPackage: null,
			packageFee: null,
			registrationTime: null,
			expirationTime: null,
			annualFee: null,
			project: null,
			deviceName: null,
			establishTime: null,
			remarks: null
		},
		rules: {
			sn: [{
				required: true,
				message: "设备号不能为空",
				trigger: "blur"
			}],
		}
	});

	const {
		queryParams,
		form,
		rules
	} = toRefs(data);
	const baseUrl =
		import.meta.env.VITE_APP_BASE_API;

	/** 查询设备列列表 */
	function getList() {
		loading.value = true;
		listEquipment(queryParams.value).then(response => {
			equipmentList.value = response.rows;
			total.value = response.total;
			loading.value = false;
		});
	}

	function addList() {
		loading.value = true;
		listEquipment(queryParams.value)
			.then(response => {
				equipmentList.value.push(...response.rows);
				total.value = response.total;
				if (equipmentList.value.length >= total.value) finished.value = true;
				loading.value = false;
			})
			.catch(response => {
				loading.value = false;
			});
	}

	// 下拉刷新
	function handlePullDownRefresh() {
		queryParams.value.pageNum = 1;
		equipmentList.value = [];
		addList();
	}

	// 滚动到底部的事件
	function handleReachBottom() {
		queryParams.value.pageNum++;
		addList();
	}

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

	// 表单重置
	function reset() {
		form.value = {
			id: null,
			sn: null,
			customerCompany: null,
			customerContacts: null,
			phone: null,
			iccidNum: null,
			supplier: null,
			operator: null,
			flowPackage: null,
			packageFee: null,
			registrationTime: null,
			expirationTime: null,
			annualFee: null,
			project: null,
			deviceName: null,
			establishTime: null,
			remarks: null
		};
		proxy.resetForm("equipmentRef");
	}

	/** 搜索按钮操作 */
	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
		getEquipment(id).then(response => {
			form.value = response.data;
			open.value = true;
			title.value = "修改设备列";
		});
	}

	/** 提交按钮 */
	function submitForm() {
		proxy.$refs["equipmentRef"].validate(valid => {
			if (valid) {
				if (form.value.id != null) {
					updateEquipment(form.value).then(response => {
						proxy.$modal.msgSuccess("修改成功");
						open.value = false;
						getList();
					});
				} else {
					addEquipment(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 delEquipment(ids);
		}).then(() => {
			getList();
			proxy.$modal.msgSuccess("删除成功");
		}).catch(() => {});
	}

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

	/** 详细按钮操作 */
	function handleView(row) {
		// paymentDetailsOpen.value = true;
		equipment.value.sn = row.sn;
		// equipment.value._sn = row.sn
		// console.log(row.id)
		console.log(equipment.value.sn)
		// proxy.$refs["paymentDetailsRef"].show();

		nextTick(() => {

			proxy.$refs["paymentConfigRef"].show();
		})


	}

	getList();
</script>
