<template>
  <div class="module">
  <div :class="className">
        <span class="spanTitle1">{{ title }}</span>
<van-field
  v-model="internalValue"
  is-link
  readonly
  @click="focus"
/>
<van-popup v-model="show" round position="bottom">
  <van-cascader
    v-model="cascaderValue"
    :title="title"
    :options="option"
    @close="blur"
    @finish="onFinish"
    active-color="#1c4990"
  />
</van-popup>
<span class="whiteBack"></span>
<b v-if="verify" class="verify">*</b>
      </div>
      <p class="reminder" v-if="reminder">当前项为必填项</p>
    </div>
</template>

<script>
export default {
  props: ['title', 'value', 'options', 'verify', 'id', 'disable'],
  name: 'Select',
  watch: {
    value (cur, old) {
      console.log(cur, '这是传授那个的')
      if (!cur) {
        this.internalValue = ''
        this.reminder = true
        this.className = 'el_input_focusTrue'
      } else {
        this.cascaderValue = cur
        this.internalValue = this.$findItemById(this.option, this.value)
        this.blur()
      }
    },
    options (cur, old) {
      this.option = cur
      this.internalValue = ''
    }
  },
  data () {
    return {
      className: 'el_input_focus',
      internalValue: '',
      show: false,
      cascaderValue: this.value,
      reminder: false,
      // 选项列表，children 代表子选项，支持多级嵌套
      option: this.options
    }
  },
  mounted () {
    if (this.value) {
      this.internalValue = this.$findItemById(this.option, this.value)
      this.blur()
      this.$emit('input', this.cascaderValue)
    }
  },

  methods: {
    onFinish ({ selectedOptions }) {
      this.show = false
      this.internalValue = selectedOptions[selectedOptions.length - 1].text

      if (this.verify) {
        if (this.internalValue) {
          this.className = 'el_input_focus1'
          this.reminder = false
        } else {
          this.reminder = true
          this.className = 'el_input_focusTrue'
        }
      } else {
        if (this.internalValue) {
          this.className = 'el_input_focus1'
        } else {
          this.className = 'el_input_focus'
        }
      }
      this.$emit('input', this.cascaderValue)
      this.$emit('filterData')
    },
    onChange ({ selectedOptions }) {
      console.log(selectedOptions, this.cascaderValue, ' 123')
      this.internalValue = selectedOptions.map(option => option.text)[selectedOptions.length - 1]
    },
    focus () {
      if (this.disable) return
      this.show = true
      if (!this.internalValue) {
        this.className = 'el_input_blur'
      }
    },
    blur () {
      this.show = false
      if (this.verify) {
        if (this.internalValue) {
          this.className = 'el_input_focus1'
          this.reminder = false
        } else {
          this.reminder = true
          this.className = 'el_input_focusTrue'
        }
      } else {
        if (this.internalValue) {
          this.className = 'el_input_focus1'
        } else {
          this.className = 'el_input_focus'
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
