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

<script>
import { Input } from 'ant-design-vue'
import lawCaseSelectPicker from '@product/iam/law/components/picker/law-case-select-picker.vue'
import pickValues from '@/common/services/pick-values'
import components from './_import-components/xm-select-law-action-import'

export default {
  name: 'XmSelectLawActionRender',
  components: {
    'a-input': Input,
    ...components,
  },
  props: {
    selectValue: {
      type: String,
      default: '',
    },
    treeName: {
      type: String,
      default: '案由',
    },
  },
  data() {
    return {
      readOnly: false,
    }
  },
  inject: {
    webflow: { default: () => {} },
    SdFormContext: { default: () => {} },
  },
  methods: {
    selectCase() {
      // 如果不是选择组织的值，则直接返回
      if (!this.selectValue.split(',').includes(this.webflow.getFieldValue('CASE_TYPE'))) {
        this.readOnly = false
        return
      }
      this.readOnly = true
      pickValues(lawCaseSelectPicker, {
        single: false,
        topNodeText: this.treeName,
      }).then((res) => {
        if (!res | (res && res.length === 0)) return
        this.caseChange(res)
      })
    },
    caseChange(e) {
      this.SdFormContext.setFieldValue('ACTION_NAME', e[0].text)
      this.SdFormContext.setFieldValue('ACTION_CODE', e[0].id)
    },
    caseInput(e) {
      this.SdFormContext.setFieldValue('ACTION_NAME', e.currentTarget.value)
    },
  },
}
</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>
