<template>
  <div class="right_con">
    <div v-if="staff_list_type==='list'">
      <div class="staff_fgx fl"></div>
      <p class="fl staff_list">员工列表</p>
      <Button type="primary" @click="addStaffInfo" class="add_staff_btn" v-if="is_CanAdd">添加新员工</Button>
      <div class="search fr pad_T_15">
        <Select v-model="search.studio_id" class='wid_120' v-if="role_id==1||role_id==0||role_id==2" :transfer='true' filterable>
          <Option v-for="(item,index) in studioSelectList" :key="index" :value="item.id">{{item.name}}</Option>
        </Select>
        <Select class="wid_120" filterable placeholder="员工姓名" v-model="search.username" :transfer='true' filterable>
          <Option value="">全部</Option>
          <Option v-for="(item,index) in staffSelectList" :key="index" :value="item.id">{{item.realname}}</Option>
        </Select>
        <Select class="wid_120" placeholder="状态" v-model="search.status">
          <Option value="1">正常</Option>
          <Option value="0">禁用</Option>
        </Select>
        <DatePicker type="date" :transfer='true' :value='search.bg_date' :options="bg_data" placeholder="注册开始时间" class="wid_120" @on-change="bgdatechange" ></DatePicker>-
        <DatePicker type="date" :transfer='true' :value='search.ed_date' :options="ed_data" placeholder="注册结束时间" class="wid_120" @on-change="eddatechange" ></DatePicker>
        <Button type="primary" @click="getStaffList()">搜索</Button>
        <Button class="clear_btn" @click="removeSearch">清空</Button>
      </div>
      <Table :columns="staffList" :data="staffData" class="tables clear" border></Table>
      <div class="page">
        <Page :total="count" :current="pindex" :page-size="10" size="small" show-total show-elevator @on-change="getStaffList"/>
      </div>
    </div>
    <div v-else>
      <changeStaff @returnList="returnList" :staff_list_type="staff_list_type" :staff_id='staff_id' :studio_id='search.studio_id' :pindex='pindex'></changeStaff>
    </div>
  </div>
</template>
<script>
import changeStaff from "@@/staff/change_staff";
import { mapState } from "vuex";
import {getNewtoday,removeSearch} from '@/assets/js/common'
export default {
  name: "staff_list",
  components: { changeStaff},
  data() {
    return {
      count:0,
      pindex:1,
      is_CanAdd:false,
      is_CanUpdate:false,
      is_CanDelete:false,
      is_CanDisable:false,
      is_CanEnable:false,
      staffSelectList:[],
      studioSelectList:[],
      search: {
        username:'',
        usernum:'',
        status:'',
        bg_date:'',
        ed_date:'',
        studio_id:null
      },
      staff_id:null,
      bg_data: {},
      ed_data: {},
      staff_list_type: 'list',
      staffList: [
        {
          title: "员工ID",
          key: "id"
        },
        {
          title: "员工账号",
          key: "name"
        },
        {
          title: "姓名",
          key: "realname"
        },
        {
          title: "所属部门",
          render:(h,params)=>{
            let i =params.row.department_name||params.row.studio_name
            return h('span',i)
          },
        },
        {
          title: "注册时间",
          width:180,
          key: "create_time"
        },
        {
          title: "状态",
          render: (h, params) => {
            if (params.row.status === 0) {
              return h("span",
                { 
                  style: { 
                    color: "rgba(255, 121, 0, 1)",
                    cursor:'pointer'
                  },
                  on:{
                    click:()=>{
                      if(!this.is_CanEnable){
                        this.$Message.info('无操作权限')
                        return false
                      }
                      this.enableStaffList(params.row.id,params.index)
                    }
                  }
                },"禁用");
            } else {
              return h("span",
                { 
                  style: { 
                    color: "rgba(0, 156, 255, 1)",
                    cursor:'pointer'
                  },
                  on:{
                    click:()=>{
                      if(!this.is_CanDisable){
                        this.$Message.info('无操作权限')
                        return false
                      }
                      this.disableStaffList(params.row.id,params.index)
                    }
                  }
                },"正常");
            }
          }
        }
      ],
      staffData: []
    };
  },
  computed:{
    ...mapState({
      role_id: state => state.adminInfo.role_id,
    }),
  },
  watch: {
    'search.bg_date'(n){
      if(n){
        let datetime=getNewtoday(n)
        this.ed_data={
          disabledDate: date => {
            return date && date.valueOf() <  new Date(datetime) ;
          }
        }
      }else{
        this.ed_data={}
      }
    },
    'search.ed_date'(n){
      if(n){
        this.bg_data={
          disabledDate: date => {
            return date && date.valueOf() >  new Date(n);
          }
        }
      }else{
        this.bg_data={}
      }
    },
  },
  methods: {
    getStaffList(page=1){
      this.$store.commit('changeloading',true)
      this.pindex=page
      this.$api.getStaffList({limit:10,page:this.pindex,id:this.search.username,status:this.search.status,start_time:this.search.bg_date,end_time:this.search.ed_date,studio_id:this.search.studio_id}).then(data =>{
        if(data.code===200){
          this.staffData=data.data
          this.count=data.count
          this.$store.commit('changeloading',false)
        }else{
          this.$Message.info(data.msg)
          this.$store.commit('changeloading',false)
        }
      })
    },
    enableStaffList(id,i){
      this.$api.enableStaffList({id:id}).then(data => {
        if(data.code===200){
          this.staffData[i].status=1
          this.$Message.info(data.msg)
        }else{
          this.$Message.info(data.msg)
        }
      })
    },
    disableStaffList(id,i){
      this.$api.disableStaffList({id:id}).then(data => {
        if(data.code===200){
          this.staffData[i].status=0
          this.$Message.info(data.msg)
        }else{
          this.$Message.info(data.msg)
        }
      })
    },
    addStaffInfo(id, i) {
      this.staff_list_type='add'
    },
    editStaffInfo(id, i) {
      this.staff_id=id
      this.staff_list_type='edit'
    },
    openDeleteModal(id, i){
      this.$Modal.confirm({
        title: "提示信息",
        class: "vertical-center-modal",
        render: h => {
          return h("div", { class: "login_out" }, [
            h("p",
              {
                style: {
                  width: "100%",
                  padding: "30px 0px 10px 0px",
                  textAlign: "center",
                  backgourndColor: "rgba(52, 64, 78, 1)",
                  fontSize: "18px",
                  color: "rgba(51, 51, 51, 1)",
                  fontWeight: "400"
                }
              },"确认删除员工？"),
            h("p",
              {
                style: {
                  width: "100%",
                  textAlign: "center",
                  paddingBottom:'14px',
                  backgourndColor: "rgba(52, 64, 78, 1)",
                  fontSize: "13px",
                  color: "rgba(153, 153, 153, 1)",
                  fontWeight: "400"
                }
              },"删除后该员工业绩数据将被保留")
          ]);
        },
        onOk: () => {
          this.$api.deleteStaffList({id}).then(data =>{
            if(data.code==200){
              this.staffData.splice(i,1)
              this.$Message.info(data.msg)
            }else{
              this.$Message.info(data.msg)
            }
          })
        }
      });
    },
    channelStaff(id, i) {
      this.$router.push({path:'staff_channel',query:{id:id}})
    },
    returnList(pindex) {
      this.staff_list_type = 'list';
      this.getStaffList(pindex)
    },
    bgdatechange(date) {
      this.search.bg_date = date;
    },
    eddatechange(date) {
      this.search.ed_date = date;
    },
    removeSearch(){
      this.search={...removeSearch({...this.search})}
    },
    getStaffSelelctList(){
      this.$api.getStaffSelectList().then(data => {
        if(data.code==200){
          this.staffSelectList=data.data
        }
      })
    },
    getGuildList(){
      this.$api.getGuildList({limit:999,page:1,}).then(data=>{
        if(data.code==200){
          this.getStaffList()
          this.studioSelectList=data.data
          this.search.studio_id=this.studioSelectList[0].id?this.studioSelectList[0].id:null
        }
      })
    },
    // 获取用户权限
    getAuthRole(){
      this.$api.getAuthRole({id:this.role_id}).then(data=>{
        if(data.code===200){
          let checkList=data.data.auth_ids.split(',')
          if(checkList.indexOf('125')>=0){
            this.is_CanAdd=true
          }
          if(checkList.indexOf('128')>=0){
            this.is_CanUpdate=true
          }
          if(checkList.indexOf('131')>=0){
            this.is_CanDelete=true
          }
          if(checkList.indexOf('130')>=0){
            this.is_CanDisable=true
          }
          if(checkList.indexOf('129')>=0){
            this.is_CanEnable=true
          }
          this.staffList.push({
            title: "操作",
              render: (h, params) => {
                const change_btn = h("span",
                  {
                    class: "operate-btn",
                    style: {
                      color: "rgba(0, 156, 255, 1)"
                    },
                    on: {
                      click: () => {
                        this.editStaffInfo(params.row.id,params.index);
                      }
                    }
                  },"编辑");
                const delete_btn = h("span",{
                    class: "operate-btn",
                    style: {
                      color: "rgba(255, 121, 0, 1)"
                    },
                    on: {
                      click: () => {
                        this.openDeleteModal(params.row.id,params.index);
                      }
                    }
                  },"删除");
                const dis_change_btn = h("span",
                  {
                    class: "operate-btn",
                    style: {
                      color: "rgb(153, 153, 153)"
                    },
                  },"编辑");
                const dis_delete_btn = h("span",{
                    class: "operate-btn",
                    style: {
                      color: "rgb(153, 153, 153)"
                    },
                  },"删除");
                const channel_btn = h("span",
                  {
                    class: "operate-btn",
                    style: {
                      color: "rgba(255, 121, 0, 1)"
                    },
                    on: {
                      click: () => {
                        this.channelStaff(params.row.id);
                      }
                    }
                  },"平台");
                const dis_channel_btn = h("span",
                  {
                    class: "operate-btn",
                    style: {
                      color: "rgb(153, 153, 153)"
                    },
                  },"平台");
                  let arr=[]
                  if(params.row.department_name){
                    if(this.is_CanUpdate){
                      arr.push(change_btn)
                    }
                    if(this.is_CanDelete){
                      arr.push(delete_btn)
                    }
                    arr.push(channel_btn)
                  }else{
                    if(this.is_CanUpdate){
                      arr.push(dis_change_btn)
                    }
                    if(this.is_CanDelete){
                      arr.push(dis_delete_btn)
                    }
                    arr.push(channel_btn)
                  }
                  return arr
                
              }
          })
        }
      })
    },
  },
  created() {
    this.getStaffSelelctList()
    if(this.role_id==1||this.role_id==0||this.role_id==2){
      this.getGuildList()
    }else{
      this.getStaffList()
    }
  },
  mounted(){
    this.getAuthRole()
  }
};
</script>
<style>
.staff_list {
  width: 120px;
  margin-top: 15px;
  margin-left: 5px;
  font-size: 15px;
}
.add_staff_btn {
  margin-top: 10px;
}
#delete_staff{
  text-align: center;
}
#delete_staff .f_title{
  font-size: 16px;
  font-weight: bold;
  padding-top: 20px
}
#delete_staff .s_title{
  font-size: 13px;
  margin-top: 10px
}
#delete_staff .ivu-modal-close .ivu-icon-ios-close-empty:hover{
  color:#999!important
}
#delete_staff .ivu-modal-footer{
  display: none;
}
.return_cancel,.return_cancel:hover{
  background-color: rgba(52, 64, 78, 1);
  color: #fff;
  width: 80px;
  height: 32px;
  padding: 4px 15px 7px 15px;
  font-size: 14px;
  margin: 15px 15px;
  border-color: rgba(52, 64, 78, 1);
}
.onok_btn{
  width: 80px;
  height: 32px;
  font-size: 14px;
  padding: 4px 15px 7px 15px;
  margin: 15px 15px 
}

</style>


