<template>
  <div class="h-full mt-4 mx-4 bg-white p-6 rounded">
    <!-- 顶部：公司认证信息 -->
    <div class="mb-10">
      <div class="card-header font-bold text-lg text-gray-800 border-l-4 border-blue-500 pl-3 mb-6">
        公司认证信息
      </div>

      <div class="info-wrapper p-2 pl-6">
        <!-- 公司信息部分 -->
        <div class="company-section">
          <h3 class="font-bold text-gray-800 mb-6 flex items-center">
            公司信息
          </h3>
          <div class="info-list space-y-4 text-sm text-gray-700">
            <div class="flex items-center">
              <span class="w-32 text-gray-500">企业名称：</span>
              <span>XXXX公司</span>
              <el-link type="primary" :underline="false" class="ml-4" @click="copyText('XXXX公司')">复制</el-link>
            </div>
            <div class="flex items-center">
              <span class="w-32 text-gray-500">官方邮箱：</span>
              <span>2423@162.com</span>
            </div>
            <div class="flex items-center">
              <span class="w-32 text-gray-500">办公地址：</span>
              <span>上海市XXXX</span>
            </div>
            <div class="flex items-center">
              <span class="w-32 text-gray-500">统一社会信用代码：</span>
              <span>234752364</span>
            </div>
            
            <div class="flex mt-6">
              <span class="w-32 text-gray-500">委托招聘证明</span>
              <div class="flex gap-4">
                <el-image style="width: 80px; height: 50px" class="border rounded bg-gray-50" :preview-src-list="['https://via.placeholder.com/80x50']"></el-image>
                <el-image style="width: 80px; height: 50px" class="border rounded bg-gray-50" :preview-src-list="['https://via.placeholder.com/80x50']"></el-image>
              </div>
            </div>
          </div>
        </div>

        <!-- 联系人信息部分 -->
        <div class="contact-section">
          <h3 class="font-bold text-gray-800 mb-6">
            联系人信息
          </h3>
          <div class="info-list space-y-4 text-sm text-gray-700">
            <div class="mb-4">
               <el-avatar :size="50" class="bg-gray-300">头像</el-avatar>
            </div>
            <div class="flex items-center">
              <span class="w-24 text-gray-500">联系人：</span>
              <span>张三</span>
            </div>
            <div class="flex items-center">
              <span class="w-24 text-gray-500">手机号：</span>
              <span>183274342</span>
            </div>
            <div class="flex items-center">
              <span class="w-24 text-gray-500">提交时间：</span>
              <span>2019-09-09 10:40</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部：审核信息 -->
    <div>
      <div class="font-bold text-lg text-gray-800 border-l-4 border-blue-500 pl-3 mb-6">
        审核信息
      </div>
      <div class="pl-6 space-y-6 text-sm text-gray-800 flex flex-col items-start bg-gray-50 py-6 pr-6 rounded" style="width: 100%">
        <div>审核结果： 通过</div>
        <div>备注： 说明说明说明说明说明说明</div>
        <div>审核时间： 2019-09-09 10:40</div>
        <div>审核人： 李四</div>
      </div>

      <div class="mt-12 text-center mb-8">
        <el-button @click="handleBack">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();

const copyText = (text: string) => {
  navigator.clipboard.writeText(text).then(() => {
    ElMessage.success('复制成功');
  });
};

const handleBack = () => {
  router.back();
};
</script>

<style scoped lang="scss">
.box-card {
  border: none;
  border-radius: 4px;
}

.info-wrapper {
  display: flex;
  gap: 15%;
}

.company-section {
  flex: 1;
  max-width: 600px;
}

.contact-section {
  flex: 1;
}

:deep(.el-card__header) {
  border-bottom: none;
  padding-bottom: 0;
}
</style>
