<template>
  <div class="hotelProductManage2" style="padding:20px;">
    <div class="hotelProductManage2_condition">
      <div>
        <em>{{$t('ground.qishiyue')}}</em>
        <el-date-picker v-model="condition.month" type="month" value-format="yyyy-MM" :clearable="false"
          :placeholder="$t('op.ChoiceMonth')"></el-date-picker>
      </div>
      <input type="button" class="normalBtn" :value="$t('pub.searchBtn')" @click="getMonths()" />
      <input type="button" class="normalBtn" :value="$t('ground.piliangbianji')" style="margin-right:10px;" @click="goEdit('1')" />
    </div>
    <div class="hotelProductManage2_tableBox">
      <table class="hotelProductManage2_table" border="0" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th width="34%">{{$t('hotel.table_hotelname')}}</th>
            <th width="33%">{{$t('ground.shengyuzongkucun')}}</th>
            <th width="33%">{{$t('ground.kucunyouxiaoqi')}}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{hotelInfo.HotelName}}</td>
            <td>{{hotelInfo.TotalInventory}}</td>
            <td>{{hotelInfo.Validity}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div style="margin-bottom:20px;">
      <span style="color:#000000;background-color: #ff3737;padding:2px 4px;border-radius:5px;color:#fff;">{{$t('pub.searchBtn')}}</span>
      <span style="color:#000000;background-color: #ff99cc;padding:2px 4px;border-radius:5px">{{$t('objFill.wanji')}}</span>
      <span style="color:#000000;background-color: #bcd6ee;padding:2px 4px;border-radius:5px">{{$t('objFill.pingji')}}</span>
      <span style="color:#000000;background-color: #DDDDDD;padding:2px 4px;border-radius:5px">{{$t('objFill.danji')}}</span>
      <span style="color:#000000;background-color: #02F78E;padding:2px 4px;border-radius:5px">{{$t('objFill.tiebiejia')}}</span>
    </div>
    <div class="hotelProductManage2_calendar">
      <div class="hotelProductManage2_calendarItem" v-for="(item, index) in days" :key="index">
        <div class="calendarItem_month" :title="$t('objFill.dianjickxq')" @click="calendarShow(item, index)">{{item.date}}</div>
        <div class="hotelproductCkbox">
          <el-checkbox v-model="item.isCked" @change="changeHotelStatus(item,index)">{{$t('system.table_chekAll')}}</el-checkbox>
        </div>
        <div class="calendarItem_week">
          <div>{{$t('hotel.hotel_Monday')}}</div>
          <div>{{$t('hotel.hotel_Tuesday')}}</div>
          <div>{{$t('hotel.hotel_Wednesday')}}</div>
          <div>{{$t('hotel.hotel_Thursday')}}</div>
          <div>{{$t('hotel.hotel_Friday')}}</div>
          <div>{{$t('hotel.hotel_Saturday')}}</div>
          <div>{{$t('hotel.hotel_Sunday')}}</div>
        </div>
        <div class="calendarItem_day">
          <div v-for="(subItem, index2) in item.days" :key="index2"
            :class="subItem.month===item.date?'nowMonth':'otherMonth'">
            <div :class="stockColor(item,subItem)"
              :style="subItem.month===item.date&&msg2.DateList.indexOf(subItem.day)!==-1?'border-color: green':''"
              @click="calendarDayOn(item, subItem)">
               <el-popover placement="bottom" :title="$t('ground.baojiaxinxi')" width="280" trigger="hover"
                v-if="subItem.data&&subItem.data.SubList && subItem.data.SubList[0]">
                <template>
                  <table style="margin-left:3px;padding-top:2px;width:270px;">
                    <tr>
                      <th width="50" style="text-align:center">{{$t('ground.pici')}}</th>
                      <th width="50" style="text-align:center">{{$t('Operation.Op_price')}}</th>
                      <th width="50" style="text-align:center">{{$t('hotel.hotel_Inventory')}}</th>
                      <th width="60" style="text-align:center">{{$t('hotel.hotel_remainList')}}<br/>{{$t('hotel.hotel_Inventory')}}</th>
                      <th width="50" style="text-align:center">{{$t('hotel.table_operat')}}</th>
                    </tr>
                    <tr v-for="(childItem,childIndex) in subItem.data.SubList">
                      <td style="text-align:center">
                        {{childItem.BatchNumber}}
                      </td>
                      <td style="text-align:center">
                        {{childItem.CostPrice}}
                      </td>
                      <td style="text-align:center">
                        {{childItem.Inventory}}
                      </td>
                      <td style="text-align:center">
                        {{childItem.RemainingInventory}}
                      </td>
                      <td style="text-align:center">
                        <a style="text-decoration:underline;cursor:pointer;color:blue;"
                          @click="goEdit('2', subItem.day,childItem.BatchNumber)">{{$t('pub.updateMsg')}}</a>
                      </td>
                    </tr>
                  </table>
                </template>
                <span slot="reference" >{{subItem.date.getDate()}}</span>
              </el-popover>
              <template v-else>
                {{subItem.date.getDate()}}
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="hotelProductManage2_calendarBox" v-show="calendar.show">
        <HotelProductCalendar ref="hotelProductCalendar" :calendar="calendar" @goEdit="goEdit"></HotelProductCalendar>
      </div>
    </div>
    <!-- 页面编辑 -->
    <div class="hotelProductManage2_edit2">
      <div class="hotelProductManage2_edit2_header">
        <div>{{$t('restaurant.res_bidManage')}}</div>
        <div>
          <input type="button" :value="$t('ground.piliangshanchu')" @click="delete2Reset()" class="hollowbtn" />
          <input type="button" :value="$t('ground.chongzhi')" @click="edit2Reset()" class="hollowFixedBtn" />
          <input type="button" :value="$t('pub.saveBtn')" @click="edit2Save()" class="normalBtn" />
        </div>
      </div>
      <el-form :model="msg2" :rules="rules2" :inline="true" label-width="130px" ref="hotelProductForm2"
        class="hotelProductManage2_edit2_form">
        <el-row>
          <el-col :span="24" class="HotelProductEdit_date">
            <el-form-item :label="$t('ground.yixuanriqi')" prop="DateList">
              <el-tag v-for="(item, key) in msg2.DateList" :key="key" type="info" style="margin: 0 5px 0 0;" closable
                @close="calendarDayOff(item)">{{item}}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="padding: 20px 0 0 0;border-top: 1px dashed #ccc;">
          <el-col :span="6">
            <el-form-item :label="$t('ground.kucunleixing')" prop="InventoryType">
              <el-select v-model="msg2.InventoryType" :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('objFill.hongri')" value="1"></el-option>
                <el-option :label="$t('objFill.wanji')" value="2"></el-option>
                <el-option :label="$t('objFill.pingji')" value="3"></el-option>
                <el-option :label="$t('objFill.danji')" value="4"></el-option>
                <el-option :label="$t('ground.tebiejia')" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.kuicun')" prop="Inventory">
              <el-input-number v-model="msg2.Inventory" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('ground.pici')">
              <el-select v-model="msg2.BatchNumber" :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('ground.diyipi')" :value="1"></el-option>
                <el-option :label="$t('ground.dierpi')" :value="2"></el-option>
                <!-- <el-option :label="$t('ground.disanpi')" :value="3"></el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('ground.tiqianhuanfangts')">
              <el-input-number v-model="msg2.BeforeDay" :precision="2" :min="0"
                @keyup.native="checkInteger(msg2,'BeforeDay')" maxlength="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('ground.mianjianshu')">
              <el-input-number v-model="msg2.FreeRoomNum" :precision="2" :min="0"
                @keyup.native="checkPrice(msg2,'FreeRoomNum')" maxlength="10"></el-input-number>
            </el-form-item>
          </el-col <el-col :span="6">
          <el-form-item :label="$t('ground.biaozhunjiancb')">
            <el-input-number v-model="msg2.CostPrice" :precision="2" :min="0"
              @keyup.native="checkPrice(msg2,'CostPrice')" maxlength="10"></el-input-number>
          </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item :label="$t('ground.sankejia')">
              <el-input-number v-model="msg2.SanKePrice" :precision="2" :min="0"
                @keyup.native="checkPrice(msg2,'SanKePrice')" maxlength="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('ground.shuijin')">
              <el-input-number v-model="msg2.TaxesPrice" :precision="2" :min="0"
                @keyup.native="checkPrice(msg2,'TaxesPrice')" maxlength="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('ground.dachuanjcb')" prop="BidroomPrice">
              <el-input-number v-model="msg2.BidroomPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.danrenjcbj')" prop="SingleroomPrice">
              <el-input-number v-model="msg2.SingleroomPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.xiaohaibzccbj')" prop="ChildNotBedPrice">
              <el-input-number v-model="msg2.ChildNotBedPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.jiachuancbj')" prop="AddBedPrice">
              <el-input-number v-model="msg2.AddBedPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.sijifangcbj')" prop="DriverRoomPrice">
              <el-input-number v-model="msg2.DriverRoomPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.daoyoufcbj')" prop="GuideRoomPrice">
              <el-input-number v-model="msg2.GuideRoomPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.cehngbenbz')" prop="CurrencyId">
              <el-select v-model="msg2.CurrencyId" :placeholder="$t('pub.pleaseSel')" style="width:100px;" @change="currency2Change">
                <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
                <el-option v-for="(item,index) in allCurrencyList" :key="index" :label="item.Name" :value="item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('hotel.hotel_CurrentRate')" prop="CurrentRate">
              <el-input v-model="msg2.CurrentRate" :placeholder="$t('hotel.hotel_CurrentRate')" style="width:80px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('hotel.hotel_payType')">
              <el-select class='w135 sel' v-model='msg2.PayStyle' :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('objFill.qingxuanzhe')" :value='0'></el-option>
                <el-option :label="$t('objFill.xianfu')" :value='1'></el-option>
                <el-option :label="$t('objFill.qiandan')" :value='2'></el-option>
                <el-option :label="$t('objFill.shiweidikou')" :value='3' ></el-option>
                <el-option :label="$t('objFill.yufu')" :value='4' ></el-option>
                <el-option :label="$t('objFill.yufukuandk')" :value='5'></el-option>
                <el-option :label="$t('objFill.gongsihtzf')" :value='6'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="padding: 20px 0 0 0;border-top: 1px dashed #ccc;">
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.zhoumojiaj')" prop="WeekendAddPrice">
              <el-input-number v-model="msg2.WeekendAddPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.neibujiaj')" prop="InteriorAddPrice">
              <el-input-number v-model="msg2.InteriorAddPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.b2bjiaj')" prop="B2BPrice">
              <el-input-number v-model="msg2.B2BPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.b2cjiaj')" prop="B2CPrice">
              <el-input-number v-model="msg2.B2CPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="padding: 20px 0 0 0;border-top: 1px dashed #ccc;">
          <el-col :span="6">
            <el-form-item :label="$t('hotel.hotel_Supplier')" prop="Supplier">
              <el-select v-model="msg2.Supplier" :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
                <el-option v-for="(item,index) in SupplierList" :key="index" :label="item.Name" :value="item.ID"
                  v-if="userInfo.SupplierId==item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item :label="$t('pub.pubRemark')" prop="Remark">
              <el-input type="textarea" v-model="msg2.Remark" :rows="1" :placeholder="$t('ground.qingshurbznr')" style="width: 600px;">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 弹出编辑 -->
    <div class="hotelProductManage2_edit" v-show="editShow" style="left:0;">
      <div class="hotelProductManage2_edit_header">
        <div>{{$t('restaurant.res_bidManage')}}</div>
        <div>
          <div @click="editCanel()">{{$t('pub.cancelBtn')}}</div>
          <div @click="editSave()" >{{$t('pub.saveBtn')}}</div>
        </div>
      </div>
      <el-form :model="msg" :rules="rules" :inline="true" label-width="130px" ref="hotelProductForm"
        class="hotelProductManage2_edit_form">
        <el-row>

          <el-col :span="6">
            <el-form-item :label="$t('ground.riqixuanzfs')" prop="DayType">
              <el-select v-model="msg.DayType" :placeholder="$t('pub.pleaseSel')" @change="dayTypeChange">
                <el-option :label="$t('objFill.v101.hote.anriqifangs')[0]" value="1"></el-option>
                <el-option :label="$t('objFill.v101.hote.anriqifangs')[1]" value="2"></el-option>
                <el-option :label="$t('objFill.v101.hote.anriqifangs')[2]" value="3"></el-option>
                <el-option :label="$t('objFill.v101.hote.anriqifangs')[3]" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="HotelProductEdit_date">
            <div v-show="msg.DayType==='1'||msg.DayType==='3'">
              <el-form-item :label="$t('pub.year')" prop="Year">
                <el-date-picker v-model="msg.Year" type="year" value-format="yyyy":placeholder="$t('objFill.xuanzhenian')"></el-date-picker>
              </el-form-item>
            </div>
            <div v-show="msg.DayType==='2'">
              <el-form-item :label="$t('pub.month')" prop="Month">
                <el-date-picker v-model="msg.Month" type="month" value-format="yyyy-MM" :placeholder="$t('op.ChoiceMonth')">
                </el-date-picker>
              </el-form-item>
            </div>
            <div v-show="msg.DayType==='3'">
              <el-form-item :label="$t('pub.month')" label-width="30px" prop="Month">
                <el-select v-model="msg.Month" :placeholder="$t('objFill.v101.hote.qingxuanzy')">
                  <el-option :label="$t('objFill.yuefens')[0]" value="01"></el-option>
                  <el-option :label="$t('objFill.yuefens')[1]" value="02"></el-option>
                  <el-option :label="$t('objFill.yuefens')[2]" value="03"></el-option>
                  <el-option :label="$t('objFill.yuefens')[3]" value="04"></el-option>
                  <el-option :label="$t('objFill.yuefens')[4]" value="05"></el-option>
                  <el-option :label="$t('objFill.yuefens')[5]" value="06"></el-option>
                  <el-option :label="$t('objFill.yuefens')[6]" value="07"></el-option>
                  <el-option :label="$t('objFill.yuefens')[7]" value="08"></el-option>
                  <el-option :label="$t('objFill.yuefens')[8]" value="09"></el-option>
                  <el-option :label="$t('objFill.yuefens')[9]" value="10"></el-option>
                  <el-option :label="$t('objFill.yuefens')[10]" value="11"></el-option>
                  <el-option :label="$t('objFill.yuefens')[11]" value="12"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div v-show="msg.DayType==='3'">
              <el-form-item label="周" label-width="30px" prop="Week">
                <el-select v-model="msg.Week" :placeholder="$t('objFill.v101.hote.qingxuanzz')">
                  <el-option :label="$t('objFill.v101.hote.weeks')[0]" value="0"></el-option>
                  <el-option :label="$t('objFill.v101.hote.weeks')[1]" value="1"></el-option>
                  <el-option :label="$t('objFill.v101.hote.weeks')[2]" value="2"></el-option>
                  <el-option :label="$t('objFill.v101.hote.weeks')[3]" value="3"></el-option>
                  <el-option :label="$t('objFill.v101.hote.weeks')[4]" value="4"></el-option>
                  <el-option :label="$t('objFill.v101.hote.weeks')[5]" value="5"></el-option>
                  <el-option :label="$t('objFill.v101.hote.weeks')[6]" value="6"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div v-show="msg.DayType==='4'">
              <el-form-item :label="$t('objFill.v101.hote.anriqifangs')[3]" prop="StartDate">
                <el-date-picker v-model="msg.StartDate" type="date" :placeholder="$t('objFill.v101.hote.xuanzhekssj')" format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
              <em>-</em>
              <el-form-item label="" prop="EndDate">
                <el-date-picker v-model="msg.EndDate" type="date" :placeholder="$t('objFill.v101.hote.xuanzhejssj')" format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row style="padding: 20px 0 0 0;border-top: 1px dashed #ccc;">
          <el-col :span="6">
            <el-form-item :label="$t('ground.kucunleixing')" prop="InventoryType">
              <el-select v-model="msg.InventoryType" :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('objFill.hongri')" value="1"></el-option>
                <el-option :label="$t('objFill.wanji')" value="2"></el-option>
                <el-option :label="$t('objFill.pingji')" value="3"></el-option>
                <el-option :label="$t('objFill.danji')" value="4"></el-option>
                <el-option :label="$t('ground.tebiejia')" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.kuicun')" prop="Inventory">
              <el-input-number v-model="msg.Inventory" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('ground.pici')">
              <el-select v-model="msg.BatchNumber" :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('ground.diyipi')" :value="1"></el-option>
                <el-option :label="$t('ground.dierpi')" :value="2"></el-option>
                <!-- <el-option :label="$t('ground.disanpi')" :value="3"></el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('ground.tiqianhuanfangts')">
              <el-input-number v-model="msg.BeforeDay" :precision="2" :min="0"
                @keyup.native="checkInteger(msg,'BeforeDay')" maxlength="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('ground.mianjianshu')">
              <el-input-number v-model="msg.FreeRoomNum" :precision="2" :min="0"
                @keyup.native="checkPrice(msg,'FreeRoomNum')" maxlength="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('ground.biaozhunjiancb')">
              <el-input-number v-model="msg.CostPrice" :precision="2" :min="0"
                @keyup.native="checkPrice(msg,'CostPrice')" maxlength="10"></el-input-number>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item :label="$t('ground.sankejia')">
              <el-input-number v-model="msg.SanKePrice" :precision="2" :min="0"
                @keyup.native="checkPrice(msg,'SanKePrice')" maxlength="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('ground.shuijin')">
              <el-input-number v-model="msg.TaxesPrice" :precision="2" :min="0"
                @keyup.native="checkPrice(msg,'TaxesPrice')" maxlength="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('ground.dachuanjcb')" prop="BidroomPrice">
              <el-input-number v-model="msg.BidroomPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.danrenjcbj')" prop="SingleroomPrice">
              <el-input-number v-model="msg.SingleroomPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.xiaohaibzccbj')" prop="ChildNotBedPrice">
              <el-input-number v-model="msg.ChildNotBedPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.jiachuancbj')" prop="AddBedPrice">
              <el-input-number v-model="msg.AddBedPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.sijifangcbj')" prop="DriverRoomPrice">
              <el-input-number v-model="msg.DriverRoomPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.daoyoufcbj')" prop="GuideRoomPrice">
              <el-input-number v-model="msg.GuideRoomPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.cehngbenbz')" prop="CurrencyId">
              <el-select v-model="msg.CurrencyId" :placeholder="$t('pub.pleaseSel')" style="width:100px;" @change="currencyChange">
                <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
                <el-option v-for="(item,index) in allCurrencyList" :key="index" :label="item.Name" :value="item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('hotel.hotel_CurrentRate')" prop="CurrentRate">
              <el-input v-model="msg.CurrentRate" :placeholder="$t('hotel.hotel_CurrentRate')" style="width:80px;"></el-input>
            </el-form-item>
          </el-col>
         <el-col :span="6">
            <el-form-item :label="$t('hotel.hotel_payType')">
              <el-select class='w135 sel' v-model='msg.PayStyle' :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('objFill.qingxuanzhe')" :value='0'></el-option>
                <el-option :label="$t('objFill.xianfu')" :value='1'></el-option>
                <el-option :label="$t('objFill.qiandan')" :value='2'></el-option>
                <el-option :label="$t('objFill.shiweidikou')" :value='3' ></el-option>
                <el-option :label="$t('objFill.yufu')" :value='4' ></el-option>
                <el-option :label="$t('objFill.yufukuandk')" :value='5'></el-option>
                <el-option :label="$t('objFill.gongsihtzf')" :value='6'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="padding: 20px 0 0 0;border-top: 1px dashed #ccc;">
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.zhoumojiaj')" prop="WeekendAddPrice">
              <el-input-number v-model="msg.WeekendAddPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.hote.neibujiaj')" prop="InteriorAddPrice">
              <el-input-number v-model="msg.InteriorAddPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.b2bjiaj')" prop="B2BPrice">
              <el-input-number v-model="msg.B2BPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('objFill.v101.b2cjiaj')" prop="B2CPrice">
              <el-input-number v-model="msg.B2CPrice" :precision="2" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="padding: 20px 0 0 0;border-top: 1px dashed #ccc;">
          <el-col :span="6">
            <el-form-item :label="$t('hotel.hotel_Supplier')" prop="Supplier">
              <el-select v-model="msg.Supplier" :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
                <el-option v-for="(item,index) in SupplierList" :key="index" :label="item.Name" :value="item.ID"
                  v-if="userInfo.SupplierId==item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item :label="$t('pub.pubRemark')" prop="Remark">
              <el-input type="textarea" v-model="msg.Remark" :rows="1" :placeholder="$t('ground.qingshurbznr')" style="width: 600px;">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import HotelProductCalendar from './HotelProductCalendar.vue';
  export default {
    components: {
      HotelProductCalendar
    },
    data() {
      var emptyJudge = (rule, value, callback) => {
        let regPos = /^\d+(\.\d+)?$/;
        if (!regPos.test(value)) {
          this.$message.error(rule.message)
          callback(new Error())
        } else {
          callback()
        }
      }
      var arrJudge = (rule, value, callback) => {
        if (value.length === 0) {
          this.$message.error(rule.message)
          callback(new Error())
        } else {
          callback()
        }
      }
      var dateJudge = (rule, value, callback) => {
        if (this.msg.Year === null) {
          this.msg.Year = ''
        }
        if (this.msg.Month === null) {
          this.msg.Month = ''
        }
        if (this.msg.DayType === '1') {
          if (this.msg.Year.toString().trim() === '' && rule.field === 'Year') {
            this.$message.error(this.$t('objFill.v101.hote.qingxuanzhen'))
            callback(new Error())
          } else {
            callback()
          }
        } else if (this.msg.DayType === '2') {
          if (this.msg.Month.toString().trim() === '' && rule.field === 'Month') {
            this.$message.error(this.$t('objFill.v101.hote.qingxuanzy'))
            callback(new Error())
          } else {
            callback()
          }
        } else if (this.msg.DayType === '3') {
          if (this.msg.Year.toString().trim() === '' && rule.field === 'Year') {
            this.$message.error(this.$t('objFill.v101.hote.qingxuanzhen'))
            callback(new Error())
          } else if (this.msg.Week.toString().trim() === '' && rule.field === 'Week') {
            this.$message.error(this.$t('objFill.v101.hote.qingxuanzz'))
            callback(new Error())
          } else {
            callback()
          }
        } else if (this.msg.DayType === '4') {
          if (this.msg.StartDate.toString().trim() === '' && rule.field === 'StartDate') {
            this.$message.error(this.$t('objFill.v101.hote.qingxzkssj'))
            callback(new Error())
          } else if (this.msg.EndDate.toString().trim() === '' && rule.field === 'EndDate') {
            this.$message.error(this.$t('objFill.v101.hote.qingxzjssj'))
            callback(new Error())
          } else {
            callback()
          }
        }
      }
      return {
        hotelId: '0',
        condition: {
          month: ''
        },
        hotelInfo: {
          HotelName: '',
          TotalInventory: '',
          Validity: ''
        },
        days: [],
        calendar: {
          num: 0,
          show: false,
          data: {}
        },
        editShow: false,
        userInfo: {},
        msg: {
          Hotel: '0',
          Supplier: 30,
          Inventory: '0',
          B2BPrice: '0',
          B2CPrice: '0',
          Remark: '',
          CostPrice: '0',
          CurrencyId: '',
          CurrentRate: '',
          StartDate: '',
          EndDate: '',
          InventoryType: '',
          BidroomPrice: '0',
          SingleroomPrice: '0',
          ChildNotBedPrice: '0',
          AddBedPrice: '0',
          DriverRoomPrice: '0',
          WeekendAddPrice: '0',
          InteriorAddPrice: '0',
          GuideRoomPrice: '0',
          DayType: '4',
          Year: '',
          Month: '',
          Week: '',
          DateList: [],
          SanKePrice: 0, //散客价
          BatchNumber: 1, //批次号
          TaxesPrice: 0, //税金
          BeforeDay: 0, //提前还房天数
          FreeRoomNum: 0, //免间数
          OpType: 1, //供应商操作
          PayStyle:0,//付款方式
        },
        msg2: {
          Hotel: '0',
          Supplier: 30,
          Inventory: '0',
          B2BPrice: '0',
          B2CPrice: '0',
          Remark: '',
          CostPrice: '0',
          CurrencyId: '',
          CurrentRate: '',
          StartDate: '',
          EndDate: '',
          InventoryType: '',
          BidroomPrice: '0',
          SingleroomPrice: '0',
          ChildNotBedPrice: '0',
          AddBedPrice: '0',
          DriverRoomPrice: '0',
          WeekendAddPrice: '0',
          InteriorAddPrice: '0',
          GuideRoomPrice: '0',
          DayType: '5',
          Year: '',
          Month: '',
          Week: '',
          DateList: [],
          SanKePrice: 0, //散客价
          BatchNumber: 1, //批次号
          TaxesPrice: 0, //税金
          BeforeDay: 0, //提前还房天数
          FreeRoomNum: 0, //免间数
          OpType: 1, //供应商操作
          PayStyle:0,//付款方式
        },
        rules: {
          InventoryType: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingxzkclx'),
            trigger: 'blur'
          },
          DayType: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingxzriqixzfs'),
            trigger: 'blur'
          },
          Year: {
            validator: dateJudge,
            message: this.$t('objFill.v101.hote.qingxuanzhen'),
            trigger: 'blur'
          },
          Month: {
            validator: dateJudge,
            message: this.$t('objFill.v101.hote.qingxuanzy'),
            trigger: 'blur'
          },
          Week: {
            validator: dateJudge,
            message: this.$t('objFill.v101.hote.qingxuanzz'),
            trigger: 'blur'
          },
          StartDate: {
            validator: dateJudge,
            message: this.$t('objFill.v101.hote.qingxzkssj'),
            trigger: 'blur'
          },
          EndDate: {
            validator: dateJudge,
            message: this.$t('objFill.v101.hote.qingxzjssj'),
            trigger: 'blur'
          },
          Inventory: {
            validator: emptyJudge,
            message: this.$t('objFill.qingshurukc'),
            trigger: 'blur'
          },
          CostPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrbzjcbj'),
            trigger: 'blur'
          },
          BidroomPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qiingsrdcjcbj'),
            trigger: 'blur'
          },
          SingleroomPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrdrjcbj'),
            trigger: 'blur'
          },
          ChildNotBedPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrxhbzccbj'),
            trigger: 'blur'
          },
          AddBedPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrjccbj'),
            trigger: 'blur'
          },
          DriverRoomPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrsifcbj'),
            trigger: 'blur'
          },
          GuideRoomPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrdyfcbj'),
            trigger: 'blur'
          },
          CurrencyId: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingxzcbbz'),
            trigger: 'blur'
          },
          CurrentRate: {
            validator: emptyJudge,
            message: this.$t('rule.qsrhuilv'),
            trigger: 'blur'
          },
          WeekendAddPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrzmjj'),
            trigger: 'blur'
          },
          InteriorAddPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrnbjj'),
            trigger: 'blur'
          },
          B2BPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrb2bjj'),
            trigger: 'blur'
          },
          B2CPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrb2cjj'),
            trigger: 'blur'
          },
        },
        rules2: {
          InventoryType: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingxzkclx'),
            trigger: 'blur'
          },
          DateList: {
            validator: arrJudge,
            message: this.$t('fnc.qingxuanzherq'),
            trigger: 'blur'
          },
          Inventory: {
            validator: emptyJudge,
            message: this.$t('objFill.qingshurukc'),
            trigger: 'blur'
          },
          CostPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrbzjcbj'),
            trigger: 'blur'
          },
          BidroomPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qiingsrdcjcbj'),
            trigger: 'blur'
          },
          SingleroomPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrdrjcbj'),
            trigger: 'blur'
          },
          ChildNotBedPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrxhbzccbj'),
            trigger: 'blur'
          },
          AddBedPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrjccbj'),
            trigger: 'blur'
          },
          DriverRoomPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrsifcbj'),
            trigger: 'blur'
          },
          GuideRoomPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrdyfcbj'),
            trigger: 'blur'
          },
          CurrencyId: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingxzcbbz'),
            trigger: 'blur'
          },
          CurrentRate: {
            validator: emptyJudge,
            message: this.$t('rule.qsrhuilv'),
            trigger: 'blur'
          },
          WeekendAddPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrzmjj'),
            trigger: 'blur'
          },
          InteriorAddPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrnbjj'),
            trigger: 'blur'
          },
          B2BPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrb2bjj'),
            trigger: 'blur'
          },
          B2CPrice: {
            validator: emptyJudge,
            message: this.$t('objFill.v101.hote.qingsrb2cjj'),
            trigger: 'blur'
          },
        },
        allCurrencyList: [],
        //供应商数组
        SupplierList: []
      }
    },
    methods: {
      //库存类型
      stockColor: function (item, item2, childItem) {
        if (item.date === item2.month && item2.hasOwnProperty('data')) {
          let type = item2.data.SubList[0].InventoryType;
          if (type === 1) {
            return 'hasStock_1';
          } else if (type === 2) {
            return 'hasStock_2';
          } else if (type === 3) {
            return 'hasStock_3';
          } else if (type === 4) {
            return 'hasStock_4';
          } else if (type === 5) {
            return 'hasStock_5';
          }
        } else {
          return;
        }
      },
      //日历点击事件
      calendarDayOn: function (item, item2) {
        if (item.date === item2.month) {
          let dayIndex = this.msg2.DateList.indexOf(item2.day)
          if (dayIndex === -1) {
            this.msg2.DateList.push(item2.day)
            this.msg2.DateList.sort()
          } else {
            this.msg2.DateList.splice(dayIndex, 1)
          }
        }
      },
      calendarDayOff: function (item) {
        let dayIndex = this.msg2.DateList.indexOf(item)
        this.msg2.DateList.splice(dayIndex, 1)
      },
      getData: function (date, key) {
        var sId = 0;
        if (this.getLocalStorageSupplier()) {
          sId = this.getLocalStorageSupplier().SupplierId;
        }
        this.ApiPost2('hotelreport_get_GetHotelPriceMonthStatistics', {
          HotelId: this.hotelId,
          Year: date.split('-')[0],
          Month: date.split('-')[1],
          Supplier: sId
        }, res => {
          if (res.data.resultCode === 1) {
            let json = res.data.data;

            this.hotelInfo.HotelName = json.HotelName;
            this.hotelInfo.TotalInventory = json.TotalInventory;
            this.hotelInfo.Validity = json.Validity;
            for (let i = 0; i < this.days[key].days.length; i++) {
              for (let j = 0; j < json.list.length; j++) {
                if (this.days[key].days[i].day === json.list[j].DayStr) {
                  this.days[key].days[i]['data'] = json.list[j]
                }
              }
            }
            if (key === this.calendar.num) {
              this.$set(this.calendar, 'data', this.days[this.calendar.num])
            }
            this.$forceUpdate();
          }
        })
      },
      getCalendarDays: function (date, key) {
        let month = new Date(date).Format('yyyy-MM')
        let dayList = this.$calendarUtils.createCalendar(date).DayArray;
        let days = [];
        for (let i = 0; i < dayList.length; i++) {
          let month = dayList[i].day.Format('yyyy-MM');
          let day = dayList[i].day.Format('yyyy-MM-dd');
          days.push({
            date: dayList[i].day,
            month: month,
            day: day
          });
        };
        this.days[key] = {
          date: month,
          days: days,
          isCked: false
        };
        this.getData(date, key);
      },
      getMonths: function () {
        let month = this.condition.month + '-1'
        for (let i = 0; i < 4; i++) {
          if (i !== 0) {
            let newDate = new Date(month).setDate(32);
            month = new Date(newDate).Format('yyyy-MM') + '-1';
          }
          this.getCalendarDays(month, i);
        }
      },
      calendarShow: function (item, index) {
        this.calendar.num = index;
        this.calendar.data = item;
        this.calendar.show = true;
      },
      // 获取详情
      getDetail: function (date, BatchNumber) {
        this.ApiPost2('dict_post_HotelOffer_GetHotelPriceInfo', {
          HotelId: this.msg.Hotel,
          Time: date,
          BatchNumber: BatchNumber
        }, res => {
          if (res.data.resultCode === 1) {
            let data = res.data.data;
            this.msg.Supplier = data.Supplier === 0 ? 30 : data.Supplier
            this.msg.Inventory = data.Inventory
            this.msg.B2BPrice = data.B2BPrice
            this.msg.B2CPrice = data.B2CPrice
            this.msg.Remark = data.Remark
            this.msg.CostPrice = data.CostPrice
            this.msg.CurrencyId = data.CurrencyId
            this.msg.CurrentRate = data.CurrentRate
            this.msg.StartDate = data.Date
            this.msg.EndDate = data.Date
            this.msg.InventoryType = data.InventoryType.toString()
            this.msg.BidroomPrice = data.BidroomPrice
            this.msg.SingleroomPrice = data.SingleroomPrice
            this.msg.ChildNotBedPrice = data.ChildNotBedPrice
            this.msg.AddBedPrice = data.AddBedPrice
            this.msg.DriverRoomPrice = data.DriverRoomPrice
            this.msg.WeekendAddPrice = data.WeekendAddPrice
            this.msg.InteriorAddPrice = data.InteriorAddPrice
            this.msg.GuideRoomPrice = data.GuideRoomPrice;
            this.msg.SanKePrice = data.SanKePrice;
            this.msg.BatchNumber = data.BatchNumber;
            this.msg.TaxesPrice = data.TaxesPrice;
            this.msg.BeforeDay = data.BeforeDay;
            this.msg.FreeRoomNum = data.FreeRoomNum;
            this.msg.PayStyle=data.PayStyle;
          }
        })
      },
      // 日期类型切换
      dayTypeChange: function (val) {
        this.msg.Year = ''
        this.msg.Month = ''
        this.msg.Week = ''
        this.msg.StartDate = ''
        this.msg.EndDate = ''
      },
      //获取所有币种
      getAllCurrency() {
        this.ApiPost2("financeinfo_post_GetList", {}, res => {
          if (res.data.resultCode === 1) {
            this.allCurrencyList = res.data.data;
          }
        }, err => {});
      },
      // 币种切换
      currencyChange: function (val) {
        this.msg.CurrentRate = 0
        for (let i = 0; i < this.allCurrencyList.length; i++) {
          if (val === this.allCurrencyList[i].ID) {
            this.msg.CurrentRate = this.allCurrencyList[i].Rate;
          }
        }
      },
      // 币种切换
      currency2Change: function (val) {
        this.msg2.CurrentRate = 0
        for (let i = 0; i < this.allCurrencyList.length; i++) {
          if (val === this.allCurrencyList[i].ID) {
            this.msg2.CurrentRate = this.allCurrencyList[i].Rate;
          }
        }
      },
      // 获取供应商
      initSupplier() {
        this.ApiPost2("supplier_post_GetAllList", {
          Type: 1,
        }, res => {
          if (res.data.resultCode === 1) {
            this.SupplierList = res.data.data;
          }
        }, err => {});
      },
      // 打开编辑窗口
      goEdit: function (type, date, BatchNumber) {
        let nowDate = new Date().Format('yyyy-MM-dd');
        this.msg.StartDate = date === undefined ? nowDate : date;
        this.msg.EndDate = date === undefined ? nowDate : date;
        if (type === '2' && date) {
          this.getDetail(date, BatchNumber);
        }
        this.editShow = true;
      },
      // 取消按钮
      editCanel: function () {
        this.editShow = false;
        this.$refs['hotelProductForm'].resetFields();
        this.msg.CostPrice = 0;
        this.msg.SanKePrice = 0;
      },
      // 保存按钮
      editSave: function () {
        this.$refs['hotelProductForm'].validate((valid) => {
          if (valid) {
            this.ApiPost2('dict_post_HotelOffer_SetNewHotelPrice', this.msg, res => {
              if (res.data.resultCode === 1) {
                this.Success('编辑成功')
                this.getMonths()
                this.editShow = false
                this.$refs['hotelProductForm'].resetFields();
                this.msg.CostPrice = 0;
                this.msg.SanKePrice = 0;
                this.msg.BatchNumber = 1;
                this.msg.TaxesPrice = 0;
                this.msg.BeforeDay = 0;
                this.msg.FreeRoomNum = 0;
                this.msg.PayStyle=0;
              } else {
                this.Error(res.data.message)
              }
            })
          } else {
            return false;
          }
        });
      },
      // 页面编辑重置
      edit2Reset: function () {
        this.$refs['hotelProductForm2'].resetFields();
        this.msg2.CostPrice = 0;
        this.msg2.SanKePrice = 0;
        this.msg2.BatchNumber = 1;
        this.msg2.TaxesPrice = 0;
        this.msg2.BeforeDay = 0;
        this.msg2.FreeRoomNum = 0;
        this.msg2.PayStyle=0;
      },
      //批量删除
      delete2Reset: function () {
        var that = this;
        this.Confirm(that.$t('tips.shifoushanchu'), function () {
          that.ApiPost2('dict_post_HotelOffer_RemoveNewHotelPrice', that.msg2, res => {
            if (res.data.resultCode == 1) {
              that.Success(res.data.message)
              that.getMonths();
              that.$refs['hotelProductForm2'].resetFields();
              that.msg2.CostPrice = 0;
              that.msg2.SanKePrice = 0;
              that.msg2.BatchNumber = 1;
              that.msg2.TaxesPrice = 0;
              that.msg2.BeforeDay = 0;
              that.msg2.FreeRoomNum = 0;
              that.msg2.PayStyle=0;
            } else {
              that.Error(res.data.message)
            }
          }, err => {})
        });
      },
      // 页面编辑保存
      edit2Save: function () {
        this.$refs['hotelProductForm2'].validate((valid) => {
          if (valid) {
            this.ApiPost2('dict_post_HotelOffer_SetNewHotelPrice', this.msg2, res => {
              if (res.data.resultCode === 1) {
                this.Success('编辑成功')
                this.getMonths();
                this.$refs['hotelProductForm2'].resetFields();
                this.msg2.CostPrice = 0;
                this.msg2.SanKePrice = 0;
                this.msg2.BatchNumber = 1;
                this.msg2.TaxesPrice = 0;
                this.msg2.BeforeDay = 0;
                this.msg2.FreeRoomNum = 0;
                this.msg2.PayStyle=0;
              } else {
                this.Error(res.data.message)
              }
            })
          } else {
            return false;
          }
        });
      },
      //增加全选
      changeHotelStatus(item, index) {
        if (item.isCked) {
          item.days.forEach(x => {
            if (x.month == item.date) {
              if (this.msg2.DateList.indexOf(x.day) == -1) {
                this.msg2.DateList.push(x.day);
              }
            }
          })
        } else {
          item.days.forEach(x => {
            this.msg2.DateList.forEach((y, index) => {
              if (x.day == y) {
                this.msg2.DateList.splice(index, 1)
              }
            })
          })
        }
      }
    },
    created: function () {
      this.userInfo = this.getLocalStorageSupplier();
      this.hotelId = this.$route.query.id === undefined ? '0' : this.$route.query.id;
      this.msg.Hotel = this.$route.query.id === undefined ? '0' : this.$route.query.id;
      this.msg2.Hotel = this.$route.query.id === undefined ? '0' : this.$route.query.id;
      this.condition.month = new Date().Format('yyyy-MM');
      let nowDate = new Date().Format('yyyy-MM-dd');
      this.msg.DayType = '4';
      this.msg.StartDate = nowDate;
      this.msg.EndDate = nowDate;
    },
    mounted: function () {
      this.getMonths();
      this.getAllCurrency();
      this.initSupplier();
    }
  }

</script>

<style>
  .hotelproductCkbox {
    width: 10%;
    height: 30px;
    float: right;
    margin: 5px 20px 0 0;
  }

  .hotelProductManage2>.hotelProductManage2_btnList {
    position: fixed;
    top: 36px;
    right: 20px;
    text-align: right;
    margin: 20px 0 0 0;
  }

  .hotelProductManage2_btnList>.btn_check {
    display: inline-block;
    margin: 0 0 0 10px;
    padding: 0 15px;
    height: 30px;
    line-height: 28px;
    font-size: 14px;
    color: #E95252;
    background: #fff;
    border: 1px solid #E95252;
    border-radius: 15px;
    cursor: pointer;
  }

  .hotelProductManage2_condition {
    padding: 0 0 0 0;
    text-align: right;
  }

  .hotelProductManage2_condition>div {
    display: inline-block;
    text-align: left;
  }

  .hotelProductManage2_condition>div>em {
    margin: 0 5px 0 0;
    font-size: 14px;
    color: #666666;
  }

  .hotelProductManage2_tableBox {
    padding: 20px 0;
  }

  .hotelProductManage2_table {
    width: 100%;
    color: #333;
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
  }

  .hotelProductManage2_table tr {
    background: #fff;
  }

  .hotelProductManage2_table tr th {
    background: #e6e6e6;
    height: 40px;
    font-size: 12px;
    text-align: center;
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
  }

  .hotelProductManage2_table tr td {
    height: 40px;
    font-size: 12px;
    text-align: center;
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
  }

  .hotelProductManage2_calendar {
    position: relative;
    padding: 20px 0;
    width: 100%;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
  }

  .hotelProductManage2_calendarBox {
    position: absolute;
    z-index: 2;
    left: 0px;
    top: 0px;
    padding: 20px 0;
    width: 100%;
  }

  .hotelProductManage2_calendarItem {
    display: inline-block;
    margin: 0 5px;
    width: 24%;
    /* width:438px; */
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    font-size: 0px;
  }

  .hotelProductManage2_calendarItem:hover {
    box-shadow: 0px 0px 5px 5px #E5E5E5;
  }

  .hotelProductManage2_calendarItem>.calendarItem_month {
    width: 50%;
    height: 30px;
    float: left;
    margin-left: 110px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
  }

  .hotelProductManage2_calendarItem>.calendarItem_week {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    width: 100%;
    height: 36px;
  }

  .hotelProductManage2_calendarItem>.calendarItem_week>div {
    display: inline-block;
    width: 14.2%;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    color: #999999;
  }

  .hotelProductManage2_calendarItem>.calendarItem_day {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-bottom: 20px;
  }

  .hotelProductManage2_calendarItem>.calendarItem_day>div {
    display: inline-block;
    padding: 15px 0;
    width: 14.2%;
    position: relative;
  }

  .hotelProductManage2_calendarItem>.calendarItem_day>div>div {
    margin: auto;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 26px;
    font-size: 14px;
    border: 2px solid transparent;
    border-radius: 50%;
  }

  .hotelProductManage2_calendarItem>.calendarItem_day>.nowMonth>div {
    color: #000000;
    cursor: pointer;
  }

  .hotelProductManage2_calendarItem>.calendarItem_day>.otherMonth>div {
    color: gainsboro;
  }

  .hotelProductManage2_calendarItem>.calendarItem_day>div>.hasStock_1 {
    background-color: #ff6363;
  }

  .hotelProductManage2_calendarItem>.calendarItem_day>div>.hasStock_2 {
    background-color: #ff99cc;
  }

  .hotelProductManage2_calendarItem>.calendarItem_day>div>.hasStock_3 {
    background-color: #bcd6ee;
  }

  .hotelProductManage2_calendarItem>.calendarItem_day>div>.hasStock_4 {
    background-color: #DDDDDD;
  }

  .hotelProductManage2_calendarItem>.calendarItem_day>div>.hasStock_5 {
    background-color: #02F78E;
  }

  /* 页面编辑 */
  .hotelProductManage2_edit2 {
    margin: 20px 0 0 0;
    padding: 10px 10px 0;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #E5E5E5;
    background-color: #FFFFFF;
    overflow: auto;
  }

  .hotelProductManage2_edit2>.hotelProductManage2_edit2_header {
    position: relative;
    width: 100%;
    height: 30px;
  }

  .hotelProductManage2_edit2_header>div:nth-child(1) {
    display: inline-block;
    padding: 0 20px;
    width: 200px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    border-left: 3px solid #E95252;
  }

  .hotelProductManage2_edit2_header>div:nth-child(2) {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 30px;
  }

  .hotelProductManage2_edit2_header>div:nth-child(2)>div:nth-child(1) {
    display: inline-block;
    margin: 0 5px;
    padding: 0 15px;
    height: 30px;
    line-height: 28px;
    font-size: 14px;
    color: #E95252;
    background: #fff;
    border: 1px solid #E95252;
    border-radius: 15px;
    vertical-align: top;
    cursor: pointer;
  }

  .hotelProductManage2_edit2_header>div:nth-child(2)>div:nth-child(2) {
    display: inline-block;
    padding: 0 15px;
    height: 30px;
    line-height: 28px;
    font-size: 14px;
    color: #fff;
    background: #E95252;
    border: 1px solid #E95252;
    border-radius: 15px;
    vertical-align: top;
    cursor: pointer;
  }

  .hotelProductManage2_edit2>.hotelProductManage2_edit2_form {
    padding: 10px 0;
  }

  .hotelProductManage2_edit2_form .el-input {
    width: 160px;
  }

  .hotelProductManage2_edit2_form .el-input-number {
    width: 160px;
  }

  .hotelProductManage2_edit2_form .el-input__inner {
    width: 160px;
  }

  .hotelProductManage2_edit2_form .el-textarea__inner {
    resize: none;
  }

  .hotelProductManage2_edit2_form .HotelProductEdit_date .el-form-item__content {
    width: 1000px;
    min-height: 9px;
  }

  /* 弹出编辑 */
  .hotelProductManage2_edit {
    position: fixed;
    z-index: 50;
    bottom: 0;
    left: 50px;
    padding: 10px 10px 0;
    min-width: 1316px;
    /* height: 640px; */
    border-top: 3px solid #38425d;
    background-color: #FFFFFF;
    overflow: auto;
  }

  .hotelProductManage2_edit>.hotelProductManage2_edit_header {
    position: relative;
    width: 100%;
    height: 30px;
  }

  .hotelProductManage2_edit_header>div:nth-child(1) {
    display: inline-block;
    padding: 0 20px;
    width: 200px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    border-left: 3px solid #E95252;
  }

  .hotelProductManage2_edit_header>div:nth-child(2) {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 30px;
  }

  .hotelProductManage2_edit_header>div:nth-child(2)>div:nth-child(1) {
    display: inline-block;
    margin: 0 5px;
    padding: 0 15px;
    height: 30px;
    line-height: 28px;
    font-size: 14px;
    color: #E95252;
    background: #fff;
    border: 1px solid #E95252;
    border-radius: 15px;
    vertical-align: top;
    cursor: pointer;
  }

  .hotelProductManage2_edit_header>div:nth-child(2)>div:nth-child(2) {
    display: inline-block;
    padding: 0 15px;
    height: 30px;
    line-height: 28px;
    font-size: 14px;
    color: #fff;
    background: #E95252;
    border: 1px solid #E95252;
    border-radius: 15px;
    vertical-align: top;
    cursor: pointer;
  }

  .hotelProductManage2_edit>.hotelProductManage2_edit_form {
    padding: 10px 0;
  }

  .hotelProductManage2_edit_form .el-input {
    width: 180px;
  }

  .hotelProductManage2_edit_form .el-input__inner {
    width: 180px;
  }

  .hotelProductManage2_edit_form .el-textarea__inner {
    resize: none;
  }

  .hotelProductManage2_edit_form .HotelProductEdit_date>div {
    display: inline-block;
    vertical-align: middle;
  }

  .hotelProductManage2_edit_form .HotelProductEdit_date>div>em {
    display: inline-block;
    margin: 7px 10px 0 0;
    padding: 0 0 0 0;
  }

  .hotelProductManage2 .RabateDiv {
    margin-left: 25px;
  }

  .hotelProductManage2 .RebateCount {
    height: 34px;
    border-radius: 17px;
    float: left;
  }

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

  .hotelProductManage2 .leftPnum {
    float: left;
    background-color: #f5f7fa;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-right: 1px solid #cccccc;
    position: absolute;
    left: 1px;
    top: 1px;
    font-size: 14px;
    padding: 0 10px;
    color: #606266;
  }

  .hotelProductManage2 .toolInput {
    height: 42px;
    padding-left: 5px;
    border: none;
  }

  .hotelProductManage2 .inpuOne {
    width: 225px;
    padding-left: 120px;
    border: 1px solid #d1d1d1;
    border-right: none;
  }

  .hotelProductManage2 .inpuTwo {
    width: 166px;
    padding: 0 45px 0 77px;
    border: 1px solid #d1d1d1;
  }

  .hotelProductManage2 .fanNum {
    float: left;
    background-color: #f5f7fa;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-right: 1px solid #cccccc;
    position: absolute;
    left: 1px;
    top: 1px;
    padding: 0 10px;
    color: #606266;
    font-size: 14px;
  }

  .popList {
    font-size: 12px;
    line-height: 15px;
    text-align: left;
  }

  .hotelProductManage2_calendarItem>.calendarItem_day>.nowMonth:hover .detailInfo {
    display: block;
  }

  .hotelProductManage2 .detailInfo {
    display: none;
    position: absolute;
    left: -70px;
    top: 50px;
    z-index: 999;
  }

  .hotelProductManage2 .triangle_border_up {
    width: 0;
    height: 0;
    border-width: 0 103px 30px;
    border-style: solid;
    opacity: 0.75;
    border-color: transparent transparent rgba(233, 82, 82, 1);
    /*透明 透明  灰*/
  }

  .hotelProductManage2 .detailInfo .popContent {
    width: 205px;
    min-height: 80px;
    background-color: #e95252;
    text-align: left;
    color: #fff;
    font-size: 12px;
    margin-top: -2px;
    overflow: auto;
    padding-bottom: 10px;
  }

  .hotelProductManage2 .popList label:first-child {
    display: inline-block;
    width: 40%;
    margin: 10px 0 0 10px;
    text-align: left;
  }

  .hotelProductManage2 .popList label:last-child {
    display: inline-block;
    width: 40%;
    margin: 10px 10px 0 0;
    text-align: right;
  }

  .hotelProductManage2 .Htupbtn {
    padding: 0 10px;
    height: 25px;
    margin: 10px 0 0 75px;
  }

</style>