<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="directorName" :field-list="[
				{
					label: '负责人',
					value: 'directorName'
				}
			]"></cl-search-key>
			<demo-adv-search-reason />
		</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";
import dayjs from "dayjs";
import AdvSearch from "../components/adv-search-reason.vue";

export default defineComponent({
	name: "reason-incomplete",

	components: {
		"demo-adv-search-reason": AdvSearch
	},

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

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

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

			items: [
				{
					prop: "task_id",
					label: "任务ID",
					span: 8,
					component: {
						name: "el-input",
						props: {
							disabled: "true",
							placeholder: "请填写任务ID"
						}
					},
					rules: {
						required: true,
						message: "任务ID不能为空"
					}
				},
				{
					prop: "task_name",
					label: "任务名",
					span: 8,
					component: {
						name: "el-input",
						props: {
							disabled: "true",
							placeholder: "请填写任务名"
						}
					},
					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",
							disabled: "true",
							placeholder: "选择日期",
							format: "YYYY-MM-DD",
							valueFormat: "YYYY-MM-DD"
						}
					},
					rules: {
						required: true,
						message: "日期不能为空"
					}
				},
				{
					prop: "incomplete_new",
					label: "未完成新增",
					span: 8,
					component: {
						name: "el-input",
						props: {
							placeholder: "0"
						}
					},
					rules: {
						required: true,
						message: "未完成新增不能为空"
					}
				},
				{
					prop: "incomplete_pay",
					label: "未完成付费",
					span: 8,
					component: {
						name: "el-input",
						props: {
							placeholder: "0"
						}
					},
					rules: {
						required: true,
						message: "未完成付费不能为空"
					}
				},
				{
					prop: "incomplete_active",
					label: "未完成活跃",
					span: 8,
					component: {
						name: "el-input",
						props: {
							placeholder: "0"
						}
					},
					rules: {
						required: true,
						message: "未完成活跃不能为空"
					}
				},
				{
					prop: "directorName",
					label: "负责人",
					span: 8,
					component: {
						name: "shuyouGameDirectorNameselect",
						props: {
							placeholder: "负责人"
						}
					},
					rules: {
						required: true,
						message: "负责人不能为空"
					}
				},
				{
					prop: "type_id",
					label: "未完类型",
					span: 8,
					component: {
						name: "shuyouProblemTypeselect",
						props: {
							placeholder: "未完类型"
						}
					},
					rules: {
						required: true,
						message: "未完类型不能为空"
					}
				},
				{
					prop: "reason",
					label: "未完原因",
					span: 20,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写未完原因",
							type: "textarea",
							rows: 4
						}
					},
					rules: {
						required: true,
						message: "未完原因不能为空"
					}
				},
				{
					prop: "solution",
					label: "解决方案",
					span: 20,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写解决方案",
							type: "textarea",
							rows: 4
						}
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			props: {
				"default-sort": {
					prop: "new_date",
					order: "descending"
				}
			},
			columns: [
				{
					type: "selection",
					width: 60
				},
				{
					prop: "new_date",
					label: "任务日期",
					minWidth: 150,
					headerAlign: "left",
					align: "left"
				},
				{
					prop: "task_id",
					label: "任务id",
					minWidth: 100,
					sortable: "true",
					headerAlign: "left",
					align: "left"
				},
				{
					prop: "task_name",
					label: "任务名",
					minWidth: 200,
					headerAlign: "left",
					align: "left"
				},
				{
					prop: "directorName",
					label: "负责人",
					minWidth: 80,
					headerAlign: "left",
					align: "left"
				},
				{
					prop: "incomplete_new",
					label: "未完成新增",
					minWidth: 90,
					headerAlign: "left",
					align: "left"
				},
				{
					prop: "incomplete_pay",
					label: "未完成付费",
					minWidth: 90,
					headerAlign: "left",
					align: "left"
				},
				{
					prop: "incomplete_active",
					label: "未完成活跃",
					minWidth: 90,
					headerAlign: "left",
					align: "left"
				},
				{
					prop: "type_id",
					label: "未完类型",
					minWidth: 90
				},
				{
					prop: "reason",
					label: "未完原因",
					minWidth: 300
				},
				{
					prop: "solution",
					label: "解决方案",
					minWidth: 200
				},
				{
					prop: "createTime",
					label: "创建时间",
					sortable: "custom",
					minWidth: 150
				},
				{
					prop: "updateTime",
					label: "更新时间",
					sortable: "custom",
					minWidth: 150
				},
				{
					prop: "is_write",
					label: "是否填写",
					minWidth: 80,
					fixed: "right",
					dict: [
						{
							label: "是",
							value: 1,
							type: "success"
						},
						{
							label: "否",
							value: 0,
							type: "danger"
						}
					]
				},
				{
					type: "op",
					buttons: ["edit"],
					width: 80
				}
			]
		});

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

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