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


import YchSelectDepart from "../Common/ych-org/YchSelectDepart.vue";

export default {
  name: 'SubTableDeptButton',
  props: {
    record: Object,
    disabled: Boolean,
    property: String,
    showConfigString: String,
  },
  components: {
    YchSelectDepart
  },
  data() {
    return {
      placeholder: null,
      multi: false,
      useCode: false,
      customOrgOrderSql: null,
      customOrgFilterSql: null,
      value: this.record[this.property],
      name: null
    }
  },
  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)
    }
  }
}
</script>
