<template>
  <div>
    <van-nav-bar :title="dept_name" left-text="返回" @click-left="$route_back" left-arrow>
      <template slot="right" v-if="select_mode">
        <a class="van-nav-bar__text" href="javascript:void(0);" @click="cancel_select">取消</a>
      </template>
    </van-nav-bar>
    <div class="body_com">
      <scroller :on-refresh="get_user_list">
        <van-cell :is-link="!select_mode" v-for="(item,index) in list" :key="index" :title="item.name" class="employee_cell" @click="employee_click(item)">
          <template slot="icon">
            <van-checkbox v-model="item.checked" v-if="select_mode"></van-checkbox>
            <img :src="item.avatar" class="employee_cell_head_img"/>
          </template>
          <van-icon v-if="!select_mode" name="edit" slot="right-icon" />
        </van-cell>

        <van-cell :is-link="!select_mode" v-for="(item,index) in dept_list" :key="index" :title="item.name" class="employee_cell" @click="dept_click(item)">
          <template slot="icon">
            <van-checkbox v-model="item.checked" v-if="select_mode"></van-checkbox>
            <img src="static/images/e66f.jpg" class="employee_cell_head_img"/>
          </template>
        </van-cell>
      </scroller>
    </div>
    <van-row class="bottom_menu" v-if="!select_mode">
      <van-col span="8"><a href="javascript:void(0);" @click="add_employee">添加成员</a></van-col>
      <van-col span="8"><a href="javascript:void(0);" @click="show_add_dept">添加子部门</a></van-col>
      <van-col span="8"><a href="javascript:void(0);" @click="actions_show=true">更多管理</a></van-col>
    </van-row>


    <div class="bottom_menu1" v-if="select_mode">
      <div class="selected_box">
        <ul :style="'width:'+selected_box_width">
          <li v-for="(item,index) in employee_selected_list" :key="index"><img @click="employee_cancel(item)" :src="item.avatar"/><div class="name_mini">{{item.name}}</div></li>
          <li v-for="(item,index) in dept_selected_list" :key="index"><img @click="dept_cancel(item)" :src="item.avatar"/><div class="name_mini">{{item.name}}</div></li>
        </ul>
      </div>
      <div class="selected_btn"><van-button style="height: 0.7rem; line-height: 0.7rem; margin-top:0.1rem;" type="primary" @click="move_to">移动到</van-button></div>
    </div>



    <van-dialog
      v-model="add_dept_show"
      title="添加子部门"
      show-cancel-button
      @confirm="submit_add_dept"
    >
      <div style="padding:0.32rem; width:auto;">
        <input type="text" id="dept_add_input" class="diy-input" style="width:100%; padding:0; height: 0.5rem; text-indent: 0.5em; box-shadow: none;" v-model="dept_formdata.name" />
      </div>

    </van-dialog>

    <van-dialog
      v-model="edit_dept_show"
      title="修改部门名称"
      show-cancel-button
      @confirm="submit_edit_dept"
    >
      <div style="padding:0.32rem; width:auto;">
        <input type="text" id="dept_edit_input" class="diy-input" style="width:100%; padding:0; height: 0.5rem; text-indent: 0.5em; box-shadow: none;" v-model="edit_dept_name" />
      </div>

    </van-dialog>

    <van-action-sheet :round="false" v-model="actions_show" :actions="actions" @select="actions_select" />

    <EmployeeSelector :can_select_employee="false" :can_select_dept="true" :dept_multi="false" @confirm="move_confirm" :visible.sync="show_dept_selector" @cancel="move_cancel"></EmployeeSelector>

    <EmployeeSelector :can_select_employee="true" :can_select_dept="false" :dept_multi="false" @confirm="set_manager" :visible.sync="show_employee_selector"></EmployeeSelector>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { ActionSheet,Checkbox } from 'vant';
  import EmployeeSelector from '@/components/common/EmployeeSelector'
  Vue.use(ActionSheet).use(Checkbox);
  import request from '@/utils/request'
  export default {
    name: "department_manager",
    components:{
      EmployeeSelector
    },
    data () {
      return {
        show_employee_selector:false,
        select_mode:false,
        show_dept_selector: false,
        edit_dept_show:false,
        add_dept_show:false,
        dept_formdata:{
          name:'',
          pid:0
        },
        company_info:{},
        actions_show:false,
        actions:[
          { name: '修改当前部门名称', action: 'edit'},
          { name: '设置上级', action: 'set_manager' },
          { name: '移动成员', action: 'move_employee'},
          { name: '删除部门', action: 'delete'},
          { name: '取消', action: 'cancel' }
        ],
        edit_dept_name:'',
        dept_name: '',
        dept_id: 0,
        list: [],
        dept_list: [],
        keyword: '',
        owner_id: 0,
        user_info: this.$store.getters.user_info,
        employee_selected_list:[],
        dept_selected_list:[],
        employee_selected:[],
        dept_selected:[],
        selected_box_width: '0'
      }
    },
    watch: {
      employee_selected_list(){
        let l = this.employee_selected_list.length + this.dept_selected_list.length
        let width = 0.9*l;
        this.selected_box_width = width + 'rem'
      },
      dept_selected_list(){
        let l = this.employee_selected_list.length + this.dept_selected_list.length
        let width = 0.9*l;
        this.selected_box_width = width + 'rem'
      },
      keyword(){
        this.get_user_list(function () {

        })
      }
    },
    methods: {
      set_manager(dat){
        //设置上级，这里请求接口
      },
      move_to(){
        this.show_dept_selector = true
      },
      move_cancel(){
        this.select_mode = false
        this.employee_selected_list = []
        this.dept_selected_list = []
        this.employee_selected = []
        this.dept_selected = []
      },
      move_confirm(data){

        //移动成员，这里请求接口

        let self = this
        request('POST','/addons/ems/employee/move_employee_and_dept', {pid: data.dept.length>0?data.dept[0].id:0, employee_ids: this.employee_selected.toString(), dept_ids: this.dept_selected.toString()}).then((res) => {
          if(res.data.code == 1){
            self.get_user_list(function () {})
            self.$toast(res.data.msg)
          }else{
            self.$toast(res.data.msg)
          }
        }).catch((error) => {

        })
        this.select_mode = false
        this.employee_selected_list = []
        this.dept_selected_list = []
        this.employee_selected = []
        this.dept_selected = []
      },
      cancel_select(){
        this.select_mode = false
      },
      employee_cancel(item){
        this.employee_selected.splice(this.employee_selected.indexOf(item.id), 1)
        let delete_index = -1
        for(let i in this.employee_selected_list){
          if(this.employee_selected.indexOf(this.employee_selected_list[i].id) < 0){
            delete_index = i
          }
        }
        if(delete_index >= 0){
          this.employee_selected_list.splice(delete_index, 1)
          for(let i in this.list){
            if(this.list[i].id == item.id){
              this.$set(this.list[i], 'checked', false)
            }
          }
        }
      },
      dept_cancel(item){
        this.dept_selected.splice(this.dept_selected.indexOf(item.id), 1)
        let delete_index = -1
        for(let i in this.dept_selected_list){
          if(this.dept_selected.indexOf(this.dept_selected_list[i].id) < 0){
            delete_index = i
          }
        }
        if(delete_index >= 0){
          this.dept_selected_list.splice(delete_index, 1)
          for(let i in this.dept_list){
            if(this.dept_list[i].id == item.id){
              this.$set(this.dept_list[i], 'checked', false)
            }
          }
        }
      },
      select_employee(item){
        if(item.checked){
          item.checked = false
          this.employee_cancel(item)
        }else{
          this.employee_selected.push(item.id)
          this.employee_selected_list.push({id:item.id,name:item.name, avatar: item.avatar})
          item.checked = true
        }
      },
      select_dept(item){
        if(item.checked){
          item.checked = false
          this.dept_cancel(item)
        }else{
          this.dept_selected.push(item.id)
          this.dept_selected_list.push({id:item.id,name:item.name, avatar: 'static/images/e66f.jpg'})
          item.checked = true
        }
      },
      employee_click(item){
        if(this.select_mode){
          //选择
          this.select_employee(item)
        }else{
          this.$router.push({name: 'employee_edit', query: {id: item.id}});
        }
      },
      dept_click(item){
        if(this.select_mode){
          //选择
          this.select_dept(item)
        }else{
          this.$router.push({name: 'department_manager', query: {pid: item.id}});
        }
      },
      add_employee(){
        this.$router.push({name: 'employee_invite', query: {dept_id: this.dept_id, id: this.company_info.id}});
      },
      submit_edit_dept(){
        let self = this
        request('POST','/addons/ems/employee/update_dept', {name: this.edit_dept_name, id: this.dept_id}).then((res) => {
          if(res.data.code == 1){
            self.get_user_list(function () {

            })
            self.$toast(res.data.msg)
          }else{
            self.$toast(res.data.msg)
          }
        }).catch((error) => {

        })
      },
      show_add_dept(){
        this.add_dept_show=true
        this.dept_formdata.name = ''
        this.$nextTick(() => {
          setTimeout(() => {
            document.getElementById('dept_add_input').classList.add('focus_hidden_input')
            document.getElementById('dept_add_input').focus()
            document.getElementById('dept_add_input').classList.remove('focus_hidden_input')
          },200)
        })
      },
      actions_select(item, index){
        if(item.action == 'edit'){
          this.dept_formdata.id = this.dept_formdata.pid
          this.edit_dept_show=true
          this.edit_dept_name = JSON.parse(JSON.stringify(this.dept_name))
          this.$nextTick(() => {
            setTimeout(() => {
              document.getElementById('dept_edit_input').classList.add('focus_hidden_input')
              document.getElementById('dept_edit_input').focus()
              document.getElementById('dept_edit_input').classList.remove('focus_hidden_input')
            },200)
          })
          //修改部门名称
        }
        if(item.action == 'delete'){
          this.$dialog.confirm({
            title: '删除部门',
            message: '确定要删除当前部门吗？'
          }).then(() => {
            this.del_dept()
          }).catch(() => {
            // on cancel
          });
        }

        if(item.action == 'move_employee'){
          this.select_mode = true
        }
        if(item.action == 'set_manager'){
          this.show_employee_selector = true
        }
        this.actions_show = false
      },
      del_dept(){
        request('get','/addons/ems/employee/delete_dept',{id: this.dept_id}).then((res) => {
          if(res.data.code == 1){
            this.$toast(res.data.msg)
            this.$route_back()
          }else{
            this.$toast(res.data.msg)
          }
        })
      },
      submit_add_dept(){
        let self = this
        request('post','/api/department/create', this.dept_formdata).then((res) => {
          if(res.data.code == 1){
            self.$toast(res.data.msg)
          }else{
            self.$toast(res.data.msg)
          }
        })
      },
      get_department_list(){
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        });
        request('get','/api/department/tree').then((res) => {
          this.dept_list = res.data.data.list
          console.log(this.list)
          this.$toast.clear()
        }).catch((e) => {

        })
      },
      get_join_review_list(){},
      get_user_list (done) {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        });
        request('get','/addons/ems/employee/get_dept_list',{pid: this.dept_formdata.pid,keyword:this.keyword}).then((res) => {
          for(let i in res.data.data.employee_list){
            res.data.data.employee_list[i]['checked'] = false
          }
          for(let i in res.data.data.dept_list){
            res.data.data.dept_list[i]['checked'] = false
          }
          this.list = res.data.data.employee_list
          this.dept_list = res.data.data.dept_list
          this.owner_id = res.data.data.owner_id
          this.company_info = res.data.data.company_info
          if(res.data.data.dept_info == null){
            //this.edit_dept_name = JSON.parse(JSON.stringify(res.data.data.company_info.name))
            this.dept_name = JSON.parse(JSON.stringify(res.data.data.company_info.name))
            this.dept_id = 0
          }else{
            //this.edit_dept_name = JSON.parse(JSON.stringify(res.data.data.dept_info.name))
            this.dept_name = JSON.parse(JSON.stringify(res.data.data.dept_info.name))
            this.dept_id = res.data.data.dept_info.id
          }
          done()
          this.$toast.clear()
        }).catch((e) => {
          done()
          this.$toast.clear()
        })
      }
    },
    created () {
      this.get_department_list()

      window.$ajax_update = () => {
        this.get_join_review_list()
        this.get_user_list(function () {

        })
      }
      if(this.$route.query.pid){
        this.dept_formdata.pid = this.$route.query.pid
      }
      this.get_join_review_list()
      this.get_user_list(function () {

      })
    }
  }
</script>

<style scoped>
  .employee_cell .van-checkbox{
    overflow: visible;
    margin-right:0.1rem;
  }
  .body_com{height: calc(100% - 1.8rem); position: relative;}
  .bottom_menu{
    height: 0.8rem; text-align: center; line-height: 0.8rem; position: relative;}
  .bottom_menu:before{content:" "; height: 1px;/*no*/  background-color: #eee;width:100%; top:0;left:0;position: absolute;}
  .bottom_menu a{color: #1989fa; font-size:0.32rem;}

  .employee_cell_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 {
    padding: 0.16rem 0.32rem;
  }

  .employee_cell .van-cell__title {
    line-height: 0.8rem;
  }
  .employee_cell .van-cell__right-icon{margin-top:0.2rem;}
  .employee_cell .van-icon{color:#999; margin-top:0.2rem;}





  .bottom_menu1{ width:100%; height: 0.9rem;}
  .selected_box,.selected_btn{vertical-align: top; text-align: left;}
  .selected_btn{width:1.8rem; text-align: center; float:right;}

  .selected_box{overflow-x: scroll; width:5.5rem; float:left;min-height: 0.5rem;}
  .selected_box ul,.selected_box li{margin:0; padding:0; text-align: left;}
  .selected_box li{display: block; text-align: left; float: left; position: relative;}
  .selected_box li img{width:0.8rem; vertical-align: top;
    height: 0.8rem; padding:0.05rem;
    -webkit-border-radius: 0.1rem;
    -moz-border-radius: 0.1rem;
    border-radius: 0.1rem;}
  .name_mini{font-size:0.2rem; position: absolute; bottom:0.05rem;left:0.05rem;right:0.05rem;padding:0.02rem 0; text-align: center; background-color: rgba(0,0,0,0.4); height: 0.2rem; color:#fff; line-height: 0.2rem;}
</style>
