<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 v-if="sourceValue">原公式：</h4>
          <div v-if="sourceValue" class="sourceValue">
            <a @click="setText">{{ sourceValue }}</a>
          </div>
          <h4>选择变量：</h4>
          <ul>
            <li v-for="(item,index) in expressions_list" :key="index">
              <a @click="addText(item)">{{ item }}</a>
            </li>
          </ul>
        </div>

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

<script>

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

export default {
  name: 'EditExpressions',
  props: {
    params: Object
  },
  data() {

    return {
      actions: {
      },
      textboxValue: '',
      expressions_list: [],
      sourceValue: '',
      row: null,
      column: null,
      loading: false
    }
  },
  created() {
    this.load();

    this.$nextTick(() => {
      this.$refs.inputx.focus();
      this.$refs.xDown.showPanel()
    })
  },
  beforeDestroy() {
  },
  methods: {
    addText(item) {
      const { row, column } = this.params
      if (!this.textboxValue) {
        this.textboxValue = "";
      }
      this.textboxValue += `{${item}}`;
      this.$refs.inputx.focus();


      row[column.field] = this.textboxValue;
    },
    setText() {
      const { row, column } = this.params
      this.textboxValue = this.sourceValue;

      row[column.field] = this.textboxValue;

      this.$refs.inputx.focus();
    },
    textChange() {
      const { row, column } = this.params

      row[column.field] = this.textboxValue;
    },
    load() {
      const { row, column } = this.params
      this.row = row
      this.column = column

      this.textboxValue = row[column.field]

      if (row.source && row.source[column.field]) {
        this.sourceValue = row.source[column.field];
      }

      this.expressions_list = settings.expressions_list;

      if (column.params && column.params.hasTotalQuantity) {
        if (row.material && row.material[1]) {
          let name = this.formatName(row.material[1]);
          if(name == '封边条'){
            this.expressions_list = ['封边条用量合计', ... this.expressions_list]
          }else{
            this.expressions_list = [name + '的总用量', ... this.expressions_list] 
          } 
        } 
      } 

      if (column.params && typeof(column.params.moreExpressionsList)=="function") {
        this.expressions_list = [ ... this.expressions_list,...column.params.moreExpressionsList()] 
      } 

    },
    formatName(v) {
      return (v || "").replace("\r", "").replace("\n", "").replace("\t", "").replace(" ", "");

    },
    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;
}

.sourceValue {
  padding-left: 20px;
  cursor: pointer;

}

.edit-expressions-wrapper li {
  list-style: none;
}

.edit-expressions-wrapper a {
  color: #4286eb;
  cursor: pointer;
}</style>