<template>
	<cl-crud :ref="setRefs('crud')" @load="onLoad">
		<el-row type="flex">
			<cl-refresh-btn />
			<!-- <cl-add-btn plain>新建目标</cl-add-btn> -->
			<!-- <cl-multi-delete-btn plain /> -->
			<demo-query-isfinish />
			<cl-flex1 />
			<cl-export-btn :columns="table.columns"></cl-export-btn>
			<demo-adv-search-target-business />
		</el-row>

		<el-row>
			<cl-table v-bind="table"> </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, ref, watch } from "vue";
import AdvSearch from "../components/adv-search-target-business.vue";
import dayjs from "dayjs";
import Query from "../components/query-isfinish.vue";
import { useRefs } from "/@/core";

export default defineComponent({
	name: "game-target-business",

	components: {
		"demo-adv-search-target-business": AdvSearch,
		"demo-query-isfinish": Query
	},

	setup() {
		const service = inject<any>("service");
		const { refs, setRefs }: any = useRefs();
		// 表单值
		const form = reactive<any>({
			relevance: 1
		});
		// 是否可见
		const visible = ref<boolean>(false);

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

			items: [
				// {
				// 	prop: "task_id",
				// 	label: "任务ID",
				// 	span: 8,
				// 	component: {
				// 		name: "el-input",
				// 		props: {
				// 			placeholder: "请填写任务ID",
				// 			disabled: true
				// 		}
				// 	},
				// 	rules: {
				// 		required: true,
				// 		message: "任务ID不能为空"
				// 	}
				// },
				{
					prop: "",
					label: "*",
					span: 24,
					value: "只可改当日目标，修改后续目标请告知相关责任人",
					component: {
						name: "el-input",
						props: {
							placeholder: "只可改当日目标，修改后续目标请告知相关责任人",
							disabled: "true",
							inputStyle: ""
						}
					}
				},
				{
					prop: "task_name",
					label: "任务名称",
					span: 8,
					component: {
						name: "el-input",
						props: {
							placeholder: "任务名称",
							disabled: true
						}
					},
					rules: {
						required: true,
						message: "任务名称不能为空"
					}
				},
				{
					prop: "new_date",
					label: "目标日期",
					span: 8,
					value: dayjs(new Date()).format("YYYY-MM-DD"),
					component: {
						name: "el-date-picker",
						props: {
							type: "date",
							placeholder: "选择日期",
							format: "YYYY-MM-DD",
							valueFormat: "YYYY-MM-DD",
							disabled: true
						}
					},
					rules: {
						required: true,
						message: "日期不能为空"
					}
				},
				{
					prop: "directorId",
					label: "负责人",
					span: 8,
					component: {
						name: "shuyouGameDirectorselect",
						props: {
							placeholder: "负责人",
							disabled: true
						}
					},
					rules: {
						required: true,
						message: "负责人不能为空"
					}
				},
				{
					prop: "target_new",
					label: "目标新增",
					span: 8,
					value: 0,
					component: {
						name: "el-input",
						props: {
							placeholder: "目标新增"
						}
					},
					rules: {
						required: true,
						message: "不能为空"
					}
				},
				{
					prop: "target_pay",
					label: "目标付费",
					span: 8,
					value: 0,
					component: {
						name: "el-input",
						props: {
							placeholder: "目标付费"
						},
						on: {
							blur: (val) => {
								alert(val);
							}
						}
					},

					rules: {
						required: true,
						message: "不能为空"
					}
				},
				{
					prop: "target_active",
					label: "目标活跃",
					span: 8,
					value: 0,
					component: {
						name: "el-input",
						props: {
							placeholder: "目标活跃"
						}
					}
				},
				{
					prop: "",
					label: "*",
					span: 24,
					value: "新增不为0的游戏请将活跃目标设为0, 后台会自动计算活跃目标",
					component: {
						name: "el-input",
						props: {
							placeholder: "新增不为0的游戏请将活跃目标设为0, 后台会自动计算活跃目标",
							disabled: "true"
						}
					}
				},
				{
					prop: "",
					label: "*",
					span: 24,
					value: "小绵羊的游戏无需填写付费目标, 后台会自动获取付费目标",
					component: {
						name: "el-input",
						props: {
							placeholder: "小绵羊的游戏无需填写付费目标, 后台会自动获取付费目标",
							disabled: "true"
						}
					}
				}
				//====================================
				// {
				// 	label: "完成新增",
				// 	prop: "complete_new",
				// 	value: 0,
				// 	span: 8,
				// 	group: "complete",
				// 	component: {
				// 		name: "el-input",
				// 		props: {
				// 			placeholder: "完成新增"
				// 		}
				// 	}
				// },
				// {
				// 	prop: "complete_pay",
				// 	label: "完成付费",
				// 	span: 8,
				// 	value: 0,
				// 	group: "complete",
				// 	component: {
				// 		name: "el-input",
				// 		props: {
				// 			placeholder: "完成付费"
				// 		}
				// 	}
				// },
				// {
				// 	prop: "complete_active",
				// 	label: "完成活跃",
				// 	span: 8,
				// 	value: 0,
				// 	group: "complete",
				// 	component: {
				// 		name: "el-input",
				// 		props: {
				// 			placeholder: "完成活跃"
				// 		}
				// 	}
				// }
			]
		});

		// 表格配置
		const table = reactive<Table>({
			props: {
				"default-sort": {
					prop: "new_date,task_id",
					order: "descending"
				}
			},
			columns: [
				// {
				// 	type: "selection",
				// 	width: 60
				// },
				// {
				// 	label: "序",
				// 	type: "index",
				// 	width: 40
				// },
				{
					prop: "new_date",
					label: "目标日期",
					align: "left",
					sortable: "custom",
					minWidth: 100
				},
				// {
				// 	prop: "task_id",
				// 	label: "任务ID",
				// 	align: "left",
				// 	sortable: "custom",
				// 	minWidth: 100
				// },
				{
					prop: "task_name",
					label: "任务名",
					minWidth: 200,
					showOverflowTooltip: true,
					headerAlign: "left",
					align: "left"
				},
				{
					prop: "target_new",
					label: "目标新增",
					minWidth: 80
				},
				{
					prop: "target_pay",
					label: "目标付费",
					minWidth: 80
				},
				{
					prop: "target_active",
					label: "目标活跃",
					minWidth: 80
				},
				{
					prop: "complete_new",
					label: "完成新增",
					minWidth: 80
				},
				{
					prop: "complete_pay",
					label: "完成付费",
					minWidth: 80
				},
				{
					prop: "complete_active",
					label: "完成活跃",
					minWidth: 80
				},
				{
					prop: "incomplete_new",
					label: "未完新增",
					minWidth: 80
				},
				{
					prop: "incomplete_pay",
					label: "未完付费",
					minWidth: 80
				},
				{
					prop: "incomplete_active",
					label: "未完活跃",
					minWidth: 80
				},
				{
					prop: "directorName",
					label: "负责人",
					align: "center",
					sortable: "custom",
					fixed: "right",
					minWidth: 100
				},
				{
					prop: "is_complete",
					label: "完成",
					minWidth: 60,
					fixed: "right",
					dict: [
						{
							label: "是",
							value: 1,
							type: "success"
						},
						{
							label: "否",
							value: 0,
							type: "danger"
						}
					]
				},
				{
					prop: "amount",
					label: "付费流水",
					align: "center",
					minWidth: 100
				},
				{
					prop: "updateTime",
					label: "更新时间",
					sortable: "custom",
					minWidth: 150
				},
				{
					type: "op",
					buttons: ["edit"],
					width: 110
				}
			]
		});

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

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