<template>

  <div>
    <div class="headers">
      <div class="headers-name">职位明细</div>
      <div>
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item>
            <el-button type="primary" size="small" class="tianjia" @click="dialogVisible = true">添加职位类型</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    
    <div class="content-table">
      <div class="container">
        <div class="category-list">
          <template v-for="(category,index)  in categories" >
            <!-- 主分类 -->
            <div class="main-category">
                <div class="tubiao" @click="btnshou(category)">
                   
                    <i class="el-icon-arrow-right" v-if="!category.type == true"></i>
                    <i class="el-icon-arrow-down" v-if="category.type == true" ></i>
                </div>
              <div class="category-names">{{ category.name }}</div>
             <div class="right-area"> <button style="background: white" class="btn-add" @click="dialogVisible = true"> <span>添加</span> <span> | </span> <span>删除</span></button></div>
            </div>
            
            <!-- 子分类 -->
            <template v-if="category.type == true">
              <div 
                v-for="subcategory in category.subcategories" 
                :key="subcategory.id"
                class="category-item"
              >
                <div class="category-name">{{ subcategory.name }}</div>
               <div class="tianjia2"> <button style="background: white;position: relative;
    left: -4px;" class="btn-add"  @click="dialogVisible = true">添加</button></div>
              </div>
            </template>
          </template>
          
        
        </div>
      </div>
    </div>
     <!-- 添加职位 -->
     <el-dialog :visible.sync="dialogVisible" width="50%">
            <div class="dialog-header">添加职位类型</div>
            <div class="contents">
                <div class="container">
            
                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                 
                  
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" style="background-color: #5165f7;" @click="dialogVisible = false" size="small">确 定</el-button>
            </div>
        </el-dialog>
  </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible:false,
            currentPage:1,
            categories: [
            {
              id: 1,
              name: '技术研发类',
              type:true,
              subcategories: [
                { id: 101, name: '前端工程师' },
                { id: 102, name: '后端工程师' },
                { id: 103, name: '测试工程师' },
                { id: 104, name: '数据分析师' },
                { id: 105, name: '算法工程师' },
                { id: 106, name: '运维工程师' },
                { id: 107, name: '研发总监' }
              ]
            },
            {
              id: 2,
              name: '人力资源类',
              type:false,
              subcategories: [
                { id: 101, name: '前端工程师' },
                { id: 102, name: '后端工程师' },
                { id: 103, name: '测试工程师' },
                { id: 104, name: '数据分析师' },
                { id: 105, name: '算法工程师' },
                { id: 106, name: '运维工程师' },
                { id: 107, name: '研发总监' }
              ]
            },
            {
              id: 3,
              name: '财务审计类',
              type:false,
              subcategories: [
                { id: 101, name: '前端工程师' },
                { id: 102, name: '后端工程师' },
                { id: 103, name: '测试工程师' },
                { id: 104, name: '数据分析师' },
                { id: 105, name: '算法工程师' },
                { id: 106, name: '运维工程师' },
                { id: 107, name: '研发总监' }
              ]
            },
            {
              id: 4,
              name: '港口管理类',
              type:false,
              subcategories: [
                { id: 101, name: '前端工程师' },
                { id: 102, name: '后端工程师' },
                { id: 103, name: '测试工程师' },
                { id: 104, name: '数据分析师' },
                { id: 105, name: '算法工程师' },
                { id: 106, name: '运维工程师' },
                { id: 107, name: '研发总监' }
              ]
            },
            {
              id: 5,
              name: '销售客户类',
              type:false,
              subcategories: [
                { id: 101, name: '前端工程师' },
                { id: 102, name: '后端工程师' },
                { id: 103, name: '测试工程师' },
                { id: 104, name: '数据分析师' },
                { id: 105, name: '算法工程师' },
                { id: 106, name: '运维工程师' },
                { id: 107, name: '研发总监' }
              ]
            },
            {
              id: 6,
              name: '产品设计类',
              type:false,
              subcategories: [
                { id: 101, name: '前端工程师' },
                { id: 102, name: '后端工程师' },
                { id: 103, name: '测试工程师' },
                { id: 104, name: '数据分析师' },
                { id: 105, name: '算法工程师' },
                { id: 106, name: '运维工程师' },
                { id: 107, name: '研发总监' }
              ]
            }
          ]
        }
    },
    computed: {
        allSubcategories() {
          // 将所有子分类展平为一个数组
          let result = []
          this.categories.forEach(category => {
            category.subcategories.forEach(sub => {
              result.push({
                id: sub.id,
                name: sub.name,
                parentId: category.id
              })
            })
          })
          return result
        }
      },
    methods:{
        //收
        btnshou(e){
            console.log('e',e)
            if(e.type==true){
                e.type=false
            }else{
                e.type=true
            }
         
        },
        addSubcategory(categoryId) {
          const category = this.categories.find(c => c.id === categoryId)
          if (category) {
            const newId = Date.now()
            category.subcategories.push({
              id: newId,
              name: '新职位'
            })
          }
        },
        handleSizeChange(){

        },
        handleCurrentChange(){

        },

        handleClick(){
            this.$emit('getaudit')
        }
    }
}
</script>
<style>
.el-tooltip__popper.is-dark {
    color: #F04B4B !important;
    background: #FCF1EB !important;
}

.el-tooltip__popper .popper__arrow {
    border-top-color: #FCF1EB !important;
    /* 上方箭头 */
}

.el-tooltip__popper .popper__arrow::after {
    border-top-color: #FCF1EB !important;
}

/* 其他方向的箭头（按需添加） */
.el-tooltip__popper[x-placement^='bottom'] .popper__arrow {
    border-bottom-color: #FCF1EB !important;
}

.el-tooltip__popper[x-placement^='left'] .popper__arrow {
    border-left-color: #FCF1EB !important;
}

.el-tooltip__popper[x-placement^='right'] .popper__arrow {
    border-right-color: #FCF1EB !important;
}
</style>
<style scoped>
.dialog-footer {
    text-align: center;
    margin: 0 auto;
    margin-top: 12px;
}
.container {
    width: 72%;
   margin: 0 auto;
}

h1 {
    color: #333;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 24px;
}

.department-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.department-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.department-table tr{
    border: 1px solid #DCE0FD;
    cursor: pointer;
}

.department-table th {
   
    /* 淡紫色表头 */
    color: #5a4a6a;
    font-weight: 600;
    text-align: left;
    padding: 16px 20px;

}
:deep .el-dialog__body {
    padding: 0 !important;
}
.dialog-header {
  width: 100%;
    height: 54px;
    background: #F7F7FA;
    text-align: center;
    line-height: 54px;
    position: relative;
    top: -28px;
    color: #363636;
    font-weight: bold;
    font-size: 18px
}
.department-table td {
    background-color: white;
    padding: 5px 20px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

.department-table tr:last-child td {
    border-bottom: none;
}

.department-table tr:hover td {
    background-color: #f9f9f9;
    transition: background-color 0.2s;
}

.empty-value {
    color: #999;
    font-style: italic;
}

.footer {
    text-align: center;
    margin-top: 25px;
    color: #888;
    font-size: 14px;
}

.contents {
    width: 90%;
    margin: 0 auto;
}
.tianjia2{
    text-align: center;
    width: 98px;
    border: 1px solid #DCE0FD;
    line-height: 35px;
    
    
}
.right-area{
    width: 98px;
    border: 1px solid #DCE0FD;
    line-height: 35px;
    border-bottom: none;
    
}
.tubiao{
    width: 40px;
    cursor: pointer;
    border: 1px solid #DCE0FD;
    border-top: none;
    border-left: none;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.content-table {
 
}

.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 主分类样式 */
.main-category {
  background-color: white;
  height: 40px;
  border-radius: 4px;
  display: flex;
}

/* 子分类样式 */
.category-item {
display: flex;
}

.btn-add {
  margin-left: 10px;
  cursor: pointer;
  color: #5065F6;
}

/* 使用 ::v-deep 穿透 scoped 限制 */
::v-deep .category-list {
 
  border: 1px solid #eee;
}


.category-names {
    flex: 1;
 
    border-bottom: 1px solid #DCE0FD;
    line-height: 35px;
    padding-left: 20px;
    height: 40px;
}
.category-name {
flex: 1;
border: 1px solid #DCE0FD;
border-right: none;
border-top: none;
border-left: none;
border-left: none;
line-height: 40px;
padding-left: 62px;
}

.footer{
    display: flex;
    justify-content: end;
    margin-top: 20px;
}
.tianjia{
    position: relative;
    top: -9px;
    background-color: #5065F6;
}
::v-deep .el-table thead {
  background-color: #DCE0FD !important;
  color: #363636 !important;
}
::v-deep .el-table__header th {
  background-color: #DCE0FD !important;
  color: #363636 !important;
}
.content-table {}

.formitem {
    position: relative;
    top: -5px;
}

::deep .el-form-item__label {
    font-size: 15px !important;
}
.selects{
    width: 100px;
}
.headers-name {
    font-size: 15px;
    position: relative;
    top: 14px;
}

.headers {
    display: flex;
    justify-content: space-between
}



</style>