<template>
	<cl-crud @load="onLoad">
		<el-row type="flex">
			<cl-refresh-btn />
			<cl-add-btn>新增单个</cl-add-btn>
			<el-button type="primary" size="mini" @click="reqFlag.visible = true"
				>批量上传</el-button
			>
			<cl-multi-delete-btn />
			<cl-flex1 />
			<cl-search-key
				field="account_text"
				:field-list="[
					{
						label: '账号',
						value: 'account_text'
					},
					{
						label: '密码',
						value: 'password_text'
					}
				]"
			></cl-search-key>
		</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-dialog
			title="账号上传界面"
			v-model="reqFlag.visible"
			:props="{
				modal: true,
				customClass: 'cl-chat__dialog',
				'append-to-body': true,
				'close-on-click-modal': false,
				'close-on-press-escape': false
			}"
		>
			<div class="el-div">
				<h3 class="v-line-icon">批量上传账号</h3>
				<el-scrollbar>
					<el-form
						:model="ruleForm"
						ref="ruleForm"
						label-width="100px"
						size="mini"
						class="demo-ruleForm"
						:disabled="saving"
					>
						<el-form-item label="上传时间" prop="uploadday">
							<el-col :span="12">
								<el-date-picker
									v-model="uploadday"
									type="date"
									placeholder="选择日期"
									:disabled-date="disabledDate"
									:shortcuts="shortcuts"
									format="YYYY-MM-DD"
									value-format="YYYY-MM-DD"
								>
								</el-date-picker>
							</el-col>
						</el-form-item>

						<el-form-item label="账号类型" prop="type_id">
							<el-col :span="12">
								<shuyou-accountType-select v-model="type_id" />
							</el-col>
						</el-form-item>

						<el-form-item label="选择文件" prop="">
							<el-col :span="24">
								<cl-upload
									v-model="urls"
									accept=".txt"
									list-type="text"
									:limi="1"
									limit-size="10"
								>
									<el-button size="small" style="width: 100%" type="info"
										>点击上传</el-button
									>
									<div slot="tip" class="el-upload__tip" style="color: #ff4200">
										Tips:
										只能上传txt文件，格式：账号----密码----vpn----manufacturer----model----pnumber----imei----imsi----simserial----androidid----mac
									</div>
									<!-- <el-alert :title="reqFlag.error" v-if="reqFlag.errorTips" type="error" show-icon :closable="false"> </el-alert> -->
								</cl-upload>
							</el-col>
						</el-form-item>
						<el-form-item label="提示备注" prop="remark">
							<el-col :span="6">
								<el-input v-model="remark" placeholder="可备注商家，可不填" />
							</el-col>
						</el-form-item>
						<el-form-item label="账号状态" prop="status">
							<el-col :span="6">
								<el-input
									v-model="status"
									placeholder="账号状态，不填默认为0-正常"
									type="number"
								/>
							</el-col>
						</el-form-item>

						<el-form-item>
							<!-- <el-button type="primary" @click="submitForm('ruleForm')">上传身份证<i class="el-icon-upload el-icon--right"></i></el-button> -->
							<!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
							<el-button
								size="mini"
								type="primary"
								:disabled="saving"
								@click="batchAdd"
							>
								批量上传
								<i class="el-icon-upload el-icon--right"></i>
							</el-button>
						</el-form-item>
					</el-form>
				</el-scrollbar>
			</div>
		</cl-dialog>
		<!-- 重复账号展示dialog -->
		<cl-dialog
			title="账号上传界面"
			v-model="reqFlag.repeat"
			:props="{
				modal: true,
				customClass: 'cl-chat__dialog',
				'append-to-body': true,
				'close-on-click-modal': false,
				'close-on-press-escape': false
			}"
		>
			<div class="el-div">
				<h3 class="v-line-icon">重复账号返回</h3>
				<el-scrollbar>
					<el-form
						:model="ruleForm"
						ref="ruleForm"
						label-width="100px"
						size="mini"
						class="demo-ruleForm"
						:disabled="saving"
					>
						<el-form-item label="返回提示" prop="repeatTips">
							<el-col :span="20">
								<p style="color: red">{{ repeatTips }}</p>
							</el-col>
						</el-form-item>
						<el-form-item label="重复账号" prop="remark">
							<el-col :span="12">
								<el-input
									v-model="repeatAccount"
									type="textarea"
									resize="none"
									:autosize="{ minRows: 10, maxRows: 20 }"
								/>
							</el-col>
						</el-form-item>

						<el-form-item>
							<el-button
								size="mini"
								type="primary"
								:disabled="saving"
								@click="daoTxt"
							>
								导出重复账号
								<i class="el-icon-download el-icon--right"></i>
							</el-button>
						</el-form-item>
					</el-form>
				</el-scrollbar>
			</div>
		</cl-dialog>
	</cl-crud>
</template>

<script lang="ts">
import { CrudLoad, Table, Upsert } from "cl-admin-crud-vue3/types";
import { defineComponent, inject, reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import { currentDate } from "../utils";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import shuyouAccountTypeselect from "../components/shuyouAccountType-select.vue";

export default defineComponent({
	name: "game-account",

	components: {
		"shuyou-accountType-select": shuyouAccountTypeselect
	},

	data() {
		return {
			rules: {
				uploadtime: [{ required: true, message: "请选择上传时间", trigger: "blur" }]
			}
		};
	},

	setup() {
		const service = inject<any>("service");
		// const { refs, setRefs }: any = useRefs();
		const router = useRouter();

		const urls = ref<string>("");

		// 文件列表
		const fileList = ref<any[]>([]);
		// 文本内容
		const accounts = ref<any[]>([]);
		// 标致
		const reqFlag = reactive({
			visible: false,
			repeat: false,
			errorTips: false,
			preview: false,
			error: ""
		});
		const type_id = ref<string>("");
		const status = ref<string>("");
		const remark = ref<string>("");
		const repeatTips = ref<string>("");
		const repeatAccount = ref<string>("");
		// 保存状态
		const saving = ref<boolean>(false);
		// 表单值
		const form = reactive<any>({
			relevance: 1
		});

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

			items: [
				{
					prop: "account_text",
					label: "账号",
					span: 10,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写账号"
						}
					},
					rules: {
						required: true,
						message: "账号不能为空"
					}
				},
				{
					prop: "password_text",
					label: "密码",
					span: 10,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写密码"
						}
					},
					rules: {
						required: true,
						message: "密码不能为空"
					}
				},
				{
					prop: "type_id",
					label: "账号类型",
					span: 10,
					component: {
						name: "shuyouAccountTypeselect",
						props: {
							placeholder: "账号类型"
						}
					},
					rules: {
						required: true,
						message: "账号类型不能为空"
					}
				},
				{
					prop: "vpn_text",
					label: "vpn域",
					span: 10,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写vpn域"
						}
					}
				},
				{
					prop: "manufacturer",
					label: "厂商",
					span: 10,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写厂商"
						}
					}
				},
				{
					prop: "model",
					label: "型号",
					span: 10,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写型号"
						}
					}
				},
				{
					prop: "pnumber",
					label: "手机号",
					span: 10,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写手机号"
						}
					}
				},
				{
					prop: "imei",
					label: "imei",
					span: 10,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写imei"
						}
					}
				},
				{
					prop: "imsi",
					label: "imsi",
					span: 10,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写imsi"
						}
					}
				},
				{
					prop: "simserial",
					label: "序列号",
					span: 10,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写序列号"
						}
					}
				},
				{
					prop: "androidid",
					label: "安卓id",
					span: 10,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写安卓id"
						}
					}
				},
				{
					prop: "mac",
					label: "mac",
					span: 10,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写mac地址"
						}
					}
				},
				{
					prop: "status",
					label: "状态",
					span: 10,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写status"
						}
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			props: {
				"default-sort": {
					prop: "id",
					order: "descending"
				}
			},
			columns: [
				{
					type: "selection",
					width: 60
				},
				{
					prop: "account_text",
					label: "账号",
					sortable: "true",
					minWidth: 120,
					headerAlign: "left",
					align: "left"
				},
				{
					prop: "password_text",
					label: "密码",
					minWidth: 120,
					headerAlign: "left",
					align: "left"
				},
				// {
				// 	prop: "vpn_text",
				// 	label: "vpn域",
				// 	width: 120,
				// 	headerAlign: "left",
				// 	align: "left"
				// },
				// {
				// 	prop: "manufacturer",
				// 	label: "厂商",
				// 	width: 80,
				// 	headerAlign: "left",
				// 	align: "left"
				// },
				// {
				// 	prop: "model",
				// 	label: "型号",
				// 	width: 100,
				// 	headerAlign: "left",
				// 	align: "left"
				// },
				// {
				// 	prop: "pnumber",
				// 	label: "手机号",
				// 	width: 100,
				// 	headerAlign: "left",
				// 	align: "left"
				// },
				// {
				// 	prop: "imei",
				// 	label: "imei",
				// 	width: 130,
				// 	headerAlign: "left",
				// 	align: "left"
				// },
				// {
				// 	prop: "imsi",
				// 	label: "imsi",
				// 	width: 130,
				// 	headerAlign: "left",
				// 	align: "left"
				// },
				// {
				// 	prop: "simserial",
				// 	label: "序列号",
				// 	width: 160,
				// 	headerAlign: "left",
				// 	align: "left"
				// },
				// {
				// 	prop: "androidid",
				// 	label: "安卓id",
				// 	width: 130,
				// 	headerAlign: "left",
				// 	align: "left"
				// },
				// {
				// 	prop: "mac",
				// 	label: "mac",
				// 	width: 120,
				// 	headerAlign: "left",
				// 	align: "left"
				// },
				{
					prop: "type_name",
					label: "账号类型",
					width: 120,
					headerAlign: "left",
					align: "left"
				},
				{
					prop: "status",
					label: "状态",
					minWidth: 80,
					dict: [
						{
							label: "正常",
							value: 0,
							type: "success"
						},
						{
							label: "冻结",
							value: 1,
							type: "warning"
						},
						{
							label: "密错",
							value: 2,
							type: "warning"
						},
						{
							label: "禁用",
							value: 3,
							type: "info"
						},
						{
							label: "人脸",
							value: 5,
							type: "info"
						}
					]
				},
				{
					prop: "frozenTime",
					label: "冻结日期",
					headerAlign: "left",
					align: "left"
				},
				{
					prop: "getTime",
					label: "取走时间",
					headerAlign: "left",
					align: "left"
				},
				{
					prop: "occupy_taskId",
					label: "当前任务",
					headerAlign: "left",
					align: "left"
				},
				{
					prop: "releaseTime",
					label: "释放时间",
					headerAlign: "left",
					align: "left"
				},
				{
					prop: "remark",
					label: "备注",
					width: 120,
					headerAlign: "left",
					align: "left"
				},
				{
					prop: "createTime",
					label: "创建时间",
					sortable: "custom",
					minWidth: 150,
					headerAlign: "left",
					align: "left"
				},
				// {
				// 	prop: "updateTime",
				// 	label: "更新时间",
				// 	sortable: "custom",
				// 	minWidth: 150,
				// 	headerAlign: "left",
				// 	align: "left"
				// },
				{
					label: "操作",
					width: 100,
					type: "op"
				}
			]
		});

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

		const state = reactive({
			disabledDate(time) {
				return time.getTime() > Date.now();
			},
			shortcuts: [
				{
					text: "今天",
					value: new Date()
				},
				{
					text: "昨天",
					value: () => {
						const date = new Date();
						date.setTime(date.getTime() - 3600 * 1000 * 24);
						return date;
					}
				},
				{
					text: "一周前",
					value: () => {
						const date = new Date();
						date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
						return date;
					}
				}
			],
			uploadday: new Date()
		});

		function exportRaw(data, name) {
			var urlObject = window.URL || window.webkitURL || window;
			var export_blob = new Blob([data]);
			var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
			save_link.href = urlObject.createObjectURL(export_blob);
			save_link.download = name;
			save_link.click();
		}
		// 导出txt
		async function daoTxt() {
			var data = repeatAccount.value;
			const { year, month, day, hour, minu, sec } = currentDate();
			var name = `重复账号-${year}-${month}-${day} ${hour}_${minu}_${sec}.txt`;
			exportRaw(data, name);
		}
		// 批量新增
		async function batchAdd() {
			// console.log(type_id.value);
			if (urls.value == "") {
				ElMessage.error("文件为空");
				return;
			}
			saving.value = true;
			const loading = ElLoading.service({
				lock: true,
				text: "上传中,请勿关闭此页面...",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)"
			});
			// console.log(urls);
			const params = {
				uploadday: state.uploadday,
				type_id: type_id.value,
				status: status.value,
				remark: remark.value,
				fileaddress: urls
			};
			await service.shuyouGameAccount
				.batchAdd(params)
				.then((data) => {
					// console.log(data);
					reqFlag.visible = false;
					loading.close();
					// if (data.code == -1) {
					// 	ElMessage.success(data.message);
					// } else {
					// 	ElMessage.success(data.message);
					// }
					if (data.duplicatesAll > 0) {
						reqFlag.repeat = true;
						let dataArr = data.repeat;
						let dataStr = "";
						dataArr.forEach((ee) => {
							dataStr = dataStr + ee.account_text + "----" + ee.password_text + "\n";
						});
						repeatTips.value = data.message;
						repeatAccount.value = dataStr;
					} else {
						ElMessageBox.alert(data.message, "提示", {
							confirmButtonText: "关闭"
						});
					}
				})
				.catch((err: string) => {
					loading.close();
					ElMessageBox.alert(err, "提示", {
						confirmButtonText: "关闭"
					});
				});
			saving.value = false;
		}

		return {
			service,
			form,
			reqFlag,
			fileList,
			accounts,
			repeatTips,
			repeatAccount,
			saving,
			...toRefs(state),
			type_id,
			status,
			remark,
			upsert,
			table,
			onLoad,
			// openFile,
			// dealNum,
			batchAdd,
			daoTxt,
			urls
		};
	},

	methods: {
		// submitForm(formName) {
		//   this.$refs[formName].validate((valid) => {
		//     if (valid) {
		// 		// alert('submit!')
		// 		const params = {
		// 			id_name: '张飞'
		// 		}
		// 		alert(this.accounts[0].name)
		// 		this.$service.shuyou.idCard.data2(params);
		// 		// return this.request({
		// 		// 	url: "/data",
		// 		// 	method: "GET",
		// 		// 	params
		// 		// 	// 参数与 axios 一致
		// 		// });
		//     } else {
		// 		console.log('error submit!!')
		// 		return false
		//     }
		//   })
		// },
		// resetForm(formName) {
		// 	this.$refs[formName].resetFields()
		// 	this.accounts = []
		// },
		// openFile(file,fileList) {
		// 	this.reqFlag.errorTips = false;
		// 	this.fileList = fileList.slice(-1)
		// 	let fileName = file.name
		// 	var reader = new FileReader();
		// 	// alert(fileName)
		// 	let pos = fileName.lastIndexOf('.')
		// 	let lastName = fileName.substring(pos, fileName.length)
		// 	const isLt2M = file.size / 1024 / 1024 < 20
		// 	if (lastName.toLowerCase() !== '.txt') {
		// 		this.reqFlag.error = '请上传.txt文件类型'
		// 		this.reqFlag.errorTips = true;
		// 		this.accounts = []
		// 	} else if (!isLt2M) {
		// 		this.reqFlag.error = '文件大小不能超过10MB'
		// 		this.reqFlag.errorTips = true;
		// 		this.accounts = []
		// 	} else {
		// 		reader.onload = e => this.$emit('load', this.dealNum(reader.result))
		// 		reader.readAsText(file.raw)
		// 	}
		// },
		// dealNum (item) {
		//     // let word = item.replace(/\n|\r\n/g, '<br/>')
		//     let word = item
		//     var dataArr = word.split(/[\r\n]+/) // /[(\r\n)\r\n]+/
		//     dataArr.forEach((item, index) => {
		//         if (!item) {
		//             dataArr.splice(index, 1)// 删除空项
		//         }
		//     })
		//     let objList = []
		//     dataArr.forEach((item, index) => {
		//           let obj = {
		//             index: index,
		//             name: item
		//           }
		//           objList.push(obj)
		//     })
		//     this.accounts = objList
		//     this.reqFlag.preview = true
		// },
	}
});
</script>
<style>
.el-div {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	padding: 10px;
	box-sizing: border-box;
	background-color: #fff;
	overflow: hidden;
}
/* 红色短竖线 start */
.v-line-icon {
	position: relative;
	padding-left: 20px;
	margin-bottom: 20px;
}
.v-line-icon:before {
	position: absolute;
	content: "";
	width: 5px;
	height: 18px;
	left: 10px;
	top: 50%;
	margin-top: -9px;
	border-radius: 2px;
	background: #ff4200;
}

/* 红色短竖线 end */
</style>
