<template>
	<el-dialog
		:visible.sync="isShow"
		:close-on-click-modal="false"
		:modal-append-to-body="false"
    title="盘面利润设置"
		@close="cancelHandle"
		custom-class="profit-dialog"
		center
		width="1090px"
		top="8vh"
		v-dialogDrag
	>
		<div class="dialog-main">
			<ul class="add-cont">
				<li class="add-li" v-for="(list, index) in addList" :key="index">
					<span class="li-tag">{{ list.tag }}</span>
          <el-cascader
            v-model="list.futures_id"
            :options="futuresOptions"
						:key="cascaderKey"
            :props="{
              label: 'FutureGoodEdbInfoName',
              value: 'FutureGoodEdbInfoId',
              children: 'Child',
              emitPath: false
            }"
            style="width: 90%"
            clearable
            placeholder="请选择期货"
						@change="chooseFutures"
          />
					<i
						class="el-icon-error del-tag"
						v-if="index > 3"
						@click="delTarget(index)"
					/>
				</li>
			</ul>
			<span class="add-icon" @click="addTargetHandle">
				<i
					class="el-icon-circle-plus-outline"
					style="color: #5882ef; font-size: 16px"
				/>
				添加更多参数
			</span>
			<div class="computed-min">
				<div class="computed-top">
					<span style="margin-right: 8px">计算公式</span>
					<el-input placeholder="请输入公式" v-model="formula" clearable>
					</el-input>
				</div>
				<span class="example-txt">公式示例：A*0.5+B*C*1.2+120-MAX(A,B,C)</span>
				<span class="example-txt">函数支持：MAX(),MIN(),ln(A),log(a,A)</span>
				<div style="margin-top: 20px">
					<span style="margin-right: 8px">盘面利润</span>
					<span>{{profitName}}</span>
				</div>
			</div>
		</div>
		<div class="dia-bot">
			<el-button
				type="primary"
				style="margin-right: 20px"
				@click="saveHandle"
				>保存</el-button
			>
			<el-button type="primary" plain @click="cancelHandle">取消</el-button>
		</div>
	</el-dialog>
</template>

<script>
const tag_arr = [];
for(let i=0;i<26;i++) tag_arr.push(String.fromCharCode(65+i));
export default {
	name: '',
	props: {
		isShow: {
			type: Boolean,
		},
		calulateList: {
			type: Array,
		},
    options: {
      type: Array
    },
		data: {
			type: Object
		}
	},
	watch: {
		isShow(newval) {
      if(newval) {
        this.futuresOptions = this.options;
				if(this.data.list.length) {
					this.addList = this.data.list.map(_ => ({
						futures_id: _.EdbInfoId,
						tag: _.FromTag,
					}))
					this.formula = this.data.formula;
				}
      }
		},
	},
	computed: {
		profitName() {
			let nameArr = this.addList.filter(_ => _.futures_id)[0] ?  this.findFutureNameById(this.futuresOptions,this.addList.filter(_ => _.futures_id)[0].futures_id):''
			return nameArr.length ? `${nameArr[1]}${nameArr[0]}盘面利润` : '';
		}
	},
	data() {
		return {
      futuresOptions: [],
			addList: [
				{
					tag: tag_arr[0],
					futures_id: 0
				},
				{
					tag: tag_arr[1],
					futures_id: 0,
				},
				{
					tag: tag_arr[2],
					futures_id: 0
				},
				{
					tag: tag_arr[3],
					futures_id: 0
				},
			],
			formula: '', //计算公式
			dataloading: false,
			cascaderKey: 0,
		};
	},
	methods: {
		/* 添加额外的指标列 */
		addTargetHandle() {
			if(this.addList.length >= 26) return this.$message.warning('添加指标个数已达上限')
			let tag = this.addList[this.addList.length-1].tag;
			let index = tag_arr.findIndex(item => item === tag);
			const item = {
				tag: tag_arr[index+1],
				futures_id: 0
			};
			this.addList.push(item);
		},

		findFutureNameById(arr,id) {
			for (let i of arr) {
        if (i.FutureGoodEdbInfoId === id) {
          return [i.FutureGoodEdbInfoName];
        }
        if (i.Child) {
          let node = this.findFutureNameById(i.Child, id);
          if (node) {
            return node.concat(i.FutureGoodEdbInfoName);
          }
        }
      }
		},

		// 删除期货
		delTarget(index) {
			this.addList.splice(index, 1);
		},
    
		async saveHandle() {
			if (!this.formula) return this.$message.warning('计算公式不能为空');

				// 指标id数组
				let target_arr = this.addList.filter(item => item.futures_id).map(item => ({
					EdbInfoId: item.futures_id,
					FromTag: item.tag,
				}));
			
				this.$emit('ensure',{
					list: target_arr,
					formula: this.formula
				})
				this.cancelHandle();
		},
		init() {
      this.futuresOptions = [];
			this.addList = [
				{
					tag: tag_arr[0],
					futures_id: 0
				},
				{
					tag: tag_arr[1],
					futures_id: 0
				},
				{
					tag: tag_arr[2],
					futures_id: 0
				},
				{
					tag: tag_arr[3],
					futures_id: 0
				},
			];
			this.formula = '';
			this.cascaderKey++;
		},
		cancelHandle() {
			this.init();
			this.$emit('update:isShow',false);
		},
	},
	mounted() {},
};
</script>
<style lang="scss">
.profit-dialog {
	overflow: hidden;
	div::-webkit-scrollbar {
		width: 6px !important;
	}
	.el-dialog__body {
		max-height: 700px;
		overflow: auto;
	}
	.dialog-main {
		padding: 25px 42px 25px 25px;
		.el-cascader .el-input {
			width: 340px;
		}
		.add-cont {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.add-li {
				position: relative;
				margin-bottom: 48px;
				.li-tag {
					font-size: 16px;
					margin-right: 8px;
				}
				.del-tag {
					position: absolute;
					right: -30px;
					top: 12px;
					font-size: 16px;
					cursor: pointer;
				}
				.target-date {
					color: #5882ef;
					position: absolute;
					bottom: -25px;
					left: 24px;
				}
			}
		}
		.add-icon {
			font-size: 16px;
			color: #5882ef;
			cursor: pointer;
		}
		.computed-min {
			margin: 50px 0;
			padding-bottom: 40px;
			.example-txt {
				display: block;
				margin-left: 70px;
				margin-top: 15px;
			}
		}
	}
	.dia-bot {
		padding-bottom: 40px;
		display: flex;
		justify-content: center;
	}
}
</style>
