<template>
	<cl-crud @load="onLoad">
		<el-row type="flex">
			<cl-refresh-btn />
			<cl-add-btn />
			<cl-multi-delete-btn />
			<demo-query-isabnormal />
			<cl-flex1 />
			<cl-search-key
				field="pc_num"
				:field-list="[
					{
						label: '电脑编号',
						value: 'pc_num'
					}
				]"
			></cl-search-key>
		</el-row>

		<el-row>
			<cl-table v-bind="table" >
				<template #column-pc_position="{ scope }">
					<span v-if="scope.row.is_rent == 0">{{
						scope.row.pc_position
					}}</span>
					<span v-if="scope.row.is_rent == 1">
						{{scope.row.pc_position}}（{{scope.row.shop_name}}）
					</span>
				</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-crud>
</template>

<script lang="ts">
import { CrudLoad, Table, Upsert } from "cl-admin-crud-vue3/types";
import { defineComponent, inject, reactive,watch } from "vue";
import QueryIsAbnormal from "../components/query-is_abnormal.vue";

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

	components: {
		"demo-query-isabnormal": QueryIsAbnormal
	},

	setup() {
		const service = inject<any>("service");

		// 表单值
		const form = reactive<any>({
			relevance: 1
		});

		// 新增、编辑配置
		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: "directorId",
					label: "使用人",
					span: 8,
					component: {
						name: "shuyouGameDirectorselect",
						props: {
							placeholder: "使用人"
						}
					}
				},
				{
					prop: "is_rent",
					label: "是否租机",
					value: 0,
					span: 12,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "是",
								value: 1
							},
							{
								label: "否",
								value: 0
							}
						]
					}
				},
				{
					type: "tabs",
					props: {
						labels: [
							{
								label: "基本信息",
								value: "base_msg"
							},
							{
								label: "租机信息",
								value: "rent_msg",
							}
						]
					}
				},
				{
					prop: "pc_position",
					label: "电脑位置",
					span: 8,
					group: "base_msg",
					component: {
						name: "el-input",
						props: {
							placeholder: "电脑位置"
						}
					}
				},
				{
					prop: "pc_mac",
					label: "MAC地址",
					span: 8,
					group: "base_msg",
					component: {
						name: "el-input",
						props: {
							placeholder: "MAC地址"
						}
					}
				},
				{
					prop: "pc_cpuName",
					label: "cpu名称",
					span: 8,
					group: "base_msg",
					component: {
						name: "el-input",
						props: {
							placeholder: "cpu名称"
						}
					}
				},
				{
					prop: "pc_gpu",
					label: "显卡名称",
					span: 8,
					group: "base_msg",
					component: {
						name: "el-input",
						props: {
							placeholder: "显卡名称"
						}
					}
				},
				{
					prop: "pc_memory",
					label: "内存大小",
					span: 8,
					group: "base_msg",
					component: {
						name: "el-input",
						props: {
							placeholder: "内存大小"
						}
					}
				},
				{
					prop: "pc_cpu",
					label: "cpu数",
					span: 8,
					group: "base_msg",
					component: {
						name: "el-input",
						props: {
							placeholder: "cpu数"
						}
					}
				},
				{
					prop: "remark",
					label: "备注",
					span: 24,
					group: "base_msg",
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写备注",
							type: "textarea",
							rows: 3
						}
					}
				},
				{
					prop: "is_abnormal",
					label: "是否异常",
					value: 0,
					group: "base_msg",
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "是",
								value: 1
							},
							{
								label: "否",
								value: 0
							}
						]
					}
				},
				{
					prop: "exception_remark",
					label: "异常说明",
					span: 24,
					group: "base_msg",
					hidden: ({ scope }: any) => {
						return scope.is_abnormal == 0;
					},
					component: {
						name: "el-input",
						props: {
							placeholder: "异常说明",
							type: "textarea",
							rows: 2
						}
					}
				},
				{
					prop: "shop_name",
					label: "租机店铺",
					span: 24,
					group: "rent_msg",
					hidden: ({ scope }: any) => {
						return scope.is_rent != 1;
					},
					component: {
						name: "el-input",
						props: {
							placeholder: "租机店铺"
						}
					},
					rules: {
						required: true,
						message: "租机店铺不能为空"
					}
				},
				{
					prop: "rent_start",
					label: "租机日期",
					span: 12,
					group: "rent_msg",
					value: Date(),
					hidden: ({ scope }: any) => {
						return scope.is_rent != 1;
					},
					component: {
						name: "slot-rent_start"
						// name: "el-date-picker",
						// props: {
						// 	type: "date",
						// 	placeholder: "选择租机日期"
						// }
					},
					rules: {
						required: true,
						message: "租机日期不能为空"
					}
				},
				{
					prop: "rent_duration",
					label: "租机时长",
					value: 1,
					span: 12,
					group: "rent_msg",
					hidden: ({ scope }: any) => {
						return scope.is_rent != 1;
					},
					component: {
						name: "slot-rent_duration"
					},
					rules: {
						required: true,
						message: "租机时长不能为空"
					}
				},
				{
					prop: "rent_end",
					label: "到期时间",
					span: 12,
					group: "rent_msg",
					hidden: ({ scope }: any) => {
						return scope.is_rent != 1;
					},
					component: {
						name: "el-date-picker",
						props: {
							type: "date",
							readonly: true,
							placeholder: "选择到期时间"
						}
					}
				},
				{
					label: "租机价格",
					prop: "rent_price",
					value: 0.00,
					span: 12,
					group: "rent_msg",
					hidden: ({ scope }: any) => {
						return scope.is_rent != 1;
					},
					component: {
						name: "el-input-number",
						props: {
							precision: "2",
							step: "1"
						}
					},
					rules: {
						required: true,
						message: "租机价格不能为空"
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			props: {
				"default-sort": {
					prop: "pc_name",
					order: "descending"
				}
			},
			columns: [
				{
					type: "selection",
					headerAlign: "left",
					align: "left",
					width: 40
				},
				{
					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: "pc_cpuName",
					label: "cpu名称",
					headerAlign: "left",
					align: "left",
					minWidth: 100
				},
				{
					prop: "pc_gpu",
					label: "显卡名称",
					headerAlign: "left",
					align: "left",
					minWidth: 100
				},
				{
					prop: "pc_cpu",
					label: "cpu数",
					headerAlign: "left",
					align: "left",
					minWidth: 100
				},
				{
					prop: "pc_memory",
					label: "内存大小",
					headerAlign: "left",
					align: "left",
					minWidth: 100
				},
				{
					prop: "is_rent",
					label: "电脑归属",
					minWidth: 80,
					dict: [
						{
							label: "租机",
							value: 1,
							type: "info"
						},
						{
							label: "公司",
							value: 0
						}
					]
				},
				{
					prop: "pc_position",
					label: "电脑位置",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 120
				},
				{
					prop: "directorId",
					label: "使用人",
					headerAlign: "left",
					align: "left",
					sortable: "custom",
					minWidth: 100
				},
				{
					prop: "is_abnormal",
					label: "是否异常",
					minWidth: 80,
					dict: [
						{
							label: "正常",
							value: 0,
							type: "success"
						},
						{
							label: "异常",
							value: 1,
							type: "danger"
						}
					]
				},
				{
					prop: "exception_remark",
					label: "异常说明",
					headerAlign: "left",
					align: "left",
					minWidth: 100
				},
				{
					prop: "updateTime",
					label: "更新时间",
					headerAlign: "left",
					align: "left",
					sortable: "custom",
					minWidth: 150
				},
				{
					label: "操作",
					type: "op"
				}
			]
		});

		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			// console.log(service)
			ctx.service(service.shuyouGameComputer).done();
			app.refresh();
		}
		// 计算租机到期时间
		function calculateRentDuration(scope) {
			scope.rent_end = new Date(Date.parse(scope.rent_start) + 1 * 24 * 60 * 60 * 1000 * parseInt(scope.rent_duration))
		}
		// 监听
		watch(
			() => form,
			(newVal, oldValue) => {
				// console.log(newVal, oldValue);
				if(form.is_rent == 1){
					form.pc_position = "租机"
				}
			},
			{
				deep: true,
				immediate: true
			}
		);
		return {
			form,
			upsert,
			table,
			onLoad,
			calculateRentDuration
		};
	}
});
</script>
