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

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

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

		<cl-upsert v-model="form" v-bind="upsert"> </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";
import AdvSearch from "../components/adv-search-ledgerComputer.vue";

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

	components: {
		"demo-query-isabnormal": QueryIsAbnormal,
		"demo-adv-ledgerComputer-search": AdvSearch
	},

	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: "shop_id",
					label: "供应商",
					span: 8,
					component: {
						name: "shuyouRentComputerShopSelect",
						props: {
							placeholder: "供应商"
						}
					},
					rules: {
						required: true,
						message: "供应商不能为空"
					}
				},

				// {
				// 	prop: "rent_start_then",
				// 	label: "起租时间",
				// 	span: 12,
				// 	value: Date(),
				// 	component: {
				// 		name: "el-date-picker",
				// 		props: {
				// 			type: "date",
				// 			readonly: true,
				// 			placeholder: "起租时间"
				// 		}
				// 	},
				// 	rules: {
				// 		required: true,
				// 		message: "起租时间不能为空"
				// 	}
				// },
				// {
				// 	prop: "rent_duration_then",
				// 	label: "租机时长",
				// 	value: 1,
				// 	span: 12,
				// 	component: {
				// 		name: "el-input",
				// 		props: {
				// 			placeholder: "租机时长"
				// 		}
				// 	},
				// 	rules: {
				// 		required: true,
				// 		message: "租机时长不能为空"
				// 	}
				// },
				// {
				// 	prop: "rent_end_then",
				// 	label: "到期时间",
				// 	span: 12,
				// 	component: {
				// 		name: "el-date-picker",
				// 		props: {
				// 			type: "date",
				// 			readonly: true,
				// 			placeholder: "选择到期时间"
				// 		}
				// 	}
				// },
				{
					label: "已产生租金",
					prop: "rent_price_used_then",
					value: 0.0,
					span: 12,
					component: {
						name: "el-input"
					},
					rules: {
						required: true,
						message: "已产生租金不能为空"
					}
				},
				{
					prop: "remark",
					label: "备注",
					span: 24,
					group: "base_msg",
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写备注",
							type: "textarea",
							rows: 3
						}
					}
				},
				{
					prop: "pay_method",
					label: "结算方式",
					value: 0,
					group: "base_msg",
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "先付后用",
								value: 0
							},
							{
								label: "先用后付",
								value: 1
							},
							{
								label: "其他方式",
								value: 2
							}
						]
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			props: {
				"default-sort": {
					prop: "new_date,id",
					order: "descending"
				}
			},
			columns: [
				{
					type: "selection",
					headerAlign: "left",
					align: "left",
					width: 40
				},
				{
					prop: "new_date",
					label: "日期",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 100
				},
				{
					prop: "shop_name",
					label: "供应商",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 180
				},
				{
					prop: "pc_num",
					label: "电脑编号",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 100
				},
				{
					prop: "pc_name",
					label: "机房名称",
					headerAlign: "left",
					align: "left",
					minWidth: 120
				},
				{
					prop: "set_meal",
					label: "套餐",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 150
				},
				{
					prop: "rent_start_then",
					label: "起租时间",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 150
				},
				{
					prop: "rent_end_then",
					label: "到期时间",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 150
				},
				{
					prop: "rent_duration_then",
					label: "租机时常",
					sortable: "true",
					headerAlign: "left",
					align: "left",
					minWidth: 120
				},
				{
					prop: "is_expire",
					label: "是否到期",
					minWidth: 80,
					dict: [
						{
							label: "在租期中",
							value: 0,
							type: "success"
						},
						{
							label: "到期未续",
							value: 1,
							type: "info"
						},
						{
							label: "即将到期",
							value: 2,
							type: "danger"
						}
					]
				},
				{
					prop: "rent_price_then",
					label: "价格标准",
					headerAlign: "left",
					align: "left",
					minWidth: 120
				},
				{
					prop: "rent_price_day",
					label: "折算天租金",
					headerAlign: "left",
					align: "left",
					minWidth: 120
				},
				{
					prop: "rent_price_used_then",
					label: "已产生租金",
					headerAlign: "left",
					align: "left",
					minWidth: 120
				},
				{
					prop: "pay_method",
					label: "结算方式",
					minWidth: 80,
					dict: [
						{
							label: "先付后用",
							value: 0,
							type: "primary"
						},
						{
							label: "先用后付",
							value: 1,
							type: "success"
						},
						{
							label: "其他方式",
							value: 2,
							type: "danger"
						}
					]
				},
				{
					prop: "remark",
					label: "备注",
					headerAlign: "left",
					align: "left",
					minWidth: 300,
					showOverflowTooltip: true
				},
				{
					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.shuyouRentLedgerComputer).done();
			app.refresh();
		}

		return {
			form,
			upsert,
			table,
			onLoad
		};
	}
});
</script>
<style lang="scss" scoped>
.el-tooltip__popper {
	max-width: 20%;
}
.el-tooltip__popper,
.el-tooltip__popper.is-dark {
	background: rgb(48, 65, 86) !important;
	color: #fff !important;
	line-height: 24px;
}
</style>
