<template>
  <div class="dire_data" style="background-color:#fff;  margin-top: 3rem;">

    <el-row v-for="(dire,index) in value" :key="index">
      <!--正文内容-->


      <el-col class="context" :span="23">
        <!--      <el-row class="context_el-row">-->
        <!--        <el-col :span="1" :offset="1">-->
        <!--          <img class="context_img" src="@/assets/teaching_staff/eji_icon_ys.png" alt=""/>-->
        <!--        </el-col>-->
        <!--        <el-col :span="4" class="context_name">{{ dire.name }}</el-col>-->
        <!--        <el-col :span="16">-->
        <!--          <hr class="context_hr">-->
        <!--        </el-col>-->
        <!--      </el-row>-->
        <el-row class="context_el-row">
          <img class="context_img" src="@/assets/teaching_staff/eji_icon_ys.png" alt="">
          <div class="context_name">{{ dire.name }}</div>
          <div class="context_hr"></div>
        </el-row>
        <el-row v-for="(chile,index) in dire.children" :key="index">
          <el-col class="name" :offset="1" :span="23">
            {{ chile.name }}
          </el-col>
          <el-col class="text" :offset="1" :span="23">
            <div v-for="(item,index) in chile.children" :key="index" @click="linkClick(item)">
              {{ item.name }}
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "dire_data",
  data() {
    return {
      width: document.documentElement.clientWidth
    };
  },
  props: {
    value: {
      type: Array,
      default: [{
        name: "学院",
        children: [
          {
            name: "办公室",
            children: [
              {
                children: [],
                name: "人员1"
              }
            ]
          }
        ]
      }]
    }
  },
  methods: {
    linkClick(chile) {
      if (chile.link != null && chile.link != "") {
        window.open(chile.link);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.context {
  margin: 3rem 2rem;
  padding-bottom: 3rem;
  width: 92%;
  background: #FFFFFF;

  .context_el-row {
    display: flex;
    margin-top: 2rem;

    .context_img {
      width: 2.2rem;
      margin-left: 3%;
    }

    .context_name {
      font-size: 1.8rem;
      font-weight: 500;
      color: #1956BC;
      padding: 0 20px;
      white-space:nowrap;
    }

    .context_hr {
      margin-top: 1.1rem;
      background-color: #1956BC;
      width: 100%;
      height: 2px;
    }
  }

  .name {
    margin-top: 2rem;
    font-size: 1.6rem;
    font-weight: 600;
    //color: #1956BC;
  }

  .text {
    font-size: 1.4rem;
    //color: #3C3C3C;
    clear: left;

    div {
      float: left;
      margin-top: .4rem;
      cursor: pointer;
      //width: 7.4%;
      margin-right: 1.5rem;
      color: #000000;
    }

    div:hover {
      color: #1956BC;
    }
  }
}


//.context {
//  margin: 3rem 2rem;
//  padding-bottom: 3rem;
//width: 84.3rem;
//background: #FFFFFF;

//.context_el-row {
//  margin-top: 2rem;
//
//  .context_img {
//    width: 2.2rem;
//  }
//
//  .context_name {
//    font-size: 1.8rem;
//    font-family: PingFangSC-Medium, PingFang SC;
//    font-weight: 500;
//    color: #1956BC;
//    line-height: 2.2rem;
//  }
//
//  .context_hr {
//    line-height: 2.2rem;
//    margin-top: 1.1rem;
//    border: #1956BC solid 0.1rem;
//    background-color: #1956BC;
//  }
//}


//}

</style>
