<template>
  <div>
    <el-input
      v-model="cup"
      class="input-with-select el-input--small"
      placeholder=""
      clearable
      :disabled="disabled"
      style="width: 40%"
      @change="change"
    />
    <span style="color: #606266">杯</span>
    <el-input
      v-model="second"
      class="input-with-select el-input--small"
      placeholder=""
      clearable
      :disabled="disabled"
      style="width: 40%"
      @change="change"
    />
    <span style="color: #606266">秒</span>
  </div>
</template>
<script>
import config from './config'
export default {
  name: 'ViscosityBox',
  componentName: '黏度框',
  mixins: [config],
  props: {
    form: {
      type: Object,
      default: () => null
    },
    itemObj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      cup: '',
      second: '',
      com: {},
      disabled: false
    }
  },
  computed: {
  },
  watch: {
    'form.id': {
      immediate: true,
      deep: true,
      handler: function(val) {
        const lastSpaceIndex = this.form.viscosity && this.form.viscosity.lastIndexOf(' ')
        this.second = this.form.viscosity && this.form.viscosity.split(' ').length > 1 ? this.form.viscosity.split(' ').pop() : this.form.viscosity
        this.cup = this.form.viscosity && this.form.viscosity.substring(0, lastSpaceIndex)
      }
    },
    'form.theoreticalViscosity': {
      immediate: true,
      deep: true,
      handler: function(val) {
        // 粘度里的杯根据理论粘度截取(从第一个“,“截取到第一个”杯“,有杯没有逗号的截取杯前的所有字符串)
        const splitFromBei = val && val.includes('杯') ? val.split('杯')[0] + '杯' : ''
        if (splitFromBei) {
          const str = splitFromBei.includes(',') || splitFromBei.includes(',') ? splitFromBei : (',' + splitFromBei)
          const formatVal = str.replace(/,/g, ',')
          const regex = new RegExp(`,(.*?)杯`)
          const result = regex.exec(formatVal)
          this.cup = result ? result[1] : '' // 如果有匹配到结果则取第一个分组的内容
        }
      }
    }

  },
  mounted() {
    this.com = this.$utils.findByNameVnode(this, 'DeeAsForm')
    this.com.formData.forEach(item => {
      item.data && item.data.forEach(x => {
        if (x.key === 'viscosity') {
          this.disabled = x.component.disabled
        }
      })
    })
  },
  methods: {
    change() {
      if (this.cup && this.second) {
        this.$emit('input', this.cup + ' ' + this.second)
      }
    }
  }
}
</script>