<template>
  <div style="height: 100%;" class="department_box">
    <van-nav-bar class="headerbar no-down-icon" title="组织架构">
      <template slot="left">
        <div @click="$route_back">
          <van-icon name="arrow-left" />
          <span class="van-nav-bar__text">返回</span>
        </div>
      </template>
    </van-nav-bar>

    <div class="work_body_com">
      <scroller ref="scroller_com" :on-refresh="refresh">
        <van-search class="scroller-blur" v-model="keyOword" placeholder="请输入搜索姓名" @input="searchUser()" />
        <div class="dept_path" v-show="pid_list_arr.length > 0">
          <a href="javascript:void(0);" @click="back_by_index(0)">全公司</a>
          <a v-for="(item, index) in pid_list_arr" :key="index" href="javascript:void(0);" @click="back_by_index(index + 1, item)">
            <van-icon name="arrow" />
            <Wxopendata type="departmentName" :openid="item.name"></Wxopendata>
          </a>
        </div>
        <div>
          <van-cell-group :border="false">
            <van-cell  label-class="employee_count" :title="company_info.name" :border="false" clickable  class="company_info" :is-link="this.getRole_noe" :label="employee_count + '人'">
              <template slot="icon">
                <img :src="company_info.logo_url ? company_info.logo_url : 'static/images/default_company_logo.png'" class="company_dept_img" />
              </template>
            </van-cell>
          </van-cell-group>
          <!-- 部门列表 -->
          <van-cell-group>
            <van-cell is-link v-for="(item, index) in dept_list" :key="index" class="employee_cell" @click="show_child(item)">
              <template slot="icon">
                <icon name="message_department" class="message_department"></icon>
              </template>
              <template slot="title">
                <Wxopendata type="departmentName" :openid="item.name"></Wxopendata>
              </template>
            </van-cell>
          </van-cell-group>
          <div style="padding: 0.24rem;font-size: 0.28rem;" class="color_ccc">人员列表</div>
          <div class="employee_item" :class="{ 'letter-first': index == 0 }" v-for="(item, index) in employee_list" :key="index">
            <van-cell class="employee_cell" :title="item.name">
              <template slot="icon">
                <userImage :user_name="item.name" :img_url="item.img_url" width="0.9rem" height="0.9rem" style="margin-right: 0.24rem;"></userImage>
              </template>
              <template slot="title">
                <Wxopendata type="userName" :openid="item.name"></Wxopendata>
              </template>
              <template slot="right-icon">
                <van-tag plain v-if="item.is_official == 1" type="success"><span>启用</span></van-tag>
                <van-tag plain v-if="item.employee_detail.manage_dept_ids.length > 0" type="warning">主管</van-tag>
              </template>
            </van-cell>
          </div>
          <div v-if="employee_list.length == 0">
            <van-row type="flex" justify="space-around" class="c">
              <van-col span="24">
                <div style="margin: 0.5rem 0 0.3rem 0;text-align: center;"><img src="static/images/noPeople.png" style="width: 3.5rem;height: 2.5rem;" /></div>
                <p class="text_center">暂无人员</p>
              </van-col>
            </van-row>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';
import { getRole_noe } from '@/utils/auth';
import share from '@/components/common/share';
import userImage from '@/components/common/user_image';
import { _throttle } from '@/utils/auth';
import Vue from 'vue';
import { Search, Tag, IndexBar, IndexAnchor, Skeleton, DropdownMenu, DropdownItem, ActionSheet, Toast, SwipeCell } from 'vant';
Vue.use(Search)
  .use(Tag)
  .use(IndexBar)
  .use(IndexAnchor)
  .use(Skeleton)
  .use(DropdownMenu)
  .use(DropdownItem)
  .use(ActionSheet)
  .use(SwipeCell);
export default {
  name: 'department',
  data() {
    return {
      list: [],
      dept_list: [],
      dept_list_all:[],//缓存的全部部门
      dept_info: {},
      company_info: {},
      employee_list: [],
      employee_count: {},
      pid_list_arr: [],

      getRole_noe: '', // 权限判断

      keyOword: '', //搜索
      deptId: 0
    };
  },
  // 组件
  components: { share, userImage },
  methods: {
    //搜索
    searchUser: _throttle(function() {
      this.get_employee_list();
    }),
    back_by_index(index, item) {
      if (index == this.pid_list_arr.length) {
        return false;
      }
      if (index == 0) {
        this.deptId = 0;
        this.pid_list_arr=[];
        this.dept_list=JSON.parse(JSON.stringify(this.dept_list_all));
        this.get_employee_list();
        return;
      }
      this.pid_list_arr.splice(index, 100);
      this.dept_list = item.children;
      this.deptId = item.id;
      this.get_employee_list();
    },
    // 加载
    showLoading() {
      this.$toast.loading({
        mask: true,
        type: 'spinner',
        message: '加载中...'
      });
    },
    // 下拉刷新
    refresh(done) {
      this.deptId = 0;
      this.keyOword='';
      this.dept_list_all=[];
      this.get_employee_list();
      this.get_department_list();
      setTimeout(() => {done()},200);
    },
    show_child(item) {
      this.pid_list_arr.push(item);
      this.deptId = item.id;
      this.dept_list = item.children;
      this.get_employee_list();
    },
    // 获取部门树
    get_department_list() {
      this.$toast.loading({ message: '加载中...', forbidClick: true});
      request('get', '/api/department/index','','v2').then(res => {
          if (res.data.code == 1) {
            this.dept_list = res.data.data.list;
            this.dept_list_all =JSON.parse(JSON.stringify(res.data.data.list));
            this.company_info = res.data.data.site;
            this.employee_count = res.data.data.employee_count;
          }
        })
        .finally(() => {
          this.$toast.clear();
        });
    },
    // 查询员工列表
    get_employee_list() {
      this.showLoading();
      request('get', '/api/employee/index', { dept_id: this.deptId, page_size: 20000, keywords: this.keyOword })
        .then(res => {
          if (res.data.code == 1) {
            this.employee_list = res.data.data.list;
            this.$nextTick(() => {
              this.$refs['scroller_com'].createPageIndex();
            });
          } else {
            this.$toast(res.data.msg);
          }
        })
        .finally(() => {
          this.$toast.clear();
        });
    }
  },
  created() {
    this.getRole_noe = getRole_noe();
  }
};
</script>

<style scoped>
.pageIndexBtn {
  width: 100%;
  text-align: left;
  padding: 0.1rem 0.4rem 0.05rem;
  color: #909399;
  background: rgb(245, 245, 245);
}

.cur_company_name {
  line-height: 0.8rem;
  text-indent: 0.5em;
  cursor: pointer;
}

.menu_title {
  text-indent: 0.5em;
  margin-bottom: 0.16rem;
}

.work_body_com {
  height: calc(100vh - 0.92rem);
  position: relative;
  z-index: 0;
}
.work_body_com .search_list {
  /* background:#FFF;
    height: 100vh; */
}

.van-radio-group {
  padding: 0.24rem 0.32rem;
}

.van-radio {
  height: 0.8rem;
}

.employee_cell_head_img {
  width: 0.9rem;
  height: 0.9rem;
  -webkit-border-radius: 0.1rem;
  -moz-border-radius: 0.1rem;
  border-radius: 0.9rem;
  margin-right: 0.24rem;
}
.invite_employee_head_img {
  width: 0.8rem;
  height: 0.8rem;
  -webkit-border-radius: 0.1rem;
  -moz-border-radius: 0.1rem;
  border-radius: 0.1rem;
  margin-right: 0.24rem;
}
.employee_cell {
  z-index: 0;
}
.employee_cell .message_department {
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.24rem;
  color: #238dfa;
}
.employee_cell .message_newinvit {
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.24rem;
  color: #ffcc00;
}
.employee_cell .message_newmember {
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.24rem;
  color: #ff9600;
}
.employee_cell .van-cell__title {
  line-height: 0.9rem;
  color: #323233;
}
.employee_cell .van-cell__title span {
  font-size: 0.34rem;
}
.employee_cell .van-cell__right-icon {
  line-height: 0.9rem;
  color: #e4e7ed;
}
.company_image {
  background: #fff;
  padding-bottom: 0.1rem;
  margin-bottom: 0.1rem;
}
.company_info {
  padding: 0.32rem;
  margin-top: -0.2rem;
}
.company_info .van-cell__right-icon {
  line-height: 0.8rem;
}
.company_info .van-cell__title {
  padding: 0.05rem 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.company_info .van-cell__title span {
  font-family: mirsoft Yahei;
  font-size: 0.38rem;
  font-weight: 600;
  letter-spacing: 0.003rem;
  border-radius: 0.08rem;
}

.company_info .van-cell__title .van-cell__label span {
  font-size: x-small;
  color: #fff;
  margin-right: 0.1rem;
}
.company_info i.van-icon {
  line-height: 1.28rem;
}
.van-hairline--top-bottom:after,
.van-hairline-unset--top-bottom:after {
  border: none;
}
.company_dept_img {
  width: 1.08rem;
  height: 1.08rem;
  -webkit-border-radius: 0.1rem;
  -moz-border-radius: 0.1rem;
  border-radius: 0.125rem;
  margin-right: 0.26rem;
}
.qrcode_popup {
  width: 80vw;
}
.employee_item {
  position: relative;
  z-index: 0;
}

.employee_item:before {
  position: absolute;
  left: 0rem;
  right: 0rem;
  top: 0rem;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  border-bottom: 0.02rem solid #ebedf0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  z-index: 1;
}
.letter-first:before {
  border: none !important;
}
.department_box /deep/ .van-cell__left-icon {
  color: #323233 !important;
}
.pageIndexBtnText {
  font-size: 0.24rem;
}
.dept_path a {
  color: #238dfa;
  font-size: 0.28rem;
}
.dept_path a:nth-last-child(1) {
  color: #999;
}
.dept_path::after {
  /* content: '';
  color: #fff!important; */
}
.dept_path a * {
  vertical-align: middle;
}
.dept_path {
  position: relative;
  font-size: 0.32rem;
  line-height: 0.4rem;
  padding: 0.2rem 0.32rem 0.1rem 0.32rem;
}
.dept_path:after {
  /* content: ' ';
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #efefef; */
  /* height: 1px; */
  /* position: absolute;
  transform: scaleY(0.5); */
}
.text_center {
  font-size: 14px;
  margin: 0;
  color: #969799;
}
.employee_count {
  font-size: 0.26rem;
}
.tag.num9 {
  padding: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
}
.tag.num10 {
  width: auto;
  line-height: 1;
}
.employee_cell .van-tag {
  display: inline-table;
  margin: 0.26rem 0;
}
.employee_cell .van-tag + .van-tag {
  margin-left: 0.2rem;
}
.guild_notice {
  top: 1.6rem;
  left: 4.3rem;
  width: 6rem;
  background: transparent;
  border-radius: 0.12rem;
  overflow-y: inherit;
}
.guild_notice .list {
  position: relative;
  padding: 0.2rem;
  background: #238dfa;
  border-radius: 0.12rem;
}
.title {
  font-size: 0.32rem;
  line-height: 0.48rem;
  color: #ffffff;
}
.title:after {
  position: absolute;
  top: 0.825rem;
  content: ' ';
  width: 90%;
  border-bottom: 0.02rem #3798fb solid;
}
.num {
  display: block;
  font-size: 0.32rem;
  line-height: 0.48rem;
  color: #ffffff;
}
.list .des {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.36rem;
  font-weight: bold;
  color: #fff;
}
.list .next {
  margin-top: 0.3rem;
  color: #238dfa;
  background: #fff;
  border-radius: 0.12rem;
}
.guild_notice .list:after {
  border: none;
}
.guild_down_icon {
  position: relative;
  top: 0.1vh;
  left: 72vw;
  content: ' ';
  width: 0;
  height: 0;
  border-left: 0.2rem solid transparent;
  border-right: 0.2rem solid transparent;
  border-top: 0.2rem solid #238dfa;
  transform: rotate(180deg);
}
.guild_dept_border {
  position: relative;
  text-align: center;
  top: 0vh;
  left: 69vw;
  width: 0.7rem;
  height: 0.7rem;
  margin-bottom: 2vh;
  font-size: 0.4rem;
  font-weight: bold;
  line-height: 0.7rem;
  color: #fff;
  border: 0.04rem #fff dashed;
  border-radius: 0.12rem;
}
</style>
