<template>
  <div class="page flex justify-around">
    <div class="card">
      <div class="title">密钥详情</div>
      <div class="key">
        <span class="text">{{ $t("keyMangage.name") }}：{{ name }}</span>
      </div>
      <!-- appId -->
      <div class="key">
        <span class="text">appId：{{ showCode }}</span>
        <span class="showOrHide" @click="showHideCode">{{ showText }}</span>
        <span v-if="showText == '隐藏'" class="copy" @click="copyKey(showCode)"
          >复制</span
        >
      </div>
      <!-- appKey -->
      <div class="key">
        <span class="text">appKey：{{ showCodeII }}</span>
        <span class="showOrHide" @click="showHideCodeII">{{ showTextII }}</span>
        <span
          v-if="showTextII == '隐藏'"
          class="copy"
          @click="copyKey(showCodeII)"
          >复制</span
        >
      </div>
      <!-- signKey -->
      <div class="key">
        <span class="text">signKey：{{ showCodeIII }}</span>
        <span class="showOrHide" @click="showHideCodeIII(showCodeIII)">{{
          showTextIII
        }}</span>
        <span v-if="showTextIII == '隐藏'" class="copy" @click="copyKey"
          >复制</span
        >
      </div>
      <div class="keyStatus">
        <span class="text"
          >密钥状态：
          <span v-if="!keyStatus" style="color: #36db43">正常</span>
          <span v-else style="color: #ff0000">失效</span>
        </span>
        <span v-if="keyStatus" class="fail" @click="changeStatus(0)">恢复</span>
        <span v-if="!keyStatus" class="success" @click="changeStatus(1)"
          >作废</span
        >
      </div>
    </div>
  </div>
</template>

<!-- videoType==1为竖,==2为横 -->
<script setup>
//#region  导入
import { linkEmits } from "element-plus";
import { getCurrentInstance } from "vue";

import { useI18n } from "vue-i18n";

import { useRoute, useRouter } from "vue-router";

import { getKeyByIdApi, updateKeyStatusApi } from "@/api_mangage/key";

const route = useRoute();
const router = useRouter();
const { locale } = useI18n();
const lanChange = ref(locale);
const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录

const keyId = ref("");
const name = ref("");

const appId = ref("");
const hideCode = ref("");
const showCode = ref("");
const showText = ref("查看");

const showHideCode = () => {
  if (showText.value == "查看") {
    showText.value = "隐藏";
    showCode.value = appId.value;
  } else {
    showText.value = "查看";
    showCode.value = hideCode.value;
  }
};

const appKey = ref("");
const hideCodeII = ref("");
const showCodeII = ref("");
const showTextII = ref("查看");

const showHideCodeII = () => {
  if (showTextII.value == "查看") {
    showTextII.value = "隐藏";
    showCodeII.value = appKey.value;
  } else {
    showTextII.value = "查看";
    showCodeII.value = hideCodeII.value;
  }
};

const signKey = ref("");
const hideCodeIII = ref("");
const showCodeIII = ref("");
const showTextIII = ref("查看");

const showHideCodeIII = () => {
  if (showTextIII.value == "查看") {
    showTextIII.value = "隐藏";
    showCodeIII.value = signKey.value;
  } else {
    showTextIII.value = "查看";
    showCodeIII.value = hideCodeIII.value;
  }
};

const getKeyFunc = async () => {
  const id = keyId.value;
  try {
    const res = await getKeyByIdApi(id);
    console.log(res, "res");
    appId.value = res.data.appId;
    appKey.value = res.data.appKey;
    signKey.value = res.data.signKey;
    keyStatus.value = res.data.status;
    name.value = res.data.name;

    const len = signKey.value.length;
    const lenII = signKey.value.length;
    const lenIII = signKey.value.length;

    let code = "";
    let codeII = "";
    let codeIII = "";
    for (let index = 0; index < len; index++) {
      code += "*";
    }

    for (let index = 0; index < lenII; index++) {
      codeII += "*";
    }

    for (let index = 0; index < lenIII; index++) {
      codeIII += "*";
    }
    hideCode.value = code;
    showCode.value = code;

    hideCodeII.value = codeII;
    showCodeII.value = codeII;

    hideCodeIII.value = codeIII;
    showCodeIII.value = codeIII;
  } catch (error) {
    console.log(error, "err");
  }
};

const copyKey = (text) => {
  navigator.clipboard
    .writeText(text)
    .then(() => {
      ElMessage.success("复制成功！");
    })
    .catch(() => {
      ElMessage.error("复制失败！");
    });
};

const keyStatus = ref("");

const changeStatus = async (status) => {
  const id = keyId.value;
  if (status) {
    ElMessageBox.confirm("此操作将作废密钥，确定?", "Warning", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(async () => {
        try {
          const res = await updateKeyStatusApi(id, status);
          if (res.code == 200) {
            ElMessage({
              type: "success",
              message: "作废成功！",
            });
            getKeyFunc();
          }
        } catch (error) {
          console.log(error, "err");
        }
      })
      .catch(() => {});
  } else {
    try {
      const res = await updateKeyStatusApi(id, status);
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "恢复成功！",
        });
        getKeyFunc();
      }
    } catch (error) {
      console.log(error, "err");
    }
  }
};

onMounted(() => {
  keyId.value = route.query.id;
  getKeyFunc();
});
</script>

<style lang="scss" scoped>
.page {
  height: calc(100vh - 80px);
  // height: calc(100vh - 80px);
  background-color: #ffffff;
  border-radius: 30px 0 0 0;
  overflow: hidden;
  .card {
    width: 80%;
    height: 70%;
    background-color: #fafafa;
    margin-top: 10vh;
    border-radius: 5vh;
    box-shadow: #0000002e 1px 1px 1px 1px;

    .title {
      text-align: center;
      font-size: 3vh;
      padding: 4vh;
    }

    .key {
      text-align: center;
      font-size: 2.5vh;
      padding: 5vh;
      padding-bottom: 0.5vh;
      text-align: left;

      .copy {
        color: #ffffff;
        margin-left: 2vh;
        cursor: pointer;
        transition: all 0.3s;
        background-color: #3a57b6;
        padding: 0.7vh;
        border-radius: 15px;
        &:hover {
          background-color: #1ceedc;
        }
      }
      .showOrHide {
        color: #20b4a8;
        margin-left: 2vh;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
          color: #476ad9;
        }
      }
    }
    .keyStatus {
      text-align: center;
      font-size: 2.9vh;
      padding: 4vh;
      margin-top: 1vh;

      .success {
        color: #ffffff;
        background-color: #ff0000;
        margin-left: 2vh;
        padding: 0.7vh;
        border-radius: 15px;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
          background-color: #36db43;
        }
      }
      .fail {
        color: #ffffff;
        background-color: #36db43;
        margin-left: 2vh;
        padding: 0.7vh;
        border-radius: 15px;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
          background-color: #ff0000;
        }
      }
    }
  }
}
</style>
