<template>
  <div>
    <ych-select-user
      :disabled="disabled"
      :placeholder="placeholder"
      :multi="multi"
      :customReturnField="useCode ? 'username' : 'id'"
      :customOrgOrderSql="customOrgOrderSql"
      :customOrgFilterSql="customOrgFilterSql"
      @setName="setName"
      :linkage="linkage"
      :linkageMap="linkageMap"
      v-model="value"
      v-show="!disabled"
    />
    <span v-show="disabled">{{ name }}</span>
  </div>
</template>
<script>


import YchSelectUser from "../Common/ych-user/YchSelectUser.vue";

export default {
  name: 'SubTableUserButton',
  props: {
    record: Object,
    disabled: Boolean,
    property: String,
    showConfigString: String,
    linkage: String,
    linkageMap: {
      type: Object,
      default: () => {
      }
    },
  },
  components: {
    YchSelectUser
  },
  data() {
    return {
      placeholder: null,
      multi: false,
      useCode: false,
      customOrgOrderSql: null,
      customOrgFilterSql: null,
      value: this.record[this.property],
      name: null
    }
  },
  computed: {
    parentValue() {
      return this.record[this.property]
    }
  },
  created() {
    const showConfig = JSON.parse(this.showConfigString || '{}')
    this.multi = showConfig.multiple
    this.useCode = showConfig.useCode
    this.customOrgOrderSql = showConfig.customOrgOrderSql
    this.customOrgFilterSql = showConfig.customOrgFilterSql
    this.placeholder = showConfig.placeholder
  },
  methods:{
    setName(name){
      this.name = name
    }
  },
  watch: {
    value(value) {
      this.$emit('setFieldValue', this.property, value, this.record)
    },
    parentValue(value) {
      if (this.value !== value) {
        this.value = value
      }
    }
  }
}
</script>
