<template>
  <div class="staff-tree">
    <div v-if="list && list.length > 0">
      <div class="staff" v-for="(item, index) in list" :key="'user' + index">
        <i class="el-icon-s-custom user-box"></i>
        <span class="staff-name">{{ item.nickname }}</span>
        <span class="btn-list" @click="(e) => e.stopPropagation()">
          <el-button
            v-if="powers.some((i) => i == '005')"
            :type="item.position + '' === '1' ? 'primary' : 'info'"
            size="mini"
            @click="setUpEdit($event, item.id, item.position, item)"
          >
            设为负责人
          </el-button></span
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "goodsTree",
  components: {},
  props: ["list", "level"],
  computed: {
    powers() {
      const tran =
        this.$store.getters.btnList.find((i) => i.menu_route == "goodsTree") || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  data() {
    return {
      newlist: "",
      index: 0, // icon 箭头
    };
  },
  methods: {
    setUpEdit(e, id, position, item) {
      this.$emit("setUpEdit", id, position, item);
    },
  },
};
</script>
<style lang="scss">
.staff-tree {
  margin-left: 18px;
  cursor: pointer;
  // border: 1px solid #ccc;
  // border-radius: 6px;
  .no-data {
    text-align: center;
    line-height: 50px;
    color: #666;
    border: 1px solid #ccc;
    border-radius: 6px;
  }
  .el-button--mini {
    padding: 6px 10px;
    margin-top: 5px;
  }
  .staff-tree-node:nth-of-type(odd) {
    background: rgba(75, 157, 177, 0.1);
  }
  .staff-tree-node:nth-of-type(even) {
    background: rgba(249, 168, 110, 0.1);
  }

  .staff {
    // padding:0 0 0 5px;
    // background: #eee;
    .btn-list {
      display: block;
      float: right;
    }
    .user-box {
      display: inline-block;
      vertical-align: top;
      width: 25px;
      height: 25px;
      line-height: 25px;
      font-size: 15px;
      text-align: center;
      border-radius: 50%;
      overflow: hidden;
      background: #3c7eff;
      color: #fff;
      margin: 6px 5px 0 3px;
      small {
        font-size: 8px;
      }
    }
    .staff-name {
      display: inline-block;
      height: 38px;
      line-height: 38px;
      vertical-align: top;
    }
  }
}
</style>
