<template>
  <sd-tree-picker
    v-bind="pickerMixinProps"
    title="选择流程"
    :load-tree-data="loadTreeData"
    :search-tree-data="searchTreeData"
    v-on="$listeners"
  >
    <a-icon slot="suffixIcon" type="sd-flow-chart-add" />
  </sd-tree-picker>
</template>

<script>
import FlowService from '@/webflow/flow-service'
import pickerMixin from './sd-picker/picker-mixin'
import components from './_import-components/sd-flow-picker-import'
/**
 * input框，通过弹出对话框选择流程
 * @displayName SdFlowPicker 流程选择器
 */
export default {
  name: 'SdFlowPicker',
  components,
  mixins: [pickerMixin],
  props: {
    /**
     * 获取指定应用（应用id）下的流程
     * @since 8.1.0.24
     */
    appId: {
      type: String,
      default: null,
    },
    /**
     * 分级机构id，获取指定分级下的流程时传此参数
     * @since 8.1.0.23
     */
    belongedOrgId: {
      type: String,
      default: undefined,
    },
  },
  methods: {
    loadTreeData(parentCatId = '') {
      // 获取流程树
      const params = {
        listFlow: true,
        parentCatId,
      }
      if (this.appId) {
        params.appId = this.appId
      }
      if (this.belongedOrgId) {
        params.belongedOrgId = this.belongedOrgId
      }
      // 获取流程树
      return FlowService.getFlowsList(params).then((res) => {
        return res.data.map(function(item) {
          return {
            id: item.id,
            name: item.text,
            checkable: item.leaf,
            isLeaf: item.leaf,
          }
        })
      })
    },
    searchTreeData(text) {
      const params = {
        listFlow: true,
      }
      if (this.appId) {
        params.appId = this.appId
      }
      if (this.belongedOrgId) {
        params.belongedOrgId = this.belongedOrgId
      }
      params.name = text
      return FlowService.searchFlowTree(params).then((res) => {
        return res.data.map((item) => {
          return {
            id: item.id,
            name: item.text,
            checkable: item.leaf,
            isLeaf: item.leaf,
            expandable: item.expandable,
          }
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>

<docs>
```vue
<template>
  <form>
    选择流程：
    <sd-flow-picker v-model='value' />
  </form>
</template>

<script>
export default {
  data() {
    return {
      value:[]
    }}
}
</script>
```
</docs>
