<style>
  .lineManagement .query_box {
    font-size: 12px;
    padding: 29px 0;
    padding-right: 30px;
    display: flex;
    justify-content: space-between;
  }

  .lineManagement .el-switch.is-checked .el-switch__core {
    border-color: #4bca81;
    background-color: #4bca81;
  }

  .lineManagement .addCompany {
    width: 440px;
    max-height: 600px;
  }

  .lineManagement .addCompany .el-dialog__body {
    height: 486px;
    overflow: auto;
  }

  .lineManagement .query_box div label {
    display: inline-block;
    min-width: 80px;
    text-align: right;
    font-style: normal;
    margin: 0 20px 0 0;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  .lineManagement .lineType {
    width: 51px;
    height: 24px;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    border-radius: 4px;
    background-color: #ff9c00;
    color: #ffffff;
  }

  .lineManagement .LMTable tr {
    height: 70px;
    text-align: center !important;
    background-color: #fff;
  }

  .comPanyNum {
    font-size: 14px;
    color: #333333;
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 5px;
    text-decoration: underline;
  }

  .comPanyNum:hover {
    color: #e95252;
  }

  .Linezhicai {
    color: #47bf8c;
  }

  .partCompany {
    padding: 0;
    box-shadow: 0px 1px 3px 0px #dedede;
  }

  .partCompany .popper__arrow::after {
    border-bottom-color: #ededed !important;
  }

  .partCompany table {
    padding: 10px 0 0 20px;
    background-color: #ededed;
    border-collapse: collapse;
    border: 1px solid #d2d2d2;
    font-size: 12px;
  }

  .partCompany table th {
    background-color: #ededed;
    padding: 5px;
  }

  .partCompany table td {
    background-color: #ffffff;
    padding: 9px 15px;
    color: #333333;
    border: 1px solid #d2d2d2;
  }

  .partCompany table td._d_name {
    background-color: #ededed;
  }

  .partCompany table ._color_666 {
    color: #666666;
  }

  .partCompany table tr._color_666 th {
    padding: 9px 15px;
  }

  .lineManagement .LineName {
    display: inline-block;
    width: 120px;
    margin: 0 0 0 20px;
    text-align: left;
  }

  .lineManagement .LM_Back {
    background-color: #f2f2f2;
  }

  .redType {
    color: #e95252;
  }

  .lineManagement .tbDiv {
    overflow-y: auto;
  }

  .departListDiv {
    width: 100%;
    height: 200px;
    overflow-y: auto;
  }

  .lineManagement .tbDiv::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }

  .lineManagement .tbDiv::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #ededed;
  }

  .lineManagement .tbDiv::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #c9c9c9;
  }

  .departListDiv::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }

  .departListDiv::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #ededed;
  }

  .departListDiv::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #c9c9c9;
  }

  .LMTable {
    width: 100%;
    font-size: 12px;
  }

  .lineManagement .LMTable tr th {
    border-bottom: 1px solid #d1d1d1;
  }

  .lineManagement .tbDiv .LMTable td {
    border-bottom: 1px solid #d1d1d1;
    border-right: 1px solid #d1d1d1;
    position: relative;
    text-align: center;
    padding: 5px;
    min-width: 250px;
  }

  .lineManagement .tbDiv table {
    padding-right: 80px;
    margin-top: 10px;
    border-top: 1px solid #d1d1d1;
    border-left: 1px solid #d1d1d1;
    border-right: 1px solid #d1d1d1;
  }

  .upFentan {
    text-decoration: underline;
    cursor: pointer;
    position: absolute;
    right: 13px;
    top: 32%;
  }

  .subCountryList {
    width: 150px;
    text-align: left;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    top: 3px;
  }

  .lineManagement ._addLineTB tr {
    height: 40px !important;
  }

  .saveCompanyBtn {
    margin-top: 20px;
  }

  .setItem {
    cursor: pointer;
    text-decoration: underline;
    position: absolute;
    right: 13px;
    top: 32%;
  }

  .lineManagement ._LMComdiv {
    float: left;
    width: 32%;
    text-align: left;
  }

  .lineManagement .LineRank {
    width: 24px;
    height: 24px;
    background-color: #2aaef2;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    color: #fff;
    margin: 0 auto 5px;
  }

  .lineManagement .joinDepart {
    display: inline-block;
    margin-right: 50px;
    text-align: left;
    float: left;
    width: 180px;
  }

  .lineManagement .LM_Rank {
    text-align: center;
  }

  .lineManagement ._LowDisMoney {
    width: 200px;
    float: left;
    text-align: left;
    margin: 0 0 0 20px;
  }

  .lineManagement .LM_Btcontent {
    position: absolute;
    right: 100px;
    top: 10px;
    text-align: right;
    margin-left: 20px;
  }

  .lineManagement .LM_ul li {
    margin: 20px 0 0px 0px;
    transition: linear all 0.5s;
    background-color: #fff;
    font-size: 12px;
    border: 1px solid #dddddd;
    overflow: hidden;
    position: relative;
    padding: 10px 0;
  }

  .lineManagement .el-button-group .el-button {
    padding: 5px;
  }

  .lineManagement .LM_ul>li:hover {
    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
    transition: all linear 0.5s;
  }

  .lineManagement .TFimgList {
    float: left;
    width: 170px;
    height: 100px;
    border-radius: 4px;
    position: relative;
    margin: 0 10px 10px 0;
    overflow: hidden;
  }

  .lineManagement .TFimgList img {
    width: 100%;
    height: 100%;
  }

  .lineManagement .TFIMGzhe {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    text-align: center;
    line-height: 115px;
    border-radius: 4px;
    display: none;
  }

  .lineManagement .TFimgList:hover .TFIMGzhe {
    display: block;
  }

</style>
<template>
  <div class="flexOne lineManagement">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>{{$t('system.query_lineName')}}</em>
            <el-input v-model="msg.lineName" :placeholder="$t('system.ph_in')" @keyup.native.enter="getList"
              class="w210"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('Operation.Op_ShortName')}}</em>
            <el-input v-model="msg.lineShortName" :placeholder="$t('system.ph_in')" @keyup.native.enter="getList"
              class="w210"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('system.ph_xianluCode')}}</em>
            <el-input v-model="msg.lineCode" :placeholder="$t('system.ph_in')" @keyup.native.enter="getList"
              class="w210"></el-input>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getList()" />
          <input type="button" class="normalBtn" :value="$t('pub.addBtn')"
            @click="clearInfo(),isShowDIv=true,isShowTwo=false,divTitle='新增线路'" />
        </li>
      </ul>
    </div>
    <div class="commonContent" v-loading="loading">
      <ul class="LM_ul">
        <li v-for="(item,index) in DataList" :key="item.subCode">
          <el-row :gutter="10" style="display: flex;align-items: center;">
            <el-col :span="3">
              <span class="LineName">{{item.lineName}}</span>
            </el-col>
            <el-col :span="2">
              <span class="lineType">{{item.lineCode}}</span>
            </el-col>
            <el-col :span="2">
              <div class="_LowDisMoney">
                <div>{{$t('Operation.Op_sname')}}</div>
                {{item.lineShortName}}
              </div>
            </el-col>
            <el-col :span="2">
              <div class="_LowDisMoney">
                <div>{{item.lowDeposit}}</div>
                <div>{{$t('Operation.Op_depositAmount')}}</div>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="_LowDisMoney">
                <div v-if="item.lineDirection==1">{{$t('visa.v_chujing')}}</div>
                <div v-else-if="item.lineDirection==2">{{$t('Operation.Op_leaveCountry')}}</div>
                <div v-else-if="item.lineDirection==3">{{$t('op.Onedaytour')}}</div>
                <div>{{$t('Operation.Op_LineDirection')}}</div>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="LineRank">{{item.discountDayNum}}</div>
              <div class="LM_Rank">{{$t('Operation.Op_EarlybirdDay')}}</div>
            </el-col>
            <el-col :span="3">
              <div class="LineRank">{{item.rank}}</div>
              <div class="LM_Rank">{{$t('system.table_rank')}}</div>
            </el-col>
            <el-col :span="5">
              <div class="_LMComdiv">
                <el-popover popper-class="partCompany" width="300" trigger="click">
                  <div class="departListDiv">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr class="_color_666">
                        <th>{{$t('system.table_company')}}</th>
                        <th>{{$t('Operation.Op_LossAllocation')}}</th>
                      </tr>
                      <tr v-for="childItem in departCompany" :key="childItem.subCode">
                        <td width="60%">{{childItem.companyName}}</td>
                        <td width="40%">{{childItem.lossAllocation}}%</td>
                      </tr>
                    </table>
                  </div>
                  <span slot="reference" class="comPanyNum"
                    @click="getLossCompany(item.lineID,1)">{{item.branchCount}}</span>
                </el-popover>
                <div class="particCompany">{{$t('Operation.Op_partInCompany')}}</div>
              </div>
              <div class="_LMComdiv">
                <el-popover popper-class="partCompany" width="350" trigger="click">
                  <div class="departListDiv">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr class="_color_666">
                        <th width="40%">{{$t('system.table_company')}}</th>
                        <th width="60%">{{$t('admin.admin_Department')}}</th>
                      </tr>
                      <tr v-for="childItem in departDepartment" :key="childItem.subCode">
                        <td>{{childItem.companyName}}</td>
                        <td>{{childItem.joinDepartment | getJoinDepName}}</td>
                      </tr>
                    </table>
                  </div>
                  <span slot="reference" class="comPanyNum"
                    @click="getLossCompany(item.lineID,2)">{{$t('pub.clickToView')}}</span>
                </el-popover>
                <div class="particCompany">{{$t('Operation.Op_belongDepartment')}}</div>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="Linezhicai" :class="{'redType':item.isDirect=='0'}">
                {{item.isDirect=="0"?$t('op.feizhicai'):$t('op.zhicai')}}</div>
              <div class="Linezhicai" :class="{'redType':item.isShow=='0'}">
                {{item.isShow=="0"?$t('MarketingActi.notShow'):$t('system.table_isShows')}}</div>
              <div class="Linezhicai" :class="{'redType':item.is_PacketGroup=='0'}">
                {{item.is_PacketGroup =="0"?$t('op.notxiaobaotuan'):$t('Operation.Op_AllowSmallGroup')}}</div>
            </el-col>
            <el-col :span="2">
              <div>
                <el-button-group size='mini'>
                  <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
                    <el-button type="primary" icon="el-icon-edit"
                      @click="isShowDIv = true,divTitle='修改线路',updateData(index)"></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" :content="$t('system.btn_CtrlSet')" placement="top-start">
                    <el-button type="success" icon="el-icon-setting" @click="getBranchList(item.lineID)"></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
                    <el-button type="danger" icon="el-icon-delete" @click="deletelist(item.lineID)"></el-button>
                  </el-tooltip>
                </el-button-group>
              </div>
            </el-col>
          </el-row>
        </li>
      </ul>
      <div class="noData" v-show="noData">
        {{$t('system.content_noData')}}
      </div>
    </div>
    <div class="combottomDiv" v-if="isShowDIv">
      <div class="combottomTitle">{{divTitle}}</div>
      <div class="">
        <el-form :model="addMsg" :rules="rules" ref="addMsg" @submit.native.prevent label-width="130px">
          <el-col :span="5">
            <el-form-item :label="$t('system.query_lineName')" prop="lineName">
              <el-input v-model="addMsg.lineName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="$t('Operation.Op_ShortName')" prop="lineShortName">
              <el-input v-model="addMsg.lineShortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="$t('system.table_lineCode')" prop="lineCode">
              <el-input v-model="addMsg.lineCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="$t('Operation.Op_CombinedContry')" style="display:none;">
              <el-select v-model="lineCountryArr" class='multiple_input' multiple :placeholder="$t('pub.pleaseSel')">
                <el-option v-for="item in countryList" :key="item.ID" :label="item.Name" :value="item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="$t('Operation.Op_lowDeposit')" prop="lowDeposit">
              <el-input v-model="addMsg.lowDeposit" maxlength="10" @keyup.native="checkPrice(addMsg,'lowDeposit')">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="$t('Operation.Op_preferentialDays')">
              <el-input v-model="addMsg.discountDayNum" maxlength="3"
                @keyup.native="checkInteger(addMsg,'discountDayNum')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="$t('system.table_rank')">
              <el-input v-model="addMsg.Rank" @keyup.native="checkInteger(addMsg,'Rank')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item :label="$t('Operation.Op_isDirect')">
              <el-switch v-model="addMsg.isDirect" :active-value="isDefaultChecked"
                :inactive-value="isDefaultUnchecked"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item :label="$t('system.table_isShow')">
              <el-switch v-model="addMsg.isShow" :active-value="isDefaultChecked" :inactive-value="isDefaultUnchecked">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item :label="$t('Operation.Op_isShared')">
              <el-switch v-model="addMsg.IsShare" :active-value="isDefaultChecked" :inactive-value="isDefaultUnchecked">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item :label="$t('Operation.Op_AllowSmallGroup')">
              <el-switch v-model="addMsg.Is_PacketGroup" :active-value="isDefaultChecked"
                :inactive-value="isDefaultUnchecked"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="结团审批">
              <el-switch v-model="addMsg.travelEndAudit" :active-value="isDefaultChecked"
                :inactive-value="isDefaultUnchecked"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="5" v-if='addMsg.travelEndAudit==1'>
            <el-form-item label="审批人员" prop="auditEmpId">
              <el-select v-model="addMsg.auditEmpId" filterable placeholder="审批人员" @change="$forceUpdate()">
                <el-option v-for="item in searchList" :label="item.name" :value="item.empId" :key="item.empId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="$t('Operation.Op_LineDirection')" prop="LineDirection">
              <el-select v-model="addMsg.LineDirection" :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('Operation.Op_theEntry')" :value='1'></el-option>
                <el-option :label="$t('Operation.Op_leaveCountry')" :value='2'></el-option>
                <el-option :label="$t('op.Onedaytour')" :value='3'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="$t('op.rentoufy')">
              <el-input v-model="addMsg.RebateMoney" maxlength="10" @keyup.native="checkPrice(addMsg,'RebateMoney')">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="行程主色">
              <el-color-picker v-model="addMsg.LineTripColor"></el-color-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="$t('op.b2bxianlubjt')">
              <div class="TFimgList">
                <img v-if="!addMsg.BackgroundImage" src="../../assets/img/bg_c3@3x.png">
                <img v-else :src='addMsg.BackgroundImage'>
                <div class="TFIMGzhe">
                  <div class="TFreupload">
                    <el-upload :file-list="fileList" :http-request="uploadTest" :multiple="true" :limit="2"
                      :on-change="handleChange1" accept="image/jpeg, image/gif, image/png, image/bmp"
                      :show-file-list="false" action="">
                      <i class="iconfont icon-Edit"></i>
                    </el-upload>
                  </div>
                </div>
              </div>
            </el-form-item>

          </el-col>
          <el-col :span="5">
            <el-form-item :label="$t('op.b2bxianlucbct')">
              <div class="TFimgList" style="width:90px">
                <img v-if="!addMsg.BroadsideImage" src="../../assets/img/bg_c3@3x.png">
                <img v-else :src='addMsg.BroadsideImage'>
                <div class="TFIMGzhe">
                  <div class="TFreupload">
                    <el-upload :file-list="fileList2" :http-request="uploadTest2" :multiple="true" :limit="2"
                      :on-change="handleChange2" accept="image/jpeg, image/gif, image/png, image/bmp"
                      :show-file-list="false" action="">
                      <i class="iconfont icon-Edit"></i>
                    </el-upload>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="$t('op.apptubiao')">
              <div class="TFimgList" style="width:50px;height:50px">
                <img v-if="!addMsg.AppLineIcon" src="../../assets/img/bg_c3@3x.png">
                <img v-else :src='addMsg.AppLineIcon'>
                <div class="TFIMGzhe">
                  <div class="TFreupload">
                    <el-upload :file-list="fileList3" :http-request="uploadTest3" :multiple="true" :limit="2"
                      :on-change="handleChange3" accept="image/jpeg, image/gif, image/png, image/bmp"
                      :show-file-list="false" action="">
                      <i class="iconfont icon-Edit"></i>
                    </el-upload>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="行程顶部图片">
              <div class="TFimgList">
                <img v-if="!addMsg.TripFeatureTopBg" src="../../assets/img/bg_c3@3x.png">
                <img v-else :src='addMsg.TripFeatureTopBg'>
                <div class="TFIMGzhe">
                  <div class="TFreupload">
                    <el-upload :http-request="uploadTripFeatureTopBg" :multiple="false"
                      accept="image/jpeg, image/gif, image/png, image/bmp" :show-file-list="false" action="">
                      <i class="iconfont icon-Edit"></i>
                    </el-upload>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="行程底部图片">
              <div class="TFimgList">
                <img v-if="!addMsg.TripFeatureBottomBg" src="../../assets/img/bg_c3@3x.png">
                <img v-else :src='addMsg.TripFeatureBottomBg'>
                <div class="TFIMGzhe">
                  <div class="TFreupload">
                    <el-upload :http-request="uploadTripFeatureBottomBg" :multiple="false"
                      accept="image/jpeg, image/gif, image/png, image/bmp" :show-file-list="false" action="">
                      <i class="iconfont icon-Edit"></i>
                    </el-upload>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>


          <div class="LM_Btcontent">
            <input type="button" class="normalBtn" @click="submitForm('addMsg')" :value="$t('pub.saveBtn')" />
            <input type="button" class="hollowFixedBtn" @click="isShowDIv=false" :value="$t('pub.cancelBtn')" />
          </div>
        </el-form>
      </div>
    </div>
    <div class="managebtmDiv tbDiv" v-if="isShowTwo">
      <table class="LMTable _addLineTB" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th>{{$t('Operation.Op_Project')}}/{{$t('system.table_company')}}</th>
          <th v-for="item in getCompanyList" :key="item.subCode">{{item.companyName}}</th>
        </tr>
        <tr>
          <td class="LM_Back">{{$t('Operation.Op_LossAllocation')}}</td>
          <td v-for="item in getCompanyList" :key="item.subCode">
            <span v-if="!item.inputShow">{{item.lossAllocation}}</span>
            <input type="text" v-model="item.lossAllocation" @blur="setInput(item)"
              onkeyup="value=value.replace(/[^\d]/g,'')" class="w80" v-if="item.inputShow" />
            <span v-if="item.lossAllocation!=null">%</span>
            <span class="upFentan" v-if="item.lossAllocation>=0&&!item.showSet&&item.selectDepIdArr.length>0"
              @click="displayInput(item)">{{$t('pub.updateMsg')}}</span>
            <div v-if="item.showSet&&item.selectDepIdArr.length>0">
              <span>{{$t('Operation.Op_notInvoled')}}</span>
              <span @click="clickedSet(item)" class="setItem">{{$t('leader.leader_Set')}}</span>
            </div>
          </td>
        </tr>
        <tr>
          <td v-on:click='closeDepOption()' class="LM_Back">{{$t('Operation.Op_ManageDepartment')}}</td>
          <td v-on:click='closeDepOption(item)' v-for="item in getCompanyList" :key="item.subCode">
            <span class="joinDepart" v-if="!item.seletShow">{{item.joinDepartment | getJoinDepName}}</span>
            <el-select v-model="item.selectDepIdArr" multiple class='w160 multiple_input' filterable
              @change="getSelected(item)" :placeholder="$t('pub.pleaseSel')" v-if="item.seletShow">
              <el-option v-for="item in item.departMentList" :key="item.DepartmentID" :label="item.DepartmentName"
                :value="item.DepartmentID">
              </el-option>
            </el-select>
            <span class="upFentan" v-if="item.selectDepIdArr.length>0"
              @click.stop="getSelectList(item,item.rB_Branch_id)">{{$t('pub.updateMsg')}}</span>
            <div v-if="item.showSelectSet">
              <span class="joinDepart">{{$t('Operation.Op_notInvoled')}}</span>
              <span @click.stop="clickedSelectSet(item)" class="setItem">{{$t('leader.leader_Set')}}</span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="LM_Back" @click="closeOpTion()">{{$t('op.fuzeop')}}</td>
          <td v-for="item in getCompanyList" @click="closeOpTion()" :key="item.subCode">
            <span class="joinDepart" v-if="!item.seletOpShow">{{item.joinEmployee | getJoinEmpName}}</span>
            <el-select v-model="item.selectOpIdArr" multiple class='w160 multiple_input' filterable
              @change="getOPSelected(item)" :placeholder="$t('pub.pleaseSel')" v-if="item.seletOpShow">
              <el-option v-for="item in item.employeeList" :key="item.EmployeeId" :label="item.EmName"
                :value="item.EmployeeId">
              </el-option>
            </el-select>
            <span class="upFentan" v-if="item.selectOpIdArr.length>0"
              @click.stop="getOPSelectList(item,item.rB_Branch_id)">{{$t('pub.updateMsg')}}</span>
            <div v-if="item.showOpSet">
              <span class="joinDepart">{{$t('Operation.Op_notInvoled')}}</span>
              <span @click.stop="clickedOpSet(item)" class="setItem">{{$t('leader.leader_Set')}}</span>
            </div>
          </td>
        </tr>

      </table>
      <input type="button" class="normalBtn" @click="isShowTwo=false" :value="$t('pub.cancelBtn')" />
      <input type="button" class="normalBtn saveCompanyBtn" @click="saveCompany()" :value="$t('pub.saveBtn')" />
    </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>
  </div>
</template>

<script>
import getters from '../../store/getters';
  export default {
    data() {
      return {
        fileList3: [],
        fileList: [],
        fileList2: [],
        msg: {
          pageIndex: 1,
          pageSize: 6,
          lineName: "",
          lineCode: "",
          lineShortName: ""
        },
        addMsg: {
          lineId: 0,
          lineName: "",
          lineCode: "",
          isDirect: "",
          isShow: "",
          lineCountryList: [],
          Rank: 0,
          lowDeposit: 0.0,
          discountDayNum: 0,
          lineShortName: "",
          IsShare: 0,
          Is_PacketGroup: 0,
          LineDirection: 2,
          BackgroundImage: "",
          BroadsideImage: '',
          AppLineIcon: "",
          RebateMoney: 0, //人头返佣
          TripFeatureTopBg: "", //行程特色顶部图片
          TripFeatureBottomBg: "", //行程特色顶部图片
          travelEndAudit: 0, //结团审批
          auditEmpId: '', //审批人
          LineTripColor: "", //行程主色
        },
        departCompany: "",
        departDepartment: "",
        countryList: "",
        lineCountryArr: [],
        isDefaultUnchecked: 0,
        isDefaultChecked: 1,
        isShowDIv: false,
        divTitle: "",
        isShowTwo: false,
        getCompanyList: "",
        BranchCompanyList: "",
        upLineId: "",
        DataList: [],
        total: 0,
        currentPage: 1,
        noData: false,
        loading: true,
        rules: {
          //表单必填验证
          lineName: [{
            required: true,
            message: this.$t('system.ph_lineName'),
            trigger: "blur"
          }],
          lineCode: [{
              required: true,
              message: this.$t('op.qingtxxldm'),
              trigger: "blur"
            },
            {
              pattern: /^[a-zA-Z]/,
              message: this.$t('op.qingsrzqdzm')
            }
          ],
          lowDeposit: [{
            required: true,
            message: this.$t('op.qingtxzdje'),
            trigger: "blur"
          }],
          lineShortName: [{
            required: true,
            message: this.$t('op.qingtxxljc'),
            trigger: "change"
          }],
          LineDirection: [{
            required: true,
            message: this.$t('op.qingxzxlfx'),
            trigger: "change"
          }],
          auditEmpId: [{
            required: true,
            message: '审批人员不能为空',
            trigger: "blur"
          }],

        },
        searchList: []
      };
    },
    methods: {
      handleChange3(file, fileList) {
        this.fileList3 = fileList.slice(-1);
      },
      handleChange1(file, fileList) {

        this.fileList = fileList.slice(-1);
      },
      handleChange2(file, fileList) {
        this.fileList2 = fileList.slice(-1);
      },
      //行程特色顶部图片
      uploadTripFeatureTopBg(file) {
        let newArr = [];
        newArr.push(file.file);
        let path = "/Upload/DMC/Icon/";
        this.UploadSelfFileT(path, newArr, x => {
          let url = this.domainManager().ViittoFileUrl + x.data.FilePath;
          this.addMsg.TripFeatureTopBg = url;
        });
      },
      uploadTripFeatureBottomBg(file) {
        let newArr = [];
        newArr.push(file.file);
        let path = "/Upload/DMC/Icon/";
        this.UploadSelfFileT(path, newArr, x => {
          let url = this.domainManager().ViittoFileUrl + x.data.FilePath;
          this.addMsg.TripFeatureBottomBg = url;
        });
      },
      uploadTest3(file) {
        let newArr = [];
        newArr.push(file.file);
        let path = "/Upload/DMC/Icon/";
        this.UploadSelfFileT(path, newArr, x => {
          let url = this.domainManager().ViittoFileUrl + x.data.FilePath;
          this.addMsg.AppLineIcon = url;
        });
      },
      uploadTest2(file) {
        let newArr = [];
        newArr.push(file.file);
        let path = "/Upload/DMC/Icon/";
        this.UploadSelfFileT(path, newArr, x => {
          let url = this.domainManager().ViittoFileUrl + x.data.FilePath;
          this.addMsg.BroadsideImage = url;
        });
      },
      uploadTest(file) {
        let newArr = [];
        newArr.push(file.file);
        let path = "/Upload/DMC/Icon/";
        this.UploadSelfFileT(path, newArr, x => {
          let url = this.domainManager().ViittoFileUrl + x.data.FilePath;
          this.addMsg.BackgroundImage = url;
        });
      },
      getList() {
        //获取现有线路列表
        this.loading = true;
        this.apipost(
          "line_post_GetPageList",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              let data = res.data.data.pageData;
              this.total = res.data.data.count;
              this.noData = !this.total > 0;
              this.DataList = data;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      getLossCompany(lineId, type) {
        let msg = {
          lineId: lineId
        };
        this.departCompany = "";
        this.departDepartment = "";
        this.apipost(
          "line_get_join_branch_list",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              if (type == 1) {
                this.departCompany = res.data.data;
              } else if (type == 2) {
                this.departDepartment = res.data.data;
              }
            }
          },
          err => {}
        );
      },
      getCountry() {
        //获取国家
        let msg = {};
        this.apipost(
          "dict_post_Destination_GetCountry",
          msg,
          res => {
            this.countryList = res.data.data;
          },
          err => {}
        );
      },
      addLine() {
        //添加线路
        this.addMsg.lineCountryList = [];
        this.lineCountryArr.forEach(countryID => {
          var countryObj = {
            countryId: countryID
          };
          this.addMsg.lineCountryList.push(countryObj);
        });
        if (this.addMsg.travelEndAudit == 1) { //结团审核等于1 的时候 审批人员不能为空
          if (this.addMsg.auditEmpId == '') {
            this.Error('请选择结团审批人');
            return;
          }
        } else {
          this.addMsg.auditEmpId = 0
        }
        this.apipost(
          "line_post_Set",
          this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.Success("保存成功！");
              this.getList();
              this.resetForm("addMsg");
              this.lineCountryArr = [];
              this.isShowDIv = false;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      updateData(index) {
        //修改线路信息
        this.lineCountryArr = [];
        var getInfo = this.DataList[index];
        this.addMsg.lineName = getInfo.lineName;
        this.addMsg.lineCode = getInfo.lineCode;
        this.addMsg.lineShortName = getInfo.lineShortName;
        getInfo.countryList.forEach(x => {
          this.lineCountryArr.push(x.countryId);
        });
        this.addMsg.isDirect = getInfo.isDirect;
        this.addMsg.isShow = getInfo.isShow;
        this.addMsg.lineId = getInfo.lineID;
        this.addMsg.Rank = getInfo.rank;
        this.addMsg.lowDeposit = getInfo.lowDeposit;
        this.addMsg.discountDayNum = getInfo.discountDayNum;
        this.addMsg.IsShare = getInfo.isShare;
        this.addMsg.Is_PacketGroup = getInfo.is_PacketGroup;
        this.addMsg.LineDirection = getInfo.lineDirection;
        this.addMsg.BackgroundImage = getInfo.backgroundImage;
        this.addMsg.BroadsideImage = getInfo.broadsideImage;
        this.addMsg.AppLineIcon = getInfo.appLineIcon;
        this.addMsg.RebateMoney = getInfo.rebateMoney;
        this.addMsg.TripFeatureTopBg = getInfo.tripFeatureTopBg;
        this.addMsg.TripFeatureBottomBg = getInfo.tripFeatureBottomBg;
        this.addMsg.travelEndAudit = getInfo.travelEndAudit;
        this.addMsg.auditEmpId = getInfo.auditEmpId == 0 ? '' : getInfo.auditEmpId;
        this.addMsg.LineTripColor=getInfo.lineTripColor;
      },
      deletelist(lineID) {
        var that = this;
        this.Confirm(that.$t('op.sfshanchucxl'), function () {
          let msg = {
            ID: lineID
          };
          that.apipost(
            "line_post_Remove",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
              }
            },
            err => {}
          );
        });
      },
      //获取分公司分摊和设置
      getBranchList(lineId) {
        this.isShowTwo = true;
        this.isShowDIv = false;
        this.upLineId = lineId;
        let msg = {
          lineId: lineId
        };
        this.apipost("line_get_all_branch_list", msg, res => {
          if (res.data.resultCode == 1) {
            this.getCompanyList = res.data.data;
            this.getCompanyList.map(x => {
              x.inputShow = false;
              x.seletShow = false;
              x.seletOpShow = false;
              x.departMentList = "";
              x.employeeList = [];
              x.selectDepIdArr = [];
              x.selectOpIdArr = [];
              if (x.lossAllocation == null && x.inputShow == false) {
                x.showSet = true;
              } else {
                x.showSet = false;
              }
              if (x.joinDepartment.length == 0 && x.seletShow == false) {
                x.showSelectSet = true;
              } else {
                x.showSelectSet = false;
              }
              if (x.joinEmployee.length == 0 && x.seletOpShow == false) {
                x.showOpSet = true;
              } else {
                x.showOpSet = false;
              }
              if (x.joinDepartment.length > 0) {
                x.joinDepartment.forEach(y => {
                  x.selectDepIdArr.push(y.departmentId);
                });
              }
              if (x.joinEmployee.length > 0) {
                x.joinEmployee.forEach(y => {
                  x.selectOpIdArr.push(y.employeeId);
                });
              }
            });
          }
        });
      },
      getSelectList(item, RB_Branch_Id) {
        var tempCompanyList = JSON.parse(JSON.stringify(this.getCompanyList));
        tempCompanyList.forEach(x => {
          if (x.rB_Branch_id == item.rB_Branch_id) {
            x.seletShow = true;
            let userInfo = this.getLocalStorage();
            var RB_Group_id = userInfo.RB_Group_id;
            let msg = {
              RB_Branch_Id: RB_Branch_Id, //RB_Branch_Id公司ID
              RB_Group_Id: RB_Group_id, //RB_Group_Id集团ID
              Status: -1,
              ParentId: -1,
              Tier: 0
            };
            this.apipost("admin_get_DepartmentGetList", msg, res => {
              if (res.data.resultCode == 1) {
                x.departMentList = res.data.data;
              }
            });
          }
        });
        this.getCompanyList = tempCompanyList;
      },

      getOPSelectList(item, RB_Branch_Id) {
        var tempCompanyList = JSON.parse(JSON.stringify(this.getCompanyList));
        tempCompanyList.forEach(x => {
          if (x.rB_Branch_id == item.rB_Branch_id) {
            x.seletOpShow = true;
            let userInfo = this.getLocalStorage();
            var RB_Group_id = userInfo.RB_Group_id;
            let msg = {
              GroupId: userInfo.RB_Group_id,
              BranchId: item.rB_Branch_id,
              DepartmentId: '-1',
              PostId: '-1',
              IsLeave: '0'
            };
            this.apipost("admin_get_EmployeeGetList", msg, res => {
              if (res.data.resultCode == 1) {
                x.employeeList = res.data.data;
              }
            });
          }
        });
        this.getCompanyList = tempCompanyList;
      },

      getSelected(item) {
        if (item.selectDepIdArr.length > 0) {
          let joinDepartment = [];
          item.selectDepIdArr.forEach(x => {
            joinDepartment.push({
              departmentId: x,
              departmentName: "",
              lossAllocation: null
            });
          });
          joinDepartment.forEach(x => {
            item.departMentList.forEach(y => {
              if (x.departmentId === y.DepartmentID) {
                x.departmentName = y.DepartmentName;
              }
            });
          });
          item.joinDepartment = joinDepartment;
        } else {
          item.joinDepartment = [];
          item.lossAllocation = 0;
          item.showSelectSet = true;
          item.seletShow = false;
        }
      },
      getOPSelected(item) {
        if (item.selectOpIdArr.length > 0) {
          let ckedJoinEmployee = [];
          item.selectOpIdArr.forEach(x => {
            ckedJoinEmployee.push({
              employeeId: x,
              employeeName: "",
            });
          });
          ckedJoinEmployee.forEach(x => {
            item.employeeList.forEach(y => {
              if (x.employeeId === y.EmployeeId) {
                x.employeeName = y.EmName;
              }
            });
          });
          item.joinEmployee = ckedJoinEmployee;
        } else {
          item.joinEmployee = [];
          item.showOpSet = true;
          item.seletOpShow = false;
        }
      },
      setInput(item) {
        item.inputShow = false;
        if (item.lossAllocation == null) {
          item.showSet = true;
        }
      },
      clickedSet(item) {
        var tempCompanyList = JSON.parse(JSON.stringify(this.getCompanyList));
        tempCompanyList.forEach(x => {
          if (x.rB_Branch_id == item.rB_Branch_id) {
            (x.inputShow = true), (x.showSet = false);
          }
        });
        this.getCompanyList = tempCompanyList;
      },
      clickedSelectSet(item) {
        var tempCompanyList = JSON.parse(JSON.stringify(this.getCompanyList));
        tempCompanyList.forEach(x => {
          if (x.rB_Branch_id == item.rB_Branch_id) {
            let userInfo = this.getLocalStorage();
            var RB_Group_id = userInfo.RB_Group_id;
            let msg = {
              RB_Branch_Id: item.rB_Branch_id, //RB_Branch_Id公司ID
              RB_Group_Id: RB_Group_id, //RB_Group_Id集团ID
              Status: -1,
              ParentId: -1,
              Tier: 0
            };
            this.apipost("admin_get_DepartmentGetList", msg, res => {
              if (res.data.resultCode == 1) {
                x.departMentList = res.data.data;
              }
            });
            (x.seletShow = true), (x.showSelectSet = false);
          }
        });
        this.getCompanyList = tempCompanyList;
      },
      //点击设置OP开始设置
      clickedOpSet(item) {
        var tempCompanyList = JSON.parse(JSON.stringify(this.getCompanyList));
        tempCompanyList.forEach(x => {
          if (x.rB_Branch_id == item.rB_Branch_id) {
            let userInfo = this.getLocalStorage();
            var RB_Group_id = userInfo.RB_Group_id;
            let msg = {
              GroupId: userInfo.RB_Group_id,
              BranchId: item.rB_Branch_id,
              DepartmentId: '-1',
              PostId: '-1',
              IsLeave: '0'
            };
            this.apipost("admin_get_EmployeeGetList", msg, res => {
              if (res.data.resultCode == 1) {
                x.employeeList = res.data.data;
              }
            });
            (x.seletOpShow = true), (x.showOpSet = false);
          }
        });
        this.getCompanyList = tempCompanyList;
      },
      clearInfo() {
        this.addMsg = {
          lineId: 0,
          lineName: "",
          lineCode: "",
          isDirect: "",
          isShow: "",
          IsShare: 0,
          lineCountryList: [],
          Is_PacketGroup: 0,
          LineDirection: 2,
        };
        this.lineCountryArr = [];
      },
      displayInput(item) {
        var tempCompanyList = JSON.parse(JSON.stringify(this.getCompanyList));
        tempCompanyList.forEach(x => {
          if (x.rB_Branch_id == item.rB_Branch_id) {
            x.inputShow = true;
          }
        });
        this.getCompanyList = tempCompanyList;
      },
      saveCompany() {
        var lineBranchList = [];
        var lineBranchOPList = [];
        this.getCompanyList.forEach(x => {
          if (x.joinDepartment.length > 0) {
            x.joinDepartment.forEach(y => {
              var lineBranch = {
                rB_Branch_id: x.rB_Branch_id,
                departmentId: y.departmentId,
                lossAllocation: x.lossAllocation
              };
              lineBranchList.push(lineBranch);
            });
          }
          if (x.joinEmployee.length > 0) {
            x.joinEmployee.forEach(y => {
              var opBranch = {
                rB_Branch_id: x.rB_Branch_id,
                EmployeeId: y.employeeId
              };
              lineBranchOPList.push(opBranch);
            });
          }
        });

        let msg = {
          lineId: this.upLineId,
          lineBranchList: lineBranchList,
          lineBranchOPList: lineBranchOPList
        };
        this.apipost(
          "line_Set_join_branch",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.Success(res.data.message);
              this.isShowTwo = false;
            }
          },
          err => {}
        );
      },
      submitForm(addMsg) {
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.addLine();
          } else {
            return false;
          }
        });
      },
      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();
      },
      getCompanyJoinDepName(depList) {
        let returnStr = "";
        if (depList.length > 0) {
          let depName = [];
          depList.forEach(x => {
            depName.push(x.departmentName);
          });
          returnStr = depName.join(",");
        }
        return returnStr;
      },
      closeDepOption(item) {
        this.getCompanyList.forEach(x => {
          x.seletShow = false;
          if (x.selectDepIdArr.length == 0) {
            x.showSelectSet = true;
          }
        });
      },
      closeOpTion() {
        this.getCompanyList.forEach(x => {
          x.seletOpShow = false;
          if (x.selectOpIdArr.length == 0) {
            x.showOpSet = true;
          }
        });
      },
      getEmployee() { //所有人员下拉
        let employeeMsg = {
          RB_Group_id: "0",
          RB_Branch_id: "-1",
          departmentId: "0",
          IsLeave: "0",
        }
        this.apipost(
          "app_get_company_employee",
          employeeMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.searchList = res.data.data;
            }
          },
          err => {}
        );
      },
    },
    mounted() {
      this.getList();
      this.getCountry();
      this.getEmployee()
    },
    filters: {
      getJoinDepName: function (depList) {
        let returnStr = "";
        if (depList.length > 0) {
          let depName = [];
          depList.forEach(x => {
            depName.push(x.departmentName);
          });
          returnStr = depName.join(",");
        }
        return returnStr;
      },
      getJoinEmpName: function (depList) {
        let returnStr = "";
        if (depList.length > 0) {
          let depName = [];
          depList.forEach(x => {
            depName.push(x.employeeName);
          });
          returnStr = depName.join(",");
        }
        return returnStr;
      },

    }
  };

</script>