<template>

  <el-container class="pro-container">
    <el-header class="search-box">
      <div class="search-box-item-title">
        <el-input v-model="searchForm.name" placeholder="请输入内容" clearable size="small"></el-input>
      </div>
      <div class="ml-10">
        <el-button type="primary" @click="searchChange" class="custom-primary-btn" size="small">查询</el-button>
      </div>
      <div class="ml-10">
        <el-select v-model="searchForm.status" placeholder="项目状态" style="width: 120px;" size="small" clearable>
          <el-option v-for="item in proStatusItems" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="ml-10">
        <el-select v-model="searchForm.sort" placeholder="默认排序" style="width: 120px;" size="small" clearable
          v-if="searchForm.isCollect">
          <el-option v-for="item in sortOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="searchForm.sort" placeholder="默认排序" style="width: 120px;" size="small" clearable v-else>
          <el-option v-for="item in sortOptions1" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="ml-10">
        <el-button type="warning" icon="el-icon-sort" size="small" @click="sortPro">排序</el-button>
      </div>
      <div class="ml-10" @click="searchByCollect">
        <el-button type="warning" icon="el-icon-star-off" size="small" class="custom-primary-btn"
          v-if="!searchForm.isCollect">收藏夹</el-button>
        <el-button type="success" icon="el-icon-arrow-left" size="small" v-else>所有项目</el-button>
      </div>
    </el-header>

    <el-main class="main-box">
      <div class="project-list-container" v-if="projectPageList.length > 0" v-loading="getPageLoading">

        <el-card class="project-card" v-for="item in projectPageList" :key="item.id">
          <div class="card-content" @click="projectClick(item)">
            <div class="project-top">
              <div class="project-tag">
                <template v-if="item.wbsTypes.length > 0">
                  <el-tag size="small" v-for="item in generateTagItems(item.wbsTypes)" :key="item.label"
                    :type="item.type" effect="dark" class="mr-3 custom-ellipse-tag"
                    :class="`custom-tag-type-${item.type}`">
                    <i class=" el-icon-success"></i>
                    {{ item.label }}
                  </el-tag>
                </template>
                <el-tag effect="dark" v-else class="custom-ellipse-tag " :class="`custom-tag-type-8`">未关联WBS</el-tag>
              </div>
              <div class="project-like" @click.stop="toggleLike(item)" v-loading="item.load">

                <!-- <i   v-if="item.isCollect"    style="color: red;"   src="@/assets/heart-line.svg" ></i> -->
                <img height="16" width="16" src="@/assets/heart-fill.svg" v-if="item.isCollect" />
                <img height="16" width="16" src="@/assets/heart-line.svg" v-else />
              </div>
            </div>
            <div class="project-title">
              <el-tooltip v-if="item.projectAlias.length > 20" :content="item.projectAlias" placement="top">
                <span>{{ item.projectAlias }}</span>
              </el-tooltip>
              <span v-else>{{ item.projectAlias }}</span>
            </div>
            <div class="project-info">
              <div><span class="info-label"><i class="el-icon-user"></i>负责人：</span>{{ item.projectLeaderName }}</div>
              <div><span class="info-label"><i class="el-icon-edit-outline"></i>电签类别：</span>{{
                item.remarkType === 1 ? '安心签' : '东方中讯' }}
              </div>
              <div><span class="info-label"><i class="el-icon-coordinate"></i>电签方式：</span>{{
                item.approvalType === 1 ? '流程审批' : '平行审批' }}
              </div>
            </div>
            <div class="project-actions">
              <el-link type="primary" size="small" @click="projectClick(item)" style="color:#2550A2">

                查看详情 <i class="el-icon-right"></i>
              </el-link>


              <el-tag v-for="status in proStatusItems" :key="status.value" :type="status.type" size="small"
                class="custom-ellipse-tag1" v-if="status.value === item.projectStatus">
                {{ status.label }}
              </el-tag>
            </div>
          </div>

        </el-card>



        <!-- 其他项目卡片... -->
      </div>
      <el-empty description="暂无数据" v-else></el-empty>
    </el-main>

    <el-footer class="footer-box">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
        :current-page.sync="page.currentPage" :total="page.total" :page-size="page.pageSize"
        class="transparent-pagination">
      </el-pagination>
    </el-footer>

    <!-- 项目信息 -->
    <el-dialog class="project-dialog" :visible.sync="projectVisible" width="65%" append-to-body>
      <span slot="title">
        <i class="el-icon-s-cooperation" style="color: #2550A2;margin-right: 5px;"></i>项目信息
      </span>
      <div class="mg-b-5">
        <el-tag v-for="status in proStatusItems" :key="status.value" :type="status.type" size="small"
          class="custom-ellipse-tag1" v-if="status.value === curProjiect.projectStatus">
          {{ status.label }}
        </el-tag>
        <span>{{ curProjiect.projectName }}</span>
      </div>
      <div class="mg-b-15" style="padding-top: 6px;">
        ID：<span>{{ curProjiect.id }}</span>
        <i @click="copyText(curProjiect.id)" class="el-icon-document-copy"
          style="padding-left: 6px;color: #2550A2;cursor:pointer;"></i>
      </div>
      <div class="mg-b-15">
        <span>项目配置</span>
      </div>
      <div class="flex jc-sb pd-b-10">

        <div>
          <el-button v-for="wbsBtn in wbsButtons" :key="wbsBtn.type" :style="wbsBtn.style" size="small"
            @click="handleWbsClick(wbsBtn.type)">
            <i :class="wbsBtn.icon"></i> {{ wbsBtn.label }}
          </el-button>


          <el-button size="small" @click="editProject"
            style="  background-color: #2550A2;border-color: #2550A2 ;color: white;"><i class="el-icon-edit"></i>
            编辑项目信息</el-button>
          <el-button size="small" @click="addContract"
            style="  background-color: #2550A2;border-color: #2550A2 ;color: white;"><i class="el-icon-circle-plus"></i>
            创建新合同段</el-button>
          <el-button size="small" @click="sortContract"
            style="  background-color: #FF7D43;border-color: #FF7D43 ;color: white;"><i class="el-icon-sort"></i>
            合同段排序</el-button>
          <el-button size="small" @click="dellProject" type="danger"><i class="el-icon-delete"></i> 删除项目</el-button>

        </div>
      </div>
      <div class="mt-15" v-if="contractList.length > 0">
        <el-table :data="contractList" height="400" style="width: 100%" header-cell-class-name="custom-header">
          <el-table-column prop="contractName" label="合同段名称">
          </el-table-column>
          <el-table-column prop="contractNumber" label="合同段编号" width="140px">
            <template slot-scope="scope">
              {{ scope.row.contractNumber }}
              <i v-if="scope.row.contractNumber" @click="copyText(scope.row.contractNumber)" class="el-icon-document-copy"
                style="padding-left: 6px;color: #2550A2;cursor:pointer;"></i>
            </template>
          </el-table-column>
          <el-table-column prop="contractType" label="合同段类型" width="100px">
            <template slot-scope="scope">
              <el-tag size="small"
                :type="scope.row.contractType === 1 ? 'warning' : scope.row.contractType === 2 ? 'primary' : 'success'"
                class="custom-ellipse-tag1">
                {{ scope.row.contractType === 1 ? '施工' : scope.row.contractType === 2 ? '监理' : '指挥' }}
              </el-tag>
            </template>

          </el-table-column>
          <el-table-column prop="" label="合同段权限">
            <template slot-scope="scope">

              <template v-if="scope.row.relationContractInfo && scope.row.relationContractInfo.length > 0">

                <el-tooltip v-for="(item, index) in scope.row.relationContractInfo.filter(Boolean)" :key="index"
                  :content="item.contractName || ''" placement="top">
                  <el-tag size="small"
                    :type="item.contractType === 1 ? 'warning' : item.contractType === 2 ? 'primary' : 'success'"
                    class="custom-ellipse-tag2 ellipsis-tag1">
                    {{ item.contractName || '' }}
                  </el-tag>
                </el-tooltip>
              </template>
            </template>
          </el-table-column>
          <el-table-column width="180px" prop="address" label="操作">
            <template slot-scope="scope">
              <el-link type="primary" size="mini" @click="editContract(scope.row)">编辑合同段信息</el-link>
              <el-link size="mini" type="danger" class="ml-10"
                @click="delContract(scope.row, sortOptionscope.$index)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="text-align-c pd-t-20" v-else>
        暂无合同段，请先创建合同段
      </div>
    </el-dialog>

    <!-- 合同段排序弹窗 -->
    <ContractSort ref="contractSortRef" :title="sortTitle" :sortProLoad="sortProLoad" @confirm="handleSortConfirm" />
  </el-container>
</template>

<script>
import { collectProject, removeProject, getProjectListPage, sortProject, sortProjectCollect, sortContract } from "@/api/manager/projectinfo";
import { findContractByProjectId, removeContractInfo } from "@/api/manager/contractinfo";
// import {getDictionary} from "@/api/system/dict";
import { mapGetters } from "vuex";
import { copyText } from "@/util/util";
import ContractSort from './ContractSort.vue'
export default {
  data() {
    return {
      copyText,
      showTooltip: false, // 控制 tooltip 显示
      searchForm: {
        name: '',
        status: '',
        sort: 0.,
        isCollect: 1,
      },

      sortOptions: [
        { value: 0, label: '默认排序' },
        { value: 1, label: '收藏优先' },
        { value: 2, label: '创建时间' },
        { value: 3, label: '我负责的' },

      ],

      sortOptions1: [
        { value: 0, label: '默认排序' },

        { value: 2, label: '创建时间' },
        { value: 3, label: '我负责的' },

      ],
      proStatusItems: [
        { type: 'info', label: '未开始', value: 0 },
        { type: 'primary', label: '配置中', value: 1 },
        { type: 'warning', label: '进行中', value: 2 },
        { type: 'success', label: '已完成', value: 3 },

      ],
      projectId: '',
      curProjiect: {},
      projectList: [],
      projectPageList: [],
      getPageLoading: false,

      projectVisible: false,
      contractList: [],

      page: {
        currentPage: 1,
        pageSize: 12,
        total: 0
      },
      wbsButtons: [
        {
          label: '质检WBS',
          type: 'quality',
          style: {
            backgroundColor: '#3B83F6',
            borderColor: '#3B83F6',
            color: 'white'
          },
          icon: 'el-icon-s-order'
        },
        {
          label: '试验WBS',
          type: 'test',
          style: {
            backgroundColor: '#A856F8',
            borderColor: '#A856F8',
            color: 'white'
          },
          icon: 'el-icon-guide'
        },
        {
          label: '日志WBS',
          type: 'log',
          style: {
            backgroundColor: '#6367F1',
            borderColor: '#6367F1',
            color: 'white'
          },
          icon: 'el-icon-notebook-1'
        },
        {
          label: '计量WBS',
          type: 'measure',
          style: {
            backgroundColor: '#E7B214',
            borderColor: '#E7B214',
            color: 'white'
          },
          icon: 'el-icon-files'
        },
        {
          label: '征拆WBS',
          type: 'split',
          style: {
            backgroundColor: '#EC489A',
            borderColor: '#EC489A',
            color: 'white'
          },
          icon: 'el-icon-s-order'
        }
      ],
      sortContractVisible: false, // 合同段排序弹窗
      sortContractList: [],
      sortTitle: '合同段排序',
      sortProLoad: false,

    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  components: {
    ContractSort
  },
  created() {
    this.init();
    //console.log(this.userInfo)
  },
  methods: {
    init() {
      this.getProjectList();
      this.getProjectPageList();
    },

    searchChange() {
      this.page.currentPage = 1;
      this.getProjectPageList();
    },
    generateTagItems(wbsTypes) {
      const typeToLabelMap = {
        1: '质检',
        2: '试验',
        3: '日志',
        4: '计量',
        5: '征拆',
      };
      let tagItems = [];
      wbsTypes.forEach(type => {
        // 检查type是否在映射关系中存在
        if (typeToLabelMap.hasOwnProperty(type)) {
          // 如果存在，则创建一个新的对象并添加到tagItems数组中
          tagItems.push({
            type: type,
            label: typeToLabelMap[type]
          });
        }
      });
      return tagItems;
    },
    handleWbsClick(type) {
      switch (type) {
        case 'quality':
          this.editTree();
          break;
        case 'test':
          this.testTree();
          break;
        case 'log':
          this.editLogTree();
          break;
        case 'measure':
          this.measureTree();
          break;
        case 'split':
          this.splitTree();
          break;
      }
    },
    getProjectList(callback) {
      getProjectListPage({
        current: 1,
        size: 999,
        ...this.searchForm

      }).then((res) => {
        this.projectList = res.data.data.records;
        callback();
      })
    },
    getProjectPageList() {
      this.getPageLoading = true;
      getProjectListPage(
        {
          ...this.searchForm,
          current: this.page.currentPage,
          size: this.page.pageSize,


        }

      ).then((res) => {
        this.getPageLoading = false;
        this.projectPageList = res.data.data.records;
        this.page.total = res.data.data.total;
      })
    },

    projectClick(item) {


      this.curProjiect = item;
      findContractByProjectId(this.curProjiect.id).then((res) => {
        this.contractList = res.data.data;
      })
      this.projectVisible = true;
    },

    handleCurrentChange(val) {
      this.getProjectPageList();
      this.page.currentPage = val;
    },



    addContract() {
      this.$router.push({
        path: '/contract/detail',
        query: { pid: this.curProjiect.id }
      });
    },
    editContract(item) {
      this.$router.push({
        path: '/contract/detail1',
        query: {
          pid: item.pid,
          cid: item.id,
          contractType: item.contractType
        }
      });
    },
    editProject() {
      this.$router.push({
        path: '/manager/projectinfo/detail',
        query: {
          id: this.curProjiect.id
        }
      });
    },
    contractDetail(item, type, contractType) {
      this.$router.push({
        path: '/contract/detail',
        query: {
          pid: item.pid,
          cid: item.id,
          type,
          contractType
        }
      })
    },
    testTree() {
      this.$router.push({
        path: '/project/tree',
        query: {
          pid: this.curProjiect.id,
          wbsid: this.curProjiect.referenceWbsTemplateIdTrial,
          projectName: this.curProjiect.projectName,
          type: 2
        }
      });
    },
    splitTree() {
      this.$router.push({
        path: '/project/tree',
        query: {
          pid: this.curProjiect.id,
          wbsid: this.curProjiect.referenceWbsTemplateIdLar,
          projectName: this.curProjiect.projectName,
          type: 5
        }
      });
    },
    measureTree() {
      this.$router.push({
        path: '/project/tree',
        query: {
          pid: this.curProjiect.id,
          wbsid: this.curProjiect.referenceWbsTemplateIdMeter,
          projectName: this.curProjiect.projectName,
          type: 3
        }
      });
    },
    editTree() {
      this.$router.push({
        path: '/project/tree',
        query: {
          pid: this.curProjiect.id,
          wbsid: this.curProjiect.referenceWbsTemplateId,
          projectName: this.curProjiect.projectName
        }
      });
    },
    editLogTree() {
      this.$router.push({
        path: '/project/tree',
        query: {
          pid: this.curProjiect.id,
          wbsid: this.curProjiect.referenceLogWbsTemplateId,
          projectName: this.curProjiect.projectName,
          type: 4
        }
      });
    },

    delContract(item, index) {
      this.$confirm('是否删除【' + item.contractName + '】?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeContractInfo(item.id).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.contractList.splice(index, 1);
        })
      })
    },
    dellProject() {
      if (this.contractList.length) {
        this.$message({
          type: "warning",
          message: "只能删除下面无合同段的项目!"
        });
        return;
      }

      this.$confirm('是否删除【' + this.curProjiect.projectName + '】?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeProject(this.curProjiect.id).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          //删除后当前列表为空，且不是第一页，往前翻一页
          if (this.projectPageList.length == 1 && this.page.currentPage > 1) {
            this.page.currentPage--;
          }
          this.getProjectPageList();
          this.projectVisible = false;
        })
      })
    },

    getFont(type) {
      if (type == 1) {
        return '施';
      } else if (type == 2) {
        return '监';
      } else if (type == 3) {
        return '业';
      }
      return '';
    },
    getAvatarBg(type) {
      if (type == 1) {
        return { 'abg1': true };
      } else if (type == 2) {
        return { 'abg2': true };
      } else if (type == 3) {
        return { 'abg3': true };
      }
      return {};
    },
    getBg(index) {
      let num = Math.trunc(index / 4);
      if ((num % 2) === 0) {//判定条件余数为0时为偶数
        return {
          'bg1': true
        }
      } else {
        return {
          'bg2': true
        }
      }
    },
    wbsManage() {//wbs树管理按钮
      this.$router.push('/manager/privateWBS/' + 111)
    },
    //同步
    syncLedger() {
      this.$router.push('/manager/projectinfo/ledger')
    },
    toggleLike(item) {
      collectProject({ projectId: item.id }).then((res) => {
        console.log(res, 'res');
        item.load = false
        if (res.data.code == 200) {
          this.$message.success(res.data.msg)


          this.getProjectPageList();
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    searchByCollect() {
      if (this.searchForm.isCollect) {
        this.searchForm.isCollect = 0

      } else {
        this.searchForm.isCollect = 1

      }
      this.searchForm.current = 1
      this.page.currentPage = 1;

      this.getProjectPageList();
      this.getProjectList();

    },
    //合同段排序
    sortContract() {
      // this.sortContractVisible = true;
      this.sortContractList = JSON.parse(JSON.stringify(this.contractList));
      this.sortTitle = '合同段排序';

      this.$nextTick(() => {
        this.$refs.contractSortRef.show(this.sortContractList);
      });
    },
    // 处理排序确认
    handleSortConfirm(sortedList) {



      this.contractList = [...sortedList];
      const ids = this.contractList.map(item => item.id);
      this.saveSort(ids);

    },
    async sortPro() {

      this.getProjectList(() => {
        if (this.searchForm.isCollect === 1) {
          this.sortTitle = '收藏项目排序';
        } else {
          this.sortTitle = '项目排序';
        }

        this.$nextTick(() => {
          this.sortContractList = JSON.parse(JSON.stringify(this.projectList));
          this.$refs.contractSortRef.show(this.sortContractList);
        });
      });
    },
    saveSort(ids) {
      if (this.sortTitle === '项目排序') {
        this.sortProLoad = true;
        if (this.searchForm.isCollect === 0) {
          sortProject(ids).then((res) => {
            this.sortProLoad = false;
            if (res.data.code == 200) {
              this.$message.success(res.data.msg)


              this.getProjectPageList();
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }
      } else if (this.sortTitle === '收藏项目排序') {
        sortProjectCollect(ids).then((res) => {
          this.sortProLoad = false;
          if (res.data.code == 200) {
            this.$message.success(res.data.msg)


            this.getProjectPageList();
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
      else {

        sortContract(ids).then((res) => {
          this.sortProLoad = false;
          if (res.data.code == 200) {
            this.$message.success(res.data.msg)


            // this.getProjectPageList();
            findContractByProjectId(this.curProjiect.id).then((res) => {
              this.contractList = res.data.data;
            })
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }


    }
  }
};
</script>

<style scoped lang="scss">
.pro-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .search-box {
    // padding: 0 !important; /* 取消内边距 */
    height: auto !important;
    /* 取消固定高度 */
    min-height: auto !important;
    /* 取消最小高度 */
    display: flex;
    align-items: center;
    /* 垂直居中 */
    flex-wrap: wrap;
    /* 允许换行 */

    .search-box-item-title {
      flex: 1;
      /* 输入框占据剩余空间 */
      min-width: 200px;
      /* 最小宽度 */
    }

    .ml-10 {
      margin-left: 10px;

    }
  }

  .footer-box {

    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
  }
}

/* 自定义按钮样式 */
.custom-primary-btn {
  background-color: #2550A2 !important;
  border-color: #2550A2 !important;
}

/* 项目列表容器样式 */
.project-list-container {
  // display: grid;
  // grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  // gap: 20px;
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
}

/* 项目卡片样式 */
.project-card {
  // cursor: pointer;
  // transition: all 0.3s ease;
  // border-radius: 8px;
  flex: 0 0 24%;
  /* 每行4个项目，每个项目占25%的宽度 */
  box-sizing: border-box;
  margin: 5px;
  /* 可选：添加一些间距 */
}

.project-card {
  cursor: pointer;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  /* 确保内部容器不超出卡片 */

  .card-content {
    // width: 100%;
    height: 100%;
    // padding: 15px; /* 保持原卡片内边距 */
  }

  // 其他原有样式保持不变
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.project-top {
  display: flex;
  justify-content: space-between;
  /* 左右对齐 */
  align-items: center;
  /* 垂直居中 */
  margin-bottom: 10px;


}

.project-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  /* 确保宽度限制 */
  margin-bottom: 5px;
}

.project-info {
  font-size: 14px;
  color: black;

}

.info-label {
  //font-weight: bold;
  color: black;
  display: inline-block;
  margin-bottom: 5px;

}

.project-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 搜索框样式 */
.search-box {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e6e6e6;
}

.ml-10 {
  margin-left: 10px;
}

.mr-5 {
  margin-right: 5px;
}

.mr-3 {
  margin-right: 3px;
}

.mt-15 {
  margin-top: 15px;
}

.mg-b-15 {
  margin-bottom: 15px;
}

/* 更彻底的透明效果 */
</style>
<style lang="scss">
/* 自定义按钮样式 */
.custom-primary-btn {
  background-color: #2550A2 !important;
  border-color: #2550A2 !important;
}

.el-tag.el-tag--info {
  background-color: #eee !important;
}

.ellipsis-tag {
  // max-width:220px; /* 设置最大宽度 */
  overflow: hidden;
  margin-right: 4px;


  .el-tag__content {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.ellipsis-tag1 {
  max-width: 220px;
  /* 设置最大宽度 */
  overflow: hidden;
  margin-right: 4px;


  .el-tag__content {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.custom-ellipse-tag2 {
  max-width: 280px;
  /* 根据需要调整最大宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 4px;
  border-radius: 15px !important;
  padding: 8px 8px !important;
  margin-right: 8px !important;
  margin-bottom: 4px;
  height: 24px;
  line-height: 24px;
  display: inline-flex;
  align-items: center;

  border: none !important;
}

/* 确保 tooltip 的最大宽度 */
.el-tooltip__popper {
  max-width: 300px;
  word-break: break-all;
}

/* 完全透明分页样式 */
.footer-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  background: transparent;
}

/* 移除所有按钮和页码的背景色 */
.transparent-pagination .btn-prev,
.transparent-pagination .btn-next,
.transparent-pagination .el-pager li {
  background: transparent !important;
  border: none !important;
}

/* 移除鼠标悬停时的背景色 */
.transparent-pagination .btn-prev:hover,
.transparent-pagination .btn-next:hover,
.transparent-pagination .el-pager li:hover {
  background: transparent !important;
}

/* 移除当前选中页的背景色，仅保留文字颜色 */
.transparent-pagination .el-pager li.active {
  background: transparent !important;
  color: #409EFF;
  /* 选中页的文字颜色 */
}

/* 移除整个分页组件的背景 */
.transparent-pagination {
  background: transparent !important;
}

.custom-ellipse-tag {
  border-radius: 15px !important;
  padding: 0 8px !important;
  margin-right: 8px !important;
  height: 24px;
  line-height: 24px;
  display: inline-flex;
  align-items: center;
  color: white !important;
  /* 文字颜色统一为白色 */
  border: none !important;
}

.custom-ellipse-tag1 {
  border-radius: 15px !important;
  padding: 8px 8px !important;
  margin-right: 8px !important;
  margin-bottom: 4px;
  height: 24px;
  line-height: 24px;
  display: inline-flex;
  align-items: center;

  border: none !important;
}

/* 根据 type 设置背景色 */
.custom-tag-type-1 {
  background-color: #3B83F6 !important;
  /* 质检 - 蓝色 */
}

.custom-tag-type-2 {
  background-color: #A856F8 !important;
  /* 试验 - 紫色 */
}

.custom-tag-type-3 {
  background-color: #6367F1 !important;
  /* 日志 - 靛蓝 */
}

.custom-tag-type-4 {
  background-color: #E7B214 !important;
  /* 计量 - 黄色 */
}

.custom-tag-type-5 {
  background-color: #EC489A !important;
  /* 征拆 - 粉色 */
}

.custom-tag-type-6 {
  background-color: blue !important;
  /* 征拆 - 粉色 */
}

.custom-tag-type-8 {
  background-color: lightgray !important;
  /*未关联 - 粉色 */
}

/* 图标样式 */
.custom-ellipse-tag .el-icon-success {
  margin-right: 4px;
  font-size: 12px;
}

/* 图标样式 */
.custom-ellipse-tag .el-icon-success {
  margin-right: 4px;
  font-size: 12px;
}

.project-dialog {
  .el-dialog__body {
    color: black;
    padding: 10px 20px 20px 20px !important;
  }

  .el-dialog__header {

    border-bottom: 1px solid #e6e6e6;
  }

}

.custom-header {
  background-color: #F2F3F5 !important;
}
</style>
