<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="$t('ground.cantdwmc')" prop="Name">
            <el-input readonly type="text" v-model="addMsg.Name" maxlength="100" class="w300"></el-input>
          </el-form-item>
          <el-form-item :label="$t('ground.cantzsmc')" prop="RealName">
            <el-input readonly type="text" v-model="addMsg.RealName" maxlength="100" class="w300"></el-input>
          </el-form-item>
          <el-form-item label="餐标">
            <el-input readonly type="text" v-model="addMsg.UnitPrice" maxlength="100" class="w300">
              <template slot="append">/人</template>
            </el-input>
          </el-form-item>
          <el-form-item label="适用类型">
            <el-select disabled placeholder="适用类型" v-model="addMsg.UseTypeList" multiple class='multiple_input w300'>
              <el-option v-for="childItem in DiningUseTypeList" :key="childItem.ID" :label="childItem.Name"
                :value="childItem.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('hotel.hotel_website')">
            <el-input readonly v-model="addMsg.URL" maxlength="100" class="w300">
              <template slot="prepend">https://</template>
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('system.table_country')">
            <el-select disabled :placeholder="$t('visaT.qxzguojia')" filterable v-model="addMsg.Country"
              class='multiple_input w300'
              @change="GetSubAreaList(addMsg.Country,1),addMsg.Province=0,addMsg.City=0,addMsg.District=0">
              <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="$t('hotel.hotel_province')">
            <el-select disabled :placeholder="$t('pub.pleaseSel')" filterable class='multiple_input w300'
              v-model="addMsg.Province" @change="GetSubAreaList(addMsg.Province,2),addMsg.City=0,addMsg.District=0">
              <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="$t('hotel.hotel_city')">
            <el-select disabled :placeholder="$t('pub.pleaseSel')" filterable class='multiple_input w300'
              v-model="addMsg.City" @change="GetSubAreaList(addMsg.City,3),addMsg.District=0">
              <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_area')">
            <el-select disabled v-model="addMsg.District" class="w300" @change="getArea" filterable
              :placeholder="$t('hotel.hotel_area')">
              <el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
              <el-option v-for="item in district" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item :label="$t('hotel.hotel_detailinfo')" prop="Address">
            <el-input readonly :placeholder="$t('fnc.qsrneirong')" class="w300 addAddress" v-model="addMsg.Address">
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('restaurant.res_BusinessHours')" prop="OpeningHours">
            <el-input readonly 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 readonly type="text" maxlength="20" v-model="addMsg.Tel" class="w300"></el-input>
          </el-form-item>
          <el-form-item :label="$t('hotel.hotel_fax')" prop="Fax">
            <el-input readonly 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 readonly 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 disabled 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 readonly v-model="addMsg.SupportCount" style="width:298px;" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item :label="$t('restaurant.res_advanceDays')" prop="SupportCount">
            <el-input readonly v-model="addMsg.DieLine" maxlength="10" class="w300"
              onkeyup="value=value.replace(/[^\d]/g,'')">
              <template slot="append">{{$t('hotel.hotel_day')}}</template>
            </el-input>
          </el-form-item>

          <el-form-item :label="$t('ground.shifouyuyue')">
            <el-switch disabled v-model="addMsg.AppointmentStyle" :active-value="inActive"
              :inactive-value="notInActive">
            </el-switch>
          </el-form-item>
          <el-form-item :label="$t('ground.zhifufangshi')">
            <el-select disabled 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="$t('ground.cantingleixing')">
            <el-select disabled 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="$t('Operation.Op_price')">
            <el-select disabled 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="$t('ground.hezuofangshi')">
            <el-select disabled 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 readonly 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 readonly 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 foodTagList" :disable-transitions="false"
                  @close="handleCloseFoodTag(tag)">{{tag}}
                </el-tag>

              </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" :disable-transitions="false" @close="handleClose2(tag)">
                  {{tag}}
                </el-tag>
              </div>
            </div>
            <el-form-item :label="$t('restaurant.res_special')">
              <el-input readonly type="textarea" class="w300" v-model="addMsg.Feature"></el-input>
            </el-form-item>
            <el-form-item :label="$t('Operation.Op_Warmprompt')" prop="About">
              <el-input readonly 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 readonly 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 disabled v-model="addMsg.Sure" active-value="1" inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="预订方式">
              <el-radio disabled v-model="addMsg.IsSelfBook" :label="0">自订</el-radio>
              <el-radio disabled v-model="addMsg.IsSelfBook" :label="1">供应商预订</el-radio>
            </el-form-item>
            <el-form-item label="是否推荐">
              <el-radio disabled v-model="addMsg.IsRecommend" :label="1">推荐</el-radio>
              <el-radio disabled v-model="addMsg.IsRecommend" :label="0">不推荐</el-radio>
            </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">
                <el-image style=" height: 100px" :src="item.ShowPath" :preview-src-list="DiningImageUrlArray">
                </el-image>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <el-dialog custom-class="resourceImgAdd" :title="$t('pub.addImg')" center :visible.sync="addimg">
      <DMCchooseImg @closeImg="closeDMCchooseImg" ref="DMCchooseImg1" @headCallBack="getDMCimg" v-bind:imgType="2">
      </DMCchooseImg>
    </el-dialog>
    <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>

    <div class="btn-list">
      <span class="common-lefttit"></span>
      <button class="cancel-Btn" @click="goUrl('restaurantList')">返回</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
        },
        //是否有权限操作支付方式
        IsHaveAuth: 0,
        images: [],
        selectAddress: false,
        addimg: false,
        //图片选取数组
        imglistArry: [],
        imgKeyword: "",

        openplatform: "",
        totalimg: "",
        selecnum: 0,
        ID: "",
        foodTagList: [], //实物标签
        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: "",
        //下拉框默认值
        SelectDefaultValue: 0,
        //国家列表
        CountryList: [],
        //省份列表
        ProvinceList: [],
        //城市列表
        CityList: [],
        //区域
        district: [],
        //上传的文件数组
        DiningImageArray: [],
        DiningImageUrlArray: [],
        //删除的图片文件数组
        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: 0,
          Fax: "",
          Country: 0,
          Province: 0,
          City: 0,
          DiningImageList: [], //现在的图片
          DeleteImageList: [], //要删除的图片
          IsRecommend: 1, //是否推荐 0:否,1:是
          //是否预约
          AppointmentStyle: 0,
          //支付方式
          PayStyle: 0,
          UnitPrice: 0, //餐标/人
          UseType: 0, //适用类型字符串
          UseTypeList: [], //适用类型
        },
        DiningUseTypeList: [],
        rules: {
          //表单必填验证
          Name: [{
            required: true,
            message: this.$t('ground.qingtianxiemc'),
            trigger: "change"
          }],
          RealName: [{
            required: true,
            message: this.$t('ground.qingtxzsxm'),
            trigger: "change"
          }],
          Address: [{
            required: true,
            message: this.$t('ground.qingxuanzedz'),
            trigger: "change"
          }],
          Descriptions: [{
            required: true,
            message: this.$t('ground.qingshuruwzms'),
            trigger: "change"
          }],

          DieLine: [{
            pattern: this.$commonUtils.Regex.el_isInteger,
            message: this.$t('ground.qingshuruzqdsz')
          }],
          RebateCount: [{
            pattern: this.$commonUtils.Regex.el_isInteger,
            message: this.$t('ground.qingshuruzqdsz')
          }],
          RebateRatio: [{
            pattern: this.$commonUtils.Regex.el_isInteger,
            message: this.$t('ground.qingshuruzqdsz')
          }],
          SupportCount: [{
            required: true,
            message: this.$t('ground.qingtxkydrs'),
            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);
      },
      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() {
        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.foodTagList.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(this.$t('tips.baocunchenggong'), "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);
              }
              if (this.addMsg.Province > 0) {
                this.GetSubAreaList(this.addMsg.Province, 2);
              }
              if (this.addMsg.City > 0) {
                this.GetSubAreaList(this.addMsg.City, 3);
              }
              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.foodTagList = 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();
              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);
                  this.DiningImageUrlArray.push(this.domainManager().ViittoFileUrl +
                    x);
                }
              });
            } 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.foodTagList.push(this.tipsItem);
          this.tipsItem = "";
        } else {
          this.Geographic.push(this.GeoItem);
          this.GeoItem = "";
        }
      },
      handleCloseFoodTag(tag) {
        this.foodTagList.splice(this.foodTagList.indexOf(tag), 1);
      },
      showFoodTag() {
        this.inputVisible = true;
        if (this.foodTagList && this.foodTagList.length == 0) {
          this.foodTagList.push("徐總推薦")
        }
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleFoodTagInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.foodTagList.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) {
        let msg = {
          Id: ID
        };
        if (this.addMsg.Country != 0) {
          this.apipost(
            "dict_post_Destination_GetChildList",
            msg,
            res => {
              if (type == 1) {
                this.ProvinceList = res.data.data;
                this.CityList = [];
                this.district = [];
              } else if (type == 2) {
                this.CityList = res.data.data;
                this.district = [];
              } else if (type == 3) {
                this.district = 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 => {}
        );
      },
      //获取餐厅适用类型列表
      GetDiningUseTypeList() {
        this.apipost(
          "dining_get_GetDiningUseType", {},
          res => {
            if (res.data.resultCode == 1) {
              this.DiningUseTypeList = 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);
        }
      },
      getArea() {
        this.$forceUpdate();
      }
    },
    mounted() {
      let userInfo = this.getLocalStorage()
      //有权限操作的部门
      if (userInfo.RB_Department_Id == 240 || userInfo.RB_Department_Id == 1 || userInfo.RB_Department_Id == 3 ||
        userInfo.RB_Branch_id == 49) {
        this.IsHaveAuth = 1;
      }
      this.GetDiningUseTypeList();
      this.GetPayList();
      this.GetDiningTypeList();
      this.GetDiningPriceTypeList();
      this.GetCooperationTypeList();
      this.qMsg = this.$route.query.qMsg;
      this.ID = this.$route.query.id;
      this.init(); //开放平台
      this.GetCounrty();
      if (typeof this.ID != "undefined") {
        this.initHotelData();
      }
    }
  };

</script>