<template>
  <div class="contentBox">
    <!-- <h-input-search
      v-model:value="searchValue"
      :placeholder="t('queryConfiguration.common.searchPlaceholder')"
      @search="onSearch"
      allow-clear
    /> -->
    <h-input
      v-model:value="searchValue"
      :placeholder="t('queryConfiguration.common.searchPlaceholder')"
      @pressEnter="onSearch"
      allow-clear
    >
      <template #suffix>
        <img @click="onSearch" src="@/assets/ICP/icp-search.png" alt="" style="cursor: pointer" />
      </template>
    </h-input>

    <h-radio-group
      id="index-radio"
      ref="radioRef"
      v-model:value="radioValue"
      direction="vertical"
      @change="onChange"
    >
      <h-radio v-for="item in options" :value="item" :key="item.objTypeName">
        {{ item.objTypeHeader }}
      </h-radio>
    </h-radio-group>
  </div>
</template>
<script>
import { defineComponent, ref, computed, onMounted, reactive, watchEffect } from 'vue';
/* import { getInfo, ICP_CONFIG } from '@/utils/commMethods'; */
import { getInfo, ICP_CONFIG } from '@remote/icpx-platform/utils';
import {
  InputSearch as HInputSearch,
  RadioGroup as HRadioGroup,
  Radio as HRadio,
  Input as HInput,
  Space as HSpace,
  message,
} from '@crami/ui';
import { Http } from '@crami/http';
import { useI18n } from '@crami/locale';

const formProps = {
  componentProps: {
    type: Object,
    default: undefined,
  },
};

export default defineComponent({
  name: 'SendMessageDetail',
  components: { HRadioGroup, HRadio, HInput, HSpace, HInputSearch },
  props: formProps,
  setup() {
    // 多语言
    const { t } = useI18n();
    const searchValue = ref();
    const radioRef = ref();
    const radioValue = ref();
    const options = ref();

    const commonParams = computed(() => {
      return getInfo(ICP_CONFIG);
    });

    const getObjType = async searchValue => {
      const result = await Http.post({
        url: '/api/index/indexConfig/getObjType',
        params: {
          lang: commonParams.value?.lang,
          companyId: commonParams.value?.companyId,
          connect: commonParams.value?.connect,
          userId: commonParams.value?.user_id,
          searchValue: searchValue,
          timeZone: commonParams.value?.TIME_ZONE,
        },
      });
      const { data, code } = result;
      if (code == 200) {
        options.value = data;
      } else {
        message.error(result.msg);
      }
    };
    const onSearch = () => {
      getObjType(searchValue.value);
    };
    onMounted(() => {
      getObjType();
    });
    const onChange = event => {
      console.log(event);
    };

    return {
      t,
      searchValue,
      radioRef,
      options,
      radioValue,
      onChange,
      onSearch,
    };
  },
});
</script>
<style lang="less" scoped>
@import url('./style/create-modal.less');
:deep(.ant-input-search) {
  // .ant-input-search-button,
  // .ant-btn-icon-only {
  //   // height: 40px;
  //   border: none;
  // }
  // .ant-input-affix-wrapper {
  //   padding-top: 0;
  //   padding-bottom: 0;
  // }
  .ant-input-group-addon {
    // border: 1px solid #d9d9d9 !important;
    border-left: none;
  }
  // .ant-input {
  //   height: 40px;
  // }
}

.contentBox {
  border: 1px solid #d9d9d9;
  padding: 15px 20px;
}
:deep(.ant-radio-group) {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  margin-left: 4px;
  margin-bottom: 14px;
  height: 242px;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .ant-radio-wrapper {
    flex: none;
    height: 35px;
    margin-right: 0;
    span.ant-radio + * {
      margin-left: 4px;
      padding: 2px 0;
      padding-left: 4px;
      padding-right: 0;
      width: 100%;
    }
    &.ant-radio-wrapper-checked {
      span:nth-child(2) {
        background: #e6f0fe;
      }
    }
  }
  .ant-radio {
    top: 0;
  }
}
.ant-modal-confirm-content-inner {
  padding-bottom: 0 !important;
}
</style>
