<style>
  .shoppingStore .hotelResource {
    width: 100%;
    margin-top: 20px;
  }

  .shoppingStore .resourceList {
    width: 215px;
    height: 230px;
    background-color: #fff;
    border: 1px solid #ededed;
    border-radius: 4px;
    margin: 0 20px 20px 0;
    font-size: 12px;
    color: #333333;
    float: left;
  }

  .shoppingStore .resourceList:hover {
    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
    transition: all linear 0.5s;
  }

  .shoppingStore .reTopInfo {
    width: 100%;
    height: 123px;
    position: relative;
  }

  .shoppingStore .reTopInfo img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  .shoppingStore .profitList {
    position: absolute;
    width: 132px;
    height: 54px;
    background-color: rgba(71, 191, 140, 0.8);
    color: #fff;
    text-align: center;
    border-radius: 4px;
    border: 2px solid #30a774;
    left: 50%;
    margin-left: -66px;
    top: 32px;
  }

  .shoppingStore .cumlaProfit {
    display: inline-block;
    padding: 0 10px;
  }

  .shoppingStore .profOne {
    margin: 8px 0 5px 0;
  }

  .shoppingStore .eventName {
    position: absolute;
    height: 22px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    bottom: 0;
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 22px;
  }

  .shoppingStore .AccumuTrading {
    color: #666666;
    margin: 20px 0 0 20px;
  }

  .shoppingStore .amountOf {
    font-size: 14px;
    color: #333;
    margin: 10px 0 0 20px;
    font-family: PingFangSC-Semibold, sans-serif;
  }

  .shoppingStore .PhoneNum {
    width: 175px;
    height: 24px;
    background-color: #ededed;
    text-align: center;
    line-height: 24px;
    margin: 10px auto;
  }

  .shoppingStore .PhoneNum i {
    font-size: 12px;
    color: #afafaf;
    margin-right: 10px;
  }

  .shoppingStore .Sort {
    position: absolute;
    width: 50px;
    height: 25px;
    top: 8px;
    left: 0;
    color: #fff;
    font-family: PingFangSC-Semibold, sans-serif;
    background-image: url(../../assets/img/Sort.png);
    line-height: 25px;
    text-align: center;
  }

  .shoppingStore .resourceList:hover .profitList {
    background-color: rgba(4, 213, 124, 0.8);
  }

  .shoppingStore .btnList {
    margin-top: 16px;
    text-align: center;
  }

  .shoppingStore .hotelBtn {
    width: 80px;
    height: 28px;
    background: #f76f6f;
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
  }

  .shoppingStore .hotelBtn:first-child {
    margin-right: 19px;
  }

  .shoppingStore .w150 .el-input {
    width: 150px;
  }

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

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

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

  .shoppingStore .el-pagination {
    border: none !important;
  }

  .shoppingStore .btmAddStore {
    border-top: 1px solid #d1d1d1;
    display: none;
    overflow-x: auto;
    width: 92%;
    overflow-y: auto;
    position: fixed;
    background: #f9f9f9;
    bottom: 0;
  }

  .shoppingStore .btmTitle {
    padding: 0 10px;
    margin: 20px 0 20px 40px;
    border-left: 3px solid #e95252;
    font-size: 14px;
    color: #000000;
  }

  .shoppingStore .changeMsg li {
    display: inline-block;
    color: #666666;
  }

  .shoppingStore .el-form-item__label {
    font-size: 12px;
  }

  .shoppingStore .changeMsg {
    margin-left: 20px;
  }

  .addressChoice {
    height: 30px;
    position: relative;
  }

  .shoppingStore .addChoice {
    width: 210px;
    height: 34px;
    border-radius: 17px;
    outline: none;
    border: 1px solid #d1d1d1;
    padding: 0 50px 0 10px;
  }

  .shoppingStore .addressIcon {
    position: absolute;
    right: 4px;
    top: 10px;
    display: inline-block;
    width: 40px;
    border-left: 1px solid #dcdfe6;
    text-align: center;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
  }

  .shoppingStore .remarkInfo {
    float: left;
    font-size: 12px;
    color: #666;
    margin-left: 20px;
  }

  .shoppingStore .addImg span,
  .remarkInfo span {
    display: inline-block;
    width: 100px;
    text-align: right;
    vertical-align: top;
  }

  .shoppingStore .reInfo {
    width: 225px;
    height: 100px;
    border: 1px solid #dadada;
    border-radius: 10px;
    margin-left: 10px;
    padding: 5px;
  }

  .shoppingStore .addIcon {
    width: 160px;
    height: 100px;
    background-color: #ececec;
    text-align: center;
    line-height: 100px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-block;
    margin-top: -2px;
  }

  .shoppingStore .addImg {
    display: inline-block;
    margin-left: 30px;
    font-size: 12px;
  }

  .shoppingStore .imgDiv {
    display: inline-block;
    margin-left: 20px;
  }

  .shoppingStore .addIcon i {
    font-size: 50px;
    color: #d1d1d1;
  }

  .shoppingStore .btmBtn {
    width: 100%;
    height: 70px;
    border-top: 1px dashed #d1d1d1;
    line-height: 70px;
  }

  .shoppingStore .addIconDiv {
    width: 160px;
    height: 100px;
  }

  .shoppingStore .fillShow,
  .isShow {
    display: block !important;
  }

  .shoppingStore .fillTop,
  .divTop {
    height: 320px;
    overflow-y: scroll;
  }

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

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

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

  .shoppingStore .el-textarea__inner {
    resize: none;
    height: 100px;
    width: 200px;
  }

  .shoppingStore .re-img {
    width: 140px;
    height: 93px;
    border-radius: 10px;
    float: left;
    margin: 0 30px 0 0;
    position: relative;
  }

  .shoppingStore .re-img img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }

  .shoppingStore .imgzhe {
    display: none;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    position: absolute;
    top: 0;
  }

  .shoppingStore .re-img:hover .imgzhe {
    display: block;
  }

  .shoppingStore .re-delte {
    width: 32px;
    height: 32px;
    background: gray;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    color: #fff;
    margin: 30px auto;
    cursor: pointer;
  }

  .shoppingStore .re-delte:hover {
    color: #e95252;
    background: #fff;
  }

  .shoppingStore .imgList {
    float: left;
  }

  .shoppingStore .upload-demo {
    text-align: center;
    padding-bottom: 30px;
  }

  .shoppingStore .impoTable {
    width: 100%;
    min-width: 1400px;
    border-collapse: collapse;
  }

  .shoppingStore .impoTable td {
    text-align: center;
    font-size: 12px;
    color: #333;
    background-color: #e0f4ff;
    border: 1px solid #dcdfe6;
    height: 34px;
  }

  .shoppingStore .impoTable th {
    background-color: #cbe9fa;
    color: #387ea5;
    height: 34px;
    font-size: 12px;
  }

  .shoppingStore .impotBtn {
    border-top: none;
  }

  .shoppingStore .typnNoe {
    display: none;
  }

  .shoppingStore .disType {
    display: block;
  }

  .shoppingStore .delInfo {
    display: inline-block;
    color: #387ea5;
    width: 30px;
    height: 20px;
    cursor: pointer;
  }

  .shoppingStore .redType span {
    color: #e95252;
  }

  .shoppingStore .downBtn {
    padding: 6px 20px;
    position: relative;
    top: -1px;
  }

  .shoppingStore .litTip {
    font-size: 12px;
    margin-left: 10px;
  }

  .shoppingStore .el-dialog--center .el-dialog__body {
    padding: 15px 25px 0 !important;
  }

  .shoppingStore .mapList {
    width: 850px !important;
    height: 510px !important;
  }

  .delScien {
    color: #fff;
  }

  .shoppingStore .delScien {
    position: absolute;
    right: 10px;
    top: 10px;
    display: none;
  }

  .shoppingStore .delScien:hover {
    color: #f76f6f;
    cursor: pointer;
  }

  .shoppingStore .resourceList:hover .delScien {
    display: block;
  }

  .shoppingStore .combottomDiv {
    height: 400px;
  }

  .IsConflict td {
    background-color: pink !important;
  }

  /* 购物店 */

</style>
<template>
  <div class="flexOne shoppingStore">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>{{$t('system.quety_area')}}</em>
            <el-select v-model="msg.QCountry" clearable class="w150" filterable
              @change="getProvinceList(msg.QCountry,1)" :placeholder="$t('hotel.hotel_country')">
              <el-option v-for='item in countryList' :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
            <el-select v-model="msg.QProvince" clearable class="w150" filterable
              @change="getProvinceList(msg.QProvince,2)" :placeholder="$t('hotel.hotel_province')">
              <el-option v-for='item in provinceList' :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
            <el-select v-model="msg.QCity" clearable class="w150" filterable @change="getProvinceList(msg.QCity,3)"
              :placeholder="$t('hotel.hotel_city')">
              <el-option v-for='item in cityList' :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
            <el-select v-model="msg.QDistrict" clearable class="w150" filterable :placeholder="$t('hotel.hotel_area')">
              <el-option v-for='item in district' :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span class="hotel_name">
            <em>{{$t('sm.gwdname')}}</em>
            <el-input maxlength="50" v-model="msg.Name" @keyup.native.enter="getList"></el-input>
          </span>
        </li>
        <li>
          <button class="hollowFixedBtn" type="button"
            @click="resetPageIndex(),getList()">{{$t('pub.searchBtn')}}</button>
          <button class="normalBtn" type="button" @click="showDiv">{{$t('pub.addBtn')}}</button>
          <button class="normalBtn importBtn" type="button" @click="outerVisible=true">{{$t('ground.dryxsj')}}</button>
          <a class="hollowFixedBtn downBtn" :href="downList">{{$t('Airticket.Air_downloadTemplate')}}</a>
        </li>
      </ul>
    </div>
    <!--不要删除-->
    <div style="display:none">
      <table>
        <tr>
          <td>
            {{$t('ground.jdsj')}}:
          </td>
          <td>
            <el-date-picker class="w150" type="date" value-format="yyyy-MM-dd" placeholder=""
              v-model="DownLoadmsg.EnterTime"></el-date-picker>
          </td>
          <td>
            {{$t('fnc.cjshijian')}}:
          </td>
          <td>
            <el-date-picker class="w150" type="date" value-format="yyyy-MM-dd" placeholder=""
              v-model="DownLoadmsg.CreateDate">
            </el-date-picker>
          </td>
          <td>
            {{$t('ground.gwd')}}:
          </td>
          <td>
            <el-select multiple="" class="w150" v-model='DownLoadmsg.ShopIds' filterable
              :placeholder="$t('pub.pleaseSel')">
              <el-option v-for='item in getShop' :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </td>
          <td>
            <button class="hollowFixedBtn" type="button" @click="DownLoadShop()">{{$t('visa.v_daochu')}}</button>
          </td>
        </tr>
      </table>
    </div>
    <div class="hotelResource clearfix" v-loading="loading" :class="{'divTop':isShow,'fillTop':fillShow}">
      <div class="resourceList" v-for="item in dataInfo" :key="item.subCode">
        <div class="reTopInfo">
          <img v-if="item.PicPath!=''" :src="domainManager().ViittoFileUrl+item.PicPath" :onerror='defaultImg' />
          <img v-else src="../../assets/img/shoppingstore.jpg" :onerror='defaultImg' />
          <div class="profitList" style="display:none">
            <div class="profOne">一<span class="cumlaProfit">{{$t('ground.ljlr')}}</span>一</div>
            <div>￥{{item.TotalProfit}}</div>
          </div>
          <div class="delScien" @click="delShoppingStore(item.ID)">
            <i class="iconfont icon-xingzhuang"></i>
          </div>
          <el-tooltip class="item" effect="dark" :content="item.Name" placement="top-start" popper-class="max-w250">
            <div class="eventName">
              {{item.Name}}
            </div>
          </el-tooltip>
          <div class="Sort" v-if="item.Sort>0">
            No.{{item.Sort}}
          </div>
        </div>
        <div class="AccumuTrading" style="display:none">{{$t('ground.ljjy')}}</div>
        <div class="amountOf" style="display:none">￥{{item.TotalPrice}}</div>
        <div class="PhoneNum">
          <i class="iconfont icon-img_dianhua"></i>{{item.Tel}}
        </div>
        <div class="btnList">
          <button @click="updateInfo(item.ID)" class="hotelBtn">{{$t('pub.updateMsg')}}</button>
          <button @click="goUrl('ShoppingDetails',item)" class="hotelBtn">{{$t('ground.mx')}}</button>
        </div>
      </div>
    </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 class="combottomDiv" v-if="isShow">
      <el-row>
        <el-col :span="20">
          <p class="combottomTitle">{{titleInfo}}</p>
        </el-col>
        <el-col :span="4">
          <input type="button" class="normalBtn" @click="submitForm('addMsg')" :value="$t('pub.saveBtn')" />
          <input type="button" class="hollowFixedBtn" @click="isShow=false,resetForm('addMsg')"
            :value="$t('pub.cancelBtn')" />
        </el-col>
      </el-row>
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
        <ul class="changeMsg">
          <li>
            <el-form-item :label="$t('sm.gwdname')" prop="Name">
              <el-input v-model="addMsg.Name" class="w150" maxlength="20"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('MarketingActi.commType')" prop="Type">
              <el-select v-model="addMsg.Type" class="w150" filterable :placeholder="$t('pub.pleaseSel')">
                <el-option v-for='item in getShoppType' :key="item.ID" :label="item.Content" :value="item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('advmanager.v_country')">
              <el-select :placeholder="$t('visaT.qxzguojia')" filterable v-model="addMsg.Country"
                class='multiple_input w150' @change="GetSubAreaList(addMsg.Country,1)">
                <el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
                <el-option v-for="childItem in AddMsgCountryList" :key="childItem.ID" :label="childItem.Name"
                  :value="childItem.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('hotel.hotel_province')">
              <el-select :placeholder="$t('ground.qxzs')" filterable class='multiple_input w150'
                v-model="addMsg.Province" @change="GetSubAreaList(addMsg.Province,2)">
                <el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
                <el-option v-for="childItem in AddMsgProvinceList" :key="childItem.ID" :label="childItem.Name"
                  :value="childItem.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('hotel.hotel_city')">
              <el-select :placeholder="$t('ground.qingxuanzeshi')" filterable class='multiple_input w150'
                v-model="addMsg.City">
                <el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
                <el-option v-for="childItem in AddMsgCityList" :key="childItem.ID" :label="childItem.Name"
                  :value="childItem.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('hotel.hotel_mapLocation')">
              <div class="addressChoice">
                <input type="text" v-model="addMsg.Address" class="addChoice">
                <span class="addressIcon" @click="selectAddress = true"><i class="iconfont icon-img_dw"></i></span>
              </div>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('restaurant.res_BusinessHours')">
              <el-time-select v-model="startTime" :picker-options="{start: '00:00',step: '00:05',end: '24:00'}"
                class="w100" :placeholder="$t('pub.ChoiceTime')"></el-time-select>
              {{$t('restaurant.res_To')}} <el-time-select :placeholder="$t('salesModule.EndTime')" v-model="endTime"
                class="w100" :picker-options="{ start: '00:00', step: '00:05', end: '24:00',minTime: startTime}">
              </el-time-select>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('restaurant.res_ContactNumber')" prop="Tel">
              <el-input v-model="addMsg.Tel" class="w150" maxlength="20"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('hotel.suplier_contact')" prop="Contact">
              <el-input v-model="addMsg.Contact" class="w150" maxlength="20"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('fnc.a_zjczhanghu')">
              <el-select :placeholder="$t('pub.pleaseSel')" class='multiple_input w150' v-model="addMsg.CapitalPoolId">
                <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
                <el-option v-for='item in accountList' :label='item.Alias' :value='item.ID' :key='item.ID'>
                </el-option>
              </el-select>
            </el-form-item>
          </li>
        </ul>
        <div class="clearfix">
          <div class="remarkInfo">
            <el-form-item :label="$t('ground.bzsm')" prop="Remark">
              <el-input type="textarea" v-model="addMsg.Remark" class="w150" maxlength="200"></el-input>
            </el-form-item>
          </div>
          <div class="addImg">
            <span>{{$t('ground.tptj')}}</span>
            <div class="imgDiv">
              <div class="imgList clearfix">
                <div class="re-img" v-for="(item,index) in imgArray" :key="item.subCode">
                  <img :src="item" />
                  <div class="imgzhe">
                    <div class="re-delte" @click="delImg(index)"><i class="iconfont icon-xingzhuang"></i></div>
                  </div>
                </div>
              </div>
              <div class="addIcon">
                <el-upload :http-request="UploadImage" :multiple="true"
                  accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
                  <div class="addIconDiv">
                    <i class="iconfont icon-img_haha"></i>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <div class="btmAddStore" :class="{'fillShow':fillShow}">
      <div class="btmTitle">{{$t('ground.dryxsj')}}<span class="litTip">({{$t('ground.hsdbwpp')}})</span></div>
      <div style="height:250px;overflow-y: auto;">
        <table class="impoTable" style="border-spacing: 0px 1px;" v-loading="tabLoading">
          <thead>
            <tr>
              <th width="120">{{$t('visa.v_tuanhao')}}</th>
              <th width="170">{{$t('ground.dm')}}</th>
              <th width="100">{{$t('ground.jdsj')}}</th>
              <th width="80">{{$t('objFill.v101.tuanpeidy')}}</th>
              <th width="80">{{$t('objFill.v101.tuanpeilind')}}</th>
              <th width="80">{{$t('objFill.v101.daorudaoyou')}}</th>
              <th width="80">{{$t('objFill.v101.daorulindui')}}</th>
              <th width="80">{{$t('ground.gwze')}}</th>
              <th width="100">{{$t('ground.gsyj')}}</th>
              <th width="80">{{$t('ground.ldyj')}}</th>
              <th width="80">{{$t('ground.dyyj')}}</th>
              <th width="80">{{$t('ground.picyj')}}</th>
              <th width="80">{{$t('hotel.hotel_CurrentRate')}}</th>
              <th width="80">{{$t('hotel.hotel_Currency')}}</th>
              <th width="80">{{$t('pub.pubRemark')}}</th>
              <th width="80">{{$t('system.table_operation')}}</th>
            </tr>
            <tr v-for="(item,index) in importData" :key="item.subCode" :class="{'IsConflict':item.IsConflict==1}">
              <td :class="{'redType':item.TCIDExist==-1}">
                <span>{{item.TCNUM}}</span>
              </td>
              <td :class="{'redType':item.ShoppingNameExist==-1}">
                <span>{{item.Name}}</span>
              </td>
              <td>{{item.EnterTime}}</td>
              <td :class="{'redType':item.GuideID==0}">
                <span>{{item.GuideName}}
                  <span v-if="(item.GuideID>0||item.GuideName.length>0)&&item.TCIDExist>-1">
                    {{item.IsGuideDaiTuan==1?$t('objFill.v101.dmc.daituan'):$t('objFill.v101.dmc.budaituan')}}
                  </span>
                </span>
              </td>
              <td :class="{'redType':item.LeaderID==0}">
                <span>{{item.LeaderName}}
                  <span v-if="(item.LeaderID>0||item.LeaderName.length>0)&&item.TCIDExist>-1">
                    {{item.IsLeaderDaiTuan==1?$t('objFill.v101.dmc.daituan'):$t('objFill.v101.dmc.budaituan')}}
                  </span>
                </span>
              </td>
              <td>{{item.ImportGuideName}}<span v-if="item.IsErrorData==1 && item.GuideName != item.ImportGuideName"
                  style="color:red">[{{$t('objFill.youwu')}}]</span></td>
              <td>{{item.ImportLeaderName}}<span v-if="item.IsErrorData==1 && item.LeaderName != item.ImportLeaderName"
                  style="color:red">[{{$t('objFill.youwu')}}]</span></td>
              <td>{{item.TotalPrice}}</td>
              <td :class="{'redType':item.GroupExtractExist==-1}">
                <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.yiczxtshuju')" placement="top-start">
                  <span style=" cursor: pointer; "> {{item.GroupExtract}} </span></el-tooltip>
              </td>
              <td :class="{'redType':item.LeaderExtractExist==-1}">
                <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.yiczxtshuju')" placement="top-start">
                  <span style=" cursor: pointer; ">{{item.LeaderExtract}} </span></el-tooltip>
              </td>
              <td :class="{'redType':item.GuideExtractExist==-1}">
                <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.yiczxtshuju')" placement="top-start">
                  <span style=" cursor: pointer; ">{{item.GuideExtract}} </span></el-tooltip>
              </td>
              <td :class="{'redType':item.PICExtractExist==-1}">
                <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.yiczxtshuju')" placement="top-start">
                  <span style=" cursor: pointer; ">{{item.PICExtract}} </span></el-tooltip>
              </td>
              <td>{{item.Rate}}</td>
              <td :class="{'redType':item.CurrencyExist==-1}"><span>{{item.Currency}}</span></td>
              <td>{{item.Remarks}}</td>
              <td><span class="delInfo" @click="delInfo(index)">{{$t('system.table_delete')}}</span></td>
            </tr>
          </thead>
        </table>
      </div>
      <div class="btmBtn impotBtn">
        <input type="button" class="normalBtn" @click="importInfo" :value="$t('ground.qrdr')" />
        <input type="button" class="hollowFixedBtn" @click="hideFill" :value="$t('pub.cancelBtn')" />
      </div>
    </div>

    <el-dialog custom-class="mapList" :title="$t('hotel.hotel_mapLocation')" center :visible.sync="selectAddress">
      <googleMap @refList="googleMap" v-on:headCallBack="headCall" v-bind:address="addMsg.Address"></googleMap>
    </el-dialog>

    <el-dialog custom-class='w700' :title="$t('objFill.daoruyinxiaosj')" :visible.sync="outerVisible" center>
      <div style="text-align:center; margin-bottom:5px;color:tomato;">{{$t('objFill.v101.tongygwdmbsjdru')}}</div>
      <el-upload drag class="upload-demo" :action="importFileUrl2" :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">{{$t("tips.tuodongwenjian")}}<em>{{$t('tips.dianjishanhcuan')}}</em></div>
        <div slot="tip" class="el-upload__tip">{{$t("ground.znscexcel")}}</div>
      </el-upload>

      <div>
        --------------------------------------------------------------------------------------------------------------------
      </div>

      <div style="text-align:center; margin-bottom:5px;color:tomato;">{{$t('objFill.v101.xinbtdmsgwd')}}</div>
      <el-upload drag class="upload-demo" :action="importFileUrl3" :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">{{$t("tips.tuodongwenjian")}}<em>{{$t('tips.dianjishanhcuan')}}</em></div>
        <div slot="tip" class="el-upload__tip">{{$t("ground.znscexcel")}}</div>

      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
  import googleMap from "../commonPage/googleMap.vue";
  export default {
    data() {
      return {
        selectAddress: false,
        total: 0,
        currentPage: 1,
        countryList: "",
        provinceList: "",
        cityList: "",
        district: "",
        dataInfo: "",
        loading: true,
        defaultImg: 'this.src="' + require("../../assets/img/shoppingstore.jpg") + '"',
        importFileUrl2: this.domainManager().UploadFileUrl +
          "?cmd=dmc_post_LocalFileUpload&fileType=1&fileLimit=1&RB_Group_id=2&Type=1",
        importFileUrl3: this.domainManager().UploadFileUrl +
          "?cmd=dmc_post_LocalFileUpload&fileType=1&fileLimit=20&RB_Group_id=2&Type=20",
        downList: "",
        TotalPrice: "",
        GroupExtract: "",
        GuideExtract: "",
        PICExtract: "",
        LeaderExtract: "",
        getShoppType: "",
        isShow: false,
        fillShow: false,
        imgArray: [],
        PicPathArray: [],
        outerVisible: false,
        titleInfo: "",
        importData: "",
        getShop: "",
        guidList: "",
        leaderList: "",
        startTime: "",
        endTime: "",
        //下拉框默认值
        SelectDefaultValue: 0,
        //国家列表
        AddMsgCountryList: [],
        //省份列表
        AddMsgProvinceList: [],
        //城市列表
        AddMsgCityList: [],
        //表格Loading
        tabLoading: false,
        msg: {
          pageIndex: 1,
          pageSize: 14,
          QCountry: "",
          QProvince: "",
          QCity: "",
          QDistrict: "",
          Name: ""
        },
        //文件下载参数
        DownLoadmsg: {
          //创建日期
          CreateDate: "",
          //进店时间
          EnterTime: "",
          //操作人
          CreateBy: 0,
          //购物店Ids
          ShopIds: ""
        },
        addMsg: {
          ID: "0",
          Name: "",
          Type: "",
          Contact: "",
          Tel: "",
          Remark: "",
          BusinessHours: "",
          Address: "",
          QCountry: "",
          QProvince: "",
          QCity: "",
          QDistrict: 0,
          PicPath: "",
          Country: 0,
          Province: 0,
          City: 0,
          //资金池编号
          CapitalPoolId: 0
        },
        //资金池账户列表
        accountList: [],
        rules: {
          Name: [{
            required: true,
            message: this.$t('objFill.v101.qingshurgwcmic'),
            trigger: "blur"
          }],
          Type: [{
            required: true,
            message: this.$t('ground.qingxzsplx'),
            trigger: "change"
          }],
          Address: [{
            required: true,
            message: this.$t('objFill.qingxuanzhedz'),
            trigger: "blur"
          }]
        }
      };
    },
    components: {
      googleMap: googleMap
    },
    methods: {
      //下载Excel
      DownLoadShop() {
        this.loading = true;
        this.DownLoadmsg.CreateBy = this.getLocalStorage().EmployeeId;
        let fileName = this.$t('objFill.v101.gouwudiandjdch') + this.$commonUtils.getCurrentDate() + ".xls";
        this.GetLocalFile("shop_get_downloadShopFinaceList", this.DownLoadmsg, fileName,
          res => {
            this.loading = false;
          });
      },
      //上传购物店图片
      UploadImage(file) {
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        var path = "/Upload/DMC/";
        this.UploadSelfFileT(path, newArr, x => {
          var str = x.data.FilePath;
          var imgUrl = this.domainManager().ViittoFileUrl + str;
          this.imgArray.push(imgUrl);
          this.PicPathArray.push(str);
        });
      },
      //更新购物店图片
      updatePic() {
        if (this.addMsg.ID > 0) {
          var postMsg = {
            ID: this.addMsg.ID,
            PicPath: this.PicPathArray.toString()
          };
          this.apipost(
            "Shopping_Post_UpdateShoppingPic",
            postMsg,
            res => {},
            null
          );
        }
      },
      //删除图片
      delImg(index) {
        this.PicPathArray.splice(index, 1);
        this.imgArray.splice(index, 1);
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      getProvinceList(ID, type) {
        //根据省份获取城市
        let msg = {
          Id: ID
        };
        if (type == 1) {
          this.msg.QProvince = "";
          this.msg.QCity = "";
          this.msg.QDistrict = "";
        } else if (type == 2) {
          this.msg.QCity = "";
          this.msg.QDistrict = "";
        } else if (type == 3) {
          this.msg.QDistrict = "";
        }
        if (this.msg.QCountry !== "") {
          this.apipost(
            "dict_post_Destination_GetChildList",
            msg,
            res => {
              if (type == 1) {
                this.provinceList = res.data.data;
              } else if (type == 2) {
                this.cityList = res.data.data;
              } else if (type == 3) {
                this.district = res.data.data;
              }
            },
            err => {}
          );
        }
      },
      getCountryList() {
        //获取国家
        let msg = {};
        this.apipost(
          "dict_post_Destination_GetCountry",
          msg,
          res => {
            this.countryList = res.data.data;
            this.AddMsgCountryList = res.data.data;
          },
          err => {}
        );
      },
      //获取省份和城市
      GetSubAreaList(ID, type, isClear) {
        let msg = {
          Id: ID
        };
        if (type == 1) {
          if (isClear != 1) {
            this.addMsg.Province = 0;
            this.addMsg.City = 0;
          }
        } else if (type == 2) {
          if (isClear != 1) {
            this.addMsg.City = 0;
          }
        }
        if (this.addMsg.Country != 0) {
          this.apipost(
            "dict_post_Destination_GetChildList",
            msg,
            res => {
              if (type == 1) {
                this.AddMsgProvinceList = res.data.data;
              } else if (type == 2) {
                this.AddMsgCityList = res.data.data;
              }
            },
            err => {}
          );
        }
      },
      getList() {
        //获取数据
        this.apipost(
          "Shopping_Post_GetPageList",
          this.msg,
          res => {
            if (res.data.resultCode == 1) {
              this.dataInfo = res.data.data.pageData;
              this.total = res.data.data.count;
            } else {
              this.Error(res.data.message);
            }
            this.loading = false;
          },
          err => {}
        );
      },
      goUrl(path, item) {
        this.$router.push({
          path: path,
          query: {
            id: item.ID,
            Name: item.Name,
            TotalPrice: item.TotalPrice,
            GroupExtract: item.GroupExtract,
            GuideExtract: item.GuideExtract,
            PICExtract: item.PICExtract,
            LeaderExtract: item.LeaderExtract,
            blank: 'y',
            tab: '购物店明细'
          }
        });
      },
      getType() {
        //获取购物店类型
        let msg = {
          Key: "SK_SHOPPING_TYPE"
        };
        this.apipost(
          "dict_post_GetList",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.getShoppType = res.data.data;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      submitForm(addMsg) {
        //提交创建、修改表单
        let that = this;
        that.$refs[addMsg].validate(valid => {
          if (valid) {
            that.addInfo();
          } else {
            this.Error(this.$t('objFill.v101.chanshucuowu'));
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      addInfo() {
        //保存信息
        if (this.startTime != "" && this.endTime != "") {
          this.addMsg.BusinessHours = this.startTime + "T" + this.endTime;
        } else {
          this.addMsg.BusinessHours = "";
        }
        this.addMsg.PicPath = this.PicPathArray.toString();
        this.apipost(
          "Shopping_Post_Set",
          this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.Success(this.$t('tips.saveYes'));
              this.getList();
              this.resetForm("addMsg");
              this.isShow = false;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      updateInfo(ID) {
        let msg = {
          ID: ID
        };
        this.imgArray = [];
        this.PicPathArray = [];
        this.titleInfo = this.$t('ground.xggwud');
        this.apipost(
          "Shopping_Post_Get",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.isShow = true;
              this.addMsg = res.data.data;
              if (this.addMsg.Country > 0) {
                this.GetSubAreaList(this.addMsg.Country, 1, 1);
              }
              if (this.addMsg.Province > 0) {
                this.GetSubAreaList(this.addMsg.Province, 2, 1);
              }
              if (res.data.data.BusinessHours != "") {
                this.startTime = res.data.data.BusinessHours.split("T")[0];
                this.endTime = res.data.data.BusinessHours.split("T")[1];
              }
              res.data.data.PicPath.split(",").forEach(x => {
                if (x != "") {
                  this.imgArray.push(this.domainManager().ViittoFileUrl + x);
                  this.PicPathArray.push(x);
                }
              });
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      showDiv() {
        this.isShow = true;
        this.addMsg.ID = 0;
        this.titleInfo = this.$t('ground.xzgwdian');
        this.addMsg.Name = "";
        this.addMsg.Type = "";
        this.addMsg.Contact = "";
        this.addMsg.Tel = "";
        this.addMsg.Remark = "";
        this.addMsg.BusinessHours = "";
        this.addMsg.Address = "";
        this.addMsg.QCountry = "";
        this.addMsg.QProvince = "";
        this.addMsg.QCity = "";
        this.addMsg.QDistrict = 0;
        this.addMsg.PicPath = "";
        this.addMsg.Country = 0;
        this.addMsg.Province = 0;
        this.addMsg.City = 0;
        this.addMsg.CapitalPoolId = 0;
      },
      hideFill() {
        this.fillShow = false;
      },
      beforeAvatarUpload(file) {
        return;
        const isJPG = file.type === "application/x-msdownload";
        if (!isJPG) {
          this.$message.error(this.$t('tips.shangchuanExcel'));
        }
        return isJPG && isLt2M;
      },
      //上传
      handleAvatarSuccess(res, file) {
        if (res.resultCode == 1) {
          this.Success(res.message);
          this.outerVisible = false;
          this.isShow = false;
          this.fillShow = true;
          this.importData = res.data;
        }
      },
      getShopList() {
        //初始化购物店信息
        let msg = {};
        this.apipost(
          "Shopping_Post_GetList",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.getShop = res.data.data;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //导游名称
      getLeaderAndGuide() {
        let msg = {
          Type: 0
        };
        this.apipost(
          "leader_post_GetList",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.guidList = res.data.data;
              this.leaderList = res.data.data;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },

      showTip2(index) {
        this.importData[index].infoShow = true;
      },
      delInfo(index) {
        var that = this;
        this.Confirm(that.$t('objFill.v101.shifscscjbnhfu'), function () {
          that.Success(this.$t('objFill.v101.hote.shanchucg'));
          that.importData.splice(index, 1);
        });
      },
      //导入数据
      importInfo() {
        this.importInfoAndExport();
      },
      //导入数据
      importInfoAndExport() {
        var that = this;
        that.Confirm(that.$t('objFill.shifoudaorucsj'), function () {
          that.tabLoading = true;
          let qMsg = {
            msg: that.importData,
            uid: that.getLocalStorage().EmployeeId
          };
          let fileName = that.$t('objFill.v101.shengchenggwsju') + that.$commonUtils.getCurrentDate() + ".xls";
          that.apipost(
            "ShoppingInfo_Post_ImportAndExport_V2",
            qMsg,
            res => {
              if (res.data.resultCode == 1) {
                that.tabLoading = false;
                that.fillShow = false;
                that.Success(this.$t('objFill.v101.daoruchengg') + '!');
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            },
            err => {}
          );
        });
      },
      getDownList() {
        let msg = {};
        this.apipost(
          "Shopping_Post_OutToExcel",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.downList =
                this.domainManager().LocalTemplateFileDownLoadUrl + res.data.data;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      googleMap() {
        this.selectAddress = false;
      },
      headCall(msg) {
        // this.addMsg.QCountry = msg.country;
        // this.addMsg.QProvince = msg.province;
        // this.addMsg.QCity = msg.city;
        // this.addMsg.Address = msg.address;
      },
      delShoppingStore(ID) {
        var that = this;
        this.Confirm(that.$t('objFill.v101.shifscscjbnhfu'), function () {
          var msg = {
            ID: ID
          };
          that.apipost(
            "Shopping_Post_Remove",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success(that.$t('objFill.v101.hote.shanchucg'));
                that.getList();
              }
            },
            null
          );
        });
      },
      GetCashPoolList() { // 获取资金池账
        this.apipost('BankAccount_post_GetCashPoolListExt', {
          Alias: ''
        }, res => {
          if (res.data.resultCode === 1) {
            let data = res.data.data;
            data.forEach(x => {
              x.allName = x.Alias;
            });
            this.accountList = data;
          }
        }, err => {})
      }
    },
    mounted() {
      this.GetCashPoolList();
      this.getCountryList();
      this.getList();
      this.getType();
      this.getShopList();
      this.getLeaderAndGuide();
      this.getDownList();
    }
  };

</script>