<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 /> -->
			<!-- <demo-query-isfinish /> -->
			<span style="line-height: 25px; margin-left: 5px">{{ now }}</span>
			<cl-flex1 />
			<!-- <p>tips:效率数值分别为：新增/留存/付费</p> -->
			<!-- <p>目标是否完成默认按照最低目标计算</p> -->
			<!-- <cl-search-key
				field="id"
				:field-list="[
					{
						label: '任务id',
						value: 'id'
					}
				]"
			></cl-search-key> -->
			<!-- <cl-export-btn :columns="table.columns"></cl-export-btn> -->
			<demo-adv-search-target-tencent />
		</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 } from "vue";
import AdvSearchTencent from "../components/adv-search-target-tencent.vue";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import { useRefs } from "/@/core";
import { isPc } from "/@/core/utils";

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

	components: {
		"demo-adv-search-target-tencent": AdvSearchTencent
	},

	setup() {
		const barWidth = isPc() ? 100 : 50;
		const service = inject<any>("service");
		const now = ref<string>("");
		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_name",
					label: "任务名称",
					span: 20,
					component: {
						name: "el-input",
						props: {
							disabled: "true",
							placeholder: "任务名称"
						}
					},
					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: "不能为空"
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			props: {
				"default-sort": {
					prop: "new_date",
					order: "descending"
				}
			},
			columns: [
				{
					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: "complete_new",
					label: "完成新增",
					minWidth: 80
				},
				{
					prop: "complete_pay",
					label: "完成付费",
					minWidth: 80
				},
				{
					prop: "complete_active",
					label: "完成活跃",
					minWidth: 80
				},
				{
					prop: "directorName",
					label: "负责人",
					align: "center",
					sortable: "custom",
					fixed: "right",
					minWidth: 90
				},
				{
					prop: "amount",
					label: "付费流水",
					align: "center",
					minWidth: 100
				},
				{
					type: "op",
					fixed: "right",
					buttons: ["edit"],
					width: barWidth
				}
			]
		});

		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			now.value = dayjs(new Date()).format("YYYY-MM-DD");
			ctx.service(service.shuyouGameTargetTencent).done();
			app.refresh();
		}
		// 表单值
		const reasonForm = reactive<any>({
			task_id: "",
			task_name: "",
			new_date: dayjs(new Date()).format("YYYY-MM-DD"),
			directorName: "",
			type_id: 0,
			reason: "",
			solution: ""
		});
		// 调起弹窗
		async function switchPage(xxx) {
			reasonForm.task_id = xxx.task_id;
			reasonForm.task_name = xxx.task_name;
			reasonForm.new_date = xxx.new_date;
			reasonForm.directorName = xxx.directorName;
			reasonForm.type_id = xxx.type_id;
			reasonForm.reason = xxx.reason;
			reasonForm.solution = xxx.solution;
			if (xxx.is_complete == 0) {
				visible.value = true;
			}
		}
		// 填写原因
		async function updateReason(aaa) {
			// console.log(aaa)
			aaa.is_write = 1;
			service.shuyouReasonIncomplete
				.add(aaa)
				.then((data) => {
					visible.value = false;
					// console.log(data.code)
					if (data.code == -1) {
						ElMessage.error(data.message);
					} else {
						ElMessage.success(data.message);
					}
					// console.log('刷新页面')
					refs.value.crud.refresh();
				})
				.catch((err: string) => {
					ElMessage.error(err);
				});
		}

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