<style>
    .lineCS .query_box{font-size: 12px;padding: 29px 0;padding-right: 30px;display: flex;justify-content: space-between}
    .lineCS .query_box label{display: inline-block;margin-right: 25px;width: 48px;text-align: right;}
    .lineCS .el-pagination {text-align: center;padding-top: 10px;}
    .lineCS .el-pagination.is-background .el-pager li:not(.disabled).active {background-color: #E95252;color: #fff;border-radius: 10px;}
    .lineCS .addCompany {width: 440px;}
    .lineCS .margin_right_30{margin-right: 30px;}
    .lineCS .margin_left_30{margin-left: 30px !important;}
    .lineCS .el-switch.is-checked .el-switch__core{border-color: #4BCA81;background-color: #4BCA81;}
    .lineCS .line_staff_box{padding-right: 30px;border-radius: 4px}
    .lineCS .line_staff_item{width: 260px;height: 90px;display: flex;float: left;align-items: center;padding: 10px 15px;margin-right: 20px;}
    .lineCS .line_staff_item .left img{height: 58px;width: 58px;border-radius: 50%;}
    .lineCS .line_staff_item .left{flex-grow:0}
    .lineCS .line_staff_item .right{flex-grow:1;padding-left: 10px;}
    .lineCS .line_staff_item .right .name{font-size: 14px;}
    .lineCS .line_staff_item .right p{padding: 2px 0;text-overflow:ellipsis;overflow:hidden;width: 162px;white-space:nowrap;}
    .lineCS .line_staff_item .right p i{float: right;font-size: 18px;cursor: pointer}
    .lineCS .line_staff_item .right .company_name,.position_name{font-size: 12px;color: #666666;}
    .lineCS .line_staff_box .active{background-color: #eaeaea;box-shadow: 5px 4px 5px #cecece;transition: all linear 0.5;}
    .lineCS .line_staff_box .active .right p i{color: #D23131}
</style>
<template>
    <div class="flexOne lineCS">
        <!-- <div class="resource-ttop">系统配置 >> 团队及行程管理 >> 线路管理 >> <span class="active">控制设置</span></div>  -->
        <div class="query_box">
            <div>

                <!-- <label class="">公司</label>
                <el-select v-model="msg.RB_Branch_id" filterable placeholder="不限">
                    <el-option v-for='item in BranchGetList'
                        :key="item.Id" 
                        :label="item.BName"
                        :value="item.Id">
                    </el-option>
                </el-select>
                <label class="">部门</label>
                <el-select v-model="msg.RB_Branch_id" filterable placeholder="不限">
                    <el-option v-for='item in BranchGetList'
                        :key="item.Id" 
                        :label="item.BName"
                        :value="item.Id">
                    </el-option>
                </el-select>
                <label class="">职位</label>
                <el-select v-model="msg.RB_Branch_id" filterable placeholder="不限">
                    <el-option v-for='item in BranchGetList'
                        :key="item.Id" 
                        :label="item.BName"
                        :value="item.Id">
                    </el-option>
                </el-select> -->

                <label class="">{{$t('system.query_name')}}</label>
                <el-select v-model="msg.Employee_id" clearable filterable class="w210">
                    <el-option label='不限' value='-1'></el-option>
                    <el-option v-for='item in auditorList'
                        :key="item.EmployeeId" 
                        :label="item.EmName"
                        :value="item.EmployeeId">
                    </el-option>
                </el-select>
            </div>
            <div class="query_add_btn">
                <input type="button" class="hollowFixedBtn" value="查询" @click="resetPageIndex(),getList()"/>
                <input type="button" class="normalBtn" value="新增"  @click="outerVisible=true,dialogTitle='新增'"/>
                 <input type="button" class="normalBtn" value="返回" @click="goUrl('lineManagement')" />
            </div>   
        </div>           
        <div class="line_staff_box clearfix" v-loading="loading">
            <div class="line_staff_item" v-for='(item,index) in lineStaffList' @mouseover="changeActive($event)" @mouseout="removeActive($event)">
                <div class="left">
                    <img :src="item.EmPhoto==''?'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525950467551&di=32ce5c15bf2ac89ed65fc65ceb68d2bb&imgtype=0&src=http%3A%2F%2Fwww.edu-hb.com%2FUpload%2FNewsImg%2F201105%2F18%2F11051822052165chm.png':item.EmPhoto">
                </div>
                <div class="right">
                    <p class="name">{{item.Name}}<i class="el-icon-delete" @click="deletelist(item.ID)"></i></p> 
                    <p class="company_name">{{item.BranchName}}</p>
                    <p class="position_name">{{item.DepartName}}</p>
                </div>
            </div>
        </div>
        <div class="noData" v-show="noData">
            {{$t('system.content_noData')}}
        </div>
         <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
		</el-pagination>
        <el-dialog custom-class='addCompany' :title="dialogTitle" :visible.sync="outerVisible" center :before-close="closeChangeMachie">
            <el-form  :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
                <el-form-item :label="$t('system.table_company')" prop="RB_Branch_id">
                    <el-select v-model="addMsg.RB_Branch_id" filterable :placeholder="$t('system.ph_choice')" @change="queryStaff" class="w210">
                        <el-option v-for='item in BranchGetList'
                            :key="item.Id" 
                            :label="item.BName"
                            :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('system.table_staffs')" prop="Employee_id">
                    <el-select v-model="addMsg.Employee_id" filterable :placeholder="$t('system.ph_choice')" class="w210">
                        <el-option v-for='item in BrStaffList'
                            :key="item.EmployeeId" 
                            :label="item.EmName"
                            :value="item.EmployeeId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
                
			<div slot="footer" class="dialog-footer">
				<button class="normalBtn" type="primary" @click="submitForm('addMsg')">保存</button> &nbsp;
				<button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg')">取消</button>
			</div>
		</el-dialog>
    </div>
</template>

<script>
export default {
  data(){
      return{
          msg:{
              pageIndex:1,
              pageSize:24,
              Line_id:"",
              Employee_id:""
          },
          addMsg:{
              Line_id:"",
              Employee_id:"",
              RB_Branch_id:""
          },
          DataList:[],
          auditorList:[],
          BranchGetList:[],
          lineStaffList:[],
          lineStaffDetailedList:[],
          BrStaffList:[],
          total:0,
          chosenIndex: -1,
          currentPage: 1,
          outerVisible: false,
          dialogTitle: '',
          loading: true,
          noData:false,
          insideDialogTxt: '保存成功！',
          rules: {//表单必填验证
            RB_Branch_id: [
                { required: true, message: '请选择公司', trigger: 'change' }
                //{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            Employee_id: [
                { required: true, message: '请选择员工', trigger: 'change' }
            ]
          }
      }
  },methods:{
        getList(){ //获取线路控制员工列表
            this.loading = true;
            this.msg.Line_id = this.$route.query.lineID;
            this.addMsg.Line_id = this.$route.query.lineID;          
            this.apipost('line_post_GetLineEmployeeList', this.msg, res => {
                this.lineStaffList = res.data.data.pageData; 
                this.total = res.data.data.count;
                 if(res.data.resultCode == 1) {   
                    let data = res.data.data.pageData;  
                    if(data.length<1){
                        this.noData =true;   
                        this.DataList = [];                       
                    }else{
                        this.DataList = data;
                        this.noData =false;                                             
                    }                    
                    this.loading = false;
                } else {                    
                    this.loading = false;
                    this.noData =!this.noData;
                    // this.tips(res.data.message,'warning')
                }   
                this.loading = false;   
            }, err => {})
        },
        getBranchGetList(){//获取公司列表  
            let msg = {
                Status:"0",
                is_show:"",
                RB_Group_Id:""
            };
            this.apipost('admin_get_BranchGetList', msg, res => {
               
                this.BranchGetList=res.data.data;
            }, err => {})
        },
        getAuditorList(){ //获取全部员工
            let msg = {
                GroupId:"",
                BranchId:"",
                DepartmentId:"",
                PostId:"",
                IsLeave:"0"
            };
            this.apipost('admin_get_EmployeeGetList', msg, res => {
                this.auditorList=res.data.data;
		    }, err => {})
        },
        queryStaff(){//根据公司ID获得该公司下所有员工
            let msg = {
                GroupId:"",
                BranchId:this.addMsg.RB_Branch_id,
                DepartmentId:"",
                PostId:"",
                IsLeave:"0",
            }
            this.apipost('admin_get_EmployeeGetList',msg,res=>{
                this.BrStaffList=res.data.data;
            })
        },      
        addLineControl(){//新增线控
            this.apipost('line_post_SetLineEmployee',this.addMsg,res=>{
                if(res.data.resultCode == 1) {
                    this.tips('保存成功！','success')
                    this.getList();
                    this.resetForm('addMsg');
                    this.outerVisible = false;
                } else {
                    this.innerVisible = true;
                    this.insideDialogTxt = res.data.message;
                }      
            })
        },
        submitForm(addMsg) {//提交创建表单
            this.$refs[addMsg].validate((valid) => {
                if (valid) {
                    this.addLineControl()
                } else {
                   
                    return false;
                }
            });
        },
        deletelist(ID){//删除
		    this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });                    
                this.deleteControl(ID)   
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        deleteControl(ID){//删除线控
            let msg= {
                ID:ID
            }
            this.apipost('line_post_RemoveEmployee',msg,res=>{
                  if(res.data.resultCode == 1) {
                    this.innerVisible=false;
                    this.tips('删除成功！','success')
                    this.getList();
                    this.isDeleteNote=true;
                } else {
                    this.innerVisible = true;
                    this.isDeleteNote=true;
                    this.insideDialogTxt = res.data.message;
                }      
            })
        },
        changeActive($event){ //移入
             $event.currentTarget.className="line_staff_item active";
        },
        removeActive($event){//移出
                $event.currentTarget.className="line_staff_item";
        },
        handleCurrentChange(val) {//翻页功能按钮
            this.msg.pageIndex = val;
            this.getList();
        },
        resetPageIndex() {//查询初始化页码
            this.msg.pageIndex = 1;
            this.currentPage = 1
        },
        closeChangeMachie(done){
           done();
            this.resetForm('addMsg');
        },
        resetForm(formName) {
         this.$refs[formName].resetFields();
        },
        tips(msg,type) {
            this.$message({
                message: msg,
                duration:2000,
                type: type
            });
        },
        goUrl (path,id) {
            this.$router.push({ path: path}) 
        }
   },mounted(){
       this.getList();
       this.getAuditorList();
       this.getBranchGetList();
   }
}
</script>


