<template>
  <view class="wk-field wk-field-dept" @click.stop="handleChooseDept">
    <view v-if="_label" class="wk-field__label">
      <view v-if="field.isNull === 1" class="line" />
      {{ _label }}
    </view>
    <view class="wk-field__body">
      <view class="wk-field__body-core">
        {{ valueStr }}
      </view>
			
      <text class="wk wk-arrow-right icon-right" />
    </view>
  </view>
</template>

<script>
  import mixins from './mixins'

  export default {
    name: 'WkFieldDept',
    mixins: [mixins],
    data() {
      return {
        guid: null,
        formValue: []
      }
    },
    computed: {
      valueStr() {
        const arr = this.formValue || []
        return arr.map(o => o.label || o.name).join(',')
      }
    },
    created() {
      this.guid = this.$guid()
    },
    methods: {
      handleChooseDept() {
        if (this.field.disabled) {
          if (this.config && this.config.disabledMsg) {
            this.$toast(this.config.disabledMsg)
          }
          return
        }
        const bridge = getApp().globalData.selectedValBridge
        bridge.dept = {
          guid: this.guid,
          title: '选择' + this.field.name,
          defaultVal: this.formValue || []
        }
        uni.$on('selected-dept', this.selectedDept)
        this.$Router.navigateTo('/pages_common/selectList/dept')
      },
      selectedDept(data) {
        if (this.guid === data.guid) {
          this.formValue = data.data
          this.$emit('input', this.formValue)
          this.$emit('change', {
            index: this.index,
            field: this.field,
            value: this.formValue
          })
        }
        uni.$off('selected-dept')
      }
    }
  }
</script>

<style scoped lang="scss">
	@import './wkField.scss';
	.wk-field-dept {}
</style>
