<template>
  <div class="data-change-form">
   
    <div class="mg-b-20">中文输入方式:(xx)，括号为英文括号</div>
    <el-form :model="formData" label-width="100px" class="form-container" size="small">
      <!-- 变化方式和数据格式行 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="变化方式:">
            <el-select v-model="formData.changeMethod" placeholder="请选择">
              <el-option label="自增" value="+"></el-option>
              <el-option label="自减" value="-"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="数据格式:">
            <el-select v-model="formData.dataFormat" placeholder="请选择">
              <el-option label="时间" value="date"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="showSelectEle">选择元素</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 协同元素行 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="协同元素:">
            <vue-tags-input 
                v-model="coordinationTag" 
                :tags="coordinationTags" 
                @focus="setElseFocus('coordination')" 
                @blur="elseInputBlur('coordination')" 
                placeholder="请选择/输入参数" 
                @before-adding-tag="beforeAddingTag" 
                @keyup.native="btKeyUp"
              />
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 频率设置行 -->
      <el-row :gutter="1" class="frequency-row">
        <el-col :span="12">
          <el-form-item label="频率:">
            <vue-tags-input 
                v-model="frequencyTag" 
                :tags="frequencyTags" 
                @focus="setElseFocus('frequency')" 
                @blur="elseInputBlur('frequency')" 
                placeholder="请选择/输入频率" 
                @before-adding-tag="beforeAddingTag" 
                @keyup.native="btKeyUp"
              />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="0px" >
            <el-select v-model="formData.frequencyUnit" placeholder="单位" clearable style="width: 120px;">
                <el-option label="年" value="1"></el-option>
                <el-option label="月" value="2"></el-option>
                <el-option label="日" value="3"></el-option>
                <el-option label="时" value="4"></el-option>
                <el-option label="分" value="5"></el-option>
                <el-option label="秒" value="6"></el-option>
            </el-select>
            </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 停止条件行 -->
        <el-row :gutter="10" class="stop-condition-row">
        <el-col :span="9">
            <el-form-item label="停止条件:">
              <vue-tags-input 
                  v-model="stopConditionParamTag" 
                  :tags="stopConditionParamTags" 
                  @focus="setElseFocus('stopConditionParam')" 
                  @blur="elseInputBlur('stopConditionParam')" 
                  placeholder="请选择参数" 
                  @before-adding-tag="beforeAddingTag" 
                  @keyup.native="btKeyUp"
                />
            </el-form-item>
        </el-col>
        <el-col :span="4">
            <el-form-item>
            <el-select 
                v-model="formData.stopConditionOperator" 
                placeholder="请选择" 
                clearable
            >
                <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-col>
        <el-col :span="8">
            <el-form-item>
              <vue-tags-input 
                  v-model="stopConditionValueTag" 
                  :tags="stopConditionValueTags" 
                  @focus="setElseFocus('stopConditionValue')" 
                  @blur="elseInputBlur('stopConditionValue')" 
                  placeholder="请选择/输入参数值" 
                  @before-adding-tag="beforeAddingTag" 
                  @keyup.native="btKeyUp"
                />
            </el-form-item>
        </el-col>
        </el-row>
    </el-form>
  </div>
</template>

<script>
import {convertToFCDataChange,extractElementMap,parseFCDataChange,restoreOriginalData} from './multiIfElseTools'

export default {
  name: "DatasChange",

  props: {
    formulainfo: {
      type: Object,
      default: function () {
        return {};
      }
    },
    curele: {
      type: Object,
      default: function () {
        return {};
      }
    },
    map:{
        type: String,
        default:''
    },
    dataForm:{
      type: Object,
      default: function () {
        return {};
      }
    }
    
  },
  data() {
    return {
      value1: true,
      elseFocus: null, // 当前聚焦的标签输入框
      
      // 标签输入框相关数据
      coordinationTag: '',
      coordinationTags: [],
      frequencyTag: '',
      frequencyTags: [],
      stopConditionParamTag: '',
      stopConditionParamTags: [],
      stopConditionValueTag: '',
      stopConditionValueTags: [],
      
      formData: {
        changeMethod: '',
        dataFormat: '',
        frequencyUnit: '',
        stopConditionOperator: ''
      }
    };
  },
  mounted() {
    // 从props初始化表单数据
    if (this.formulainfo) {
      this.formData = { ...this.formData, ...this.formulainfo };
      console.log(this.formulainfo,'this.formulainfo');
      console.log(this.dataForm,'this.dataForm11111111');
      const resObj=restoreOriginalData(this.dataForm,JSON.parse(this.map));
      console.log(JSON.parse(this.map),'this.map');
      
      console.log(resObj,'resObj');
      this.formData.changeMethod=resObj.changeMethod;
      this.formData.dataFormat=resObj.dataFormat;
      this.formData.frequencyUnit=resObj.frequencyUnit;
      this.formData.stopConditionOperator=resObj.stopConditionOperator;
      this.coordinationTag=resObj.coordinationTag;
      this.coordinationTags=resObj.coordinationTags;
      this.frequencyTag=resObj.frequencyTag;
      this.frequencyTags=resObj.frequencyTags;
      this.stopConditionParamTag=resObj.stopConditionParamTag;
      this.stopConditionParamTags=resObj.stopConditionParamTags;
      this.stopConditionValueTag=resObj.stopConditionValueTag;
      this.stopConditionValueTags=resObj.stopConditionValueTags;

    }
  },
  methods: {
    showSelectEle() {
      this.$set(this.formulainfo, 'showSelectEle', !this.formulainfo.showSelectEle);
      this.$emit('select-element');
    },    
    setELe(ele) {
      console.log(this.elseFocus,'this.elseFocus');
      
      if (!this.elseFocus) return;
      
      let obj = {};
      if(ele.k){
        obj = {
          type:'ParamData',
          name:ele.name,
          id:ele.id,
          selected:false,
          v:ele.v,
          k:ele.k,
          children:[],
        }
      }else{
        obj = {
          type:'Element',
          name:ele.eName,
          id:ele.id,
          selected:false,
          tableElementKey:ele.tableElementKey,
          children:[],
        }
      }
      
      // 根据当前焦点位置设置对应的标签
      const position = this.elseFocus;
      const tagField = `${position}Tag`;
      const tagsField = `${position}Tags`;
      
      // 清除之前选择的元素
      if (this[tagsField] && this[tagsField].length > 0) {
        this[tagsField].forEach(item => {
          this.$emit('uncheck', item.id);
        });
      }
      
      // 设置新选择的元素
      obj.text = obj.name;
      obj.style = 'background-color: #409EFF';
      this[tagsField] = [obj]; // 每次选择一个新元素替换现有元素
      this[tagField] = '';
      
      // 可以在这里添加其他需要的逻辑
    },
    // 设置当前聚焦的字段
    setElseFocus(position) {
      console.log(position,'position');
      
      this.elseFocus = position;
    },
    // 清除聚焦状态
    elseInputBlur(position) {
      // if (this.elseFocus === position) {
      //   this.elseFocus = null;
      // }
    },
    // 添加标签前的处理
    beforeAddingTag(tag) {
      // 可以在这里验证标签格式等
      return true;
    },
    // 键盘事件处理
    btKeyUp(e) {
      // 可以添加键盘事件处理逻辑
    },
    getDataChangeList(){
      // 整合表单数据，包括标签信息
      const result = {
        ...this.formData,
        coordinationTag: this.coordinationTag,
        coordinationTags: this.coordinationTags,
        frequencyTags: this.frequencyTags,
        frequencyTag: this.frequencyTag,
        stopConditionParamTags: this.stopConditionParamTags,
        stopConditionParamTag: this.stopConditionParamTag,
        stopConditionValueTags: this.stopConditionValueTags,
        stopConditionValueTag: this.stopConditionValueTag
      };
      console.log(result, '表单数据');
      let test = convertToFCDataChange(result);
      console.log(test,'resObj');
      let map=extractElementMap(result);
      console.log(map,'map');
      
      let resObj={
        test,
        map
      }
      
      return resObj;
    }
  }
};
</script>

<style scoped lang="scss">
.data-change-form {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
}

.form-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.form-container {
  width: 100%;
}

::v-deep .el-row {
  margin-bottom: 5px;
}

::v-deep .el-form-item {
  margin-bottom: 5px;
  
  // 确保输入框占满列宽
  ::v-deep .el-input,
  ::v-deep .el-select,
  ::v-deep .vue-tags-input {
    width: 100%;
  }
}

// 停止条件行特殊样式
.stop-condition-row {
  margin-top: 10px;
}

// 调整小屏幕显示
@media screen and (max-width: 768px) {
  ::v-deep .el-col {
    margin-bottom: 5px;
  }
}
.stop-condition-row {
  margin-top: 10px;
  
  ::v-deep .el-col {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  
  ::v-deep .el-form-item__content {
    width: 100% !important;
  }
}
.frequency-row {
  ::v-deep .el-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  // 调整两个输入框之间的间距
  ::v-deep .el-col:last-child {
    padding-left: 5px !important;
  }
}
</style>
