<template>
	<el-dialog 
		:title="modalTitle" 
		:visible.sync="modalVisible" 
		:width="formLabelWidth" 
		top="2vh"
		@close="handleCancel">
		<div class="userMobile">
			<el-form label-width="80px" :model="form" :rules="rules" ref="from">
				<el-form-item label="专家名称" prop="expertName"> 
					<el-input v-model="form.expertName" :disabled="limit.isRead"></el-input>
				</el-form-item>
				<el-form-item label="专家类型" prop="typeId">
					<el-select v-model="form.typeId" placeholder="请选择" :disabled="limit.isRead">
					    <el-option
					      v-for="item in expertTypeList"
					      :key="item.id"
					      :label="item.dictValue"
					      :value="item.id">
					    </el-option>
					  </el-select>
				</el-form-item>
				<el-form-item label="所属区域" prop="areaCode"> 
					<el-select v-model="form.areaCode" placeholder="请选择" :disabled="limit.isRead">
					    <el-option
					      v-for="item in areaList"
					      :key="item.posId"
					      :label="item.posName"
					      :value="item.posId">
					    </el-option>
					  </el-select>
				</el-form-item>
				<el-form-item label="所属坝区" prop="damId">
					  <el-select v-model="form.damId" multiple placeholder="请选择" :disabled="limit.isRead">
						  <el-option
							v-for="item in damList"
							:key="item.id"
							:label="item.damName"
							:value="item.id">
						  </el-option>
					  </el-select>
				</el-form-item>
				<el-form-item label="专家职称" prop="job">
					<el-input v-model="form.job" :disabled="limit.isRead"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" prop="mobile">
					<el-input v-model="form.mobile" :disabled="limit.isRead"></el-input>
				</el-form-item>
				<el-form-item label="领域" prop="domain" v-if="limit.isRead">
					<el-tag
					  :key="index"
					  v-for="(tag,index) in addLabel.dynamicTags">
					  {{tag}}
					</el-tag>
				</el-form-item>
				<el-form-item label="领域" prop="domain" v-else>
					<el-tag
					  :key="index"
					  v-for="(tag,index) in addLabel.dynamicTags"
					  closable
					  :disable-transitions="true"
					  @close="handleCloseTag(tag)">
					  {{tag}}
					</el-tag>
					<el-input
					  class="input-new-tag"
					  v-if="addLabel.inputVisible"
					  v-model="addLabel.inputValue"
					  ref="saveTagInput"
					  size="small"
					  @keyup.enter.native="handaddTag"
					  @blur="handaddTag"
					>
					</el-input>
					<el-button v-else class="button-new-tag" size="small" @click="showAddTagInput">+ 新增</el-button>
				</el-form-item>
				<el-form-item label="个人简介" prop="personDesc">
					<el-input
					  type="textarea"
					  :rows="2"
					  placeholder="请输入内容"
					  v-model="form.personDesc"
					  :disabled="limit.isRead">
					</el-input>
				</el-form-item>
				<el-form-item label="上传照片" prop="img" v-if="!limit.isRead">
					<el-upload
					  class="avatar-uploader"
					  :action="uploadImgUrl"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess"
					  :before-upload="beforeAvatarUpload">
					  <div v-if="form.img !== null" class="uploaded">
						  <!-- {{form.img}} -->
						  <!-- {{upload.imgName !== null}} -->
						  <div class="action">
							  <el-button type="warning" size="mini" >重新上传</el-button>
							  <el-button type="danger" size="mini"  @click.stop="delUploadImg">删除</el-button>
						  </div>
					  	  <img :src="'/htdata/' + upload.imgName" class="avatar">
					  </div>
					  <i v-else class="el-upload el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item v-else label="上传照片" prop="img">
					  <div v-if="upload.imgName !== ''" class="uploaded">
						  <div v-if="form.img === null" class="noPhoto">
							  <span class="txt">暂无图片</span>
						  </div>
						  <img v-else :src="'/htdata/' + upload.imgName"  class="avatar">
					  </div>
				</el-form-item>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="handleCancel">取 消</el-button>
			<el-button type="primary" @click="submit" v-if="!limit.isRead">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import {globalReg,uploadImgUrl} from '@/api/CONST'
export default {
	name: 'userMobiel',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: 'title'
		},
		action: {
			type: String,
			default: 'add'
		},
		selectRow:{
			type:Object,
			default:{}
		}
	},
	watch: {
		visible(newVal, oldVal) {
			this.modalVisible = newVal;
		},
		title(newVal, oldVal) {
			this.modalTitle = newVal;
		},
		action(newVal, oldVal) {
			this.modalAction = newVal;
		},
		selectRow(newVal,oldVal){
			this.modalSelectRow = newVal
		}
	},
	data() {
		return {
			uploadImgUrl:uploadImgUrl,
			modalTitle: this.title,
			modalVisible: this.visible,
			modalAction: this.action,
			modalSelectRow:this.selectRow,
			formLabelWidth: '720px',
			limit:{
				isRead:false,
				isAdd:false
			},
			addLabel:{
				dynamicTags: [],
				inputVisible: false,
				inputValue: '',
			},
			optionProps: {
				expandTrigger:'hover',
				checkStrictly: true,
				value: 'id',
				label: 'branchName',
				children: 'children'
			},
			upload:{
				imgName:''
			},
			areaList: [], //区域列表
			expertTypeList:[], //专家类型
			damList:[], //坝区信息
			rules:{
				expertName:[
					 { required: true, message: '专家姓名不能为空!', trigger: 'blur' }
				],
				typeId:[
					{ required: true, message: '专家类型不能为空!', trigger: 'blur' }
				],
				areaCode:[
					{ required: true, message: '所属区域不能为空!', trigger: 'blur' }
				],
				job:[
					{ required: true, message: '专家职称不能为空!', trigger: 'blur' }
				],
				mobile:[
					{ required: true,validator:this.validateTel, trigger: 'blur' }
				]
			},
			form: {
				img:null
			}
		};
	},
	created() {
		switch(this.modalAction) {
		     case 'add':
				this.limit.isAdd = true
		        break;
		     case 'edit':
				this.getDetail(this.modalSelectRow.id)
		        break;
			 case 'view':
				this.getDetail(this.modalSelectRow.id)
				this.limit.isRead = true
			    break;
		     default:
		        break;
		} 
		this.initPage()
	},
	methods: {
		//强制视图渲染
		forceUpdate(){
			this.$forceUpdate()
		},
		//初始化角色和组织机构
		initPage(){
			this.getAreaList(); //获取区域名称
			this.getExpertType(); //获取专家类型
			this.getDamList();//获取坝区
		},
		//获取区域名称
		getAreaList(){ 
			let params = {
				sn:"522730000000"
			}
			this.$port.getAreaList(params)
				.then(res =>{
					this.areaList = res.list
				})
		},
		//获取专家类型
		getExpertType(){
			let params = {
				dictCode:"ZJLX"
			}
			this.$port.getExpertType(params)
				.then(res =>{
					this.expertTypeList = res.list
				})
		},
		//获取所属坝区
		getDamList(){
			this.$port.getDamList()
				.then(res=>{
					this.damList = res.list
				})
		},
		//领域标签关闭
		handleCloseTag(tag) {
			this.addLabel.dynamicTags.splice(this.addLabel.dynamicTags.indexOf(tag), 1);
		},
		//展示输入标签
		showAddTagInput() {
			this.addLabel.inputVisible = true;
			this.$nextTick(_ => {
			  this.$refs.saveTagInput.$refs.input.focus();
			});
		},
		//保存标签
		handaddTag() {
			let inputValue = this.addLabel.inputValue;
			if (inputValue) {
			  this.addLabel.dynamicTags.push(inputValue);
			}
			this.addLabel.inputVisible = false;
			this.addLabel.inputValue = '';
		},
		//获取专家详情
		getDetail(id){
			let params = {
				id:id
			}
			this.$port.getExpertDetail(params)
				.then(res => {
					let showInfo = Object.assign({},res)
					let damId = showInfo.damId === null ? null : showInfo.damId.split(",")
					let damIdName = showInfo.damIdName === null ? null : showInfo.damIdName.split(",")
					showInfo.damId = damId
					showInfo.damIdName = damIdName
					this.addLabel.dynamicTags = showInfo.domain === null ? null : showInfo.domain.split(",")
					this.upload.imgName = showInfo.imgUrl
					this.form = showInfo
				})
		},
		//图片上传
		handleAvatarSuccess(res, file) {
			console.log(res.retBody)
			this.upload.imgName = res.retBody.fileUrl
			this.form.img = res.retBody.fileName
		},
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isJPG) {
			  this.$message.error('上传头像图片只能是 JPG 格式!');
			}
			if (!isLt2M) {
			  this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		},
		delUploadImg(){
			this.form.img = null
			this.upload.imgName = null
		},
		submit(){
			switch(this.modalAction){
				case 'add':
					this.add()
					break;
				case 'edit':
					this.update()
					break;
				default:
					break;
			}
		},
		add(){
			this.$refs.from.validate((valid) => {
				if (valid) {
					let params = Object.assign({},this.form)
					let damidStr = params.damId.join(',')
					params.damId = damidStr
					params.domain = this.addLabel.dynamicTags.join(',')
					console.log(params)
					this.$port.addExpert(params).then(res => {
						if(!res.code){
							this.modalVisible = false
							this.$emit('closeModal', true);
						}
					})
				}else {
					return false;
				}
			})
		},
		update(){
			this.$refs.from.validate((valid) => {
				if (valid) {
					let data = Object.assign({},this.form)
					let params = {}
					params['id'] = data['id']
					params['expertName'] = data['expertName']
					params['typeId'] = data['typeId']
					params['areaCode'] = data['areaCode']
					params['damId'] = data['damId'] === null ? null : data['damId'].join(',')
					params['job'] = data['job']
					params['mobile'] = data['mobile']
					params['domain'] = this.addLabel.dynamicTags === null ? null : this.addLabel.dynamicTags.join(',')
					params['personDesc'] = data['personDesc']
					params['img'] = data['img']
					console.log(params)
					this.$port.updateExpert(params).then(res => {
						if(!res.code){
							this.modalVisible = false
							this.$emit('closeModal', true);
						}
					})
				}else {
					return false;
				}
			})
		},
		validateTel(rule, value, callback){
			if (value === undefined || value === '' || value === null) {
			  // return callback() 
			  new Error('请输入11位手机号,座机以 - 隔开')
			}
			let str = value.trim()
			if (globalReg.regPhone.test(str) || globalReg.regTel.test(str)) {
			  callback()
			} else {
			  callback(new Error('请输入11位手机号,座机以 - 隔开'))
			}
			callback()
		},
		handleCancel() {
			this.$emit('closeModal', false);
		}
	}
};
</script>

<style scoped lang="less">
.el-tag + .el-tag {
	margin-left: 10px;
}
.button-new-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.input-new-tag {
	width: 90px;
	margin-left: 10px;
	vertical-align: bottom;
}

.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: 128px;
	height: 128px;
	line-height: 128px;
	text-align: center;
}
.avatar {
	width: 128px;
	height: 128px;
	display: block;
}
.uploaded{
	position:relative;
}
.uploaded .avatar{
	border-radius:10px;
}
.uploaded:hover .action{
	display:block;
}
.uploaded .action{
	display:none;
	position:absolute;
	top:0;
	bottom:0;
	width:100%;
	padding-top:27px;
	text-align:center;
	background:rgba(0,0,0,0.5);
}
.noPhoto{
	width:128px;
	height:128px;
	line-height:128px;
	text-align:center;
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
}
.noPhoto span{
	display:block;
	font-size:18px;
}
</style>
