<template>
	<div class="editTargetDiaBase-box">
		<el-dialog
		:visible.sync="isShow"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="cancelHandle"
		custom-class="dialog"
		center
		width="700px"
    :title="saveScence==='saveOther' ? '指标另存为':'保存指标'"
		v-dialogDrag>
			<div class="dialog-main">
				<el-form
				ref="targetForm"
				label-position="left"
				label-width="80px"
				hide-required-asterisk
				:model="formData"
				:rules="formRules">
					<el-form-item label="指标名称" prop="edb_name">
						<el-input
						v-model="formData.edb_name"
						style="width: 80%"
						placeholder="指标名称"></el-input>
					</el-form-item>
					<el-form-item label="所属目录" prop="menu">
						<el-cascader
						v-model="formData.menu"
						:options="options"
						:props="levelProps"
						style="width: 80%"
						clearable
						placeholder="请选择所属目录"/>
					</el-form-item>
					<el-form-item label="频率" prop="frequency">
						<span slot="label">频&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;率</span>
						<el-select 
						v-model="formData.frequency" 
						placeholder="请选择频率" 
						style="width:80%"
						clearable>
							<el-option
								v-for="item in frequencyArr"
								:key="item"
								:label="item"
								:value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="单位" prop="unit">
						<span slot="label">单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位</span>
						<selectUnit 
							v-model="formData.unit" 
							style="width: 80%"
						/>
					</el-form-item>
				</el-form>
			</div>
			<div class="dia-bot">
				<el-button type="primary" style="margin-right:20px" @click="addTarget">保存</el-button>
				<el-button type="primary" plain @click="cancelHandle">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
import chartRelevanceApi,{ statisticFeatureInterface } from '@/api/modules/chartRelevanceApi.js';
import { unitArr } from '@/utils/defaultOptions';
import selectUnit from '@/components/selectUnit.vue';
export default {
	components: { selectUnit },
	props: {
		isShow: {
			type: Boolean,
		},
		chartData: {
			type: Object,
		},
		source: {
			type: Number
		},
		saveScence: { //saveOther另存为 ''保存
      type:String,
      default: ''
    },
	},
	watch: {
		'isShow': {
			handler(newval) {
				newval && this.getMenu();
				const { ChartName } = this.chartData;
				this.formData.edb_name = this.saveScence==='saveOther' ? `${ChartName}(1)` : ChartName;
			}
		}
	},
	data () {
		return {
			formData: {
				edb_name:'',
				menu:'',
				frequency: '',
				unit:''
			},
			formRules: {
				edb_name:[
					{ required: true, message: '指标名称不能为空', trigger: 'blur' },
				],
				menu:[
					{ required: true, message: '所属目录不能为空', trigger: 'blur' },
				],
				frequency:[
					{ required: true, message: '频率不能为空', trigger: 'blur' },
				],
				unit:[
					{ required: true, message: '单位不能为空', trigger: 'blur' },
				],
			},
			options:  [],
			unitArr,
			levelProps: {
				label: 'ClassifyName',
				value: 'ClassifyId',
				children: 'Children',
				emitPath: false
			},
			frequencyArr:['日度','周度','旬度','月度','季度','年度'],
		};
	},
	methods: {
		/* 获取目录结构 */
		async getMenu() {
			let res;
			//统计特征区分原指标是否预测，保存到预测指标库或/eta指标库
			if(this.$route.path==='/statisticFeatureChartEditor'&&this.$parent.oldEdbInfoType) {
        res = await preDictEdbInterface.classifyListV2()
				if(res.Ret !== 200) return
				//this.filterNodes(res.Data.AllNodes,1);
      }else {
				res = await dataBaseInterface.menuListV3()
				if(res.Ret !== 200) return
				//this.filterNodes(res.Data.AllNodes,2);
			}

			this.options = res.Data.AllNodes || [];
		},
		filterNodes(arr,n) {
			arr.length && arr.forEach(item => {
				item.Children && item.Children.length && this.filterNodes(item.Children,n)
				if(item.Level === n) {
					delete item.Children
				}
			})
		},
		/* 保存 */
		async addTarget() {
			await this.$refs.targetForm.validate()
			const { edb_name,menu,frequency,unit } = this.formData;

			//统计图的2 3 4对应source8 9 10但其实图表source又是7 8 9 别问为什么这样搞问后端 我也乱的一批
      const sourceMap = {
				1: 1, 
        2: 8,
        3: 9,
        4: 10
      }
      let Source;
      if(this.$route.path==='/relevancechartEditor') {
        Source = this.source;
      }else if(this.$route.path==='/statisticFeatureChartEditor') {
        Source = sourceMap[this.source]
      }

			let params = {
				Source,
				IsSaveAs: this.saveScence==='saveOther',
        EdbName: edb_name,
				Frequency: frequency,
				Unit: unit,
        ClassifyId: menu,
        ...this.$parent.chartInfo
			}

			let res = null;
      if(this.$route.path==='/relevancechartEditor') {
        res = await chartRelevanceApi.saveEdb(params);
      }else if(this.$route.path==='/statisticFeatureChartEditor') {
        res = await statisticFeatureInterface.saveEdb(params);
      }
			
			if(res.Ret !== 200) return
			this.$message.success('保存成功');
			this.cancelHandle();
			this.$emit('saveBack',{source:this.source})
      
		},
		cancelHandle() {
			this.formData = {
				edb_name:'',
				menu:'',
				frequency: '',
				unit:''
			}
			this.$emit('update:isShow',false)
		}
	},
}
</script>
<style lang='scss'>
.editTargetDiaBase-box {
	.dialog-main {
		padding-left: 50px;
	}
	.el-cascader .el-input {
		width: 100%;
	}
	.dia-bot {
		margin: 52px 0 30px;
		display: flex;
		justify-content: center;

	}
}
</style>