<template>
  <!-- 主体库 -->
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-content">
        <div class="search-right">
          <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item prop="enterpriseName">
              <el-input v-model="queryParams.enterpriseName" placeholder="请输入企业名称进行查询" clearable maxlength="32"
                class="search-input" @keyup.enter.native="handleQuery">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery" class="search-btn">查询</el-button>
              <el-button @click="resetQuery" class="reset-btn">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <!-- 企业卡片网格（可滚动） -->
    <div class="enterprise-grid">
      <!-- 新建企业卡片 -->
      <div class="enterprise-card create-card" @click="handleAdd" v-hasPermi="['enterpriseLibrary:enterprise:add']">
        <div class="create-icon">
          <i class="el-icon-plus"></i>
        </div>
        <div class="create-text">新建企业主体信息</div>
      </div>

      <!-- 企业信息卡片 -->
      <div class="enterprise-card-wrapper" v-for="item in enterpriseList" :key="item.enterpriseId">
        <div class="enterprise-card">
          <div class="enterprise-header">
            <h3 class="enterprise-name">{{ item.enterpriseName }}</h3>
          </div>

          <div class="enterprise-info">
            <div class="info-item">
              <span class="label">法定代表人:</span>
              <span class="value">{{ item.legalPersonName }}</span>
            </div>
            <div class="info-item">
              <span class="label">统一信用代码:</span>
              <span class="value">{{ item.enterpriseCode }}</span>
            </div>
          </div>

           <!-- 数据统计 -->
           <div class="data-stats">
             <div class="stat-item">
               <span class="stat-label">资质库</span>
               <span class="stat-value">{{ item.qualificationNum }}</span>
             </div>
             <div class="stat-item">
               <span class="stat-label">业绩库</span>
               <span class="stat-value">{{ item.performanceNum }}</span>
             </div>
             <div class="stat-item">
               <span class="stat-label">人员库</span>
               <span class="stat-value">{{ item.personnelNum }}</span>
             </div>
             <div class="stat-item">
               <span class="stat-label">财务库</span>
               <span class="stat-value">{{ item.financeNum }}</span>
             </div>
             
           </div>

          <!-- 操作按钮 -->
          <div class="enterprise-actions">
            <div @click="handleEnterpriseKnowledge(item)">
              <img :src="EnterpriseKnowledge" alt="企业知识库" />
              <span>企业知识库</span>
            </div>
            <div v-hasPermi="['enterpriseLibrary:enterprise:detail']" @click="handleDetail(item)">
              <img :src="EnterpriseDetail" alt="详情" />
              <span>详情</span>
            </div>
            <div v-hasPermi="['enterpriseLibrary:enterprise:edit']" @click="handleEdit(item)">
              <img :src="EnterpriseEdit" alt="编辑" />
              <span>编辑</span>
            </div>
            <div v-hasPermi="['enterpriseLibrary:enterprise:del']" @click="handleDel(item)">
              <img :src="EnterpriseDelete" alt="删除" />
              <span>删除</span>
            </div>
          </div>
        </div>

        <!-- 过期证件标签 - 独立于卡片之外 -->
        <div class="expired-tags" v-if="item.errorInfos && item.errorInfos.length > 0">
          <span class="expired-text">{{ item.errorInfos.join(',') }}</span>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import EnterpriseKnowledge from '@/assets/enterpriseLibrary/enterprise/enterprise-knowledge.png';
import EnterpriseDetail from '@/assets/enterpriseLibrary/enterprise/enterprise-detail.png';
import EnterpriseEdit from '@/assets/enterpriseLibrary/enterprise/enterprise-edit.png';
import EnterpriseDelete from '@/assets/enterpriseLibrary/enterprise/enterprise-delete.png';
import { encryptWithSM4 } from '@/utils/sm'
import { listAPI, delDataAPI } from '@/api/enterpriseLibrary/enterprise/enterprise'
export default {
  name: 'Enterprise',
  components: {
    
  },
  data() {
    return {
      // 企业知识库、编辑等图片引用
      EnterpriseKnowledge,
      EnterpriseDetail,
      EnterpriseEdit,
      EnterpriseDelete,
      queryParams: {
        enterpriseName: '',
        pageNum: 1,
        pageSize: 10,

      },
      total: 0,
      enterpriseList: []
    }
  },

  created() {
    this.getList()
  },

  methods: {
    // 获取企业列表
    getList() {
      listAPI(this.queryParams).then(res => {
        if(res.code === 200){
          this.enterpriseList = res.rows;
          this.total = res.total;
        }
      })
    },

    // 查询
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },

    // 重置
    resetQuery() {
      this.queryParams.enterpriseName = ''
      this.handleQuery()
    },

    // 新增企业
    handleAdd() {
      this.$router.push({
        name: 'EnterpriseForm',
        query: {
          type: encryptWithSM4('add'),
          enterpriseId: encryptWithSM4(''),
        }
      })
    },
    // 编辑企业
    handleEdit(item){
      this.$router.push({
        name: 'EnterpriseEditForm',
        query: {
          type: encryptWithSM4('edit'),
          enterpriseId: encryptWithSM4(item.enterpriseId + '' || '0'),
        }
      })
    },
    // 删除企业
    handleDel(item){
      this.$confirm(`确定要删除企业"${item.enterpriseName}"吗？删除后将无法恢复！`, '操作提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true,
        customClass: 'delete-confirm-dialog'
      }).then(() => {
        delDataAPI({enterpriseId: item.enterpriseId}).then(res => {
          if(res.code === 200){
            this.$message.success('删除成功');
            this.getList();
          } else {
            this.$message.error(res.msg || '删除失败');
          }
        }).catch(error => {
          console.error('删除失败:', error);
        });
      })
    },
    // 详情
    handleDetail(enterprise){
      this.$router.push({
        name: 'EnterpriseDetail',
        query: {
          type: encryptWithSM4('detail'),
          enterpriseId: encryptWithSM4(enterprise.enterpriseId + '' || '0'),
        }
      })
    },
    // 企业知识库
    handleEnterpriseKnowledge(enterprise){
      this.$router.push({
        name: 'EnterpriseKnowledge',
        query: {
          enterpriseId: encryptWithSM4(enterprise.enterpriseId + '' ?? '0'),
        }
      })

    },
    

    // 分页大小改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    }
  },
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  background: linear-gradient( 180deg, #F1F6FF 20%, #E5EFFF 100%);
  height: calc(100vh - 85px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-header {
  margin-bottom: 20px;

  .page-title {
    font-size: 20px;
    font-weight: 500;
    color: #424242;
    margin: 0;
  }
}

.search-container {
  padding: 0px;
  border-radius: 8px;
  flex-shrink: 0;
 
  .search-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .search-left {
    .page-title {
      font-size: 24px;
      font-weight: 500;
      color: #333;
      margin: 0;
    }
  }

  .search-right {
    .search-input {
      width: 300px;
    }

    .search-btn {
      width: 98px;
      height: 36px;
      background: #1F72EA;
      box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
      border-radius: 4px;
      border: none;
      color: #fff;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        background: #4A8BFF;
        box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
      }
    }

    .reset-btn {
      width: 98px;
      height: 36px;
      background: #FFFFFF;
      box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
      border-radius: 4px;
      border: none;
      color: #666;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        background: #f5f5f5;
        color: #409EFF;
        box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
      }
    }
  }
}

.enterprise-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px; // 卡片之间的间距
  padding: 20px 6px 20px 0px; // 网格内边距，右侧留出空间给滚动条
  overflow-y: auto;
  overflow-x: hidden;
  align-items: start; // 卡片从顶部对齐，根据内容自适应高度

  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;

    &:hover {
      background: rgba(0, 0, 0, 0.3);
    }
  }
}

.enterprise-card-wrapper {
  display: flex;
  flex-direction: column;
}

.enterprise-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 280px; // 设置最小高度，但允许根据内容自适应增长

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }

  &.create-card {
    min-height: 288px;
    border: 2px dashed #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    &:hover {
      border-color: #409EFF;
      background: #f0f8ff;
    }

    .create-icon {
      font-size: 48px;
      color: #999;
      margin-bottom: 10px;
    }

    .create-text {
      font-size: 16px;
      color: #666;
    }
  }
}

.enterprise-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;

  .enterprise-name {
    font-size: 20px;
    font-weight: bold;
    color: #424242;
    margin: 0;
    flex: 1;
    line-height: 1.4;
  }

  .enterprise-rating {
    background: #409EFF;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    margin-left: 10px;
  }
}

.enterprise-info {
  // margin-bottom: 15px;

  .info-item {
    display: flex;
    margin-bottom: 8px;

    .label {
      color: #888888;
      font-size: 14px;
      min-width: 100px;
    }

    .value {
      color: #424242;
      font-size: 16px;
      font-weight: bold;
      flex: 1;
    }
  }
}

.expired-tags {
  padding: 8px 12px;
  flex-shrink: 0;

  .expired-text {
    display: block;
    color: #db3e29;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-all;
  }
}

.data-stats {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  gap: 8px;

  .stat-item {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e9ecef;

    .stat-label {
      display: block;
      font-size: 14px;
      color: #666;
      margin-bottom: 4px;
    }

    .stat-value {
      display: block;
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
  }
}

.enterprise-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: auto; // 将操作按钮推到底部
  flex-shrink: 0; // 防止被压缩

  > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: normal;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: 70px;
    height: 60px;
    gap: 6px;
    
    img {
      width: 20px;
      height: 20px;
    }
    
    span {
      font-size: 14px;
      white-space: nowrap;
      font-weight: normal;
    }
  }

  // 企业知识库按钮 - 蓝色主题
  > div:nth-child(1) {
    background: #409EFF;
    color: #fff;
    
    &:hover {
      background: #66b1ff;
      box-shadow: 0px 4px 8px rgba(64, 158, 255, 0.3);
    }
  }

  // 详情按钮 - 浅蓝色主题
  > div:nth-child(2) {
    background: #f0f8ff;
    border: none;
    color: #409EFF;
    
    &:hover {
      background: #e6f3ff;
      color: #66b1ff;
      box-shadow: 0px 4px 8px rgba(64, 158, 255, 0.2);
    }
  }

  // 编辑按钮 - 橙色主题
  > div:nth-child(3) {
    background: #fff7e6;
    border: none;
    color: #ff9500;
    
    &:hover {
      background: #fff2d9;
      color: #ffb84d;
      box-shadow: 0px 4px 8px rgba(255, 149, 0, 0.2);
    }
  }

  // 删除按钮 - 红色主题
  > div:nth-child(4) {
    background: #fff1f0;
    border: none;
    color: #ff4d4f;
    
    &:hover {
      background: #ffe7e6;
      color: #ff7875;
      box-shadow: 0px 4px 8px rgba(255, 77, 79, 0.2);
    }
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  // background: #fff;
  padding: 20px;
  border-radius: 8px;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;

  .el-pagination {
    .el-pagination__total {
      color: #606266;
      font-weight: 500;
    }

    .el-pagination__sizes {
      .el-select {
        .el-input__inner {
          border-color: #dcdfe6;
          border-radius: 4px;
        }
      }
    }

    .el-pager li {
      border-radius: 4px;
      margin: 0 2px;

      &.active {
        background: #409EFF;
        color: #fff;
      }

      &:hover {
        color: #409EFF;
      }
    }

    .btn-prev,
    .btn-next {
      border-radius: 4px;
      margin: 0 2px;

      &:hover {
        color: #409EFF;
      }
    }

    .el-pagination__jump {
      .el-input__inner {
        border-color: #dcdfe6;
        border-radius: 4px;
      }
    }
  }
}

// 删除确认对话框样式
::v-deep .delete-confirm-dialog {
  .el-message-box__title {
    color: #ff4d4f;
    font-weight: 600;
  }
  
  .el-message-box__content {
    color: #666;
    font-size: 14px;
  }
  
  .el-button--primary {
    background-color: #ff4d4f;
    border-color: #ff4d4f;
    
    &:hover {
      background-color: #ff7875;
      border-color: #ff7875;
    }
  }
}
</style>
