<style>
  .departmentTreeStyleCont {
    padding-top: 20px;
    display: flex;
    height: 100%;
  }

  .departmentTreeStyleCont .departmentTreeStyle {
    background: #fff;
    padding: 20px;
    flex: 0 1 400px;
    min-height: 800px;
  }

  .departmentTreeStyleCont .departmentTreeStyle>p {
    font-size: 14px;
    margin-bottom: 15px;
    color: #333;
    font-weight: bold;
    height: 14px;
    line-height: 14px;
    border-left: 3px solid #E95252;
    text-indent: 20px;
  }

  .departmentTreeStyleCont .departmentTreeStyle .spanIcon {
    padding-left: 20px;
    display: none
  }

  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content {
    height: 32px;
    line-height: 32px;
    font-size: 12px
  }

  .TreeSpan img {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    vertical-align: sub;
    margin-right: 3px;
  }

  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon {
    display: inline-block
  }

  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon i {
    font-size: 14px !important;
    color: #999;
    margin-right: 2px;
  }

  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon i:hover {
    color: #E95252;
  }

  .departmentTreeStyleCont .departmentTreeLayer>p {
    font-size: 14px;
    margin-bottom: 15px;
    color: #333;
    font-weight: bold;
    height: 14px;
    line-height: 14px;
    border-left: 3px solid #E95252;
    text-indent: 20px;
  }

  .departmentTreeStyleCont .departmentTreeLayer {
    background: #fff;
    min-height: 300px;
    padding: 20px;
    margin-left: 20px;
    flex: auto
  }

  .departmentTreeStyleCont .el-date-editor.el-input,
  .departmentTreeStyleCont .el-date-editor.el-input__inner {
    width: auto !important;
  }

</style>
<template>
  <div class="flexOne">
    <div class="query-box" >
      <ul>
       
        <li>
          <span><em>{{$t('objFill.fenzhumingc')}}</em>
            <el-input v-model='msg.GroupName' @keyup.enter.native="getList" :placeholder="$t('pub.pleaseImport')">
            </el-input>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getList()" />
          <input type="button" @click="outerVisible = true,dialogTitle=$t('objFill.v101.administrative.xinzenygfzxx')" class="normalBtn" :value="$t('pub.addBtn')" />
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading' >
      <tr>
        <th width="200">{{$t('objFill.fenzhumingc')}}</th>
        <th width="200">{{$t('objFill.v101.administrative.zhuzhang')}}</th>
        <th>{{$t('objFill.v101.administrative.fuzhuzhang')}}</th>
        <th>{{$t('system.table_staffs')}}</th>
        <th>{{$t('objFill.v101.administrative.chanyuzzjl')}}</th>
        <th>{{$t('admin.admin_operate')}}</th>
      </tr>
      <tr v-for="(item,index) in DataList">
        <td>{{item.GroupName}}</td>
        <td> {{item.BigGroupLeadersNameStr}}</td>
        <td> {{item.GroupLeadersNameStr}}</td>
        <td> {{item.EmployeeIdNameStr}}</td>
        <td> {{item.IsJoinCommission ==1 ?$t('objFill.v101.administrative.canyu'):''}}</td>
        <td>
          <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top">
            <el-button type="primary" icon="el-icon-edit" circle
              @click="outerVisible = true,dialogTitle=$t('objFill.v101.administrative.xiugaiygfzxx'),updateData(item)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top">
            <el-button type="danger" icon="el-icon-delete" @click='deleteSaleGroup(item)' circle>
            </el-button>
          </el-tooltip>
        </td>
      </tr>
    </table>
    <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='w800' :title="dialogTitle" :visible.sync="outerVisible" center
      :before-close="closeChangeMachie">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
        <table class="layerNoIcon">
          <tr>
            <td>
              <el-form-item :label="$t('objFill.fenzhumingc')" prop="GroupName">
                <el-input class='w200' type="text" maxlength='20' v-model="addMsg.GroupName"
                  :placeholder="$t('pub.pleaseImport')"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item :label="$t('objFill.v101.administrative.zhuzhang')" prop="BigGroupLeaders">
                <el-select filterable class='w200 multiple_input' clearable v-model='addMsg.BigGroupLeadersList'
                  :placeholder="$t('pub.pleaseSel')" multiple>
                  <el-option v-for='item in employeeList' :label='item.EmName' :value='item.EmployeeId'
                    :key="item.EmployeeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
           
          </tr>
          <tr>
            <td>
              <el-form-item :label="$t('objFill.v101.administrative.fuzhuzhang')" prop="GroupLeaders">
                <el-select filterable class='w200 multiple_input' clearable v-model='addMsg.GroupLeadersList'
                  :placeholder="$t('pub.pleaseSel')" multiple>
                  <el-option v-for='item in employeeList' :label='item.EmName' :value='item.EmployeeId'
                    :key="item.EmployeeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>
              <el-form-item :label="$t('system.table_staffs')" prop="EmployeeId">
                <el-select filterable class='w200 multiple_input' clearable v-model='addMsg.EmployeeIdList'
                  :placeholder="$t('pub.pleaseSel')" multiple>
                  <el-option v-for='item in employeeList' :label='item.EmName' :value='item.EmployeeId'
                    :key="item.EmployeeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
        </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}
        </button> &nbsp;
        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
       
        loading: true,
        //分页
        total: 0,
        pageSize: '',
        currentPage: 1,
        //弹窗
        outerVisible: false,
        dialogTitle: '',
        rules: { //表单验证
         
          GroupName: [{
            required: true,
            message: this.$t('rule.qsrbmmingchen'),
            trigger: 'blur'
          }],
        },
       
        msg: {
          pageIndex: 1,
          pageSize: 15,
          GroupName: '',
        },
        employeeMsg: {
          BranchId: '-1',
          IsLeave: 0
        },
        addMsg: {
          ID: '0',
          GroupName: '',
          BigGroupLeadersList: [],
          GroupLeadersList: [],
          EmployeeIdList: [],
        },
        defaultImg: 'this.src="' + require("../../assets/img/default_head_img.jpg") + '"',
        //返回数据
        DataList: [],
        employeeList: [],
        allList: []

      }
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.addMsg.RB_Group_id = userInfo.RB_Group_id; //集团
   
      this.getList();
      this.getEmployee();
   
    },
    filters: {
  
    },
    methods: {
      getList() { //获取数据
        this.loading = true
        this.apipost('admin_get_GetEmployeeSaleGroupListPage', this.msg, res => {
          if (res.data.resultCode == 1) {
            this.DataList = res.data.data.pageData;
            this.total = res.data.data.count;
            this.loading = false
          } else {}
        }, err => {})
      },
      updateData(item){
        this.addMsg.ID=item.ID;
        this.addMsg.GroupName=item.GroupName;
        this.addMsg.BigGroupLeadersList=item.BigGroupLeadersList;
        this.addMsg.GroupLeadersList=item.GroupLeadersList;
        this.addMsg.EmployeeIdList=item.EmployeeIdList;
      },

      deleteSaleGroup(item){
        this.loading = true
       
        this.apipost('admin_get_DelEmployeeSaleGroup', {Id:item.ID}, res => {
          if (res.data.resultCode == 1) {
            this.$message.success(this.$t('objFill.v101.administrative.shancygfzcg'))
            this.loading = false
            this.getList()
          } else { this.$message.error(this.$t('objFill.v101.administrative.shancygfzsb'))}
        }, err => {})
      },
      getEmployee() { //员工
        this.apipost('admin_get_EmployeeGetList', this.employeeMsg, res => {
          if (res.data.resultCode == 1) {
            this.employeeList = res.data.data;
          } else {}
        }, err => {})
      },
     
      submitForm1(addMsg) { //提交创建、修改表单
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.addData()
          } else {
            return false;
          }
        });
      },
      resetForm(formName) { //弹出框取消 初始化谈框内表单
        this.$refs[formName].resetFields();
        this.addMsg.ID = 0
        this.addMsg.BigGroupLeadersList = []
        this.addMsg.GroupLeadersList = []
        this.addMsg.EmployeeIdList = []
        this.addMsg.GroupName = ''
      },
      addData() { //新增数据
        if (((this.addMsg.BigGroupLeadersList.length)+(this.addMsg.GroupLeadersList.length)) ==0) {
          this.$message.error(this.$t('objFill.v101.administrative.zhuzfzzbnwk'))
          return;
        }
        if ((this.addMsg.EmployeeIdList.length) ==0) {
          this.$message.error(this.$t('objFill.v101.administrative.yuangbnwk'))
          return;
        }
        this.apipost('admin_get_SetEmployeeSaleGroup', this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message);
            this.outerVisible = false;
            this.treeLayerShow = false
            this.getList()
            this.resetForm('addMsg');

          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
    
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1
      },
      submitForm(addMsg) { //提交创建、修改表单
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.addData()
          } else {
            return false;
          }
        });
      },
      closeChangeMachie(done) { //弹出框关闭初始化弹框内表单
        done();
        this.resetForm('addMsg');
      }
    }
  }

</script>