<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.status === '待审核'" 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="baseUrl + infoData.avatar" fit="cover"></el-image>
              <el-tag v-if="infoData.status === '审核通过'" type="success">已认证</el-tag>
              <el-tag v-else type="warning">未认证</el-tag>
            </div>
            <el-form label-width="110px" label-position="left">
              <el-form-item label="账号昵称：">
                <div>{{ infoData.nickName }}</div>
                <el-icon @click="$router.push('/user/profile')">
                  <Edit/>
                </el-icon>
              </el-form-item>
              <el-form-item label="注册时间：">
                <div>{{ infoData.createUserTime }}</div>
              </el-form-item>
              <el-form-item label="最后登录时间：">
                <div>{{ infoData.endLoginUserTime }}</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-icon @click="$router.push('/user/profile')">
                  <Edit/>
                </el-icon>
              </el-form-item>
              <el-form-item label="我的密码：">
                <div>********</div>
                <el-icon @click="$router.push('/user/profile')">
                  <Edit/>
                </el-icon>
              </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.status === '审核通过'" type="success">已认证</el-tag>
                <el-tag v-else class="mr5" type="warning">未认证</el-tag>

                <el-button v-if="!infoData.status || infoData.status === '驳回'" type="primary" link>去申请</el-button>
              </el-form-item>
              <el-form-item label="最后提交时间：">
                {{ infoData.submitTime }}
              </el-form-item>

              <el-form-item label="最后审核结果：">
                <el-tag v-if="infoData.status === '驳回'" type="danger" class="mr5">未通过</el-tag>
                <el-tag v-if="infoData.status === '待审核'" type="primary" class="mr5">待审核</el-tag>
                <el-tag v-if="infoData.status === '审核通过'" type="primary" class="mr5">审核通过</el-tag>

                <el-button v-if="infoData.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>常见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>

  </div>
</template>

<script setup name="Overview">
import { auditInfo } from '@/api/console.js'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const baseUrl = import.meta.env.VITE_APP_BASE_API

const infoData = ref({})

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

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

getAuditInfo()
</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;
  margin-bottom: 20px;

  :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>
