<script setup lang="ts">
import useStore from '@/stores';
import { reactive, computed, ref, nextTick } from 'vue';
import { cutStr, getBytes, showElMessage } from '@/utils/utils';
import { traduction } from '@/utils/language';
import GlobalStoreService from '@/services/gloabal-store-service';
import { getSecurityBulletinData, editSecurityBulletinData } from './security-bulletin.server';
import { UserPrivil } from '@/model/base-enum';
import { checkPrivil } from '@/apps/app-bmc/router/routes';

const globalStoreService = new GlobalStoreService();
const successMsg = traduction('COMMON_SUCCESS');
const errorMsg = traduction('COMMON_FAILED');
const store = useStore();

const extraSize = ref(0);
const MAX_TEXTAREA_LENGTH = 1024;
// 权限
const securityConfig = checkPrivil(UserPrivil.securityConfig);
// 锁定状态
const isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});

let oldData: any = reactive({});
let showData: any = reactive({});

function getData() {
  globalStoreService.setValue('isLoading', true);
  getSecurityBulletinData()
    .then((data: any) => {
      if (data) {
        globalStoreService.setValue('isLoading', false);
        Object.assign(oldData, JSON.parse(JSON.stringify(data)));
        Object.assign(showData, data);
        extraSize.value = getBytes(showData.SecurityBanner);
      } else {
        globalStoreService.setValue('isLoading', false);
        showElMessage('error', errorMsg);
      }
    })
    .catch(() => {
      globalStoreService.setValue('isLoading', false);
    });
}

function noticeTextareaChange(value: string): void {
  const size = getBytes(value);
  if (size > MAX_TEXTAREA_LENGTH) {
    nextTick(() => {
      showData.SecurityBanner = cutStr(value, MAX_TEXTAREA_LENGTH);
      extraSize.value = getBytes(showData.SecurityBanner);
    });
  } else {
    extraSize.value = size;
  }
}

// 点击保存
function submitForm() {
  const params: any = {};
  if (oldData.Enabled !== showData.Enabled) {
    params.Enabled = showData.Enabled;
  }
  if (oldData.SecurityBanner !== showData.SecurityBanner) {
    params.SecurityBanner = showData.SecurityBanner;
  }
  editSecurityBulletinData(params)
    .then(() => {
      Object.assign(oldData, params);
      showElMessage('success', successMsg);
    })
    .catch(() => {
      showElMessage('error', errorMsg);
    });
}

getData();
</script>

<template>
  <div class="security-bulletin-box">
    <el-form id="noticeForm" label-position="left" label-width="auto">
      <el-form-item :label="$t('SECURITY_LOGIN_ENABLED')">
        <el-switch
          id="noticeSwitch"
          v-model="showData.Enabled"
          :disabled="!securityConfig || isSystemLock"
        />
      </el-form-item>

      <el-form-item :label="$t('SECURITY_SECURITY_MESSAGE')" class="textarea-box">
        <el-input
          id="noticeTextarea"
          v-model="showData.SecurityBanner"
          :disabled="!showData.Enabled || !securityConfig || isSystemLock"
          :rows="14"
          type="textarea"
          @input="noticeTextareaChange"
        />

        <div class="extra-size-box">
          <span class="current-num">{{ extraSize }}</span>
          <span class="line">/</span>
          <span class="total">{{ MAX_TEXTAREA_LENGTH }}</span>
        </div>
      </el-form-item>

      <!-- 保存 -->
      <el-form-item v-if="securityConfig" label=" ">
        <el-button
          id="noticeSaveButton"
          :disabled="
            isSystemLock ||
              (showData.SecurityBanner === oldData.SecurityBanner &&
                showData.Enabled === oldData.Enabled)
          "
          type="primary"
          @click="submitForm"
        >
          {{ $t('COMMON_SAVE') }}
        </el-button>

        <el-button
          id="noticeResetButton"
          :disabled="showData.SecurityBanner === showData.DefaultSecurityBanner || isSystemLock"
          type="primary"
          @click="showData.SecurityBanner = showData.DefaultSecurityBanner"
        >
          {{ $t('SERVICE_DEFAULT_VALUE') }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

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

  :deep(.el-form-item:nth-last-child(1)) {
    margin-bottom: 0;
  }

  :deep(.el-textarea.is-disabled) {
    background-color: rgba(235, 237, 243, 1);
  }

  :deep(.el-form-item) {
    .el-form-item__label {
      white-space: nowrap;
    }
  }

  .textarea-box {
    position: relative;

    .extra-size-box {
      position: absolute;
      bottom: 5px;
      right: 10px;
      display: flex;
      align-items: center;
      color: #BFC7D7;
      line-height: 16px;

      .line {
        margin: 0 2px;
      }
    }
  }
}
</style>
