<template>
  <div class="app-container">
    <div v-if="infoData.status === '驳回'" class="remind flex-align-center">
      <el-icon>
        <Bell/>
      </el-icon>
      <div class="text">您的企业认证未通过，可继续申请</div>
      <el-button type="primary" @click="$router.push('/console/authentication')">申请认证</el-button>
    </div>

    <el-alert v-if="infoData.checkStatus === 0" style="width: 300px" class="mb20" show-icon
              title="您的企业认证已提交，请等待审核" type="info" effect="dark"/>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>基本信息</span>
            </div>
          </template>
          <div class="flex base-info">
            <div class="left">
              <el-image :src="infoData.avatar" fit="cover"></el-image>
              <el-tag v-if="infoData.checkStatus === 1" type="success">{{infoData.checkStatusName}}</el-tag>
              <el-tag v-if="infoData.checkStatus === 2 || infoData.checkStatus === 3 " type="danger">{{infoData.checkStatusName}}</el-tag>
              <el-tag v-if="infoData.checkStatus === 0" type="success">{{infoData.checkStatusName}}</el-tag>
            </div>
            <el-form label-width="110px" label-position="left">
              <el-form-item label="账号昵称：">
                <div>{{ infoData.nickname }}</div>
                <el-button type="primary" link @click="$router.push('/user/profile?tab=0')" class="ml20">修改
                </el-button>
              </el-form-item>
              <el-form-item label="注册时间：">
                <div>{{ parseTime(infoData.createTime, '{y}-{m}-{d}') }}</div>
              </el-form-item>
              <!--              <el-form-item label="最后登录时间：">-->
              <!--                <div>{{ parseTime(infoData.enterpriseName, '{y}-{m}-{d}') || '-' }}</div>-->
              <!--              </el-form-item>-->
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>账号安全</span>
            </div>
          </template>
          <div>
            <el-form label-width="96px" label-position="left">
              <el-form-item label="我的手机号：">
                <div>{{ infoData.mobile }}</div>
                <el-button type="primary" link @click="$router.push('/user/profile?tab=1')" class="ml20">换绑
                </el-button>
              </el-form-item>
              <el-form-item label="我的密码：">
                <div>********</div>
                <el-button type="primary" link @click="$router.push('/user/profile?tab=2')" class="ml20">修改密码
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>我的认证</span>
            </div>
          </template>
          <div>
            <el-form label-width="110px" label-position="left">
              <el-form-item label="企业认证：">
                <el-tag v-if="infoData.checkStatus === 1" type="success">{{infoData.checkStatusName}}</el-tag>
                <el-tag v-if="infoData.checkStatus === 0" type="success">{{infoData.checkStatusName}}</el-tag>
                <el-button v-if="infoData.checkStatus ===2 || infoData.checkStatus === 3"
                           @click="$router.push('/console/authentication')" type="primary" link class="ml20">去申请
                </el-button>
              </el-form-item>
              <!--              <el-form-item label="最后提交时间：">-->
              <!--                {{ infoData.submitTime }}-->
              <!--              </el-form-item>-->

              <el-form-item label="最后审核结果：">
                <el-tag v-if="infoData.checkStatus === 2" type="danger" class="mr5">{{infoData.checkStatusName}}</el-tag>
                <el-tag v-if="infoData.checkStatus === 0" type="primary" class="mr5">{{infoData.checkStatusName}}</el-tag>
                <el-tag v-if="infoData.checkStatus === 1" type="primary" class="mr5">审核通过</el-tag>

                <el-button v-if="infoData.check_status === '驳回'" type="primary" link @click="handleViewReason">
                  查看驳回理由
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>AppId和AppSecret</span>
            </div>
          </template>
          <el-form-item label="AppId：">
            <el-tooltip
                effect="dark"
                :content="appData.appId || '-'"
                placement="top"
                v-if="appData.appId"
            >
            <span class="secret-text">
              {{ formatString(appData.appId) }}
            </span>
            </el-tooltip>
            <span v-else>-</span>
          </el-form-item>
          <el-form-item label="AppSecret：">
            <el-tooltip
                effect="dark"
                :content="appData.appSecret || '-'"
                placement="top"
                v-if="appData.appSecret"
            >
            <span class="secret-text">
              {{ formatString(appData.appSecret) }}
            </span>
            </el-tooltip>
            <span v-else>-</span>
        </el-form-item>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>Token</span>
            </div>
          </template>
          <token />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>常见Q&A</span>
            </div>
          </template>
          <el-form-item label="Q：">
            <div>用户中心是用来干什么的?</div>
          </el-form-item>
          <el-form-item label="A：">
            <div>用户中心是用来帮助您管理账号的基本信息，以及管理企业认证信息的
              当前支持的管理事项有限，后续将逐步增加
            </div>
          </el-form-item>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog></el-dialog>
  </div>
</template>

<script setup name="Overview">
import {auditInfo, appInfo} from '@/api/console.js'
import token from './components/token.vue'
import {ref} from 'vue'
import {ElMessageBox} from 'element-plus'
import {parseTime} from "../../utils/ruoyi.js";
import {useDict} from "@/utils/dict.js";
import {listData} from "@/api/system/dict/data.js";

// const {proxy} = getCurrentInstance();
// const {check_status} = proxy.useDict("check_status");

const infoData = ref({})
const appData = ref({})


function getAuditInfo() {
  auditInfo().then(res => {
    infoData.value = res.data
  })
}


function getAppInfo() {
  appInfo().then(res => {
    appData.value = res.data
  })
}

/** 查看驳回理由按钮操作 */
function handleViewReason() {
  ElMessageBox.alert(infoData.value.remark, '驳回理由', {
    confirmButtonText: '关闭',
    callback: (action) => {
    }
  })
}

getAuditInfo()
getAppInfo()

// script setup 里加一个方法
function formatString(str) {
  if (!str) return '-'
  if (str.length <= 10) return str
  return `${str.slice(0, 4)}****${str.slice(-4)}`
}

</script>
<style scoped lang="scss">
.remind {
  padding: 10px 20px;
  background-color: #FFFFFF;
  border-radius: 4px;
  margin-bottom: 20px;

  .text {
    font-weight: 400;
    font-size: 16px;
    color: #303233;
    margin: 0 20px 0 10px;
  }
}

.el-card {
  //border: none;
  border-radius: 15px;
  margin-bottom: 20px;
  box-shadow: 1px 1px 1px 0 #b9b9b9;

  :deep(.el-card__header) {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }

  :deep(.el-card__body) {
    min-height: 134px;
  }
}

.card-header {
  font-weight: bold;
  font-size: 20px;
  color: #303233;
}

.base-info {
  .el-image {
    width: 64px;
    height: 64px;
    border-radius: 64px;
    margin-bottom: 10px;
  }

  .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 40px;
  }
}

.el-form-item {
  margin-bottom: 0;

  :deep(.el-form-item__label) {
    font-weight: 400;
    font-size: 14px;
    color: #626566;
  }

  :deep(.el-form-item__content) {
    font-weight: 500;
    font-size: 14px;
    color: #303233;
  }

  .el-icon {
    margin-left: 5px;
    cursor: pointer;
  }
}
</style>
