<template>
  <div>
    <div style="display: flex;">
      <div>
        <el-input v-model="tpName"  :placeholder="$t('form.xztp')" readonly
          @click.native="showSelectBalance"  style="width: 100px;"/>
      </div>
      <div>
        <el-input v-model="tpz" :placeholder="$t('form.placeholderInput')" maxlength="20" @change="tpzChange">
          <template slot="append">{{ dw }}
          </template>
        </el-input>
      </div>
      <div>
        <el-button type="primary" @click="getBalanceValue">{{ $t('form.hqz') }}</el-button>
      </div>
    </div>
    <SelectInstrumentDialog ref="selectInstrumentDialog" @change="selectInstrumentChange"/>
  </div>
</template>

<script>
import SelectInstrumentDialog from '@/views/business/comps/select/SelectInstrumentDialog';
export default {
  name: "SelectBalanceValue",
  components: {SelectInstrumentDialog},
  props: {
    value: {
      type: [Number, String],
      default: ''
    },
    dw: {
      type: String,
      default: ''
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(v) {
        this.tpz = v || ''
      }
    }
  },
  data() {
    return {
      tpName: '',
      tpz: ''
    };
  },
  mounted() {
  },
  methods: {
    showSelectBalance() {
      this.$refs.selectInstrumentDialog.show()
    },
    selectInstrumentChange(val,row){
        this.tpName=row.mc
    },
    getBalanceValue() {
      alert('todo')
    },
    tpzChange() {
      this.$emit('change', this.tpz)
      this.$emit('input', this.tpz)
    },
  }
};
</script>