<template>
  <div class="picker">
    <div class="code-edit">
      <div class="top-title">公式</div>
    </div>
    <div>
      <div v-for="item in params">
        <el-form ref="form" :model="item" label-position="top">
          <el-select v-model="item.value" :disabled="item.disabled" @change="changeFun(item)">
            <el-option v-for="thing in item.list" :key="thing" :value="thing" :label="thing" />
          </el-select>
        </el-form>
      </div>
    </div>
    <div>

    </div>
    <Row>
      <el-transfer v-model="selectParas" :titles="['梯形参数列表', '已选择']" filter-placeholder="请输入检索条件" filterable :props="{
      key: 'value',
      label: 'desc'
    }"
        :data="relatedParas"></el-transfer>

      <button @click="test">
        test
      </button>
    </Row>
  </div>

</template>

<script>
import { codemirror } from "vue-codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/idea.css";
import { listForConfig } from "../../api/business/crm/paralibrary/library";
import Row from "../../components/CustomElement/layout/Row.vue";
import Col from "../../components/CustomElement/layout/Col.vue";
import CustomButton from "../../components/CustomElement/CustomButton.vue";
import { addRule } from "../../api/business/configRule/configRule";

export default {
  components: { CustomButton, Col, Row, codemirror },
  data() {
    return {
      cmOptions: {
        // 语言及语法模式
        mode: 'text/javascript',
        // 主题
        theme: "idea",
        // 显示函数
        line: true,
        lineNumbers: false,
        // 软换行
        lineWrapping: true,
        // tab宽度
        tabSize: 4,
      },
      lang: 'javascript',
      formulaStr: "",
      formulaValueStr: "",
      paramsList: [],
      value: "",
      allParam: {

      },
      params: [
        {
          label: "额定载重",
          value: "",
          list: [
            '300', '400', '500', '600'
          ]
        },
        {
          label: "额定速度",
          value: "",
          list: [
            '1.5', '1.6', '1.7', '1.8'
          ]
        },
        {
          label: "曳引机",
          value: "",
          list: [
            '通润', 'KOYO', '内斯特'
          ]
        }
      ],
      oriParams: [
        {
          label: "额定载重",
          value: "",
          list: [
            '300', '400', '500', '600'
          ]
        },
        {
          label: "额定速度",
          value: "",
          list: [
            '1.5', '1.6', '1.7', '1.8'
          ]
        },
        {
          label: "曳引机",
          value: "",
          list: [
            '通润', 'KOYO', '内斯特'
          ]
        }
      ],

      ruleList: [
        {
          conditionKeys: ["额定载重"],
          condition: [
            {
              param: "额定载重",
              formula: "<",
              value: "500"
            },
          ],
          rule: "Match All",
          result: [
            {
              disabled: true,
              param: "曳引机",
              value: "KOYO",
              values: ["KOYO", "内斯特"]
            }
          ]
        }
      ],
      relatedParas: [

      ],
      selectParas: [

      ],

    };
  },
  computed: {

  },
  mounted() {
    for (let i = 1; i <= 500; i++) {
      this.relatedParas.push({
        value: i,
        desc: `备选项 ${i}`,
        disabled: i % 4 === 0
      });
    }
    for (let i = 1; i <= 200; i++) {
      this.selectParas.push(i);
    }



  },
  methods: {
    test(){
      console.log(this.selectParas)
    },
    initValue() {

    },
    changeFun(item) {
      //循环联动list，判断当前修改的控件对应的项目，是否在联动关系里存在
      for (let i = 0; i < this.ruleList.length; i++) {
        debugger
        let ruleItem = this.ruleList[i]
        //判断项目是否存在联动关系中
        if (ruleItem.conditionKeys.indexOf(item.label) > -1) {
          let ruleItemCoditionList = ruleItem.condition
          let rule = ""
          //判断if条件中 是 and 还是or
          if (ruleItemCoditionList.length > 1) {
            rule = ruleItem.rule == 'Match All' ? "&&" : "||"
          }
          //判断结果，存多个，后面如果if条件是and,那resultList中，但凡有一个FALSE，就不满足，如果条件是or，但凡有一个True，就满足
          let resultList = []
          for (let j = 0; j < ruleItemCoditionList.length; j++) {
            let condition = ruleItemCoditionList[j]
            //判断当前修改的控件对应的项目，所选值是否满足联动条件
            if (condition.param == item.param) {
              let formualResult = this.formualCalc(item.value, condition.formula, condition.value)
              resultList.push(formualResult)
            } else {
              //判断联动条件中，非当前修改的控件对应的项目，所选值是否满足联动条件
              this.params.forEach(element => {
                console.log(this.params)
                console.log(element.value)
                if (element.label == condition.param) {
                  let formualResult = this.formualCalc(element.value, condition.formula, condition.value)
                  resultList.push(formualResult)
                }
              });
            }
          }
          //只有一个条件的情况
          if (!rule) {
            //满足条件
            if (resultList[0]) {
              //执行联动结果
              let ruleResultList = ruleItem.result
              ruleResultList.forEach(result => {
                this.params.forEach(element => {
                  if (element.label == result.param) {
                    element.value = result.value
                    element.list = result.values
                  }
                });
              })
            } else {
              //todo 不满足条件，联动结果的选项，退回原来的可选list
              let ruleResultList = ruleItem.result
              for (let i = o; i < this.oriParams.length; i++) {
                ruleResultList.forEach(result => {
                  if (this.oriParams.label = result.param) {

                  }
                })
              }

            }
          } else {
            //存在多个条件的情况，也要考虑不满足条件，联动结果的选项，退回原来的可选list
            //都要满足 and
            if ("&&" == rule) {
              if (resultList.indexOf(false) < 0) {
                //执行联动结果
                let ruleResultList = ruleItem.result
                ruleResultList.forEach(result => {
                  this.params.forEach(element => {
                    if (element.label == result.param) {
                      element.value = result.value
                      element.list = result.values
                    }
                  });
                })
              }
            } else {
              //满足其一 or
            }
          }
        }
      }
    },

    /**
     * 条件判断
     * @param {条件值} param 
     * @param {判断符号} formula 
     * @param {判断条件} value 
     */
    formualCalc(param, formula, value) {
      switch (formula) {
        case '<':
          return Number(param) < Number(value)
        case '>':
          return Number(param) > Number(value)
        case '=':
          return Number(param) == Number(value)
        case '=':
          return Number(param) == Number(value)
        case 'cantains':
          return value.indexOf(param) > -1
        case 'no cantains':
          return value.indexOf(param) < 0
      }
    }
  }

};
</script>

<style scoped>
.picker {
  height: 525px;
  text-align: left;
  width: 50%;
  margin: 0 auto;

  .code-edit {
    height: 240px;
    border-radius: 6px;
    border: 1px solid #e8e9eb;
  }
}

.top-title {
  background-color: #fafafa;
  height: 30px;
  vertical-align: center;
  line-height: 30px;
  padding-left: 10px;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
}

/deep/ .CodeMirror {
  height: 200px !important;
  /*表单变量样式*/

  .cm-field {
    background: #007bff;
    padding: 3px 5px;
    border-radius: 3px;
    color: #fff;
    margin: 0 1px;
  }

  /*函数样式*/

  .cm-func {
    font-weight: bold;
    color: #ae4597;
    line-height: 14px;
    margin: 0 1px;
    padding: 0 2px;
  }

  .CodeMirror-scroll {
    width: 100%;
  }
}
</style>
