<script setup lang="ts">
import { ref, reactive, onUnmounted, computed, onMounted, watch} from 'vue';
import { getThermals, intelligentUpdate } from '../Info/service/system.service';
import { IAirInletTemperature, IFanInfo, IIntelSpeedAdjust } from './model/fan.datatype';
import {
  getAirInletTemperature,
  getFanInfo,
  getIntelSpeedAdjustInfo,
  initializingIntelSpeedAdjustInfo,
} from './utils/fan.utils';
import IntelAdjustSpeed from './component/IntelAdjustSpeed.vue';
import useStore from '@/stores';
import { getErrorTranslate, traduction } from '@/utils/language';
import { loading, showFailedMessage, showSuccessMessage } from '@/utils/composition';
import RightTabs from '@/pages/System/Info/components/RightTabs.vue';
import { useRouter, useRoute } from 'vue-router';
import { UserPrivil } from '@/model/base-enum';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { getStoreData, setStoreData } from '../../../utils/composition';
import { ENERGY_PAGE_ENABLED } from '@/model/configure';

const $router = useRouter();
const route = useRoute();
const sensorLocation = computed(() => getStoreData('loct', 'sensorLocation'));
const loctFanInfo = computed(() => {return getStoreData('loct', 'fanInfo')}) as any;

let checkTabIndex = '1';
let tabList = [
  {
    index: '1',
    label: 'FAN_NAME',
    router: '/navigate/system/fans/fans-info',
    id: 'operationLog',
  },
  {
    index: '2',
    label: 'FAN_SENSOR_TAB',
    router: '/navigate/system/fans/fans-sensor',
    id: 'runLog',
  },
];

const handleSelect = (key: any) => {
  let res = tabList.find(item => {
    return item.index === key;
  });
  checkTabIndex = key;
  if (res) {
    $router.push(res.router);
    if (key === '1') {
      getThermals().then((fanInfo: any) => {
        setStoreData('loct', 'fanInfo', fanInfo);
      });
    }
  }
};

onMounted(() => {
  let path = route.fullPath.split('?');
  if (path[0] === tabList[0].router && !path[1]) {
    $router.push(tabList[0].router);
  }
});

loading(true);
const store = useStore();
let airInletTemperature: IAirInletTemperature = {} as any;
let timer: any;
let timeout = null as any;
const tempRefreshState = ref(false);
const mpcSwitchShow = ref(false);
// 获取locked锁定值
let systemLockDownEnabled = computed(() => {
  return store.state.glob.systemLocked;
});
const showTab = ref(false);
const intelSpeedAdjustInfo: any = reactive({ data: {} as IIntelSpeedAdjust });
const intelSpeedVisible = ref(false);

getThermals().then((res: any) => {
  setStoreData('loct', 'fanInfo', res);
  const airInletInfo = getAirInletTemperature(res.data);
  if (sensorLocation.value) {
    showTab.value = true;
  } else {
    $router.push(tabList[0].router);
  }
  airInletTemperature = {
    inletTemperature: airInletInfo.inletTemperature,
    time: airInletInfo.time,
    inletTempCelsius: airInletInfo.inletTempCelsius,
  };

  intelSpeedAdjustInfo.data = getIntelSpeedAdjustInfo(res.data);
  initializingIntelSpeedAdjustInfo(intelSpeedAdjustInfo.data);
  tempRefreshState.value = true;
  loading(false);
});

// 打开智能调速弹窗
function openAdjust() {
  intelSpeedVisible.value = true;
}

// 关闭智能调速弹窗，并下发设置请求
function intelSpeedClose(param: any) {
  intelSpeedVisible.value = false;
  if (param === null || param === undefined || param === '') {
    return;
  }
  intelligentUpdate(param).then(
    res => {
      if (res.data.error) {
        showFailedMessage(getErrorTranslate(res.data.error[0]?.code));
        intelSpeedAdjustInfo.data = getIntelSpeedAdjustInfo(res.data.data);
        initializingIntelSpeedAdjustInfo(intelSpeedAdjustInfo);
      } else {
        showSuccessMessage();
        intelSpeedAdjustInfo.data = getIntelSpeedAdjustInfo(res.data);
        setStoreData('loct', 'fanInfo', res);
        initializingIntelSpeedAdjustInfo(intelSpeedAdjustInfo);
      }
    },
    error => {
      showFailedMessage(getErrorTranslate(error?.data?.error[0]?.code));
      intelSpeedAdjustInfo.data = getIntelSpeedAdjustInfo(error?.data?.data);
      initializingIntelSpeedAdjustInfo(intelSpeedAdjustInfo);
    },
  );
}

watch(
  loctFanInfo,
  () => {
    const res = loctFanInfo.value;
    intelSpeedAdjustInfo.data = getIntelSpeedAdjustInfo(res.data);
  },
  { deep: true }
);

onUnmounted(() => {
  if (timeout !== null) {
    clearTimeout(timeout);
  }

  if (timer !== null) {
    clearTimeout(timer);
  }
});
</script>

<template>
  <div id="fanId">
    <div class="page-title">
      <span v-t="'COMMON_SYSTEM_FANS'" class="layout-page-title"></span>
    </div>
    <Lock />
    <div class="info-box">
      <!-- tab切换区域 -->
      <RightTabs
        v-if="showTab && ENERGY_PAGE_ENABLED"
        :check-tab-index="checkTabIndex"
        :tab-list="tabList"
        @handle-select="handleSelect"
      />
      <router-view />
    </div>
  </div>
</template>

<style lang="scss" scoped>
#fanId {
  padding-right: 24px;
  .page-title {
    margin-top: 16px;
  }

  #fanChartsId {
    width: 100%;
    height: 264px;
  }

  .content-details {
    padding: 24px 24px 24px 24px;
    background: var(--o-bg-color-base);
    border-radius: 4px;
  }

  .title {
    font-size: 16px;
    line-height: 24px;
    margin-top: 24px;
    font-weight: 600;
  }

  .icon-float {
    height: 16px;
    float: right;
  }

  .icon {
    color: var(--o-text-color-tertiary);
    &:hover {
      color: var(--o-color-primary-secondary);
    }
  }

  .icon-refresh {
    cursor: pointer;
  }

  .clear {
    margin-right: 8px;
    cursor: pointer;
  }

  .disabled-icon {
    cursor: not-allowed;
  }

  .fan-info {
    margin-top: 16px;
    background: var(--o-bg-color-base);
    border-radius: 4px;
    padding: 24px 24px 24px 24px;
  }

  .card-blank {
    margin-right: 16px;
    border-radius: 4px;
  }

  .icon-float-title {
    font-size: 12px;
    color: var(--o-text-color-secondary);
    line-height: 16px;
  }

  .refresh {
    margin-right: 24px;
  }

  .adjust-speed {
    display: inline-flex;
  }

  .speed-button {
    min-height: 24px;
    line-height: 1px;
  }

  .speed-mode {
    color: var(--o-text-color-primary) !important;
    text-align: center;
    font-weight: 500;
  }

  .speed-label {
    color: var(--o-text-color-tertiary);
  }

  .info {
    margin-top: 4px;
    line-height: 16px;
  }

  #currentValue {
    visibility: hidden;
  }
  #lock {
    margin-right: 0;
  }
}
</style>

<style lang="scss">
#fanId {
  .tooltip-icon-float {
    height: 3px;
    width: 16px;
    background-color: #0062dc;
    display: inline-block;
    margin-bottom: 3px;
    margin-right: 8px;
  }

  .tooltip-value {
    font-size: 16px;
    color: var(--o-text-color-primary);
    text-align: right;
    line-height: 24px;
    float: right;
  }

  .tooltip-time {
    font-size: 12px;
    color: var(--o-text-color-tertiary);
    line-height: 16px;
  }

  .tooltip-icon {
    background-color: #0062dc;
    width: 16px;
    height: 3px;
    display: inline-flex;
    margin: 4px 8px 4px 0;
  }

  .tooltip-item {
    height: 24px;
  }

  .tooptip-temp {
    color: var(--o-text-color-secondary);
    font-size: 12px;
  }
}
</style>
