<template>
  <div class="condition-temp">
    <div class="top-info">
      <span style="margin: 0px 8px;">关系:</span>
      <el-select v-model="info.relationType" style="width: 150px;" size="small" placeholder="请选择">
        <el-option v-for="(lable, val) in relationOptions" :label="lable" :value="val" :key="val"></el-option>
      </el-select>
      <span style="margin: 0px 8px;">类型:</span>
      <el-select
        v-model="info.funKey"
        placeholder="请选择"
        @change="propertChangeFu"
				style="width: 150px;"
				size="small"
      >
        <el-option
          v-for="opt in propertyList"
          :label="opt.funName"
          :value="opt.funKey"
          :key="opt.funKey"
        ></el-option>
      </el-select>
			<span style="margin: 0px 8px;"> 条件:</span>
      <el-select
        v-model="info.conditionType"
        placeholder="请选择"
				size="small"
				style="width: 150px;"
        @change="changeTriggerCondFu(info.conditionType)"
      	>
        <el-option
          v-for="(proVal, proName) in trigCondEnumOptions"
          :label="proVal"
          :value="proName"
          :key="proVal"
        >{{ proVal }}</el-option>
      </el-select>
      <el-button size="small" type="danger" style="margin-left: 5px;" plain @click="delItemFun">删除此数据</el-button>
    </div>

    <div class="val-info">

      <div style="padding-top: 10px;">
        <div
          v-show="info.conditionType !== 'GTB'"
          style="float: left; margin-right: 20px; margin-bottom: 8px; padding-left: 10px;"
        >
          &#12288;&#160;&#160;A:
          <el-input-number
            v-model="info.value1"
            placeholder="A"
            controls-position="right"
            style="width: 220px;margin-left: 5px;"
          ></el-input-number>
        </div>
        <div v-show="info.conditionType === 'GTB' || info.conditionType === 'GTA_AND_LTB' || info.conditionType === 'LTA_OR_GTB'" style="float: left; margin-left: 5px;">
          &#12288;&#160;&#160;B:
          <el-input-number
            v-model="info.value2"
            placeholder="B"
            controls-position="right"
            style="width: 220px;margin-left: 5px; "
          ></el-input-number>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const relationOptions = {
  AND: "并且",
  OR: "或者"
};
const trigCondEnumOptions = {
  LTA: "数值低于A",
  GTB: "数值高于B",
  GTA_AND_LTB: "数值介于AB之间",
  LTA_OR_GTB: "数值高于B低于A",
  EQA: "数值等于A"
};
export default {
  name: "ConditionTemp",
  props: ["info", "propertyList", 'tempIndex'],
  data() {
    return {
      relationOptions,
			trigCondEnumOptions,
			triggerMinInput: false,
			triggerMaxInput: false
    };
  },
  created() {
		this.triggerCondFu()
	},
  methods: {
		delItemFun() {
			this.$emit('EventDel', this.tempIndex)
		},
    propertChangeFu(val) {
      this.propertyList.forEach(v => {
        if (v.funKey ===  val) {
          // this.info.funDataType = v.funDataType;
          this.info.funId = v.funId;
          this.info.funName = v.funName;
        }
      });
    },
    changeTriggerCondFu(val) {
      this.triggerCondFu(val);
    },
    triggerCondFu(val) {
      this.triggerMaxInput = false;
      this.triggerMinInput = false;
      if (val === "LTA") {
        this.triggerMinInput = true;
      }
      if (val === "GTB") {
        this.triggerMaxInput = true;
      }
      if (val === "GTA_AND_LTB" || val === "LTA_OR_GTB") {
        this.triggerMaxInput = true;
        this.triggerMinInput = true;
      }
      if (val === "EQA") {
        this.triggerMinInput = true;
      }
    }
  }
};
</script>

<style lang="scss">
.condition-temp {
	  width: calc(100% + 80px);
    position: relative;
    left: -80px;
    border: 1px solid #c6c6c6;
    padding: 5px;
    height: 110px;
    overflow: auto;
		margin-top: 10px;
		.top-info {
			border-bottom: 1px dotted #898788;
    	padding-bottom: 5px;
		}
}
</style>
