<template>
  <div class="hotelProductCalendar">
    <div class="hotelProductCalendar_month">
      <div onselectstart="return false;">
        <span>{{calendar.data.date&&calendar.data.date.split('-')[0]}}年</span>
        <span>{{calendar.data.date&&calendar.data.date.split('-')[1]}}月</span>
      </div>
      <div>
        <span>酒店库存表</span>
      </div>
      <div>
        <i class="iconfont icon-cha" @click="calendarHide()"></i>
      </div>
    </div>
    <div class="hotelProductCalendar_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="hotelProductCalendar_day">
      <div v-for="(item, index) in calendar.data.days" :key="index">
        <div :class="item.month===calendar.data.date?'nowMonth':'otherMonth'">
          <span>{{item.date.getMonth()+1}}-{{item.date.getDate()}}</span>
        </div>
        <div v-if="item.data&&item.month===calendar.data.date" :class="stockColor(item.data.SubList[0].InventoryType)">
          <template v-for="(childItem,childIndex) in item.data.SubList">
            <p>
              <span title="点击修改价格和库存信息">
                价格：<span @click="goUrlA('2', item,childItem.BatchNumber)"
                  class="text_underLine">{{childItem.CostPrice}}（{{childItem.CurrencyName}}）</span>
              </span><br />
              <span title="点击跳转到总库存看板">
                总库存：<span class="text_underLine" @click="goUrlB(item)">{{childItem.Inventory}}（间）</span>
              </span><br />
              <span title="点击跳转到酒店查询">
                剩余库存：<span class="text_underLine"
                  @click="goUrlHotelTeam(item)">{{childItem.RemainingInventory}}（间）</span>
              </span>
            </p>
          </template>
        </div>
        <div class="noStock" v-if="!item.data&&item.month===calendar.data.date">
          <p><span>暂无数据</span></p>
          <p><span @click="goUrlA('1', item,1)">立即新增</span></p>
        </div>
        <div class="hasStock" v-if="item.month!==calendar.data.date">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      'calendar': {
        type: Object,
        default: function () {
          return {
            show: false,
            data: {}
          }
        }
      }
    },
    methods: {
      stockColor: function (type) {
        if (type === 1) {
          return 'hasStock hasStock_1'
        } else if (type === 2) {
          return 'hasStock hasStock_2'
        } else if (type === 3) {
          return 'hasStock hasStock_3'
        } else if (type === 4) {
          return 'hasStock hasStock_4'
        } else if (type === 5) {
          return 'hasStock hasStock_5'
        } else if (type === 6) {
          return 'hasStock hasStock_6'
        }
      },
      calendarHide: function () {
        this.calendar.show = false
        this.calendar.data = {}
      },
      goUrlA: function (type, item, BatchNumber) {
        this.$emit('goEdit', type, item.day, BatchNumber)
      },
      goUrlHotelTeam: function (item) {
        this.$router.push({
          name: 'HotelsTeam',
          query: {
            HotelId: item.data.HotelId,
            StartDate: item.data.DayStr,
            blank: 'y',
            tab: '酒店相关团'
          }
        });
      },
      goUrlB: function (item) {
        this.$router.push({
          name: 'HotelTotalStock',
          query: {
            HotelId: this.hotelId,
            blank: 'y',
            tab: '总库存看板'
          }
        });
      }
    }
  }
</script>

<style scoped>
  .hotelProductCalendar {
    width: 100%;
    font-size: 0px;
    box-sizing: border-box;
    background-color: #f5f5f5;
  }

  .hotelProductCalendar_month {
    position: relative;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #e95252;
    border-radius: 4px 4px 0 0;
  }

  .hotelProductCalendar_month>div {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    vertical-align: top;
  }

  .hotelProductCalendar_month>div:nth-child(1)>i {
    display: inline-block;
    font-size: 22px;
    color: #ff7e7e;
    cursor: pointer;
    vertical-align: middle;
  }

  .hotelProductCalendar_month>div:nth-child(1)>input {
    display: inline-block;
    width: 60px;
    height: 30px;
    border-radius: 17px;
    outline: none;
    border: none;
    color: #fff;
    background: transparent;
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
  }

  .hotelProductCalendar_month>div:nth-child(1)>span {
    display: inline-block;
    padding: 0 5px;
    font-size: 18px;
    color: #fff;
    vertical-align: middle;
  }

  .hotelProductCalendar_month>div:nth-child(2)>span {
    display: inline-block;
    padding: 0 20px;
    font-size: 18px;
    color: #fff;
  }

  .hotelProductCalendar_month>div:nth-child(3) {
    position: absolute;
    z-index: 1;
    right: 0px;
    top: 0px;
    width: 50px;
    text-align: center;
  }

  .hotelProductCalendar_month>div:nth-child(3)>i {
    font-size: 12px;
    color: #ffffff;
    cursor: pointer;
  }

  .hotelProductCalendar_week {
    width: 100%;
    height: 28px;
    background-color: #3fa783;
  }

  .hotelProductCalendar_week>div {
    display: inline-block;
    width: 14.2857%;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    color: #FFFFFF;
  }

  .hotelProductCalendar_day {
    width: 100%;
    border-left: 1px solid #dddddd;
  }

  .hotelProductCalendar_day>div {
    display: inline-block;
    width: 14.2857%;
    height: 148px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
  }

  .hotelProductCalendar_day>div>div:nth-child(1) {
    width: 100%;
    height: 28px;
    line-height: 28px;
    text-align: center;
  }

  .hotelProductCalendar_day>div>div:nth-child(1)>span {
    font-size: 14px;
  }

  .hotelProductCalendar_day>div>.nowMonth {
    background-color: #CCCCCC;
  }

  .hotelProductCalendar_day>div>.nowMonth>span {
    color: #000000;
  }

  .hotelProductCalendar_day>div:nth-child(7n-1)>.nowMonth>span {
    color: #e95252;
  }

  .hotelProductCalendar_day>div:nth-child(7n)>.nowMonth>span {
    color: #e95252;
  }

  .hotelProductCalendar_day>div>.otherMonth {
    background-color: #DDDDDD;
  }

  .hotelProductCalendar_day>div>.otherMonth>span {
    color: #999999;
  }

  .hotelProductCalendar_day>div>.hasStock {
    width: 100%;
    height: 120px;
    overflow-y: auto;
  }

  .hotelProductCalendar_day>div>.hasStock>p {
    width: 100%;
    min-height: 20px;
    padding: 0 10px;
    line-height: 19px;
    font-size: 12px;
    border-bottom: 1px dashed #ccc;
  }

  .hotelProductCalendar_day>div>.hasStock_1 {
    color: #FFFFFF;
    background-color: #ff3737;
  }

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

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

  .hotelProductCalendar_day>div>.hasStock_4 {
    background-color: #ffffff;
  }

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

  .hotelProductCalendar_day>div>.hasStock_6 {
    background-color: #808000;
  }


  .hotelProductCalendar_day>div>.noStock {
    padding: 30px 0 0 0;
    width: 100%;
    height: 120px;
  }

  .hotelProductCalendar_day>div>.noStock>p:nth-child(1) {
    width: 100%;
    font-size: 16px;
    color: #999999;
    text-align: center;
  }

  .hotelProductCalendar_day>div>.noStock>p:nth-child(2) {
    margin: 10px 0 0 0;
    width: 100%;
    font-size: 12px;
    color: #00C6FF;
    text-align: center;
    cursor: pointer;
  }

  .text_underLine {
    cursor: pointer;
    text-decoration: underline
  }

</style>