﻿<template>
	<el-dialog :title="!dataForm.id ? '新建客户信息' : isDetail ? '客户信息详情' : '编辑客户信息'" :close-on-click-modal="false"
		:visible.sync="visible" class="NCC-dialog NCC-dialog_center" lock-scroll width="1200px">
		<el-row :gutter="10" class="compact-form">
			<el-form ref="elForm" :model="dataForm" size="mini" label-width="100px" label-position="right"
				:disabled="!!isDetail" :rules="rules">
				<!-- 基本信息 -->
				<el-col :span="24">
					<div class="form-section-title">
						<i class="el-icon-user"></i>
						<span>基本信息</span>
					</div>
				</el-col>
				<el-col :span="6" v-if="false">
					<el-form-item label="客户编码" prop="id">
						<el-input v-model="dataForm.id" placeholder="系统自动生成" clearable readonly
							:style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="客户名称" prop="khmc" required>
						<el-input v-model="dataForm.khmc" placeholder="请输入客户姓名" clearable :style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="手机号" prop="sjh" required>
						<el-input v-model="dataForm.sjh" placeholder="请输入手机号" clearable :style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="档案号" prop="dah">
						<el-input v-model="dataForm.dah" placeholder="请输入档案号" clearable :style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="性别" prop="xb">
						<el-select v-model="dataForm.xb" placeholder="请选择性别" clearable :style='{ "width": "100%" }'>
							<el-option v-for="(item, index) in xbOptions" :key="index" :label="item.fullName"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="年龄" prop="ml">
						<el-input v-model="dataForm.ml" placeholder="请输入年龄" clearable :style='{ "width": "100%" }'>
							<template slot="append">岁</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="阳历生日" prop="yanglsr">
						<el-date-picker v-model="dataForm.yanglsr" placeholder="请选择阳历生日" clearable
							:style='{ "width": "100%" }' type='date' format="yyyy-MM-dd" value-format="timestamp">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="阴历生日" prop="yinlsr">
						<el-date-picker v-model="dataForm.yinlsr" placeholder="请选择阴历生日" clearable
							:style='{ "width": "100%" }' type='date' format="yyyy-MM-dd" value-format="timestamp">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="联系地址" prop="lxdz">
						<el-input v-model="dataForm.lxdz" placeholder="请输入详细联系地址" clearable
							:style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>

				<!-- 微信信息 -->
				<el-col :span="24">
					<div class="form-section-title">
						<i class="el-icon-chat-dot-round"></i>
						<span>微信信息</span>
					</div>
				</el-col>
				<el-col :span="6">
					<el-form-item label="微信昵称" prop="wxnc">
						<el-input v-model="dataForm.wxnc" placeholder="请输入微信昵称" clearable :style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="公众号状态" prop="gzhzt">
						<el-select v-model="dataForm.gzhzt" placeholder="请选择公众号状态" clearable
							:style='{ "width": "100%" }'>
							<el-option v-for="(item, index) in gzhztOptions" :key="index" :label="item.fullName"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="小程序状态" prop="wxxcxzt">
						<el-select v-model="dataForm.wxxcxzt" placeholder="请选择小程序状态" clearable
							:style='{ "width": "100%" }'>
							<el-option v-for="(item, index) in wxxcxztOptions" :key="index" :label="item.fullName"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="最近登录时间" prop="zjdlsj">
						<el-date-picker v-model="dataForm.zjdlsj" placeholder="请选择登录时间" clearable
							:style='{ "width": "100%" }' type='date' format="yyyy-MM-dd" value-format="timestamp">
						</el-date-picker>
					</el-form-item>
				</el-col>

				<!-- 客户分类 -->
				<el-col :span="24">
					<div class="form-section-title">
						<i class="el-icon-collection-tag"></i>
						<span>客户分类</span>
					</div>
				</el-col>
				<el-col :span="6">
					<el-form-item label="客户目前归属" prop="khmqgs">
						<el-select v-model="dataForm.khmqgs" placeholder="请选择客户归属" clearable
							:style='{ "width": "100%" }'>
							<el-option v-for="(item, index) in khmqgsOptions" :key="index" :label="item.fullName"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="归属门店" prop="gsmd">
						<el-input v-model="dataForm.gsmd" placeholder="请输入归属门店" clearable :style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="客户类型" prop="khlx">
						<el-select v-model="dataForm.khlx" placeholder="请选择客户类型" clearable :style='{ "width": "100%" }'>
							<el-option v-for="(item, index) in khlxOptions" :key="index" :label="item.fullName"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="客户阶段" prop="khjd">
						<el-select v-model="dataForm.khjd" placeholder="请选择客户阶段" clearable :style='{ "width": "100%" }'>
							<el-option v-for="(item, index) in khjdOptions" :key="index" :label="item.fullName"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="客户消费" prop="khxf">
						<el-checkbox-group v-model="dataForm.khxf" :style='{}'>
							<el-checkbox v-for="(item, index) in khxfOptions" :key="index" :label="item.id">{{
								item.fullName
							}}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="消费频次" prop="xfpc">
						<el-select v-model="dataForm.xfpc" placeholder="请选择消费频次" clearable :style='{ "width": "100%" }'>
							<el-option v-for="(item, index) in xfpcOptions" :key="index" :label="item.fullName"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="注册时间" prop="zcsj">
						<el-date-picker v-model="dataForm.zcsj" placeholder="请选择注册时间" clearable
							:style='{ "width": "100%" }' type='date' format="yyyy-MM-dd" value-format="timestamp">
						</el-date-picker>
					</el-form-item>
				</el-col>

				<!-- 服务信息 -->
				<el-col :span="24">
					<div class="form-section-title">
						<i class="el-icon-service"></i>
						<span>服务信息</span>
					</div>
				</el-col>
				<el-col :span="6">
					<el-form-item label="推荐人" prop="tjr">
						<el-input v-model="dataForm.tjr" placeholder="请输入推荐人" clearable :style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="负责顾问" prop="fzgw">
						<el-input v-model="dataForm.fzgw" placeholder="请输入负责顾问" clearable :style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="美容师" prop="mrs">
						<el-input v-model="dataForm.mrs" placeholder="请输入美容师" clearable :style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="进店渠道" prop="jdqd">
						<el-input v-model="dataForm.jdqd" placeholder="请输入进店渠道" clearable :style='{ "width": "100%" }'>
						</el-input>
					</el-form-item>
				</el-col>

				<!-- 到店记录 -->
				<el-col :span="24">
					<div class="form-section-title">
						<i class="el-icon-date"></i>
						<span>到店记录</span>
					</div>
				</el-col>

				<!-- 消费信息 -->
				<el-col :span="24">
					<div class="form-section-title">
						<i class="el-icon-money"></i>
						<span>消费信息</span>
					</div>
				</el-col>

				<!-- 余额信息 -->
				<el-col :span="24">
					<div class="form-section-title">
						<i class="el-icon-coin"></i>
						<span>余额信息</span>
					</div>
				</el-col>

				<!-- 备注信息 -->
				<el-col :span="24">
					<div class="form-section-title">
						<i class="el-icon-document"></i>
						<span>备注信息</span>
					</div>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注" prop="bz">
						<el-input v-model="dataForm.bz" placeholder="请输入备注信息" show-word-limit
							:style='{ "width": "100%" }' type='textarea' :autosize='{ "minRows": 3, "maxRows": 6 }'>
						</el-input>
					</el-form-item>
				</el-col>

			</el-form>
		</el-row>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取 消</el-button>
			<el-button @click="resetForm" v-if="!isDetail">重 置</el-button>
			<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
import request from '@/utils/request'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import { previewDataInterface } from '@/api/systemData/dataInterface'
export default {
	components: {},
	props: [],
	data() {
		return {
			loading: false,
			visible: false,
			isDetail: false,
			dataForm: {
				id: '',
				id: undefined,
				khmc: undefined,
				sjh: undefined,
				dah: undefined,
				xb: undefined,
				gzhzt: undefined,
				wxnc: undefined,
				wxxcxzt: undefined,
				zjdlsj: undefined,
				khmqgs: undefined,
				gsmd: undefined,
				zcsj: undefined,
				khlx: undefined,
				khjd: undefined,
				khxf: [],
				xfpc: undefined,
				tjr: undefined,
				fzgw: undefined,
				mrs: undefined,
				jdqd: undefined,
				lxdz: undefined,
				bz: undefined,
				yanglsr: undefined,
				yinlsr: undefined,
				ml: undefined,
			},
			rules: {
				khmc: [
					{ required: true, message: '请输入客户名称', trigger: 'blur' }
				],
				sjh: [
					{ required: true, message: '请输入手机号', trigger: 'blur' },
					{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
				]
			},
			xbOptions: [{ "fullName": "男", "id": "男" }, { "fullName": "女", "id": "女" }],
			gzhztOptions: [{ "fullName": "已绑定", "id": "已绑定" }, { "fullName": "未绑定", "id": "未绑定" }],
			wxxcxztOptions: [{ "fullName": "已绑定", "id": "已绑定" }, { "fullName": "未绑定", "id": "未绑定" }],
			khmqgsOptions: [{ "fullName": "会员", "id": "会员" }, { "fullName": "线索池", "id": "线索池" }, { "fullName": "会员-归档", "id": "会员-归档" }],
			khlxOptions: [{ "fullName": "新客", "id": "新客" }, { "fullName": "老客", "id": "老客" }, { "fullName": "潜客", "id": "潜客" }, { "fullName": "线索", "id": "线索" }],
			khjdOptions: [{ "fullName": "体验", "id": "体验" }, { "fullName": "有效", "id": "有效" }, { "fullName": "沉睡", "id": "沉睡" }, { "fullName": "流失", "id": "流失" }],
			khxfOptions: [{ "fullName": "D客", "id": "D客" }, { "fullName": "有效", "id": "有效" }],
			xfpcOptions: [{ "fullName": "高频", "id": "高频" }, { "fullName": "低频", "id": "低频" }],
		}
	},
	computed: {},
	watch: {},
	created() {
	},
	mounted() {
	},
	methods: {
		goBack() {
			this.$emit('refresh')
		},
		init(id, isDetail) {
			this.dataForm.id = id || 0;
			this.visible = true;
			this.isDetail = isDetail || false;
			this.$nextTick(() => {
				this.$refs['elForm'].resetFields();
				if (this.dataForm.id) {
					request({
						url: '/api/Extend/LqKhxx/' + this.dataForm.id,
						method: 'get'
					}).then(res => {
						this.dataForm = res.data;
						if (!this.dataForm.khxf) this.dataForm.khxf = [];
					})
				}
			})
		},
		resetForm() {
			this.$confirm('确定要重置表单吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$refs['elForm'].resetFields();
				this.$message.success('表单已重置');
			}).catch(() => {
				// 用户取消
			});
		},
		formatNumber(field) {
			// 移除千分位分隔符，只保留数字和小数点
			let value = this.dataForm[field].toString().replace(/,/g, '');
			// 确保是有效的数字格式
			if (!/^\d*\.?\d*$/.test(value)) {
				value = value.replace(/[^\d.]/g, '');
			}
			// 更新原始值
			this.dataForm[field] = value;
		},
		dataFormSubmit() {
			this.$refs['elForm'].validate((valid) => {
				if (valid) {
					if (!this.dataForm.id) {
						request({
							url: `/api/Extend/LqKhxx`,
							method: 'post',
							data: this.dataForm,
						}).then((res) => {
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 1000,
								onClose: () => {
									this.visible = false,
										this.$emit('refresh', true)
								}
							})
						})
					} else {
						request({
							url: '/api/Extend/LqKhxx/' + this.dataForm.id,
							method: 'PUT',
							data: this.dataForm
						}).then((res) => {
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 1000,
								onClose: () => {
									this.visible = false
									this.$emit('refresh', true)
								}
							})
						})
					}
				}
			})
		},
	}
}
</script>

<style scoped>
.form-section-title {
	display: flex;
	align-items: center;
	margin: 15px 0 10px 0;
	padding: 8px 12px;
	background: #409EFF;
	color: white;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
}

.form-section-title i {
	margin-right: 8px;
	font-size: 18px;
}

.el-form-item {
	margin-bottom: 12px;
}

.compact-form .el-form-item {
	margin-bottom: 8px;
}

.el-input-group__append {
	background: #f5f7fa;
	border-color: #dcdfe6;
	color: #606266;
}

.dialog-footer {
	text-align: right;
	padding: 20px 0;
}

.dialog-footer .el-button {
	margin-left: 10px;
}

/* 必填字段标识 */
.el-form-item.is-required .el-form-item__label::before {
	content: '*';
	color: #f56c6c;
	margin-right: 4px;
}

/* 响应式布局 */
@media (max-width: 768px) {
	.el-col {
		margin-bottom: 10px;
	}

	.form-section-title {
		font-size: 14px;
		padding: 8px 12px;
	}
}
</style>