<!--
 * @Author: YKH
 * @Date: 2022-04-14 11:32:18
 * @LastEditTime: 2022-04-14 17:07:35
 * @Description: 
 * @FilePath: \cool-admin\cool-admin-vue-vue3-ts-vite\src\cool\modules\shuyou\views\vx_api_type.vue
-->
<template>
	<cl-crud @load="onLoad">
		<el-row type="flex">
			<cl-refresh-btn />
			<cl-add-btn />
			<cl-multi-delete-btn />
			<cl-flex1 />
		</el-row>

		<el-row>
			<cl-table v-bind="table">
				<!-- <template #column-icon="{ scope }">
					<el-image
					    style="width: 100px; height: 100px"
					    :src="scope.row.icon"
					    :preview-src-list="[scope.row.icon]"
					  />
				</template> -->
			</cl-table>
		</el-row>

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

		<cl-upsert v-model="form" v-bind="upsert" />
	</cl-crud>
</template>

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

export default defineComponent({
	name: "sys-role",

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

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

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

			items: [
				{
					prop: "name",
					label: "平台名称",
					span: 22,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写平台名称"
						}
					},
					rules: {
						required: true,
						message: "平台名称不能为空"
					}
				},
				{
					prop: "description",
					label: "平台描述",
					span: 22,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写平台描述",
							type: "textarea",
							rows: 4
						}
					}
				},
				{
					prop: "account_text",
					label: "平台账号",
					span: 11,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写平台账号"
						}
					},
					rules: {
						required: true,
						message: "平台账号不能为空"
					}
				},
				{
					prop: "password_text",
					label: "平台密码",
					span: 11,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写平台密码"
						}
					},
					rules: {
						required: true,
						message: "平台密码不能为空"
					}
				},
				{
					prop: "mark",
					label: "标识",
					span: 10,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写标识"
						}
					},
					rules: {
						required: true,
						message: "平台标识不能为空"
					}
				},
				{
					prop: "orderUse",
					label: "使用顺序",
					span: 6,
					component: {
						name: "el-input-number",
						props: {
							placeholder: "0"
						}
					}
				},
				{
					prop: "status",
					label: "状态",
					span: 6,
					component: {
						name: "el-switch",
						props: {
							type: "textarea"
						}
					}
				},
				{
					prop: "remark",
					label: "备注",
					span: 22,
					component: {
						name: "el-input",
						props: {
							placeholder: "填写备注",
							type: "textarea",
							rows: 6
						}
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			props: {
				"default-sort": {
					prop: "orderUse",
					order: "descending"
				}
			},
			columns: [
				{
					type: "selection",
					width: 60
				},
				{
					prop: "name",
					label: "平台名称",
					minWidth: 150
				},
				{
					prop: "description",
					label: "平台描述",
					minWidth: 120
				},
				{
					prop: "account_text",
					label: "平台账号",
					minWidth: 120
				},
				{
					prop: "password_text",
					label: "平台密码",
					minWidth: 120
				},
				{
					prop: "mark",
					label: "标识",
					minWidth: 120
				},
				{
					prop: "amount",
					label: "余额",
					minWidth: 120
				},
				{
					prop: "status",
					label: "状态",
					minWidth: 80,
					dict: [
						{
							label: "启用",
							value: 1,
							type: "success"
						},
						{
							label: "禁用",
							value: 0,
							type: "info"
						}
					]
				},
				{
					prop: "orderUse",
					label: "使用顺序",
					sortable: "true",
					minWidth: 120
				},
				{
					prop: "remark",
					label: "备注",
					minWidth: 120
				},
				{
					prop: "createTime",
					label: "创建时间",
					sortable: "custom",
					minWidth: 150
				},
				{
					prop: "updateTime",
					label: "更新时间",
					sortable: "custom",
					minWidth: 150
				},
				{
					label: "操作",
					type: "op"
				}
			]
		});

		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			// console.log(service)
			ctx.service(service.shuyouVXApiType).done();
			app.refresh();
		}

		return {
			form,
			upsert,
			table,
			onLoad
		};
	}
});
</script>
