<template>
  <el-select
    v-model="formItem.value"
    :placeholder="placeholders[0]"
    @change="seleChange($event)"
    v-if="formItem.show"
    :disabled="scope.disabled" :size="scope.size">
    <el-option v-for="(item, i) in scope.dic" :key="i" :label="item[scope.column.props.label]" :value="item[scope.column.props.value]"></el-option>
  </el-select>
  <div v-else class="fen-input">
    <el-row :gutter="0">
      <el-col :span="11">
        <el-input
          :type="inputType"
          v-model="formItem.val1"
          :placeholder="placeholders[1]"
          :disabled="scope.disabled"
          :size="scope.size" min="0"/>
      </el-col>
      <el-col :span="1"><div style="text-align: center;">-</div></el-col>
      <el-col :span="12">
       <el-input
        :type="inputType"
        v-model="formItem.val2"
        :placeholder="placeholders[2]"
        :disabled="scope.disabled"
        :size="scope.size" min="0">
         <template slot="append">{{ endStr }}</template>
       </el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    props: {
      scope: {
        type: Object,
        default: () => { return {}}
      },
      endStr: {
        type: String,
        default: '元'
      },
      cipher: {
        type: String,
        default: 'k-k'
      },
      placeholders: {
        type: Array,
        default: ['请选择', '请输入内容', '请输入内容']
      },
      inputType: {
        type: String,
        default: 'number'
      }
    },
    data() {
      return {
        formItem: {
          show: true,
          val1: '',
          val2: '',
          value: ''
        }
      }
    },
    methods: {
      seleChange(val) {
        if(val == this.cipher) this.formItem.show = !this.formItem.show
      },
      getParam() {
        return this.formItem
      },
      clean() {
        this.formItem.val1 = ''
        this.formItem.val2 = ''
        this.formItem.value = ''
        this.formItem.show = true
      }
    }
  }
</script>

<style scoped lang="scss">
  .fen-input .el-col {
    margin-bottom: 0px;
  }
</style>
