<script lang="ts" setup>
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';
import { getLoginRulesData } from '@/pages/User/Security/securtyPages/LoginRules/login-rules.server';
import { IconCaretDown, IconCaretUp } from '@computing/opendesign-icons';
import { computed, PropType, reactive, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useStore from '@/stores';

const props = defineProps({
  // 展示形态 nolmal:正常的 pullDown:下拉的
  showType: {
    type: String,
    default: 'nolmal',
    required: false,
  },
  // 请求规则数据时是否展示加载中的效果
  showLoading: {
    type: Boolean,
    default: false,
    required: false,
  },
  // 当前选中列表 ['Rule1', 'Rule2']
  checkList: {
    type: Array as PropType<string[]>,
    default: () => {
      return [];
    },
    required: true,
  },
  ruleDataList: {
    type: Array as PropType<any[]>,
    default: () => {
      return [];
    },
    required: false,
  },
});

watch(
  () => props.ruleDataList,
  () => {
    initData();
  },
);

watch(
  () => props.checkList,
  () => {
    init();
  },
);

const emits = defineEmits(['loginRuleChange']);
const router = useRouter();
const route = useRoute();
const store = useStore();

// 用户配置权限
const isConfigureUser = checkPrivil(UserPrivil.userConfig);
// 远程控制权限
const isOemKvmUser = checkPrivil(UserPrivil.remoteControl);

const isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});

// 规则列表
const ruleList: any[] = reactive(props.ruleDataList);

// 选择状态
let showLoginRules = reactive({});
// 下拉状态
let showState = reactive({});

function setForm(): void {
  ruleList.forEach((ruleItem: any, index: number) => {
    const id = 'Rule' + (index + 1);
    ruleItem.ID = id;
    showLoginRules[id] = false;
    let result = props.checkList.find((item: string) => {
      return item === id;
    });
    if (result) {
      showLoginRules[id] = true;
      if (props.showType === 'pullDown') {
        if (index === 0) {
          showState[id] = true;
        } else {
          showState[id] = false;
        }
      }
    }
  });
}

// 加工数据
function initData() {
  ruleList.splice(0);
  ruleList.push(...props.ruleDataList);
  setForm();
}

// 获取规则列表
function getData() {
  getLoginRulesData().then((data: any) => {
    ruleList.splice(0);
    if (data && data.Members) {
      ruleList.push(...data.Members);
      ruleList.forEach((item: any, index: number) => {
        item.ID = 'Rule' + (index + 1);
      });
      setForm();
    }
  });
}

// 点击 修改登陆规则
function toChangeRulesPage() {
  if (isConfigureUser) {
    sessionStorage.setItem('securityTab', 'loginRule');
    router.push('/navigate/user/security/rule');
  }
}

// 登陆规则发生修改
function loginRuleChange() {
  emits('loginRuleChange', showLoginRules);
}

function init(): void {
  const path = route.fullPath;
  // 数组中的路由对应页面的登录规则数据都需要通过接口请求，否则都是通过父组件传入
  const needGetDataPath = [
    '/navigate/user/local-users',
    '/navigate/user/kerberos',
    '/navigate/user/ldap',
  ];
  if (needGetDataPath.indexOf(path) >= 0) {
    getData();
  }
}
init();
</script>

<template>
  <!--  登录规则 -->
  <div class="login-rule-box">
    <div v-if="props.showType !== 'pullDown'" class="normal">
      <div class="part">
        <div v-for="(item, index) in ruleList" :key="item.ID" class="item-row">
          <el-checkbox
            v-model="showLoginRules[item.ID]"
            v-addId.checkbox="'check' + item.ID"
            :disabled="!(item.Enabled || item.Status) || !isOemKvmUser || isSystemLock"
            @change="loginRuleChange"
          >
            {{ $t('SERVICE_SNMP_RULE') }}{{ index + 1 }}
          </el-checkbox>
        </div>
      </div>

      <div class="part">
        <div v-for="item in ruleList" :key="item.ID" class="item-row">
          <span class="li-key">{{ $t('COMMON_ALLOW_TIME') }}：</span>
          <span :id="'descStart' + item.ID" class="li-value">
            {{ item.StartTime ? item.StartTime : '--' }}
          </span>
        </div>
      </div>

      <div class="part">
        <div v-for="item in ruleList" :key="item.ID" class="item-row">
          <span class="li-to">{{ $t('COMMON_SPLIT_TIME') }}</span>
          <span :id="'descEnd' + item.ID" class="li-value">
            {{ item.EndTime ? item.EndTime : '--' }}
          </span>
        </div>
      </div>

      <div class="part">
        <div v-for="item in ruleList" :key="item.ID" class="item-row">
          <span class="li-key">{{ $t('COMMON_ALLOW_IP') }}：</span>
          <span :id="'descIP' + item.ID" class="li-value">{{ item.IP ? item.IP : '--' }}</span>
        </div>
      </div>

      <div class="part">
        <div v-for="item in ruleList" :key="item.ID" class="item-row">
          <span class="li-key">{{ $t('COMMON_ALLOW_MAC') }}：</span>
          <span :id="'descMAC' + item.ID" class="li-value">{{ item.Mac ? item.Mac : '--' }}</span>
        </div>
      </div>
    </div>

    <div v-else class="pull-down">
      <div v-for="(item, index) in ruleList" :key="item.ID" class="part">
        <div class="row">
          <el-checkbox
            v-model="showLoginRules[item.ID]"
            v-addId.checkbox="'check' + item.ID"
            :disabled="!(item.Enabled || item.Status) || !isOemKvmUser || isSystemLock"
            @change="loginRuleChange"
          >
            {{ $t('SERVICE_SNMP_RULE') }}{{ index + 1 }}
          </el-checkbox>
          <el-icon class="up-down-icon-box" @click="showState[item.ID] = !showState[item.ID]">
            <IconCaretDown v-if="!showState[item.ID]" />
            <IconCaretUp v-else />
          </el-icon>
        </div>
        <div v-if="showState[item.ID]" class="pull-down-text-box">
          <div class="keys">
            <div class="key">{{ $t('COMMON_ALLOW_TIME') }}</div>
            <div class="key">{{ $t('COMMON_ALLOW_IP') }}</div>
            <div class="key">{{ $t('COMMON_ALLOW_MAC') }}</div>
          </div>

          <div class="values">
            <div class="value">
              <span :id="'descStart' + item.ID" class="value" :class="item.StartTime ? 'start-time' : ''">
                {{ item.StartTime ? item.StartTime : '' }}
              </span>
              <span class="to">{{ $t('COMMON_SPLIT_TIME') }}</span>
              <span :id="'descEnd' + item.ID" class="value end-time">
                {{ item.EndTime ? item.EndTime : '' }}
              </span>
            </div>
            <div :id="'descIP' + item.ID" class="value">{{ item.IP ? item.IP : '' }}</div>
            <div :id="'descMAC' + item.ID" class="value">{{ item.Mac ? item.Mac : '' }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="action-tip">
      <span class="key">{{ $t('COMMON_JUMP_TO_SECURITY_PAGE') }}</span>
      <span
        id="vncLoginJump"
        :class="['link', isSystemLock || !isConfigureUser ? 'disabled-btn' : '']"
        @click="toChangeRulesPage"
      >
        {{ $t('COMMON_CHANGE_LOGIN_RULES') }}
      </span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-rule-box {
  position: relative;
  .normal {
    display: flex;
    align-items: center;

    .item-row {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      color: rgba(141, 152, 170, 1);

      .li-key {
        margin-left: 16px;
        line-height: 16px;
      }

      .li-to {
        margin: 0 8px;
        line-height: 16px;
      }

      .li-value {
        display: inline-block;
        min-width: 94px;
        text-align: left;
        line-height: 16px;
      }
      .el-checkbox {
        height: auto;
      }
    }
  }

  .pull-down {
    .part {
      margin-bottom: 16px;
      .row {
        margin-bottom: 8px;
        display: flex;
        align-items: center;

        :deep(.el-checkbox) {
          height: auto;

          .el-checkbox__label {
            padding: 0 8px 0 10px;
          }
        }

        .el-icon {
          font-size: 16px;
          cursor: pointer;
          color: var(--o-text-color-tertiary);
        }

        .up-down-icon-box {
          position: relative;
          top: 1px;
        }
      }

      .pull-down-text-box {
        padding-left: 22px;
        display: flex;

        .keys {
          line-height: 16px;
          color: rgba(141, 152, 170, 1);

          .key {
            margin-bottom: 8px;
          }

          .key:nth-last-child(1) {
            margin-bottom: 0;
          }
        }

        .values {
          margin-left: 24px;
          line-height: 16px;
          color: var(--o-text-color-secondary);

          .start-time{
            margin-right: 5px;
          }

          .end-time{
            margin-left: 5px;
          }

          .value {
            min-height: 16px;
            margin-bottom: 8px;
          }

          .value:nth-last-child(1) {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .action-tip {
    margin-top: 0;
    line-height: 16px;
    padding-left: 18px;

    .key {
      color: rgba(141, 152, 170, 1);
    }

    .link {
      margin-left: 8px;
      cursor: pointer;
      color: var(--o-color-primary);

      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
