<template>
  <div class="app-container">
    <div 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-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="" fit="cover"></el-image>
              <el-tag type="warning">未认证</el-tag>
            </div>
            <el-form>
              <el-form-item label="账号昵称：">
                <div>周树人</div>
                <el-icon>
                  <Edit/>
                </el-icon>
              </el-form-item>
              <el-form-item label="注册时间：">
                <div>2024/04/14</div>
              </el-form-item>
              <el-form-item label="注册时间：">
                <div>2024/04/14</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>139****7879</div>
                <el-icon>
                  <Edit/>
                </el-icon>
              </el-form-item>
              <el-form-item label="我的密码：">
                <div>********</div>
                <el-icon>
                  <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 type="warning" class="mr5">未认证</el-tag>
                <el-button type="primary" link>去申请</el-button>
              </el-form-item>
              <el-form-item label="最后提交时间：">
                2024/04/14 12:12
              </el-form-item>

              <el-form-item label="最后审核结果：">
                <el-tag type="danger" class="mr5">未通过</el-tag>
                <el-button type="primary" link>查看驳回理由</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">

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