<template>
	<div class="system-edit-user-container" v-loading="loading">
		<el-dialog :title="submitName + '企业'" v-model="isShowDialog" width="70%" :close-on-click-modal="false">
			<el-form :model="form" ref="refForm" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="公司名称" prop="name" :rules="[{ required: true, message: '公司名称不能为空' }]">
							<el-input type="text" v-model="form.name" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="公司规模" prop="size" :rules="[{ required: true, message: '请选择公司规模' }]">
							<el-select v-model="form.size" placeholder="请选择">
								<el-option v-for="item in companySizeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="注册金额" prop="register_amount" :rules="[{ required: true, message: '注册金额不能为空' }]">
							<div class="dis_inb width120"><el-input type="text" v-model="form.register_amount" autocomplete="off"></el-input></div>
							<div class="dis_inb ml5">万元</div>
						</el-form-item>
					</el-col>
					
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="成立日期" prop="establish_time" :rules="[{ required: true, message: '请选择成立日期' }]">
							<el-date-picker v-model="form.establish_time" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" format="YYYY-MM-DD">
							</el-date-picker>
						</el-form-item>
					</el-col>
					
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="联系电话" prop="phone" :rules="[{ required: true, message: '请填写联系电话' }]">
							<el-input type="text" v-model="form.phone" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="20" class="mb20">
						<el-form-item label="企业地址" prop="address" :rules="[{ required: true, message: '请填写企业地址' }]">
							<el-input type="text" v-model="form.address" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="20" class="mb20">
						<el-form-item label="企业介绍" prop="detail" :rules="[{ required: true, message: '请填写企业介绍' }]">
							<el-input type="textarea" placeholder="请输入内容" v-model="form.detail" maxlength="500" show-word-limit rows="4"> </el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="logo" prop="logo" :rules="[{ required: true, message: '请上传企业logo' }]">
							<el-upload
								class="avatar-uploader"
								:action="uploadUrl"
								:show-file-list="false"
								:on-success="handleLogoSuccess"
								:before-upload="beforeLogoUpload"
							>
								<img v-if="form.logo" :src="form.logo" class="avatar" />
								<el-icon v-else>
									<ele-Plus />
								</el-icon>
							</el-upload>
						</el-form-item>
					</el-col>
					
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="背景图" prop="bg_image" :rules="[{ required: true, message: '请上传背景图' }]">
							<el-upload
								class="avatar-uploader"
								:action="uploadUrl"
								:show-file-list="false"
								:on-success="handleBgSuccess"
								:before-upload="beforeBgUpload"
							>
								<img v-if="form.bg_image" :src="form.bg_image" class="avatar" />
								<el-icon v-else>
									<ele-Plus />
								</el-icon>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog">取消</el-button>
					<el-button type="primary" @click="onSubmit('refForm')">{{ submitName }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import type { ElForm } from 'element-plus';
import Urls from '/@/api/Urls';
import Company from '/@/api/Company';
import config from '/@/config';
const tagInfo = '[company/edit.vue]';
// 定义接口来定义对象的类型
interface DeptData {
	deptName: string;
	createTime: string;
	status: boolean;
	sort: number | string;
	describe: string;
	id: number;
	children?: DeptData[];
}
interface RuleFormRow {
	name: string;
	size: string;
	register_amount: string;
	establish_time: string;
	detail: string;
	phone: string;
	logo: string;
	bg_image: string;
	address:string
}
interface UserState {
	isShowDialog: boolean;
	ruleForm: RuleFormRow;
	deptData: Array<DeptData>;
}

export default defineComponent({
	name: 'companyEdit',

	data() {
		return {
			id: 0,
			isShowDialog: false,
			mainform: {} as any,
			form: {
				id: 0,
				name: '',
				size: '',
				register_amount: '',
				establish_time: '',
				detail: '',
				phone: '',
				logo: '',
				bg_image: '',
				address:''
			},
			companySizeOptions: [
				{ value: '10人以下', label: '10人以下' },
				{ value: '10至50人', label: '10至50人' },
				{ value: '50至100人', label: '50至100人' },
				{ value: '100人以上', label: '100人以上' },
			],
			photoList: [] as any,
			uploadUrl: config.host + Urls.upload.file,
			domain:config.domain,
			deptData: [], // 部门数据
			submitName: '新增',
			loading: false,
		};
	},
	created() {},
	methods: {
		openDialog(id: number = 0) {
			this.id = id;
			this.isShowDialog = true;
			this.loadData();
		},
		closeDialog() {
			this.isShowDialog = false;
		},
		/**
		 * 载入数据
		 */
		async loadData() {
			if (this.id == 0) {
				this.form = {
					id: 0,
					name: '',
					size: '',
					register_amount: '',
					establish_time: '',
					detail: '',
					phone: '',
					logo: '',
					bg_image: '',
					address:''
				};
				this.photoList = [];
				return;
			}
			this.loading = true;
			this.submitName = '修改';
			let res: any = await Company.getEnterpriseDetail(this.id);
			if (res.code != 0) {
				ElMessage.error(res.msg);
				return;
			}
			console.log(tagInfo, 'loaddata', res, this.form);
			this.form = {
				id: res.data.enterprise.id,
				name: res.data.enterprise.name,
				size: res.data.enterprise.size,
				register_amount: res.data.enterprise.register_amount,
				establish_time: res.data.enterprise.establish_time,
				detail: res.data.enterprise.detail,
				phone: res.data.enterprise.phone,
				logo: res.data.enterprise.logo,
				bg_image: res.data.enterprise.bg_image,
				address: res.data.enterprise.address,
			};
			this.photoList = res.data.enterprise.photo_list;
			console.log(tagInfo, 'loaddata this.form', this.form);
			this.loading = false;
		},
		/**
		 * 提交表单
		 * @param {*} formName
		 */
		onSubmit(formName: any) {
			this.$refs.refForm.validate(async (valid: any) => {
				if (valid) {
					let res;
					if (this.form.id > 0) {
						res = await Company.edit(this.form);
					} else {
						res = await Company.add(this.form);
					}
					if (res.code != 0) {
						ElMessage.error(res.msg);
						return;
					}
					ElMessage.success('操作成功');
					this.$emit('finished');
					this.closeDialog();
				} else {
					console.log('数据验证不通过');
					return false;
				}
			});
		},
		/**
		 * 重置表单
		 * @param {*} formName
		 */
		/* resetForm(formName) {
			this.$refs[formName].resetFields();
		}, */
		
		
		/**
		 * logo上传完成
		 * @param {*} res
		 * @param {*} file
		 */
		handleLogoSuccess(res: any, file: any) {
			console.log(tagInfo, 'handleLogoSuccess', res, file);
			this.form.logo = res.data.url; // URL.createObjectURL(file.raw);
		},
		/**
		 * logo上传时
		 */
		beforeLogoUpload(file: any) {
			console.log(tagInfo, 'beforeLogoUpload', file);
			const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;

			if (!isJPG) {
				//this.$message.error("上传头像图片只能是 JPG 格式!");
			}
			if (!isLt2M) {
				ElMessage.error('上传logo图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		},
		
		/**
		 * bg上传完成
		 * @param {*} res
		 * @param {*} file
		 */
		handleBgSuccess(res: any, file: any) {
			console.log(tagInfo, 'handleBgSuccess', res, file);
			this.form.bg_image = res.data.url; // URL.createObjectURL(file.raw);
		},
		/**
		 * bg上传时
		 */
		beforeBgUpload(file: any) {
			console.log(tagInfo, 'beforeBgUpload', file);
			const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;
		
			if (!isJPG) {
				//this.$message.error("上传头像图片只能是 JPG 格式!");
			}
			if (!isLt2M) {
				ElMessage.error('上传背景图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		},
		
		
		/**
		 * 相册上传完成
		 * @param {*} res
		 * @param {*} file
		 */
		handlePhotoSuccess(res: any, file: any) {
			this.photoList.push({ url: this.domain+res.data.url }); // URL.createObjectURL(file.raw);
			let dot = '';
			let photo = '';
			this.photoList.forEach((item: any) => {
				photo += dot + item.url;
				dot = ',';
			});
			this.form.photo = photo;
			console.log('this.photoList', this.photoList);
		},
		/**
		 * 移除相册文件
		 * @param {*} file
		 * @param {*} fileList
		 */
		handleRemove(file: any, fileList: any) {
			console.log(file, fileList);
			for (let i = 0; i < this.photoList.length; i++) {
				if (this.photoList[i].uid == file.uid) {
					console.log('删除', i, '--', this.photoList[i].uid, file.uid);
					this.photoList.splice(i, 1);
					break;
				}
			}
		},
	},
});
</script>
<style lang="scss" >
.form_detail {
	height: 60px;
}
.avatar-uploader {
	display: flex;
}
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
}
.el-upload-list--picture-card {
	display: flex;
}
.el-upload-list--picture-card .el-upload-list__item,
.el-upload--picture-card,
.el-upload {
	width: 100px;
	height: 100px;
	line-height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.el-upload--picture-card i {
	margin-top: 0;
}

.avatar {
	width: 100px;
	height: 100px;
	display: block;
}
</style>