<template>
  <div id="formula_params" v-show="visible">
    <vxe-form
      ref="thisForm"
      id="paramForm"
      :rules="ruleData()"
      title-align="right"
      title-width="100"
      :model="formData"
    >
      <template v-for="(param, index) in formData">
        <vxe-form-item
          v-if="param.status"
          :key="index"
          :title="param.title + '：'"
          :field="numToStr(index)"
        >
          <template v-slot="scope">
            <component v-bind:is="getComponent(param)" v-model="param.value" clearable
                       :options="param.control.options"
                       :placeholder="tip"
                       @ParamFormulaClick="OnParamFormulaClick"
                       @input="inputHandle(scope)"/>
          </template>
        </vxe-form-item>
      </template>
    </vxe-form>
  </div>
</template>
<script>
import ParamFormula from './paramFormula'
import TsTreeSelect from '../../ts-tree-select'

const isExpress = val => String(val).indexOf('[object Object]') >= 0

const formatData = val => {
  let data = val
  if (data) {
    data.forEach(param => {
      if (!isExpress(param.value)) {
        param.value = param.value ? String(param.value) : ''
        if (
          param.control.type === 'TseTreeSelect' ||
          param.control.type === 'select'
        ) {
          param.value = param.value.replace(/"/g, '')
        }
        if (param.control.type === 'TseTreeSelect' && param.value === '') {
          param.value = undefined
        }
      }
    })
  }
  return data
}

export default {
  components: {
    ParamFormula,
    TsTreeSelect
  },
  props: ['fData', 'editor'],
  data () {
    return {
      selectedAccount: '',
      currentParams: this.fData,
      tip: ''
    }
  },
  computed: {
    formData: {
      get: function () {
        return formatData(this.currentParams)
      },
      set: function (val) {
        this.currentParams = formatData(val)
      }
    },
    visible () {
      return this.fData.length > 0
    }
  },
  methods: {
    getComponent (param) {
      if (isExpress(param.value)) {
        return 'ParamFormula'
      } else if (param.control.type === 'input') {
        this.tip = '输入值或表达式'
        return 'VxeInput'
      } else if (param.control.type === 'select') {
        this.tip = '请选择'
        param.control.options = param.control.selectList
        return 'VxeSelect'
      } else if (param.control.type === 'TseTreeSelect') {
        this.tip = '请选择'
        return 'TsTreeSelect'
      }
    },
    isExpress (val) {
      return isExpress(val)
    },
    numToStr (num) {
      return '' + num
    },
    ruleData () {
      let rules = {}
      this.fData.forEach((item, idx) => {
        rules[this.numToStr(idx)] = item.rules
      })
      return rules
    },
    OnParamFormulaClick (event) {
      this.$emit('ParamFormulaClick', event)
    },
    inputHandle (scope) {
      let i = parseInt(scope.property)
      let value = this.formData[i].value
      this.$refs.thisForm.updateStatus(scope, value)
      this.$emit('paramChange', {
        params: this.formData,
        paramIndex: i,
        value: value
      })
    }
  },
  watch: {
    fData (val) {
      this.$refs.thisForm.clearValidate()
      this.formData = val
    }
  }
}
</script>
<style lang="scss">
#formula_params {
  width: 100%;
  height: 100%;
  padding: 0px 0px 10px 10px;
  .ivu-alert {
    margin-bottom: 0;
  }
}
</style>
