<template>
  <div class="edit-down-table">
    <vxe-pulldown class="edit-down-pulldown" ref="xDown" transfer>
      <template>
        <vxe-textarea class="edit-expressions-textarea" ref="inputx" v-model="textboxValue" placeholder="输入表达式"
          @click="clickEvent" @change="textChange"  ></vxe-textarea>

      </template>
      <template #dropdown>

        <div class="edit-expressions-wrapper">
          <h4>选择变量：</h4>
          <ul>
            <li v-for="item in expressions_list" :key="item">
              <a @click="addText(item)">{{ item }}</a>
            </li>
          </ul>
        </div>

      </template>
    </vxe-pulldown>
  </div>
</template>

<script>

const settings = require('./settings.js');

export default {
  name: 'FormEditExpressions',
  props: {
    value: String,
    params: Object
  },
  data() {

    return {
      actions: {
      },
      textboxValue: '',
      expressions_list: settings.expressions_list,
      row: null,
      column: null,
      loading: false
    }
  },
  watch: {
    value() {
      this.textboxValue = this.value || '';
    },
     

  },
  created() {
    this.load();
  
  },
  beforeDestroy() { 
  },
  methods: {
 
    addText(item) { 
      if (!this.textboxValue) {
        this.textboxValue = "";
      }
      this.textboxValue += `{${item}}`;
      this.$refs.inputx.focus();


      this.$emit('input', this.textboxValue);
    },
    textChange(){
      this.$emit('input', this.textboxValue);
    },
    load() { 
 
      
    },
    clickEvent() {
      this.$refs.xDown.showPanel()
    },
    keyupEvent(e) {
      let keyCode = e.$event.keyCode;
      if (keyCode == 40 || keyCode == 38 || keyCode == 13 || keyCode == 113 || keyCode == 115) {
        return;
      } 
    },
    suffixClick() {
      this.$refs.xDown.togglePanel()
    },

  }
}
</script>

<style>
.edit-down-pulldown {
  width: 100%;
}

.edit-expressions-wrapper {
  width: 300px;
  height: 200px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  line-height: 180%;
  font-size: 14px;
overflow:auto;
 

 
}
.edit-expressions-wrapper ul{
  list-style: none;
  padding-left: 20px;
}

.edit-expressions-wrapper li {
    list-style: none;
  }
  .edit-expressions-wrapper a {
    color: #4286eb;
  }
</style>