<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">添加新员工</Button>
      <div class="search fr pad_T_15">
        <Select v-model="search.department_id" placeholder="部门名称" class='wid_120' :transfer='true' filterable>
          <Option value="">全部</Option>
          <Option v-for="(item,index) in studioSelectList" :key="index" :value="item.id">{{item.name}}</Option>
        </Select>
        <Select class="wid_120" placeholder="员工姓名" v-model="search.username" :transfer='true' filterable>
          <Option value="">全部</Option>
          <Option v-for="(item,index) in staffData" :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>
      <admin-detail :isDetailShow.sync="detailShow" :detailId='detailId'></admin-detail>
      <staff-platform-list :show.sync="platformBindListShow" :name="platformBindListName" :value="platformBindListId" @platform-update="handlerUpdateEmit"></staff-platform-list>
      <staff-platform-update :name="platformBindShowTitle" :show.sync="platformBindShow" :value="platformBindId" @platform-bind="handlerUpdateEmit"></staff-platform-update>
    </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 adminDetail from "@@/user/admin_detail";
import staffPlatformList from "@@/user/staff_platform_list";
import staffPlatformUpdate from "@@/user/staff_platform_update";
import { mapState } from "vuex";
import {getNewtoday,removeSearch} from '@/assets/js/common'
import Admin_detail from '@@/user/admin_detail.vue';
export default {
  name: "staff_list",
  components: { changeStaff, adminDetail, staffPlatformList, staffPlatformUpdate },
  data() {
    return {
      count:0,
      pindex:1,
      is_CanAdd:false,
      is_CanUpdate:false,
      is_CanDelete:false,
      is_CanDisable:false,
      is_CanEnable:false,
      is_PromoteList: false,
      is_Detail: false,
      platformBindListShow: false,
      platformBindListId: 0,
      platformBindListName:'',
      isPlatformBindList: false,
      platformBindShow: false,
      platformBindId: 0,
      isPlatformBind:false,
      platformBindShowTitle: '',
      staffSelectList:[],
      studioSelectList:[],
      search: {
        username:'',
        usernum:'',
        status:'',
        bg_date:'',
        ed_date:'',
        department_id:''
      },
      staff_id:null,
      bg_data: {},
      ed_data: {},
      staff_list_type: 'list',
      staffList: [
        {
          title: "员工账号",
          key: "name"
        },
        {
          title: "姓名",
          key: "realname"
        },
        {
          title: "联系方式",
          key: "mobile"
        },
        {
          title: "角色",
          key: "role_name"
        },
        {
          title: "绑定平台",
          key: "platform_total",
          render: (h,params) => {
            if (params.row.platform_total < 0) {
              return <span>--</span>
            } else if (params.row.platform_total > 0) {
              return h('span', {
                style: {
                  color: 'rgb(0, 156, 255)',
                  cursor: "pointer",
                },
                on: {
                  click: () => {
                    this.platformBindListShow = true
                    this.platformBindListId = params.row.id
                    this.platformBindListName = params.row.name
                  }
                }
              }, params.row.platform_total)
            } else {
              return h('span',{
                style: {
                  color:'rgb(255, 121, 0)',
                  cursor: "pointer"
                },
                on: {
                  click: () => {
                    this.platformBindShow = true
                    this.platformBindId = params.row.id
                    this.platformBindShowTitle = params.row.name
                  }
                }
              },'未绑定')
            }
          }
        },
        {
          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: "创建者",
          key: "creator"
        },
        {
          title: "状态",
          width: 80,
          render: (h, params) => {
            if (params.row.role_id==0) {
              return h('span',{
                style: {
                  color: 'rgb(153, 153, 153)',
                  cursor: 'not-allowed'
                }
              },'正常')
            } else if (params.row.status === 0) {
              return h("span",
                { 
                  style: { 
                    color: "rgba(255, 121, 0, 1)",
                    cursor:'pointer'
                  },
                  on:{
                    click:()=>{
                      this.enableStaffList(params.row.id,params.index)
                    }
                  }
                },"禁用");
            } else {
              return h("span",
                { 
                  style: { 
                    color: "rgba(0, 156, 255, 1)",
                    cursor:'pointer'
                  },
                  on:{
                    click:()=>{
                      this.disableStaffList(params.row.id,params.index)
                    }
                  }
                },"正常");
            }
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 180,
          render: (h, params) => {
            return h('div', [
              h('a', {
                class: {
                  tableBtn: true,
                  editBtn: true
                },
                style: {
                  color: "rgba(0, 156, 255, 1)",
                  marginRight:'20px'
                },
                on: {
                  click: () => {
                    const that = this
                    that.editStaffInfo(params.row.id,params.index)
                  }
                }
              }, '编辑'),
              // h('a', {
              //   class: {
              //     tableBtn: true,
              //     deleteBtn: true
              //   },
              //   style: {
              //     color: "rgb(243, 86, 86)",
              //     marginRight:'20px'
              //   },
              //   attrs: {
              //     href: 'javascript:;'
              //   },
              //   on: {
              //     click: ()=> {
                    
              //     }
              //   }
              // }, '删除'),
              h('a', {
                class: {
                  tableBtn: true,
                  deleteBtn: true
                },
                style: {
                  color: "rgba(0, 156, 255, 1)"
                },
                attrs: {
                  href: 'javascript:;'
                },
                on: {
                  click: ()=> {
                    this.detailShow = true
                    this.detailId = params.row.id

                  }
                }
              }, '查看'),
            ])
          }
        }

      ],
      staffData: [],
      detailShow: false,
      detailId: 0
    };
  },
  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
      let listForm = {
        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,
        department_id:this.search.department_id
      }
      this.$api.getAdminList(listForm).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.enableAdmin({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.disabledAdmin({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.deleteAdmin({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})}
    },
    // 获取部门列表
    getDepartMentList(){
       this.$api.getDepartMentList().then(data=>{
        if(data.code==200){
          this.studioSelectList=data.data
        }
      })
    },
    // 绑定平台成功后的传值事件
    handlerUpdateEmit () {
      this.getStaffList()
    }
  },
  created() {
    // this.getStaffSelelctList()
    // if(this.role_id==1||this.role_id==0||this.role_id==2){
    //   this.getGuildList()
    // }
    this.getStaffList()
    this.getDepartMentList()
    
  },
};
</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>
