<template>
	<cl-crud :ref="setRefs('crud')" @load="onLoad">
		<el-row type="flex">
			<cl-refresh-btn />
			<cl-add-btn />
			<el-button type="primary" size="mini" @click="visible_import = true"
				>批量导入</el-button
			>

			<el-button type="primary" size="mini"
				><a class="aa" href="http://139.155.68.174:8888/down/e5VpdUAz7GLV"
					><slot>下载模板</slot></a
				></el-button
			>
			<cl-multi-delete-btn />
			<demo-query-is_expire />
			<cl-flex1 />
			<cl-export-btn :columns="table.columns"></cl-export-btn>
			<cl-search-key
				field="pc_num"
				:field-list="[
					{
						label: '电脑编号',
						value: 'pc_num'
					},
					{
						label: '套餐',
						value: 'set_meal'
					}
				]"
			></cl-search-key>
			<demo-adv-computer-search />
		</el-row>

		<el-row>
			<cl-table v-bind="table">
				<template #column-rent_price="{ scope }">
					<span v-if="scope.row.price_type == 0"
						>{{ scope.row.rent_price }}元&nbsp;/&nbsp;天</span
					>
					<span v-if="scope.row.price_type == 1"
						>{{ scope.row.rent_price }}元&nbsp;/&nbsp;周</span
					>
					<span v-if="scope.row.price_type == 2"
						>{{ scope.row.rent_price }}元&nbsp;/&nbsp;月</span
					>
				</template>

				<template #slot-renew="{ scope }">
					<el-button type="text" size="mini" @click="switchRenew(scope.row)"
						>续费</el-button
					>
				</template>
				<template #slot-renting-out="{ scope }">
					<el-button
						v-if="scope.row.is_expire != 1"
						type="text"
						size="mini"
						@click="switchRentingOut(scope.row)"
						>退租</el-button
					>
				</template>
				<template #slot-replace-num="{ scope }">
					<el-button
						v-if="scope.row.is_expire != 1"
						type="text"
						size="mini"
						@click="switchReplaceNum(scope.row)"
						>换编号</el-button
					>
				</template>
				<template #slot-delete="{ scope }">
					<el-button type="text" size="mini" @click="offShelf(scope.row)">下架</el-button>
				</template>
			</cl-table>
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<cl-pagination />
		</el-row>

		<cl-upsert v-model="form" v-bind="upsert">
			<template #slot-rent_start="{ scope }">
				<el-date-picker
					v-model="scope.rent_start"
					type="date"
					@change="calculateRentDuration(scope)"
					placeholder="选择租机日期"
				>
				</el-date-picker>
			</template>
			<template #slot-rent_duration="{ scope }">
				<el-input
					v-model="scope.rent_duration"
					placeholder="租机时长（天）"
					@change="calculateRentDuration(scope)"
				>
				</el-input>
			</template>
		</cl-upsert>

		<cl-dialog title="租机编号更换" v-model="visible_replaceNum">
			<el-form ref="elForm" :model="replaceNumForm" size="medium" label-width="100px">
				<el-row>
					<el-form-item label="警告:" prop="">
						<el-col :span="24">
							<p style="color: red; font-size: larger">
								请勿随意更换，会影响租机续费
							</p>
						</el-col>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="原租机编号" prop="pc_num_old">
						<el-col :span="24">
							<el-input
								v-model="replaceNumForm.pc_num_old"
								placeholder="原租机编号"
								disabled="true"
							></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="更换编号" prop="pc_num_new">
						<el-col :span="24">
							<el-input
								v-model="replaceNumForm.pc_num_new"
								placeholder="更换编号"
							></el-input>
						</el-col>
					</el-form-item>
				</el-row>
				<el-divider />
				<el-form-item>
					<el-button size="small" @click="visible_replaceNum = false">取消</el-button>
					<el-button type="primary" size="small" @click="replaceNum(replaceNumForm)"
						>提交</el-button
					>
				</el-form-item>
			</el-form>
		</cl-dialog>
		<cl-dialog title="租机退租" v-model="visible_rentingOut">
			<el-form ref="elForm" :model="rentingOutForm" size="medium" label-width="100px">
				<el-row>
					<el-form-item label="警告:" prop="">
						<el-col :span="24">
							<p style="color: red; font-size: larger">请勿随意操作！！！</p>
						</el-col>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="租机编号" prop="pc_num">
						<el-col :span="12">
							<el-input
								v-model="rentingOutForm.pc_num"
								placeholder="租机编号"
								disabled="true"
							></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="退租时间" prop="rent_end">
						<el-col>
							<el-date-picker
								v-model="rentingOutForm.rent_end"
								format="YYYY-MM-DD HH:mm:ss"
								type="datetime"
								:style="{ width: '100%' }"
								placeholder="请选择日期"
								clearable
								@change="calculateRentDay(rentingOutForm)"
							></el-date-picker>
						</el-col>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="剩余天数" prop="">
						<el-col :span="24">
							<el-tag :key="rentingOutForm.day" type="warning" effect="light">
								{{ rentingOutForm.day }}
							</el-tag>
						</el-col>
					</el-form-item>
				</el-row>
				<el-row
					><el-col :span="12" style="margin-left: 30px"
						><el-button size="small" @click="addCardMsg()">匀时间</el-button></el-col
					></el-row
				>
				<el-row>
					<div class="container-scrollbar">
						<el-scrollbar max-height="200px">
							<el-row :gutter="24" v-for="(item, index) in cardList" :key="index">
								<el-col :span="10">
									<el-form-item label="租机编号">
										<demo-select-rentComputerList v-model="item.pc_id" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="增加天数">
										<el-input v-model="item.add_day"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="2" v-if="cardList.length !== 1">
									<el-button
										@click="deleteCardMsg(index)"
										class="el-icon-delete"
										size="mini"
										circle
									>
									</el-button>
								</el-col>
							</el-row>
						</el-scrollbar>
					</div>
				</el-row>
				<el-divider />
				<el-form-item>
					<el-button size="small" @click="visible_rentingOut = false">取消</el-button>
					<el-button type="primary" size="small" @click="rentingOut(rentingOutForm)"
						>提交</el-button
					>
				</el-form-item>
			</el-form>
		</cl-dialog>
		<cl-dialog title="租机续费" v-model="visible_renew">
			<el-form ref="elForm" :model="renewForm" size="medium" label-width="100px">
				<el-row>
					<el-form-item label="警告:" prop="">
						<el-col :span="24">
							<p style="color: red; font-size: larger">请勿随意操作！！！</p>
						</el-col>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="租机编号" prop="pc_num">
						<el-col :span="12">
							<el-input
								v-model="renewForm.pc_num"
								placeholder="租机编号"
								disabled="true"
							></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="续费时间" prop="rent_renew">
						<el-col>
							<el-date-picker
								v-model="renewForm.rent_renew"
								format="YYYY-MM-DD HH:mm:ss"
								type="datetime"
								:style="{ width: '100%' }"
								placeholder="请选择日期"
								clearable
								@change="calculateRenewDay(renewForm)"
							></el-date-picker>
						</el-col>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="续费天数" prop="">
						<el-col :span="24">
							<el-tag :key="renewForm.day" type="warning" effect="light">
								{{ renewForm.day }}
							</el-tag>
						</el-col>
					</el-form-item>
				</el-row>
				<el-divider />
				<el-form-item>
					<el-button size="small" @click="visible_renew = false">取消</el-button>
					<el-button type="primary" size="small" @click="renew(renewForm)"
						>提交</el-button
					>
				</el-form-item>
			</el-form>
		</cl-dialog>
		<cl-dialog
			title="批量导入租机信息"
			v-model="visible_import"
			:props="{
				modal: true,
				customClass: 'cl-chat__dialog',
				'append-to-body': true,
				'close-on-click-modal': false,
				'close-on-press-escape': false
			}"
		>
			<div class="el-div">
				<h3 class="v-line-icon">批量导入租机信息</h3>
				<el-form
					ref="elForm"
					:model="importForm"
					size="mini"
					label-width="100px"
					:disabled="saving"
				>
					<el-form-item label="选择文件" prop="">
						<el-col :span="12">
							<cl-upload
								v-model="importForm.urls"
								accept=".xls,.xlsx"
								list-type="text"
								:limi="1"
								limit-size="10"
							>
								<el-button size="small" type="primary">点击上传</el-button>
								<div slot="tip" class="el-upload__tip" style="color: #ff4200">
									Tips: 只能上传.xls,.xlsx文件,且不超过10M
								</div>
								<!-- <el-alert :title="reqFlag.error" v-if="reqFlag.errorTips" type="error" show-icon :closable="false"> </el-alert> -->
							</cl-upload>
						</el-col>
					</el-form-item>
					<el-form-item label="租赁人" prop="type_id">
						<el-col :span="12">
							<shuyou-gameDirector-select v-model="importForm.rent_person_id" />
						</el-col>
					</el-form-item>
					<el-form-item label="供应商名" prop="type_id">
						<el-col :span="12">
							<shuyou-rentComputerShop-select v-model="importForm.shop_id" />
						</el-col>
					</el-form-item>
					<el-form-item>
						<el-button
							size="mini"
							type="primary"
							:disabled="saving"
							@click="batchImport"
						>
							确定导入
							<i class="el-icon-upload el-icon--right"></i>
						</el-button>
					</el-form-item>
				</el-form>
			</div>
		</cl-dialog>
	</cl-crud>
</template>

<script lang="ts">
import { CrudLoad, Table, Upsert } from "cl-admin-crud-vue3/types";
import { defineComponent, inject, reactive, ref } from "vue";
import QueryIsExpire from "../components/query-is_expire.vue";
import shuyouRentComputerListSelect from "../components/shuyouRentComputerList-select.vue";
import dayjs from "dayjs";
import { ElMessage, ElMessageBox, ElLoading } from "element-plus";
import { useRefs } from "/@/core";
import AdvSearch from "../components/adv-search-computer.vue";
import shuyouGameDirectorselect from "../components/shuyouGameDirector-select.vue";
import shuyouRentComputerShopSelect from "../components/shuyouRentComputerShop-select.vue";

export default defineComponent({
	name: "rent-computer",

	components: {
		"demo-query-is_expire": QueryIsExpire,
		"demo-select-rentComputerList": shuyouRentComputerListSelect,
		"demo-adv-computer-search": AdvSearch,
		"shuyou-gameDirector-select": shuyouGameDirectorselect,
		"shuyou-rentComputerShop-select": shuyouRentComputerShopSelect
	},

	setup() {
		const service = inject<any>("service");
		const { refs, setRefs }: any = useRefs();
		// 表单值
		const form = reactive<any>({
			relevance: 1
		});
		const importForm = reactive<any>({
			urls: "",
			rent_person_id: null,
			shop_id: null
		});
		const saving = ref<boolean>(false);
		// 表单值
		const replaceNumForm = reactive<any>({
			pc_num_old: "",
			pc_num_new: "",
			shop_id: 0,
			rent_duration: 0,
			rent_end: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
			set_meal: "",
			price_type: 0,
			rent_price: 0,
			rent_price_day: 0,
			pay_method: 0,
			rent_person_id: ""
		});
		const rentingOutForm = reactive<any>({
			pc_num: "",
			pc_id: 0,
			day: 0,
			rent_end: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
			addList: []
		});
		const renewForm = reactive<any>({
			pc_num: "",
			pc_id: 0,
			day: 0,
			rent_renew: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
		});
		const visible_replaceNum = ref<boolean>(false);
		const visible_rentingOut = ref<boolean>(false);
		const visible_renew = ref<boolean>(false);
		const visible_import = ref<boolean>(false);
		let cardList = ref<any[]>([]);
		const rent_end = ref<string>("");
		const loading = ref<boolean>(false);

		// 新增、编辑配置
		const upsert = reactive<Upsert>({
			width: "800px",

			items: [
				{
					prop: "pc_num",
					label: "电脑编号",
					span: 8,
					component: {
						name: "el-input",
						props: {
							placeholder: "租机方提供的电脑编号"
						}
					},
					rules: {
						required: true,
						message: "电脑编号不能为空"
					}
				},
				{
					prop: "pc_name",
					label: "电脑名称",
					span: 8,
					component: {
						name: "el-input",
						props: {
							placeholder: "脚本上传的电脑名"
						}
					},
					rules: {
						required: true,
						message: "电脑名称不能为空"
					}
				},
				{
					prop: "rent_person_id",
					label: "租赁人",
					span: 8,
					component: {
						name: "shuyouGameDirectorselect",
						props: {
							placeholder: "租赁人"
						}
					}
				},
				{
					prop: "shop_id",
					label: "供应商名",
					span: 8,
					component: {
						name: "shuyouRentComputerShopSelect",
						props: {
							placeholder: "供应商"
						}
					},
					rules: {
						required: true,
						message: "供应商不能为空"
					}
				},
				{
					prop: "set_meal",
					label: "套餐名",
					span: 12,
					component: {
						name: "el-input",
						props: {
							placeholder: "示例：无忧套餐1"
						}
					}
				},
				{
					prop: "rent_start",
					label: "起租时间",
					span: 8,
					value: Date(),
					component: {
						name: "slot-rent_start"
						// name: "el-date-picker",
						// props: {
						// 	type: "date",
						// 	placeholder: "选择租机日期"
						// }
					},
					rules: {
						required: true,
						message: "起租时间不能为空"
					}
				},
				{
					prop: "rent_duration",
					label: "租机时长",
					value: 1,
					span: 8,
					component: {
						name: "slot-rent_duration"
					},
					rules: {
						required: true,
						message: "租机时长不能为空"
					}
				},
				{
					prop: "rent_end",
					label: "到期时间",
					span: 8,
					value: new Date(),
					component: {
						name: "el-date-picker",
						props: {
							type: "date",
							readonly: true,
							placeholder: "选择到期时间"
						}
					}
				},
				{
					prop: "price_type",
					label: "价格套餐",
					value: 0,
					span: 12,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "天卡",
								value: 0
							},
							{
								label: "周卡",
								value: 1
							},
							{
								label: "月卡",
								value: 2
							}
						]
					}
				},
				{
					label: "价格标准",
					prop: "rent_price",
					value: 0.0,
					span: 12,
					component: {
						name: "el-input-number",
						props: {
							precision: "2",
							step: "1"
						}
					},
					rules: {
						required: true,
						message: "租机价格不能为空"
					}
				},
				{
					prop: "taskIdList",
					label: "游戏任务",
					span: 24,
					value: [],
					component: {
						name: "shuyouGameTaskNameselect",
						props: {
							props: {
								// "multiple-limit": 3
							}
						}
					}
				},
				{
					prop: "remark",
					label: "备注",
					span: 24,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写备注",
							type: "textarea",
							rows: 3
						}
					}
				},
				{
					prop: "pay_method",
					label: "结算方式",
					value: 0,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "先付后用",
								value: 0
							},
							{
								label: "先用后付",
								value: 1
							},
							{
								label: "其他方式",
								value: 2
							}
						]
					}
				},
				{
					prop: "is_expire",
					label: "是否到期",
					value: 0,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "在租期中",
								value: 0
							},
							{
								label: "到期未续",
								value: 1
							},
							{
								label: "即将到期",
								value: 2
							}
						]
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			props: {
				"default-sort": {
					prop: "pc_num",
					order: "descending"
				}
			},
			columns: [
				{
					type: "selection",
					headerAlign: "left",
					align: "left",
					width: 40
				},
				{
					prop: "shop_name",
					label: "供应商",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 100
				},
				{
					prop: "set_meal",
					label: "套餐",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 100
				},
				{
					prop: "pc_num",
					label: "电脑编号",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 100
				},
				{
					prop: "pc_name",
					label: "电脑名称",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 120
				},
				{
					prop: "rent_start",
					label: "起租时间",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 150
				},
				{
					prop: "rent_end",
					label: "到期时间",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 150
				},
				{
					prop: "is_expire",
					label: "是否到期",
					minWidth: 80,
					dict: [
						{
							label: "在租期中",
							value: 0,
							type: "success"
						},
						{
							label: "到期未续",
							value: 1,
							type: "info"
						},
						{
							label: "即将到期",
							value: 2,
							type: "danger"
						}
					]
				},
				{
					prop: "rent_duration",
					label: "租机时常",
					headerAlign: "left",
					align: "left",
					minWidth: 80
				},
				{
					prop: "rent_price",
					label: "价格标准",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 120
				},
				{
					prop: "rent_price_day",
					label: "折算天租金",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 120
				},
				// {
				// 	prop: "rent_price_used",
				// 	label: "已产生租金",
				// 	sortable: "true",
				// 	headerAlign: "left",
				// 	align: "left",
				// 	minWidth: 120
				// },
				{
					prop: "directorNameList",
					label: "使用人",
					headerAlign: "left",
					align: "left",
					sortable: "custom",
					minWidth: 100
				},
				{
					prop: "pay_method",
					label: "结算方式",
					minWidth: 80,
					dict: [
						{
							label: "先付后用",
							value: 0,
							type: "primary"
						},
						{
							label: "先用后付",
							value: 1,
							type: "success"
						},
						{
							label: "其他方式",
							value: 2,
							type: "danger"
						}
					]
				},
				{
					prop: "rent_person_name",
					label: "租赁人",
					headerAlign: "left",
					align: "left",
					sortable: "custom",
					minWidth: 100
				},
				{
					prop: "remark",
					label: "备注",
					headerAlign: "left",
					align: "left",
					minWidth: 200
				},
				{
					prop: "updateTime",
					label: "更新时间",
					headerAlign: "left",
					align: "left",
					sortable: "custom",
					minWidth: 150
				},
				{
					type: "op",
					buttons: [
						"edit", //编辑信息
						"slot-renew", //续费
						"slot-renting-out", //退租
						"slot-replace-num", //换编号
						"slot-delete" //删除/下架-管理员专用
					],
					width: 130
				}
			]
		});

		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			// console.log(service)
			ctx.service(service.shuyouRentComputer).done();
			app.refresh();
		}
		// 计算租机到期时间
		function calculateRentDuration(scope: {
			rent_end: Date;
			rent_start: string;
			rent_duration: string;
		}) {
			scope.rent_end = new Date(
				Date.parse(scope.rent_start) +
					1 * 24 * 60 * 60 * 1000 * parseInt(scope.rent_duration)
			);
		}
		// 计算退租剩余时间
		function calculateRentDay(scope: { day: number; rent_end: string }) {
			if (Date.parse(rent_end.value) < Date.parse(scope.rent_end)) {
				scope.rent_end = rent_end.value;
				ElMessage.error("退租时间不能大于到期时间");
			}
			scope.day = Math.ceil(
				parseInt(
					(Date.parse(rent_end.value) - Date.parse(scope.rent_end)) /
						(24 * 60 * 60 * 1000) +
						""
				)
			);
			// console.log(scope.day);
		}
		// 计算续费时间
		function calculateRenewDay(scope: { rent_renew: string; day: number }) {
			if (Date.parse(rent_end.value) >= Date.parse(scope.rent_renew)) {
				scope.rent_renew = rent_end.value;
				ElMessage.error("续费时间不能小于到期时间");
			}
			scope.day = Math.ceil(
				parseInt(
					(Date.parse(scope.rent_renew) - Date.parse(rent_end.value)) /
						(24 * 60 * 60 * 1000) +
						""
				)
			);
		}
		// 拉起续费弹窗
		async function switchRenew(rowData: any) {
			renewForm.pc_num = rowData.pc_num;
			renewForm.pc_id = rowData.id;
			renewForm.rent_renew = rowData.rent_end;
			renewForm.day = 0;
			rent_end.value = rowData.rent_end;
			if (visible_renew.value == false) {
				visible_renew.value = true;
			}
		}
		// 续费
		async function renew(rowData: { pc_num: any; pc_id: any; rent_renew: any; day: any }) {
			let doForm = {
				pc_num: rowData.pc_num,
				pc_id: rowData.pc_id,
				rent_renew: rowData.rent_renew,
				day: rowData.day
			};
			service.shuyouRentComputer
				.renew(doForm)
				.then((data: any) => {
					// console.log(data);
					if (data.code == 1) {
						visible_renew.value = false;
						ElMessage.success(data.message);
					} else {
						ElMessage.error(data.message);
					}
					// console.log('刷新页面')
					refs.value.crud.refresh();
				})
				.catch((err: string) => {
					ElMessage.error(err);
				});
		}
		// 拉起退租弹窗
		async function switchRentingOut(rowData: any) {
			cardList.value = [];
			rentingOutForm.pc_num = rowData.pc_num;
			rentingOutForm.pc_id = rowData.id;
			rentingOutForm.rent_end = rowData.rent_end;
			rentingOutForm.day = 0;
			rent_end.value = rowData.rent_end;
			if (visible_rentingOut.value == false) {
				visible_rentingOut.value = true;
			}
		}
		function addCardMsg() {
			let hasFlag = false;
			for (let i = 0; i < cardList.value.length; i++) {
				if (cardList.value[i].pc_id == "" || cardList.value[i].add_day == "") {
					hasFlag = true;
					break;
				}
			}
			if (hasFlag == true) {
				ElMessage.error("有未填写项");
			} else {
				cardList.value.push({
					pc_id: "",
					add_day: ""
				});
			}
		}
		function deleteCardMsg(index: number) {
			cardList.value.splice(index, 1);
		}
		// 退租
		async function rentingOut(rowData: any) {
			let doForm = {
				pc_num: rowData.pc_num,
				pc_id: rowData.pc_id,
				rent_end: rowData.rent_end,
				addList: cardList.value
			};
			service.shuyouRentComputer
				.rentingOut(doForm)
				.then((data: any) => {
					// console.log(data);
					if (data.code == 1) {
						visible_rentingOut.value = false;
						ElMessage.success(data.message);
					} else {
						ElMessage.error(data.message);
					}
					// console.log('刷新页面')
					refs.value.crud.refresh();
				})
				.catch((err: string) => {
					ElMessage.error(err);
				});
		}
		// 拉起换编号弹窗
		async function switchReplaceNum(rowData: any) {
			replaceNumForm.pc_num_old = rowData.pc_num;
			replaceNumForm.shop_id = rowData.shop_id;
			replaceNumForm.rent_duration = rowData.rent_duration;
			replaceNumForm.rent_end = rowData.rent_end;
			replaceNumForm.set_meal = rowData.set_meal;
			replaceNumForm.price_type = rowData.price_type;
			replaceNumForm.rent_price = rowData.rent_price;
			replaceNumForm.rent_price_day = rowData.rent_price_day;
			replaceNumForm.pay_method = rowData.pay_method;
			replaceNumForm.rent_person_id = rowData.rent_person_id;
			if (visible_replaceNum.value == false) {
				visible_replaceNum.value = true;
			}
		}
		// 换编
		async function replaceNum(rowData: any) {
			let doForm = {
				pc_num_old: rowData.pc_num_old,
				pc_num_new: rowData.pc_num_new,
				shop_id: rowData.shop_id,
				rent_duration: rowData.rent_duration,
				rent_end: rowData.rent_end,
				set_meal: rowData.set_meal,
				price_type: rowData.price_type,
				rent_price: rowData.rent_price,
				rent_price_day: rowData.rent_price_day,
				pay_method: rowData.pay_method,
				rent_person_id: rowData.rent_person_id
				// remark: rowData.remark  //备注说明一下谁换的谁
			};
			service.shuyouRentComputer
				.replaceNum(doForm)
				.then((data: any) => {
					// console.log(data);
					if (data.code == 1) {
						visible_replaceNum.value = false;
						ElMessage.success(data.message);
					} else {
						ElMessage.error(data.message);
					}
					// console.log('刷新页面')
					refs.value.crud.refresh();
				})
				.catch((err: string) => {
					ElMessage.error(err);
				});
		}
		// 删除/下架
		async function offShelf(rowData: { is_expire: number; pc_num: string; id: any }) {
			if (rowData.is_expire != 1) {
				ElMessage.warning("机器未到期,禁止下架!!!");
				return;
			}
			let doForm = {
				pc_id: rowData.id
			};
			console.log(doForm);
			ElMessageBox.confirm("确定要下架编号为" + rowData.pc_num + "的租机吗?", "租机下架", {
				dangerouslyUseHTMLString: true,
				type: "warning"
			})
				.then(() => {
					service.shuyouRentComputer
						.offShelf(doForm)
						.then((data: any) => {
							// console.log(data);
							if (data.code == 1) {
								ElMessage.success(data.message);
							} else {
								ElMessage.error(data.message);
							}
							refs.value.crud.refresh();
						})
						.catch((err: string) => {
							ElMessage.error(err);
						});
				})
				.catch(() => null);
		}
		// 批量导入
		async function batchImport() {
			saving.value = true;
			const loading = ElLoading.service({
				lock: true,
				text: "上传中，请勿关闭此页面...",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)"
			});
			// console.log(importForm.urls);
			const params = {
				fileaddress: importForm.urls,
				rent_person_id: importForm.rent_person_id,
				shop_id: importForm.shop_id
			};
			await service.shuyouRentComputer
				.batchImport(params)
				.then((data) => {
					console.log(data);
					visible_import.value = false;
					loading.close();
					ElMessageBox.alert(data.message, "提示", {
						confirmButtonText: "关闭"
					});
					refs.value.crud.refresh();
				})
				.catch((err: string) => {
					loading.close();
					ElMessageBox.alert(err, "提示", {
						confirmButtonText: "关闭"
					});
				});
			saving.value = false;
		}
		// 监听
		// watch(
		// 	() => form,
		// 	(newVal, oldValue) => {
		// 		// console.log(newVal, oldValue);
		// 		if(form.is_rent == 1){
		// 			form.pc_position = "租机"
		// 		}
		// 	},
		// 	{
		// 		deep: true,
		// 		immediate: true
		// 	}
		// );
		return {
			form,
			refs,
			setRefs,
			upsert,
			table,
			onLoad,
			calculateRentDuration,
			calculateRentDay,
			renew,
			rentingOut,
			replaceNum,
			offShelf,
			switchReplaceNum,
			switchRentingOut,
			visible_replaceNum,
			visible_rentingOut,
			replaceNumForm,
			rentingOutForm,
			addCardMsg,
			deleteCardMsg,
			cardList,
			visible_renew,
			renewForm,
			switchRenew,
			calculateRenewDay,
			visible_import,
			importForm,
			saving,
			batchImport
		};
	}
});
</script>
<style lang="scss" scoped>
.container-scrollbar {
	// border: 1px solid #dcdde0;
	padding-top: 20px;
	border-radius: 3px;
	margin-left: 30px;
}
.aa {
	text-decoration: none;
	color: rgb(255, 255, 255);
}
</style>
