<template>
  <a-input v-bind="$attrs" :read-only="readOnly" @input="change" @click="selectDept" />
</template>

<script>
import components from './_import-components/xm-select-law-user-render-import'
import sdGroupPicker from '@/common/components/sd-group-picker.vue'
import pickValues from '@/common/services/pick-values'

export default {
  name: 'XmSelectLawUserRender',
  components,
  model: { prop: 'value', event: 'change' },
  props: {
    selectValue: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      readOnly: false,
    }
  },
  inject: {
    webflow: { default: () => {} },
    SdFormContext: { default: () => {} },
  },
  methods: {
    selectDept() {
      // 如果不是选择组织的值，则直接返回
      if (this.selectValue !== this.webflow.getFieldValue('OWNER_POSITION')) {
        this.readOnly = false
        return
      }
      this.readOnly = true
      pickValues(sdGroupPicker, {
        single: true,
      }).then((res) => {
        if (!res | (res && res.length === 0)) return
        this.SdFormContext.setFieldValue('USER_NAME', res[0].name)
        this.SdFormContext.setFieldValue('USER_CODE', res[0].code)
        this.SdFormContext.setFieldValue('USER_ID', res[0].code)
        this.SdFormContext.validateField('USER_NAME')
      })
    },
    change(e) {
      this.SdFormContext.setFieldValue('USER_NAME', e.target.value)
      this.SdFormContext.setFieldValue('USER_CODE', '')
      this.SdFormContext.setFieldValue('USER_ID', '')
      this.SdFormContext.validateField('USER_NAME')
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.xmselinput {
  :global .ant-input {
    width: 70%;
    margin-right: 10px;
  }
  :global .ant-btn {
    width: auto;
    padding: 0 10px;
  }
}
</style>
