<style>
  .restaurantInfo .resourceImgAdd {
  width: 620px;
  margin: auto;
}

.restaurantInfo .clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
}

.restaurantInfo .resource-content {
  width: 100%;
  margin-top: 30px;
  font-size: 12px;
  min-width: 1200px;
}

.restaurantInfo .resource-baseinfo {
  float: left;
  height: auto;
  width: 600px;
  margin: 0 0 20px 30px;
}

.restaurantInfo .resource-imginfo {
  float: left;
  width: 510px;
  margin-top: 35px;
}

.restaurantInfo .resource-lititle {
  display: block;
  border-left: 4px solid #e95252;
  padding-left: 10px;
  margin-bottom: 20px;
}

.restaurantInfo .resource-baseinfo span {
  display: inline-block;
}

.restaurantInfo .resource-name {
  width: 300px;
  height: 34px;
  background: rgba(255, 255, 255, 1);
  outline: none;
  border: 1px solid #d6d6d6;
  padding-left: 10px;
}

.restaurantInfo .common-lefttit {
  width: 80px;
  text-align: right;
  margin: 0 7px 0 8px;
  display: inline-block;
}

.restaurantInfo .resource-net {
  position: relative;
}

.restaurantInfo .resource-http {
  position: absolute;
  color: #999999;
  width: 70px !important;
  background-color: #f5f7fa;
  border-right: 1px solid #d1d1d1;
  height: 32px;
  top: 5px;
  left: 1px;
  text-align: center;
  line-height: 32px;
  text-align: center;
}

.restaurantInfo .R1 {
  width: 300px;
  padding: 0 15px 0 80px;
  transition: all 0.3s ease-in-out;
}

.restaurantInfo .areaInput {
  width: 300px;
  padding-right: 120px;
}

.restaurantInfo .areaInput:focus {
  border: 1px solid #e95252;
}

.restaurantInfo .map-icon {
  position: absolute;
  right: 1px;
  top: 1px;
  line-height: 32px;
  text-align: center;
  border-left: 1px solid #cccccc;
  border-top-right-radius: 17px;
  border-bottom-right-radius: 17px;
  padding-right: 15px;
  padding-left: 10px;
  cursor: pointer;
  display: inline-block;
  height: 32px;
  background-color: #f5f7fa;
}

.restaurantInfo .map-icon i {
  margin: 0 5px;
  position: relative;
  top: 1px;
}

.restaurantInfo .save-Btn {
  width: 90px;
  height: 30px;
  background: rgba(233, 82, 82, 1);
  border-radius: 15px;
  color: #fff;
  outline: none;
  cursor: pointer;
  margin-right: 20px;
}

.restaurantInfo .cancel-Btn,
.save-Btn:hover {
  opacity: 0.8;
}

.restaurantInfo .cancel-Btn {
  width: 90px;
  height: 30px;
  background: rgba(255, 255, 255, 1);
  border-radius: 15px;
  color: #e95252;
  outline: none;
  cursor: pointer;
  border: 1px solid #e95252;
}

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

.restaurantInfo .re-img:first-child {
  margin-left: 0;
}

.restaurantInfo .resource-imglist {
  width: 100%;
  height: auto;
  margin-top: 20px;
}

.restaurantInfo .resource-imglist img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.restaurantInfo .add-img {
  margin-top: 20px;
}

.restaurantInfo .reimg-add {
  width: 140px;
  height: 93px;
  background: rgba(236, 236, 236, 1);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  z-index: 999;
}

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

.restaurantInfo .bigAdd {
  font-size: 50px;
  color: #d1d1d1;
  position: relative;
  left: 45px;
  top: 10px;
}

.restaurantInfo .imgzhe {
  display: none;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  text-align: center;
  line-height: 93px;
  top: 0;
}

.restaurantInfo .reimg-add:hover .ad-one {
  display: block;
}

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

.restaurantInfo .ad-one div {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  line-height: 32px;
  text-align: center;
  background: gray;
  color: #fff;
}

.restaurantInfo .ad-one div:hover {
  background-color: #fff;
  color: #e95252;
}

.restaurantInfo .re-upload {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 999;
}

.restaurantInfo .re-find {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 999;
}

.restaurantInfo .search-imgicon {
  padding-right: 20px;
  margin-left: -40px;
}

.restaurantInfo .resAddImg {
  width: 520px;
  padding-right: 45px;
}

.restaurantInfo .addimgContent {
  height: 290px;
  overflow: auto;
  margin: 30px 0 30px 25px;
  width: 545px;
}

.restaurantInfo .addimgDiv {
  width: 160px;
  height: 155px;
  float: left;
  margin: 0 20px 15px 0;
  overflow: hidden;
}

.restaurantInfo .addimgContent div:first-child {
  margin-left: 0;
}

.addimgContent div:nth-child(3n) {
  margin-right: 0;
}

.restaurantInfo .itemImgdiv {
  width: 160px;
  height: 106px;
  position: relative;
}

.restaurantInfo .itemImgdiv img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.restaurantInfo .imgseclet {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  position: absolute;
  top: 0;
  text-align: center;
  line-height: 106px;
  color: #e95252;
}

.icon-dagouyouquan {
  font-size: 25px;
}

.restaurantInfo .test-1::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: #f5f5f5;
}

.restaurantInfo .test-1::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

.restaurantInfo .test-1::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background-color: #aaa;
  margin-bottom: 24px;
}

.restaurantInfo .test-1:hover::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background-color: #f5f5f5;
}

.restaurantInfo .addimg-btnlist {
  text-align: center;
}

.restaurantInfo .addimg-select {
  font-size: 14px;
  color: #999999;
  float: right;
  margin-bottom: 10px;
  position: relative;
  bottom: 20px;
}

.restaurantInfo .re-delte {
  width: 32px;
  height: 32px;
  background: gray;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  display: inline-block;
  color: #fff;
  cursor: pointer;
}

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

.restaurantInfo .imgDescription {
  font-size: 12px;
  margin-top: 12px;
  color: #333333;
  width: 100%;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.restaurantInfo .el-upload-dragger {
  border: none;
}

.restaurantInfo .res-span span:last-child {
  display: inline;
}

.restaurantInfo .resourcerightTop span {
  display: inline-block;
}

.restaurantInfo .sheshi {
  margin-bottom: 20px;
}

.restaurantInfo .dialog-footer {
  padding-bottom: 30px;
}

.restaurantInfo .btn-list {
  margin: 20px 0 40px 30px;
}

.restaurantInfo .input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.restaurantInfo .el-textarea__inner {
  resize: none;
  height: 120px;
  font-family: "微软雅黑";
}

.restaurantInfo .R1:focus {
  border: 1px solid #e95252;
}

.restaurantInfo .el-form-item__label {
  width: 96px;
  font-size: 12px;
}

.restaurantInfo .el-form-item__error {
  left: 100px;
}

.restaurantInfo .hotelDay {
  margin-left: 10px;
}

.restaurantInfo .searchImgIcon {
  cursor: pointer;
}

.restaurantInfo .el-dialog--center .el-dialog__body {
  padding: 25px 25px 0;
}

.restaurantInfo .addressInput .el-input-group__append {
  border-top-right-radius: 17px;
  border-bottom-right-radius: 17px;
}

.restaurantInfo ::-webkit-input-placeholder {
  color: #d1d1d1;
}

.restaurantInfo :-moz-placeholder {
  color: #d1d1d1;
}

.restaurantInfo ::-moz-placeholder {
  color: #d1d1d1;
}

.restaurantInfo :-ms-input-placeholder {
  color: #d1d1d1;
}

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

.restaurantInfo .orderAdd {
  position: relative;
  width: 340px;
}

.restaurantInfo .minus:hover {
  background-color: #cccccc;
  cursor: pointer;
}

.restaurantInfo .footabs {
  width: 300px;
  min-height: 34px;
  border: 1px solid #d1d1d1;
  margin-left: 10px;
  display: inline-block;
  background-color: #fff;
  padding: 5px 10px;
  display: flex;
  flex-wrap: wrap;
}

.restaurantInfo .foodtips {
  display: inline-block;
  padding: 3px 5px;
  background-color: #efefef;
  margin: 3px;
  position: relative;
}

.restaurantInfo .toolOne {
  margin: 0 0 28px 38px;
  display: flex;
}

.restaurantInfo .foodTipsDiv {
  max-width: 200px;
  display: inline;
}

.restaurantInfo .wInput {
  border: none;
  height: 30px;
}

.restaurantInfo .wInput .el-input__inner {
  border: none !important;
  height: 28px;
  padding: 0;
  border-radius: 0;
  margin-top: 2px;
}

.restaurantInfo .delTips {
  position: absolute;
  right: -5px;
  top: -5px;
  cursor: pointer;
  color: #999;
  font-size: 14px;
}

.restaurantInfo .delTips:hover {
  color: #e95252;
}

.restaurantInfo .fanyong {
  font-size: 12px;
  color: #666666;
  margin-right: 10px;
}

.restaurantInfo .footabs .el-tag {
  margin: 0 5px 5px 0;
}

.restaurantInfo .footabs .el-input__inner {
  height: 30px;
  position: relative;
}

.restaurantInfo .button-new-tag {
  height: 30px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.restaurantInfo .input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.restaurantInfo .toolSpan {
  margin-top: 5px;
}

.restaurantInfo .RabateDiv {
  margin-left: 6px;
}

.restaurantInfo .RebateCount {
  height: 34px;
  float: left;
}

.restaurantInfo .leftPnum {
  float: left;
  width: 50px;
  background-color: #f5f7fa;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-right: 1px solid #cccccc;
  position: absolute;
  left: 1px;
  top: 1px;
}

.restaurantInfo .fanNum {
  float: left;
  width: 50px;
  background-color: #f5f7fa;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-right: 1px solid #cccccc;
  position: absolute;
  left: 1px;
  top: 1px;
}

.restaurantInfo .toolInput {
  height: 34px;
  padding-left: 5px;
  border: none;
}

.restaurantInfo .inpuOne {
  width: 130px;
  padding-left: 55px;
  border: 1px solid #d1d1d1;
  border-right: none;
}

.restaurantInfo .reOne,
.restaurantInfo .reTwo,
.restaurantInfo .dayNum {
  position: relative;
}

.restaurantInfo .tiqianDay {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 30px;
  height: 32px;
  background-color: #f5f7fa;
  z-index: 999;
  width: 100px;
  text-align: center;
  line-height: 32px;
  border-right: 1px solid #d1d1d1;
}

.restaurantInfo .dayNum {
  width: 300px;
  padding: 0 45px 0 110px;
  border: 1px solid #d1d1d1;
  height: 34px;
}

.restaurantInfo .inpuTwo {
  width: 170px;
  padding: 0 45px 0 55px;
  border: 1px solid #d1d1d1;
}

.restaurantInfo .fanbili {
  margin-top: 8px;
}

.restaurantInfo .percentCon {
  float: right;
  width: 40px;
  height: 32px;
  text-align: center;
  background-color: #f5f7fa;
  border-left: 1px solid #cccccc;
  line-height: 32px;
  position: absolute;
  right: 1px;
  top: 1px;
}

.restaurantInfo .dayLi {
  left: 90px;
}

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

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

.restaurantInfo .addAddress .el-input__inner {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #d1d1d1 !important;
}

.restaurantInfo .el-input-group__append {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
</style>
<template>
  <div class="flexOne restaurantInfo">
    <div class="resource-content clearfix">
      <el-form :model="addMsg" :rules="rules" ref="addMsg">
        <div class="resource-baseinfo">
          <span class="resource-lititle">{{$t('hotel.hotel_baseinfo')}}</span>
          <el-form-item label="餐厅对外名称" prop="Name">
            <el-input type="text" v-model="addMsg.Name" maxlength="100" class="w300"></el-input>
          </el-form-item>
          <el-form-item label="餐厅真实名称" prop="RealName">
            <el-input type="text" v-model="addMsg.RealName" maxlength="100" class="w300"></el-input>
          </el-form-item>
          <el-form-item :label="$t('hotel.hotel_website')">
            <div>
              <span class="resource-net">
                <span class="resource-http">https://</span>
                <input type="text" v-model="addMsg.URL" maxlength="100" class="resource-name R1" />
              </span>
            </div>
          </el-form-item>
          <el-form-item label="国家">
            <el-select placeholder="请选择国家" filterable v-model="addMsg.Country" class='multiple_input w300' @change="GetSubAreaList(addMsg.Country,1)">
              <el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
              <el-option v-for="childItem in CountryList" :key="childItem.ID" :label="childItem.Name" :value="childItem.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="省">
            <el-select placeholder="请选择省" filterable class='multiple_input w300' 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 ProvinceList" :key="childItem.ID" :label="childItem.Name" :value="childItem.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="市">
            <el-select placeholder="请选择市" filterable class='multiple_input w300' v-model="addMsg.City">
              <el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
              <el-option v-for="childItem in CityList" :key="childItem.ID" :label="childItem.Name" :value="childItem.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('hotel.hotel_detailinfo')" prop="Address">
            <el-input placeholder="请输入内容" class="w300 addAddress" v-model="addMsg.Address">
              <el-button slot="append" @click="selectAddress = true" icon="iconfont icon-img_dw"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('restaurant.res_BusinessHours')" prop="OpeningHours">
            <el-input type="text" v-model="addMsg.OpeningHours" maxlength="20" class="w300"></el-input>
          </el-form-item>
          <el-form-item :label="$t('restaurant.res_ContactNumber')" prop="Tel">
            <el-input type="text" maxlength="20" v-model="addMsg.Tel" class="w300"></el-input>
          </el-form-item>
          <el-form-item label="传真" prop="Fax">
            <el-input type="text" maxlength="20" v-model="addMsg.Fax" class="w300"></el-input>
          </el-form-item>
          <el-form-item :label="$t('restaurant.res_parkDetail')" prop="ParkInfo">
            <el-input type="text" maxlength="100" v-model="addMsg.ParkInfo" class="w300"></el-input>
          </el-form-item>
          <span class="resource-lititle sheshi">{{$t('restaurant.res_detailInformation')}}</span>
          <el-form-item :label="$t('restaurant.res_salePlatform')">
            <el-select v-model="openplatString" class='multiple_input w300' multiple :placeholder="$t('pub.pleaseSel')">
              <el-option v-for="item in openplatform" :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('restaurant.res_bookCapacity')" prop="SupportCount">
            <el-input-number v-model="addMsg.SupportCount" class="w300" :min="0"></el-input-number>
          </el-form-item>
          <div class="RabateDiv clearfix">
            <div class="RebateCount reTwo dayLi">
              <div class="tiqianDay">{{$t('restaurant.res_advanceDays')}}</div>
              <input type="text" class="dayNum" v-model="addMsg.DieLine" maxlength="10" onkeyup="value=value.replace(/[^\d]/g,'')">
              <div class="percentCon">{{$t('hotel.hotel_day')}}</div>
            </div>
          </div>
          <el-form-item label="是否预约">
            <el-switch v-model="addMsg.AppointmentStyle" :active-value="inActive" :inactive-value="notInActive"></el-switch>
          </el-form-item>
          <el-form-item label="支付方式">
            <el-select v-model="addMsg.PayStyle" class='multiple_input w300' :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
              <el-option v-for="item in PayList" :key="item.Id" :label="item.Name" :value="item.Id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="餐厅类型">
            <el-select v-model="addMsg.DiningType" class='multiple_input w300' :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
              <el-option v-for="item in DiningTypeList" :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="价格">
            <el-select v-model="addMsg.DiningPriceType" class='multiple_input w300' :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
              <el-option v-for="item in DiningPriceTypeList" :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合作方式">
            <el-select v-model="addMsg.CooperationType" class='multiple_input w300' :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
              <el-option v-for="item in CooperationTypeList" :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="resource-imginfo">
          <div class="resourcerightTop">
            <div class="toolOne">
              <span class="fanbili">{{$t('restaurant.res_commissionColumn')}}</span>
              <div class="RabateDiv clearfix">
                <div class="RebateCount reOne">
                  <div class="leftPnum">{{$t('admin.admin_personNumber')}}></div>
                  <input type="text" class="toolInput inpuOne" v-model="addMsg.RebateCount" onkeyup="value=value.replace(/[^\d]/g,'')"
                    maxlength="20">
                </div>
                <div class="RebateCount reTwo">
                  <div class="fanNum">{{$t('restaurant.res_return')}}</div>
                  <input type="text" class="toolInput inpuTwo" v-model="addMsg.RebateRatio" onkeyup="value=value.replace(/[^\d]/g,'')"
                    maxlength="20">
                  <div class="percentCon">%</div>
                </div>
              </div>
            </div>

            <div class="toolOne">
              <span class="toolSpan">{{$t('scen.sc_fdTag')}}</span>
              <div class="footabs">
                <el-tag :key="tag" v-for="tag in tipsList" closable :disable-transitions="false" @close="handleClose(tag)">{{tag}}
                </el-tag>
                <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
                  @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ {{$t('pub.addBtn')}}
                </el-button>
              </div>
            </div>
            <div class="toolOne">
              <span class="toolSpan">{{$t('scen.sc_dlTag')}}</span>
              <div class="footabs">
                <el-tag :key="tag" v-for="tag in Geographic" closable :disable-transitions="false" @close="handleClose2(tag)">{{tag}}
                </el-tag>
                <el-input class="input-new-tag" v-if="inputVisible2" v-model="inputValue2" ref="saveTagInput" size="small"
                  @keyup.enter.native="handleInputConfirm2" @blur="handleInputConfirm2">
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput2">+ {{$t('pub.addBtn')}}
                </el-button>

              </div>
            </div>
            <el-form-item :label="$t('restaurant.res_special')">
              <el-input type="textarea" class="w300" v-model="addMsg.Feature"></el-input>
            </el-form-item>
            <el-form-item label="温馨提示" prop="About">
              <el-input type="textarea" maxlength="1000" v-model="addMsg.About" class="w300"></el-input>
            </el-form-item>

            <el-form-item :label="$t('restaurant.res_bookInformation')" prop="BookingInfo">
              <el-input type="textarea" maxlength="1000" v-model="addMsg.BookingInfo" class="w300"></el-input>
            </el-form-item>
            <el-form-item :label="$t('restaurant.res_WhetherToConfirm')">
              <el-switch v-model="addMsg.Sure" active-value="1" inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item>
              <el-switch v-model="isBook" active-color="#13ce66" inactive-color="#ff4949" active-text="供应商"
                inactive-text="自订"></el-switch>
            </el-form-item>
            <el-form-item>
              <el-switch v-model="isRecommend" active-color="#13ce66" inactive-color="#ff4949" active-text="推荐"
                inactive-text="不推荐"></el-switch>
            </el-form-item>
          </div>
          <span class="resource-lititle">{{$t('hotel.hotel_imgintroduce')}}</span>
          <div class="resource-list">
            <div class="resource-imglist clearfix">
              <div class="re-img" v-for="(item,index) in DiningImageArray" :key="index">
                <img v-if="!item" src="../../assets/img/bg_c3@3x.png">
                <img :src="item.ShowPath" :onerror='defaultImg' />
                <div class="imgzhe">
                  <div class="re-delte" ><i @click.stop="showImg(item.ShowPath)" class="iconfont icon-img_cz"></i></div>
                  <div class="re-delte" @click="delImg(index)"><i class="iconfont icon-xingzhuang"></i></div>

                  <div class="re-delte" @click.stop="ExchangeImg(index,0)" v-if="index!=0&&item.ShowPath">
                    <i class="iconfont icon-zuoyi"></i>
                  </div>
                  <div class="re-delte" @click.stop="ExchangeImg(index,1)" v-if="index!=DiningImageArray.length-1&&item.ShowPath">
                    <i class="iconfont icon-youyi"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="add-img">
              <div class="reimg-add">
                <i class="iconfont icon-img_haha bigAdd"></i>
                <div class="ad-one">
                  <div class="re-upload">
                    <el-upload :http-request="UploadImage" :multiple="true" accept="image/jpeg,image/gif,image/png,image/bmp"
                      :show-file-list="false" action="">
                      <i class="iconfont icon-img_bdsc"></i>
                    </el-upload>
                  </div>
                  <div class="re-find" @click="addImgOpen"><i class="iconfont icon-img_cz"></i></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <el-dialog custom-class="resourceImgAdd" title="添加图片" center :visible.sync="addimg">
      <DMCchooseImg @closeImg="closeDMCchooseImg" ref="DMCchooseImg1" @headCallBack="getDMCimg" v-bind:imgType="2"></DMCchooseImg>
    </el-dialog>
    <el-dialog custom-class="mapList" title="地图选址" center :visible.sync="selectAddress">
      <googleMap @refList="googleMap" v-on:headCallBack="headCall" v-bind:address="addMsg.Address"></googleMap>
    </el-dialog>

    <div class="btn-list">
      <span class="common-lefttit"></span>
      <button class="save-Btn" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
      <button class="cancel-Btn" @click="goUrl('restaurantList')">{{$t('pub.cancelBtn')}}</button>
    </div>
    <viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
      <img v-for="src in images" :src="src" :key="src">
    </viewer>
  </div>
</template>
<script>
  import DMCchooseImg from "../commonPage/DMCchooseImg.vue";
  import googleMap from "../commonPage/googleMap.vue";

  export default {
    data() {
      return {
        imageOptions:{
          navbar:false,
          title:false
        },
        images: [],
        selectAddress: false,
        addimg: false,
        //图片选取数组
        imglistArry: [],
        imgKeyword: "",

        openplatform: "",
        totalimg: "",
        selecnum: 0,
        ID: "",
        tipsList: [],
        tipsItem: "",
        Geographic: [],
        GeoItem: "",
        value1: "true",
        value2: "false",
        defaultImg: 'this.src="' + require("../../assets/img/bg_z1@2x.png") + '"',
        openplatString: "",
        OpenPlatformStrings: "",
        inputVisible: false,
        inputValue: "",
        inputVisible2: false,
        inputValue2: "",
        isBook: true,
        isRecommend: true,
        //下拉框默认值
        SelectDefaultValue: 0,
        //国家列表
        CountryList: [],
        //省份列表
        ProvinceList: [],
        //城市列表
        CityList: [],
        //上传的文件数组
        DiningImageArray: [],
        //删除的图片文件数组
        DeleteImageArray: [],
        inActive: 1, //已选中
        notInActive: 0, //未选中
        DiningTypeList: [],
        DiningPriceTypeList: [],
        CooperationTypeList: [],
        //付款方式
        PayList: [],
        addMsg: {
          ID: 0,
          Name: "",
          URL: "",
          FoodTag: "",
          DiningType: 0,
          DiningPriceType: 0,
          CooperationType: 0,
          GeographicTag: "",
          OpeningHours: "",
          Tel: "",
          ParkInfo: "",
          Feature: "",
          About: "",
          BookingInfo: "",
          RealName: "",
          Sure: "",
          RebateCount: "",
          RebateRatio: "",
          OpenPlatform: "",
          SupportCount: "0",
          DieLine: "",
          QCountry: "",
          QProvince: "",
          QCity: "",
          District: 0,
          Address: "",
          Lng: "",
          Lat: "",
          PicPath: "",
          IsSelfBook: "",
          Fax: "",
          Country: 0,
          Province: 0,
          City: 0,
          DiningImageList: [], //现在的图片
          DeleteImageList: [], //要删除的图片
          IsRecommend: 0, //是否推荐 0:否,1:是
          //是否预约
          AppointmentStyle: 0,
          //支付方式
          PayStyle: 0
        },
        rules: {
          //表单必填验证
          Name: [{
            required: true,
            message: "请填写名称",
            trigger: "change"
          }],
          RealName: [{
            required: true,
            message: "请填写真实名称",
            trigger: "change"
          }],
          Address: [{
            required: true,
            message: "请选择地址",
            trigger: "change"
          }],
          Descriptions: [{
            required: true,
            message: "请输入文字描述",
            trigger: "change"
          }],

          DieLine: [{
            pattern: this.$commonUtils.Regex.el_isInteger,
            message: "请输入正确的数字"
          }],
          RebateCount: [{
            pattern: this.$commonUtils.Regex.el_isInteger,
            message: "请输入正确的数字"
          }],
          RebateRatio: [{
            pattern: this.$commonUtils.Regex.el_isInteger,
            message: "请输入正确的数字"
          }],
          SupportCount: [{
            required: true,
            message: "请填写可预订人数",
            trigger: "change"
          }]
        }
      };
    },
    components: {
      googleMap: googleMap,
      DMCchooseImg: DMCchooseImg
    },
    methods: {
      //上传餐厅图片
      UploadImage(file) {
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        var path = "/Upload/DMC/";
        this.UploadSelfFileT(path, newArr, x => {
          //统一图片处理
          var obj = this.$DMCUtils.DMCImageObj();
          var str = x.data.FilePath;
          var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
          obj.Path = str;
          obj.ShowPath = imgUrl;
          this.DiningImageArray.push(obj);
        });
      },
      //更新餐厅图片
      updatePic() {
        if (this.ID > 0) {
          var postMsg = {
            ID: this.ID,
            HotelImageList: this.HotelImageArray, //新增修改
            DeleteImageList: this.DeleteImageArray //删除的图片
          };
          this.apipost("dining_Post_UpateDinnerPic", postMsg, res => {}, null);
        }
      },
      //删除图片
      delImg(index) {
        //更新图片
        var item = this.DiningImageArray[index];
        this.DeleteImageArray.push(item);
        this.DiningImageArray.splice(index, 1);
        //this.updatePic();
      },
      addImgOpen() {
        this.addimg = true;
        this.initimgList();
      },
      inited (viewer){
        this.$viewer = viewer
      },
      showImg: function (src) {
        let srcArr = src.split('?')
        src = srcArr[0]
        let isExsit=false
        this.images.forEach(x=>{
          if(x===src)
            isExsit=true
        })
        if(!isExsit) {
          this.images.push(src)
        } else {
          this.$viewer.view(this.images.indexOf(src))
        }
        this.$viewer.show()
      },
      saveResource() {
        //保存餐厅信息
        if (this.isBook) {
          this.addMsg.IsSelfBook = 1;
        } else {
          this.addMsg.IsSelfBook = 0;
        }
        if (this.isRecommend) {
          this.addMsg.IsRecommend = 1;
        } else {
          this.addMsg.IsRecommend = 0;
        }
        this.addMsg.OpenPlatform = this.openplatString.toString();
        if (this.ID != "undefined") {
          this.addMsg.ID = this.ID;
        }
        let picPathArr = [];
        this.DiningImageArray.forEach(x => {
          picPathArr.push(x.Path);
        });
        this.addMsg.PicPath = picPathArr.join(",");
        this.addMsg.FoodTag = this.tipsList.join(",");
        this.addMsg.GeographicTag = this.Geographic.join(",");
        this.addMsg.DiningImageList = this.DiningImageArray;
        this.addMsg.DeleteImageList = this.DeleteImageArray;
        this.apipost(
          "dining_post_Set",
          this.addMsg,
          res => {
            //修改添加接口
            if (res.data.resultCode == 1) {
              this.tips("保存成功！", "success");
              this.goUrl("restaurantList");
            } else {
              this.tips(res.data.message, "error");
            }
          },
          null
        );
      },
      init() {
        var msg = {};
        this.apipost("hotel_post_GetPlatform", msg, res => {
          //获取开放平台
          this.openplatform = res.data.data;
        });
      },
      initimgList() {
        //初始化弹窗图片列表
        var keyWord = this.imgKeyword;
        this.imglistArry = [];
        let msg = {
          Name: keyWord,
          Type: 4
        };
        this.apipost(
          "hotel_post_GetPicList",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.imglistArry = res.data.data;
              this.totalimg = this.imglistArry.length;
            }
          },
          null
        );
      },
      selectImg(index) {
        //选取弹窗图片
        this.imglistArry[index].isShow = !this.imglistArry[index].isShow;
        let num = 0;
        this.imglistArry.forEach(x => {
          if (x.isShow == true) {
            num++;
          }
          this.selecnum = num;
        });
      },
      initHotelData() {
        //获取信息
        var msg = {
          ID: this.ID
        };
        this.apipost(
          "dining_post_Get",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              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 (this.addMsg.OpenPlatform != null) {
                if (this.addMsg.OpenPlatform != "") {
                  this.OpenPlatformStrings = this.addMsg.OpenPlatform.split(",");
                  this.OpenPlatformStrings.forEach(x => {
                    this.openplatString.push(Number(x));
                  });
                }
              }
              if (res.data.data.FoodTag != "") {
                this.tipsList = res.data.data.FoodTag.split(",");
              }
              if (res.data.data.GeographicTag != "") {
                this.Geographic = res.data.data.GeographicTag.split(",");
              }
              this.addMsg.Sure = res.data.data.Sure.toString();
              this.isBook = this.addMsg.IsSelfBook;
              this.isRecommend = this.addMsg.IsRecommend;
              res.data.data.PicPath.split(",").forEach(x => {
                if (x != "") {
                  var obj = this.$DMCUtils.DMCImageObj();
                  obj.ID = res.data.data.ID;
                  obj.Path = x;
                  obj.PicID = 0;
                  obj.ShowPath =
                    this.domainManager().ViittoFileUrl +
                    x +
                    "?x-oss-process=image/resize,l_140";
                  this.DiningImageArray.push(obj);
                }
              });
            } else {
              this.tips(res.data.message, "error");
            }
          },
          null
        );
      },
      goUrl(path) {
        this.$router.push({
          path: path,
          query: {
            cache: this.$route.query.cache
          }
        });
      },
      closeDMCchooseImg() {
        this.addimg = false;
      },
      submitForm(addMsg) {
        //提交创建、修改表单
        let that = this;
        that.$refs[addMsg].validate(valid => {
          if (valid) {
            that.saveResource();
          } else {
            return false;
          }
        });
      },
      checkImgList() {
        this.imglistArry.forEach(x => {
          if (x.isShow == true) {
            this.imgArray.push(x.Path);
            let arr = x.Path.split(".com");
            this.PicPathArray.push(arr[1]);
          }
          x.isShow = false;
          this.selecnum = 0;
        });
        this.addimg = false;
      },
      resetImg() {
        this.imglistArry.forEach(x => {
          if (x.isShow == true) {
            x.isShow = false;
          }
          this.selecnum = 0;
        });
      },
      tips(msg, type) {
        this.$message({
          message: msg,
          duration: 2000,
          type: type
        });
      },
      getItemList(type) {
        if (type == 1) {
          this.tipsList.push(this.tipsItem);
          this.tipsItem = "";
        } else {
          this.Geographic.push(this.GeoItem);
          this.GeoItem = "";
        }
      },
      handleClose(tag) {
        this.tipsList.splice(this.tipsList.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.tipsList.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = "";
      },
      handleClose2(tag) {
        this.Geographic.splice(this.Geographic.indexOf(tag), 1);
      },

      showInput2() {
        this.inputVisible2 = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm2() {
        let inputValue = this.inputValue2;
        if (inputValue) {
          this.Geographic.push(inputValue);
        }
        this.inputVisible2 = false;
        this.inputValue2 = "";
      },
      googleMap() {
        this.selectAddress = false;
      },
      headCall(msg) {
        this.addMsg.Lng = msg.lng;
        this.addMsg.Lat = msg.lat;
      },
      //获取国家
      GetCounrty() {
        this.apipost(
          "dict_post_Destination_GetCountry", {},
          res => {
            this.CountryList = 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.ProvinceList = res.data.data;
              } else if (type == 2) {
                this.CityList = res.data.data;
              }
            },
            err => {}
          );
        }
      },
      getDMCimg(imgArr) {
        imgArr.forEach(imgItem => {
          var obj = this.$DMCUtils.DMCImageObj();
          obj.ID = 0;
          obj.Path = "/" + this.$commonUtils.removeDomain(imgItem.Path);
          obj.PicID = imgItem.ID;
          obj.ShowPath = imgItem.Path + "?x-oss-process=image/resize,l_140";
          this.DiningImageArray.push(obj);
        });
      },
      //获取支付方式列表
      GetPayList() {
        this.apipost(
          "dmc_post_Get_GetPayStyleList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.PayList = res.data.data;
            }
          },
          err => {}
        );
      },
      //获取餐厅列表
      GetDiningTypeList() {
        this.apipost(
          "dining_get_GetDiningType", {},
          res => {
            if (res.data.resultCode == 1) {
              this.DiningTypeList = res.data.data;
            }
          },
          err => {}
        );
      },
      //获取餐厅价格列表
      GetDiningPriceTypeList() {
        this.apipost(
          "dining_get_GetDiningPriceType", {},
          res => {
            if (res.data.resultCode == 1) {
              this.DiningPriceTypeList = res.data.data;
            }
          },
          err => {}
        );
      },
      //获取合作方式列表
      GetCooperationTypeList() {
        this.apipost(
          "dining_get_GetCooperationType", {},
          res => {
            if (res.data.resultCode == 1) {
              this.CooperationTypeList = res.data.data;
            }
          },
          err => {}
        );
      },
      //图片左移右移
      ExchangeImg(index, IsMove) {
        var imgItem = this.DiningImageArray[index];
        //左移
        if (IsMove == 0) {
          var upItem = this.DiningImageArray[index - 1];
          this.$set(this.DiningImageArray, index - 1, imgItem);
          this.$set(this.DiningImageArray, index, upItem);
        } else {
          //右移动
          var downItem = this.DiningImageArray[index + 1];
          this.$set(this.DiningImageArray, index + 1, imgItem);
          this.$set(this.DiningImageArray, index, downItem);
        }
      },

    },
    mounted() {
      this.GetPayList();
      this.GetDiningTypeList();
      this.GetDiningPriceTypeList();
      this.GetCooperationTypeList();
      this.qMsg = this.$route.query.qMsg;
      this.ID = this.$route.query.id;
      var jsArray = document.getElementsByTagName("script");
      var flag = false;
      var jsUrl = this.domainManager().GoogleMapUrl;
      for (var i = 0; i < jsArray.length; i++) {
        if (jsArray[i].src == jsUrl) {
          flag = true;
        }
      }
      if (!flag) {
        const s = document.createElement("script");
        s.type = "text/javascript";
        s.src = jsUrl;
        document.body.appendChild(s);
      }
      this.init(); //开放平台
      this.GetCounrty();
      if (typeof this.ID != "undefined") {
        this.initHotelData();
      }
    }
  };

</script>