<template>
  <div class="role_user_list_box">
    <van-nav-bar title="角色管理" left-text="返回" @click-left="$route_back" @click-right="showTip = true" left-arrow>
      <template slot="right">
        <van-icon name="question-o" />
      </template>
    </van-nav-bar>

    <van-tabs v-model="filter.role_id">
      <van-tab v-for="(item, index) in role_list" :key="index" :title="item.name" v-if="item.code != 'creator' && item.code != 'employee'" :name="item.id"></van-tab>
    </van-tabs>

    <div class="body_com has_header">
      <scroller ref="my_scroller" :list="list" :on-refresh="refresh">
        <noData v-show="list.length == 0" :list="list"/>
        <van-cell-group v-show="list.length > 0">
          <van-cell
            class="task_list"
            v-for="(item, index) in list"
            :key="index" :title="item.name"
            @click="detail(item)"
          >
            <template slot="icon">
              <userImage class="user_image" :user_name="item.name" :id="item.id" />
            </template>
            <template slot="title">
              <Wxopendata type="userName" :openid="item.name"></Wxopendata>
            </template>
          </van-cell>

        </van-cell-group>
      </scroller>
    </div>

    <van-popup v-model="showTip" style="width: 100vw; height: 100vh;" position="right">
      <div :style="'padding-top:' + bar_height + 'px;background-color: #26A2FF;'"></div>
      <van-nav-bar title="角色说明" left-text="返回" @click-left="showTip = false" left-arrow></van-nav-bar>
      <div class="popup_com has_header">
        <scroller>
          <van-cell-group :border="false">
            <van-cell :border="false" title="系统共有5种角色" label="角色有五种，分别为超管、部门管理员、积分专员、公司管理员，员工" title-class="popup_title" label-color="popup_label"></van-cell>
            <van-cell :border="false" title="超管" label="超管是唯一的，默认为当前组织的创建人，管理所有人" title-class="popup_title" label-color="popup_label"></van-cell>
            <van-cell :border="false" title="部门管理者" label="部门管理员一般为某部门主管，管理对应部门的人" title-class="popup_title" label-color="popup_label"></van-cell>
            <van-cell :border="false" title="积分专员" label="积分专员一般为行政或人事，可管理多个部门及指定人员，甚至所有人" title-class="popup_title" label-color="popup_label"></van-cell>
            <van-cell :border="false" title="公司管理者" label="公司管理员一般为股东或合伙人，可多个部门" title-class="popup_title" label-color="popup_label"></van-cell>
            <van-cell :border="false" title="员工" label="员工无管理权限" title-class="popup_title" label-color="popup_label"></van-cell>
          </van-cell-group>

        </scroller>
      </div>
    </van-popup>

    <div style="background-color: #fff;padding: 0.2rem 0.32rem 0.44rem 0.32rem">
      <van-button block type="info" @click="add_user" v-if="filter.role_id > 0">添加{{role_name}}</van-button>
    </div>
    <EmployeeSelector
      :employee_not_select="employee_not_select"
      :can_select_employee="true"
      :can_select_dept="false"
      ref="employee_selector"
      :visible.sync="show_dept_selector"
      :selected.sync="select_user"
      @confirm="add_confirm" position="right" :multi="false">
      <van-nav-bar slot="nav" :title="'选择人员'" left-text="返回" @click-left="show_dept_selector = false" left-arrow></van-nav-bar>

      <div style="padding: 0.32rem; background-color: #fff; position: fixed; bottom:0; left:0; right:0; z-index: 2;border-top: 1px solid #f1f1f1;" slot="footer">
        <van-button block type="info" @click="add_confirm">下一步</van-button>
      </div>
    </EmployeeSelector>

    <EmployeeSelector
      :can_select_employee="true"
      :can_select_dept="false"
      :employee_not_select="founder"
      ref="employee_selector1"
      :selected.sync="select_user1"
      :visible.sync="show_dept_selector1"
      @confirm="add_confirm" position="right" :multi="true">
      <van-nav-bar slot="nav"  :title="'设置管理范围'" left-text="返回" @click-left="delete_employee" left-arrow></van-nav-bar>
      <div style="padding:0.32rem; background-color: #fff; position: fixed; bottom:0; left:0; right:0; z-index: 2;border-top: 1px solid #f1f1f1;" slot="footer">
        <van-button block type="info" @click="ScopeGet">完成</van-button>
      </div>
    </EmployeeSelector>
  </div>
</template>

<script>
import EmployeeSelector from '@/components/common/EmployeeSelector'
import Vue from 'vue'
import {Tab, Tabs, Search, Overlay} from 'vant'
import request from '@/utils/request'
import userImage from '@/components/common/user_image'
Vue.use(Tab)
Vue.use(Tabs).use(Search).use(Overlay)
export default {
  name: 'role_user_list',
  components: {
    EmployeeSelector, userImage
  },
  data () {
    return {
      bar_height: 0,
      title: '角色管理',
      list: [],
      filter: {
        role_id: ''
      },
      employee_not_select: [],
      select_user: {dept: [], employee: []},
      select_user1: {dept: [], employee: []},
      show_dept_selector1: false,
      show_dept_selector: false,
      role_name: '',
      role_list: [],
      showTip: false,
      founder: [],
      user_info: {}
    }
  },
  watch: {
    'filter.role_id': function (val) {
      var self = this
      if (val) {
        this.role_name = this.role_list.find((a) => {
          return a.id == val
        }).name
        this.$toast.loading({
          message: '正在加载'
        })
        this.refresh(function () {
          self.$toast.clear()
        })
      }
    }
  },
  methods: {
    ScopeGet () {
      let self = this
      let data1 = this.$refs.employee_selector.employee_selected
      let data = this.$refs.employee_selector1.employee_selected
      this.$toast.loading({
        message: '正在处理'
      })
      let params = {
        employee_id: data1[0], // 管理者id
        id: data // 管理范围id
      }
      request('post', '/api/employee/scope', params).then((res) => {
        self.$toast.clear()
        if (res.data.code == 1) {
          self.$toast('保存成功')
          this.$refs.employee_selector.close()
          this.$refs.employee_selector1.close()
          this.$refs.my_scroller.triggerPullToRefresh()
        } else {
          self.$toast(res.data.msg)
        }
      }).catch((e) => {
        self.$toast.clear()
      })
    },
    delete_employee () {
      let data = this.$refs.employee_selector.employee_selected
      if (data.length > 0) {
        // 把刚才选择的人移除出角色组
        request('delete', '/api/role/user', {role_id: this.filter.role_id, employee_id: data[0]}).then((res) => {
          this.$toast.clear()
          if (res.data.code == 1) {
            this.show_dept_selector1 = false
          } else {
            this.$toast(res.data.msg)
          }
        })
      }
    },
    add_confirm () {
      let data = this.$refs.employee_selector.employee_selected
      if (data.length == 0) {
        this.$toast('请选择人员')
        return false
      }
      this.$toast.loading({
        message: '正在处理'
      })
      request('put', '/api/role/user', {role_id: this.filter.role_id, employee_id: data[0]}).then(res => {
        this.$toast.clear()
        if (res.data.code == 1) {
          this.$toast.success('添加成功')
          this.founder.push(data[0])
          // 下一步，让用户设置管理范围
          this.show_dept_selector1 = true
        } else {
          this.$toast(res.data.msg)
        }
      })
    },
    add_user () {
      this.show_dept_selector = true
    },
    get_role_list () {
      let self = this
      this.$toast.loading({
        message: '正在加载'
      })
      request('get', '/api/role/list').then(res => {
        if (res.data.code == 1) {
          self.role_list = res.data.data.list
          self.filter.role_id = res.data.data.list.find(o => { return o.name == 'admin' }).id
          self.get_list(done)
        }
        self.$toast.clear()
      }).catch(e => {

      })
    },
    get_list (done) {
      let self = this
      if (!self.filter.role_id) {
        return false
      }
      request('get', '/api/role/user', self.filter).then((res) => {
        done()
        if (res.data.code == 1) {
          this.list = res.data.data.list
          let not_select = []
          this.founder = []
          for (let i in this.list) {
            not_select.push(this.list[i].id)
          }
          not_select.push(self.user_info.data.company_info.creator_id)
          this.founder.push(self.user_info.data.company_info.creator_id)
          this.employee_not_select = not_select
        }
      })
    },
    refresh (done) {
      let self = this
      this.get_list(function () {
        self.list = []
        done()
      })
    },
    infinite (done) {
      this.get_list(done)
    },
    // 设置员工权限
    detail (data) {
      this.$router.push({name: 'edit_user_power', query: {id: data.id, role_id: this.filter.role_id}})
    }
  },
  created () {
    this.get_role_list()
  },
  mounted () {
    if (window.plus) {
      this.bar_height = window.plus.navigator.getStatusbarHeight()
      this.user_info = JSON.parse(plus.storage.getItem('user_info'))
    } else {
      this.user_info = JSON.parse(localStorage.getItem('user_info'))
    }
  },
  keep_alive_update: {
    // del_user_list: function (vm) {
    //   vm.get_role_list()
    // }
  }
}
</script>

<style scoped lang="less">
  .body_com {
    height: calc(100% - 3.32rem);
    position: relative;
  }
  .popup_com{
    height: calc(100% - 0.92rem);
    position: relative;
  }
  .popup_com .van-cell-group{
    margin-top: 0;
  }
  .user_image{width:0.96rem; height:0.96rem; margin-left:0.16rem; margin-right:0.16rem;}
  .van-cell__title{line-height: 0.8rem;}
  .popup_title{
    color: #303133;
    line-height: initial;
    & span{
      font-size: 0.38rem;
    }
    & .van-cell__label{
      font-size: 0.34rem;
    }
  }
  .popup_label{
    font-size: 0.30rem;
    color: #606266;
  }
</style>
