<template>
  <div class="content">
    <h-transfer
      class="transfer"
      ref="formCtrl"
      show-search
      v-model:target-keys="targetKeys"
      v-model:selected-keys="selectedKeys"
      :data-source="dataSource"
      :titles="[
        t('code.codeProgramme.selectCodeUseObject.noSelectTitle'),
        t('code.codeProgramme.selectCodeUseObject.selectTitle'),
      ]"
      :render="item => item.title"
    >
      <template #children="{ direction, selectedKeys, onItemSelect }"></template>
    </h-transfer>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, toRef } from 'vue';
import { useHttp } from '@crami/http';
import { Transfer as HTransfer } from '@crami/ui';
import { useI18n } from '@crami/locale';

/**控件对外数据*/
const formProps = {
  componentProps: {
    type: Object,
  },
};
export default defineComponent({
  name: 'SelectCodeUseObject',
  props: formProps,
  components: {
    HTransfer,
  },
  setup: (props: any) => {
    const { t } = useI18n();
    const formCtrl = toRef(props.componentProps, 'instanceRef');

    const targetKeys = ref<string[]>([...props.componentProps.keys]);

    const selectedKeys = ref<string[]>([]);
    const dataSource = ref([]);

    onMounted(() => {
      getUseInfo();
    });
    const getUseInfo = async () => {
      const data = await useHttp({
        url: '/api/codemanagement/codeManagement/queryObjInfoByDataModel',
        method: 'post',
        params: { lang: 'zhs', objInfo: '' },
      });
      dataSource.value = data.data;
    };
    return {
      t,
      formCtrl,
      dataSource,
      selectedKeys,
      targetKeys,
    };
  },
});
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 370px;
  .transfer {
    width: 100%;
    height: 100%;
    :deep(.ant-transfer-operation) {
      margin: 0 24px;
      .ant-btn {
        width: 32px;
        height: 32px;
        &:nth-of-type(1) {
          margin-bottom: 16px;
        }
      }
    }
  }
}
</style>
