<script lang="ts" setup>
import { HOSTNAME } from '@/utils/regular';
import { showElMessage } from '@/utils/utils';
import { traduction } from '@/utils/language';
import { editNetworkData } from '../network.server';

import Editor from '@/components/Editor/Editor.vue';
import GlobalStoreService from '@/services/gloabal-store-service';

const globalStoreService = new GlobalStoreService();

defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    },
    required: true,
  },
  lock: {
    type: Boolean,
    default: false,
    required: false,
  },
  permission: {
    type: Boolean,
    default: false,
    required: false,
  },
});

const emits = defineEmits(['setHostName']);

const errMsg = traduction('IBMC_IPV6_ADDRES_ERROR_4');

const rule = {
  trigger: 'change',
  validator: (vRule: any, value: string, callback: any) => {
    // 必传
    if (!value) {
      callback(new Error(errMsg));
      return;
    }

    // 长度为1-64
    if (value.length > 64) {
      callback(new Error(errMsg));
      return;
    }

    // 连字符 - 不能出现在开头和结尾
    if (value.indexOf('-') === 0 || value.lastIndexOf('-') === value.length - 1) {
      callback(new Error(errMsg));
      return;
    }

    // 输入字符类型匹配
    if (!HOSTNAME.test(value)) {
      callback(new Error(errMsg));
      return;
    }

    callback();
  },
};

const popoverSetting = {
  show: true,
  type: 'ordinary',
  width: 'auto',
  popperClass: 'wrap-el-popper',
  content: traduction('IBMC_RANGE_OF_VALUES1'),
  placement: 'top',
  trigger: 'focus',
};

// 点击保存
function confirm(value: string) {
  globalStoreService.setValue('isLoading', true);
  const params = {
    HostName: value,
  };
  editNetworkData(params)
    .then((res: any) => {
      emits('setHostName', value);
      showElMessage('success', traduction('COMMON_SUCCESS'));
      globalStoreService.setValue('isLoading', false);
    })
    .catch(err => {
      showElMessage('error', traduction('COMMON_FAILED'));
      globalStoreService.setValue('isLoading', false);
    });
}
</script>

<template>
  <div id="networkHost" class="hosk-box">
    <div class="part-title">{{ $t('HOME_HOST_NAME_DETAIL') }}</div>
    <div class="row">
      <span class="key">{{ $t('COMMON_NAME') }}</span>

      <Editor
        :input-style="{ width: '320px' }"
        :id-str="'hostName'"
        :input-type="'text'"
        :clearable="true"
        :disabled="!permission || lock"
        :value="data.hostName"
        :rule="rule"
        :popover-setting="popoverSetting"
        @confirm="confirm"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.hosk-box {
  padding: 24px 24px 22px 24px;
  background-color: var(--o-bg-color-base);
  border-radius: 4px;

  .part-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--o-text-color-primary);
    margin-bottom: 16px;
  }

  .row {
    display: flex;
    align-items: center;

    .key {
      margin-right: 24px;
      color: var(--o-text-color-secondary);
      font-size: 12px;
    }
  }

  :deep(.editor-box) {
    .btn-box .value {
      font-size: 12px;
    }
  }
}
</style>
