<template>
	<div class="dialog_container">
		<el-dialog
		:modal-append-to-body='false'
		:title="dialogTitle" 
		:visible.sync="isShowdialog"
		:close-on-click-modal="false"
		@close="cancelHandle"
		center
		v-dialogDrag 
		custom-class="dialogclass"
		width="700px">
		<div slot="title" style="display:flex;alignItems:center;">
			<img :src="$icons.add" style="color:#fff;width:16px;height:16px;marginRight:5px;">
			<span style="fontSize:16px;">{{dialogTitle}}</span>
		</div>
		<div class="dialog-min" style="height:460px;">
			<div style="overflowY:auto;overflowX:hidden;">
				<el-tree
				class="type-list"
				:data="typeList"
				accordion
				highlight-current
				:props="defaultProps" 
				@node-click="chooseType"
				style="width:140px;">
				</el-tree>
			</div>
			<div class="rigth-cont">
				<el-form
				ref="formD"
				label-position="right" 
				label-width="80px" 
				:model="formData"
				:rules="formRules">
					<el-form-item label="指标分类" prop="type">
						<span style="fontSize:14px;">{{formData.type}}</span>
					</el-form-item>
					<!-- 录入数据 -->
					<template v-if="dialogTitle==='录入数据'">
						<el-form-item label="录入日期" prop="date">
							<!-- <span class="require_tag">*</span> -->
							<el-date-picker type="date" placeholder="选择日期" v-model="formData.date" value-format="yyyy-MM-dd" style="width: 321px;"></el-date-picker>
						</el-form-item>
						<el-form-item label="录入指标" prop="target">
							<!-- <span class="require_tag">*</span> -->
							<el-select v-model="formData.target" placeholder="请选择录入指标" filterable clearable style="width: 321px;">
								<el-option
									v-for="item in targetList"
									:key="item.TRADE_CODE"
									:label="item.SEC_NAME"
									:value="item.SEC_NAME">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="值" prop="value">
							<!-- <span class="require_tag">*</span> -->
							<el-input v-model="formData.value"  placeholder="请填写数值" style="width: 321px;"></el-input>
						</el-form-item>
					</template>
					<!-- 新增指标 -->
					<template v-else>
						<el-form-item label="频度" prop="frequency">
							<!-- <span class="require_tag">*</span> -->
							<el-select v-model="formData.frequency" placeholder="请选择频度" style="width: 321px;" @change="handleFrequencyChange">
								<el-option label="日度" value="日度"></el-option>
								<el-option label="周度" value="周度"></el-option>
								<el-option label="旬度" value="旬度"></el-option>
								<el-option label="月度" value="月度"></el-option>
								<el-option label="季度" value="季度"></el-option>
								<el-option label="半年度" value="半年度"></el-option>
								<el-option label="年度" value="年度"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="单位" prop="unit">
							<!-- <span class="require_tag">*</span> -->
							<!-- <el-input v-model="formData.unit"  placeholder="请填写单位" style="width: 321px;"></el-input> -->
							<el-autocomplete
								class="inline-input"
								v-model="formData.unit"
								:fetch-suggestions="querySearchUnit"
								placeholder="请填写单位"
								@select="handleSelectUnit"
								suffix-icon="el-icon-arrow-down"
								style="width: 321px;"
							></el-autocomplete>
						</el-form-item>
						<el-form-item label="指标名称" prop="targetName">
							<!-- <span class="require_tag">*</span> -->
							<el-input v-model="formData.targetName"  placeholder="请输入指标名称" style="width: 321px;"></el-input>
						</el-form-item>
						<el-form-item label="更新提醒" prop="up_week">
							<el-select v-model="formData.up_week" placeholder="请选择更新周" style="width:145px" v-if="formData.frequency === '周度'">
								<el-option label="周一" value="周一"></el-option>
								<el-option label="周二" value="周二"></el-option>
								<el-option label="周三" value="周三"></el-option>
								<el-option label="周四" value="周四"></el-option>
								<el-option label="周五" value="周五"></el-option>
								<el-option label="周六" value="周六"></el-option>
								<el-option label="周日" value="周日"></el-option>
							</el-select>
							<el-select v-model="formData.up_day" placeholder="请选择更新日" style="width:145px" v-if="formData.frequency === '月度'">
								<el-option :label="item" :value="item" v-for="(item,index) in days" :key="index"></el-option>
							</el-select>
							<el-select v-model="formData.up_day" placeholder="请选择更新日" style="width:145px" v-if="formData.frequency === '季度'">
								<el-option label="每季度末" value="每季度末"></el-option>
							</el-select>
							<el-select v-model="formData.up_day" placeholder="请选择更新日" style="width:145px" v-if="formData.frequency === '半年度'">
								<el-option label="每半年末" value="每半年末"></el-option>
							</el-select>
							<el-select v-model="formData.up_day" placeholder="请选择更新日" style="width:145px" v-if="formData.frequency === '年度'">
								<el-option label="每年末" value="每年末"></el-option>
							</el-select>
							<el-time-picker
								:style="formData.frequency === '日度'?'width:321px':'width:170px'"
								v-model="formData.up_time"
								value-format="HH:mm:ss"
								placeholder="请选择更新时间">
							</el-time-picker>
						</el-form-item>
					</template>
				</el-form>
				<div slot="footer" class="dialog-footer" :style="dialogTitle==='录入数据'?'marginTop:150px;text-align:center;':'marginTop:95px;text-align:center;'">
					<el-button type="primary" size="medium" @click.native="addHandle(1)" v-if="dialogTitle==='录入数据'">确定</el-button>
					<el-button type="primary" size="medium" @click.native="addHandle(2)" v-else>加入指标库</el-button>
					<el-button  size="medium" @click.native="cancelHandle" :style="dialogTitle!=='录入数据'?'width:112px;marginLeft:50px;':'marginLeft:50px;'">取消</el-button>
				</div>
			</div>
		</div>
		</el-dialog>

	</div>
</template>

<script>
import {dataInterence} from 'api/api.js';
	export default {
		name:'',
		props:{
			//标题
			dialogTitle: {
				type:String
			},
			isShowdialog: {
				type:Boolean,
			},
			// 指标类型
			typeList: {
				type:Array
			},
			// 表单数据
			formData: {
				type:Object,
				default:{}
			},
			//指标单位
			unitList:{
				type:Array
			},
			// 默认的分类id
			addTargetDefaultClassId:""
		},
		data () {
			return {
				defaultProps: {
					children: 'Child',
					label: 'ClassifyName'
				},
				formRules:{
					date:[
						{required: true, message: '请选择日期', trigger: 'blur'}
					],
					target:[
						{ required: true,message: '频度不能为空', trigger: 'change' }
					],
					frequency:[
						{ required: true,message: '频度不能为空', trigger: 'change' }
					],
					value:[
						{ required: true,message: '录入值不能为空', trigger: 'blur' }
					],
					target:[
						{ required: true,message: '录入指标不能为空', trigger: 'change' }
					],
					unit:[
						{ required: true,message: '单位不能为空', trigger: 'change' }
					],
					targetName:[
						{ required: true,message: '指标名称不能为空', trigger: 'blur' }
					],
				},
				classify_id:this.addTargetDefaultClassId,//分类id
				targetList:[],//指标列表
			};
		},
		computed:{
			days() {
				let days = [];
				for(let i = 1;i<=30;i++) {
					if(i < 10) {
						days.push('0'+i+'日')
					}else {
						days.push(i+'日')
					}
				}
				return days
			}
		},
		watch: {
			formData: {
				handler(newValue) {
					// console.log(newValue)
					this.formData = newValue;
				},
			　　deep: true
			},
			addTargetDefaultClassId(nval){
				this.classify_id=nval
			},
			// 指标值发生变化时
			'formData.target': {
					handler() {
						if(this.dialogTitle === '录入数据') {
							// this.getTargetlist();
						}
					},
			},
			// 指标分类发生变化时
			'formData.type': {
					handler() {
						//重置指标值
						if(this.dialogTitle === '录入数据') {
							// this.getTargetlist();
						}
					},
					immediate: true		
			},
			// 频度发生变化时
			'formData.frequency': {
					handler() {
						this.$emit('changeFrequency')
					},
			},
		},
		methods: {
			//搜索单位
			querySearchUnit(queryString, cb){
				let results = queryString ? this.unitList.filter(item=>item.value.indexOf(queryString) === 0) : this.unitList;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},

			// 频度改变
			handleFrequencyChange(e){
				if(e==='季度'){
					this.formData.up_day='每季度末'
				}else if(e==='半年度'){
					this.formData.up_day='每半年末'
				}else if(e==='年度'){
					this.formData.up_day='每年末'
				}
			},

			// 获取指标列表
			getTargetlist() {
				// console.log(this.is_editData,this.edit_dataId)
				dataInterence.searchTarget({
					ClassifyId :this.classify_id,
					KeyWord :this.formData.target||''
				}).then(res => {
					if(res.Ret === 200) {
						this.targetList = res.Data.List;
					}
				})
			},
			// 点击确定
			addHandle(type) {
				this.$refs.formD.validate((valid) => {
					if (valid) {
						// alert('submit!');
						if(type === 1) {
							// 录入数据
							let trade_code = '';
							this.targetList.forEach((item,index) => {
								if(item.SecName === this.formData.target) {
									trade_code = item.TradeCode
								}
							});
						
							dataInterence.addData({
								TradeCode:trade_code,
								CreateDate:this.formData.date,
								Close:this.formData.value
							}).then(res => {
								if(res.Ret === 200) {
									this.$message({
										message: '录入数据成功!',
										type: 'success'
									});	
									this.$emit('addOver',this.formData.type)
									// // 重置分类id
									// this.classify_id = sessionStorage.getItem('default_id') || '';
								}else {
									this.$message({
										message: res.Msg,
										type: 'warning'
									});
								}
							})
						}else {
							// let notice_time = this.formData.frequency === '日度'?this.formData.up_time
							// :this.formData.frequency === '周度'?this.formData.up_week+' ' + this.formData.up_time
							// :this.formData.frequency === '月度'?this.formData.up_day+' ' + this.formData.up_time
							// :this.formData.frequency === '季度'?this.formData.up_day+' ' + this.formData.up_time
							// :this.formData.frequency === '半年度'?this.formData.up_day+' ' + this.formData.up_time
							// :this.formData.frequency === '年度'?this.formData.up_day+' ' + this.formData.up_time:''
							
							let notice_time=''
							if(this.formData.frequency==='日度'){
								notice_time=this.formData.up_time
							}else if(this.formData.frequency === '周度'){
								if(this.formData.up_week&&this.formData.up_time){
									notice_time=this.formData.up_week+' ' + this.formData.up_time
								}
							}else{
								if(this.formData.up_day&&this.formData.up_time){
									notice_time=this.formData.up_day+' ' + this.formData.up_time
								}
							}

							if(!this.classify_id){
								this.$message.warning('请重新选择指标分类')
								return
							}
							
							// 新增指标
							dataInterence.addTarget({
								ClassifyId:this.classify_id?Number(this.classify_id):'',
								Frequency:this.formData.frequency,
								Unit:this.formData.unit,
								SecName:this.formData.targetName,
								NoticeTime:notice_time
							}).then(res => {
								if(res.Ret === 200) {
									this.$message({
										message: '新增指标成功!',
										type: 'success'
									});
									this.$emit('addOver',this.formData.type)
									// // 重置分类id
									// this.classify_id = sessionStorage.getItem('default_id') || '';
								}else if(res.Ret!=403){
									this.$message({
										message: res.Msg,
										type: 'warning'
									});
								}
							})
						}
					} else {
						// console.log('error submit!!');
						return false;
					}
				});
			},
			cancelHandle() {
				this.$emit('cancelHandle',1);
				// 重置分类id
				this.classify_id = this.addTargetDefaultClassId;
			},	
			// 选择类别
			chooseType(item) {
			
				if(!item.Child || !item.Child.length ) {
					//修改表单数据
					this.$emit('changeForm',item.ClassifyName)
					// this.$set(this.formData,'type',item.classify_name);
					this.classify_id = item.ClassifyId;
				}
			},
		},
		created() {
			// this.getTargetlist();
			// setTimeout(() =>{
			// 	this.classify_id = sessionStorage.getItem('default_id') || ''
			// },200)
			
		},
		mounted() {
		},
	}
</script>
<style lang='scss'>
.dialog_container {
	.dialog-min {
		display: flex;
		.rigth-cont {
			border-left: 1px solid #dcdcdc;
			padding:  0 0 48px 60px;
		}
		.el-form-item {
			position: relative;
			.require_tag {
				font-size: 20px;
				color: #F56C6C;
				position: absolute;
				left: -132px;
				top: 4px;
			}
		}
		// ele-reset
		.el-dialog {
			max-height: 550px;
		}
		.el-tree--highlight-current .el-tree-node .is-current>.el-tree-node__content {
			background: #fff !important;
			.el-tree-node__label {
				// background: #fff !important;
				color: #5882EF !important;
			}
		}
		
		.el-tree-node {
			margin-bottom: 18px !important;
		}
		.el-tree-node__children .el-tree-node {
			margin-bottom: 0 !important;
		}
		.el-tree-node__content:hover {
			color: #5882EF !important;
		}
		.el-tree-node__content>.el-tree-node__label {
			font-size: 16px !important;
			color: #333;
			font-weight: bold;
		}
		.el-tree-node__children .el-tree-node__content>.el-tree-node__label  {
			font-size: 14px !important;
			font-weight: normal !important;
		}
		.el-form-item__label {
			font-size: 14px;
			color: #333;
			width: 100px !important;
		}
		.el-form-item__content {
			margin-left: 120px !important;
		}
		// .el-date-editor,.el-input {
			// width: 321px;
		// }
		// .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
		// 	content: ''!important;
		// 	// color: #F56C6C;
		// 	margin-right: 0 !important;
		// }
		.el-tree-node.is-expanded>.el-tree-node__children {
			margin-top: 5px!important;
		}
		.el-input{
			width: 100%;
		}
	}
}
</style>
