<style>
  .hotelproduct .addGroup {
    width: 500px;
  }

  .hotelproduct .f1 {
    float: left;
    margin: 10px 18px 0 0;
  }

  .hotelproduct .remarkTextarea {
    margin-top: 13px;
  }

  .hotelproduct .el-form-item__label {
    width: 100px;
    line-height: 45px;
  }

  .hotelproduct .el-textarea__inner {
    resize: none;
    height: 100px;
    display: inline-block;
    font-family: "微软雅黑";
  }

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

  .hotelproduct .el-dialog--center .el-dialog__body {
    padding: 25px 0 0 25px;
    height: 450px;
  }

  .hotelproduct .el-scrollbar {
    width: 300px;
  }

  .hotelproduct .addGroup .el-scrollbar {
    width: 400px !important;
  }

  .hotelproduct .singeRowTable tr:nth-child(n + 2):hover {
    background-color: white;
    box-shadow: 0px 0px 14px 0px #adadad;
    z-index: 10;
    position: relative;
  }

  .hotelproduct .DaysInfo span {
    display: inline-block;
    background-color: #2aaef2;
    color: white;
    border-radius: 4px;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
  }

  .hotelproduct .DaysInfo span i {
    margin-right: 10px;
  }

  .hotelproduct .singeRowTable tr:nth-child(n + 2) {
    height: 80px;
    text-align: center;
  }

  .hotelproduct .detailsIT .singeRowTable tr:nth-child(n + 2):hover {
    background-color: white;
    box-shadow: 0px 0px 14px 0px #adadad;
    z-index: 10;
    position: relative;
  }

  .hotelproduct .Ldata {
    color: #333333;
    margin-top: 5px;
    text-align: center;
  }

  .hotelproduct .LP {
    color: #e95252;
  }

  .hotelproduct .HP {
    color: #2aaef2 !important;
    text-align: left;
    font-weight: bold;
    padding-left: 5px;
    font-size: 14px !important;
  }

  .hotelproduct .tit_name {
    display: inline-block;
    width: 70px;
    text-align: left;
    font-size: 12px;
    color: #666666;
  }

  .hotelproduct .T1 {
    text-align: right;
    color: #666666;
  }

  .hotelproduct .T2 {
    text-align: left;
    color: #e95252;
    font-size: 14px;
    font-weight: bold;
    padding-left: 5px;
  }

  .hotelproduct .descripTion {
    border-radius: 4px;
    width: 100%;
    text-align: left;
    padding: 5px;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .hotelproduct .singeRowTable tr:nth-child(n + 2):hover .descripTion {
    background-color: #ededed;
  }

  .hotelproduct .roomName {
    display: inline-block;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    padding-left: 20px;
  }

  .HotelAdd_ImgBtn {
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: #419efb;
    border: 1px solid #e2e2e2;
    cursor: pointer;
    text-align: center;
  }

  .hotl_ImgDiv {
    margin: 0 20px 0 0;
    position: relative;
    display: inline-block;
  }

  .hotelproduct .colapp-image {
    background-size: cover;
    background-position: 50%;
    width: 100px;
    height: 100px;
    border-radius: 0;
  }

  .hotelproduct .delBtn {
    position: absolute;
    right: -8px;
    top: -8px;
    padding: 4px 4px !important;
  }

</style>
<template>
  <div class="flexOne hotelproduct">
    <div class="query-box">
      <ul>
        <li style="display:none;">
          <span>
            <em>{{$t('hotel.hotel_roomName')}}</em>
            <el-select filterable v-model='msg.HotelProductType' :placeholder="$t('pub.pleaseSel')">
              <el-option v-for='item in SelectHotelProductType' :label='item.Name' :value='item.Id' :key='item.Id'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('hotel.hotel_roomName')}}</em>
            <el-input class="w300" type="text" v-model="msg.Name" maxlength="20"></el-input>
          </span>
        </li>
        <li>
          <button class="hollowFixedBtn" type="success"
            @click="resetPageIndex(),initData()">{{$t('pub.searchBtn')}}</button>
          <button class="normalBtn" type="success"
            @click="outerVisible = true,dialogTitle=$t('ground.tianjiajdcp'),initAddMsg()">{{$t('pub.addBtn')}}</button>
        </li>
      </ul>
    </div>
    <el-dialog custom-class='addGroup' :visible.sync="outerVisible" :title="dialogTitle" center
      :before-close="closeChangeMachie">
      <el-form :model="addMsg" :rules="rules" ref="addMsg">
        <el-form-item label="酒店名称">
          <el-select :placeholder="$t('pub.pleaseSel')" filterable class="w300" disabled clearable
            v-model="addMsg.Hotel_ID">
            <el-option v-for="item in HotelName" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="Name">
          <el-input class="w300" type="text" v-model="addMsg.Name" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="入住人数" prop="ServiceNumber">
          <el-input type="text" class="w300" v-model="addMsg.ServiceNumber"
            @keyup.native="checkInteger(addMsg,'ServiceNumber')"></el-input>
        </el-form-item>
        <el-form-item label="早餐类型">
          <el-select :placeholder="$t('pub.pleaseSel')" class="w300" v-model="addMsg.BreakfastType">
            <el-option v-for="item in BreakfastList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="床型">
          <el-select :placeholder="$t('pub.pleaseSel')" class="w300" v-model="addMsg.BedType">
            <el-option v-for="item in BedTypeList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="床型描述">
          <el-input class="w300" type="text" placeholder="例如:1.8m大床" v-model="addMsg.BedDesc">
          </el-input>
        </el-form-item>

        <el-form-item label="房间大小">
          <el-input class="w300" type="text" placeholder="例如:18㎡" v-model="addMsg.RoomSize">
            <template slot="append">㎡</template>
          </el-input>
        </el-form-item>
        <el-form-item label="楼层">
          <el-input class="w300" type="text" placeholder="例如:21楼" v-model="addMsg.Floor">
            <template slot="append">层</template>
          </el-input>
        </el-form-item>
        <el-form-item label="是否禁烟">
          <el-select placeholder="是否禁烟" class="w300" v-model="addMsg.IsSmoking">
            <el-option :key="0" label="吸烟区" :value="0">
            </el-option>
            <el-option :key="1" label="禁烟" :value="1">
            </el-option>
            <el-option :key="2" label="部分禁烟" :value="2">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否有wifi">
          <el-switch v-model="addMsg.IsWifi" :active-value="1" :inactive-value="0">
          </el-switch>
        </el-form-item>
        <el-form-item label="是否有窗">
          <el-select placeholder="是否有窗" class="w300" v-model="addMsg.HasWindow">
            <el-option :key="1" label="有窗" :value="1">
            </el-option>
            <el-option :key="2" label="无窗" :value="2">
            </el-option>
            <el-option :key="3" label="部分有窗" :value="3">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="免费取消">
          <el-switch v-model="addMsg.IsCancel" :active-value="2" :inactive-value="1">
          </el-switch>
        </el-form-item>
        <el-form-item label="免费取消时间" v-if="addMsg.IsCancel==2">
          <el-input class="w300" type="text" v-model="addMsg.CancelTime" maxlength="200"></el-input>
        </el-form-item>
        <el-form-item :label="$t('hotel.hotel_produceDes')" prop="Description">
          <el-input class="w300" type="textarea" v-model="addMsg.Description"></el-input>
        </el-form-item>
        <el-form-item label="房型图片">
          <div style="display:flex;flex-wrap:wrap;">
            <div style="display:inline-block;">
              <div class="hotl_ImgDiv" v-for="(item,index) in addMsg.RoomImage" :key="index">
                <div class="colapp-image" :style="{backgroundImage: 'url(' + item.Path + ')'}">
                </div>
                <el-button @click="delHotelImg(item,index)" class="delBtn" type="danger" icon="el-icon-close" circle>
                </el-button>
              </div>
            </div>
            <el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
              style="display:inline-block;" :show-file-list="false" :http-request="UploadImage" multiple>
              <div class="HotelAdd_ImgBtn">
                + 添加图片
              </div>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn"
          @click="resetForm('addMsg'),outerVisible = false">{{$t('pub.cancelBtn')}}</button> &nbsp;
        <button type="primary" @click="submitForm('addMsg')"
          :class="{'comDisableBtn':isDisable==true,'normalBtn':isDisable==false}"
          :disabled='isDisable'>{{comBtnText}}</button>
      </div>
    </el-dialog>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading"
      style="border-collapse:separate;border-spacing:0px 10px;table-layout:fixed;">
      <tr>
        <th>名称</th>
        <th>入住人数</th>
        <th>床型/早餐</th>
        <th>房间信息</th>
        <th>是否可取消</th>
        <th>{{$t('scen.sc_bjts')}}</th>
        <th>{{$t('scen.sc_dj')}}</th>
        <th>{{$t('scen.sc_gj')}}</th>
        <th>{{$t('hotel.hotel_remark')}}</th>
        <th>{{$t('hotel.table_operat')}}</th>
      </tr>
      <tr v-for="(item,index) in pageData" :key="item.subCode">
        <td>
          {{item.Name}}
        </td>
        <td>
          {{item.ServiceNumber}} 人
        </td>
        <td style="text-align:left;padding-left:20px;">
          {{item.BedTypeStr}} 
          <template v-if="item.BedDesc&&item.BedDesc!=''">
             ({{item.BedDesc}})
          </template>
          <br />
          {{item.BreakfastTypeStr}}
          <br />
          {{item.HasWindowStr}}
        </td>
        <td style="text-align:left;padding-left:20px;">
          房间大小 {{item.RoomSize}} <span v-if="item.RoomSize">㎡</span>
          <br />
          楼层 {{item.Floor}}
          <br />
          {{item.IsSmokingStr}}
          <br />
          {{item.IsWifiStr}}
        </td>
        <td style="text-align:left;padding-left:20px;">
          <span v-if="item.IsCancel==1" style="color:red">{{item.IsCancelStr}}</span>
          <span v-if="item.IsCancel==2" style="color:green">{{item.IsCancelStr}}</span>
          <template v-if="item.IsCancel&&item.IsCancel==2">
            <br /> {{item.CancelTime}} 前
          </template>
        </td>
        <td class="DaysInfo">
          <span><i class="iconfont icon-kaoqintongji"></i>{{item.Days}}{{$t('hotel.hotel_day')}}</span>
        </td>
        <td>
          <p class="clearfix">
            <span class="tit_name T1">CNY</span><span class='tit_name T2'>{{item.LPrice}}</span>
          </p>
          <p class="Ldata">{{item.LDate}}</p>
        </td>
        <td>
          <p class="clearfix">
            <span class="tit_name T1">CNY</span>
            <span class='tit_name HP'>{{item.HPrice}}</span>
          </p>
          <p class="Ldata">{{item.HDate}}</p>
        </td>
        <td>
          <el-tooltip v-if="item.Description" class="item" effect="dark" :content="item.Description"
            placement="top-start" popper-class="max-w250">
            <span class="descripTion">{{item.Description}}</span>
          </el-tooltip>
        </td>
        <td>
          <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
            <el-button type="primary"
              @click="outerVisible = true,dialogTitle=$t('ground.xiugaijiudcp'),updateProduct(index,item.ID)"
              icon="el-icon-edit" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="$t('restaurant.res_bidManage')" placement="top-start">
            <el-button type="info" @click="goUrl('HotelPrice',item.ID)" icon="el-icon-document" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <el-button type="danger" @click="delRoomList(item.ID)" icon="el-icon-delete" circle></el-button>
          </el-tooltip>
        </td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange" :current-page="1" :page-size="this.msg.PageSize"
      layout="total,prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        total: 0,
        outerVisible: false,
        dialogTitle: "",
        productName: "",
        pageData: "",
        HotelName: "",
        HotelID: "",
        Country: '',
        IsSelfBook: '',
        uodateId: "",
        loading: "true",
        msg: {
          //初始化数据
          PageSize: 10,
          pageIndex: 1,
          Name: "",
          HotelProductType: "",
          Hotel_ID: ""
        },
        HotelProductTypeList: [],
        SelectHotelProductType: [],
        addMsg: {
          ID: 0,
          Hotel_ID: "",
          Name: "",
          HotelProductType: 0,
          Description: "",
          ServiceNumber: "",
          BreakfastType: 1, //早餐类型 1-含早餐,2-单早餐，3-双早餐
          BedType: 1, //床型 1-单人床,2-大床，3-双床
          BedDesc: '', //床型描述
          HasWindow: 1, //是否有窗(1-有窗，2-无窗)
          IsCancel: 1, //'是否可免费取消(1-不可取消,2-可取消
          CancelTime: '', //免费取消时间
          RoomImage: [], //房型图
          RoomSize: '', // 房间大小
          Floor: '', //楼层
          IsSmoking: 1, //是否禁烟 1禁烟 0不禁
          IsWifi: 1 //是否有wifi 1有 0无
        },
        //早餐类型下拉
        BreakfastList: [{
          Id: 1,
          Name: '含早餐'
        }, {
          Id: 2,
          Name: '单早餐'
        }, {
          Id: 3,
          Name: '双早餐'
        }, {
          Id: 4,
          Name: '无早餐'
        }, {
          Id: 5,
          Name: '早晚餐'
        }],
        //床型下拉
        BedTypeList: [{
          Id: 1,
          Name: '单人床'
        }, {
          Id: 2,
          Name: '大床'
        }, {
          Id: 3,
          Name: '双床'
        }, {
          Id: 4,
          Name: '圆床'
        }],
        rules: {
          Name: [{
            required: true,
            message: '请输入名称',
            trigger: "blur"
          }],
          ServiceNumber: [{
            required: true,
            pattern: this.$commonUtils.Regex.el_isInteger,
            message: "请输入入住人数"
          }]
        },
        isDisable: false,
        comBtnText: '保存',
      };
    },
    methods: {
      //上传酒店图片
      UploadImage(file) {
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        var path = "/Upload/DMC/";
        this.UploadSelfFileT(path, newArr, x => {
          var str = x.data.FilePath;
          var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
          var obj = {
            TagName: '',
            Path: imgUrl
          }
          this.addMsg.RoomImage.push(obj);
        });
      },
      //删除房型图片
      delHotelImg(item, index) {
        var that = this
        that.Confirm("删除图片将不能恢复?", function () {
          if (item.ID > 0) {
            let msg = {
              Id: item.ID,
              PicId: item.Pic
            }
            that.apipost("hotel_post_RemoveHotelImage", msg, res => {
              if (res.data.resultCode == 1) {
                that.addMsg.RoomImage.splice(index, 1);
              }
            });
          } else {
            that.addMsg.RoomImage.splice(index, 1);
          }
        });
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.initData();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      initData() {
        this.msg.Hotel_ID = this.HotelID;
        this.apipost(
          "dict_post_HotelProduct_GetPageList",
          this.msg,
          res => {
            if (res.data.resultCode == 1) {
              this.total = res.data.data.count;
              this.loading = false;
              res.data.data.pageData.forEach(x => {
                if (x.Days == null) {
                  x.Days = 0;
                }
                if (x.HPrice == null) {
                  x.HPrice = 0;
                }
                if (x.LPrice == null) {
                  x.LPrice = 0;
                }
              });
              this.pageData = res.data.data.pageData;
            }
          },
          null
        );
      },
      isdelete(ID) {
        this.innerVisible = true;
        this.insideDialogTxt = this.$t('tips.shifoushanchu');
        this.isDeleteNote = false;
        this.deleteID = ID;
      },
      delProduct() {
        var msg = {
          ProductId: this.deleteID
        };
        this.apipost(
          "dict_post_HotelProduct_Remove",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.initData();
              this.insideDialogTxt = res.data.message;
              this.isDeleteNote = true;
            }
          },
          null
        );
      },
      //初始化酒店列表
      initHotel() {
        this.apipost(
          "hotel_post_GetList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.HotelName = res.data.data;
            }
          },
          null
        );
      },
      GetHotelProductType() {
        this.apipost('dict_post_GetHotelProductTypeList', {}, res => {
          if (res.data.resultCode == 1) {
            this.HotelProductTypeList = res.data.data
            this.SelectHotelProductType = res.data.data
          }
        }, err => {})
      },
      //删除房型
      delRoomList(ID) {
        var that = this;
        that.Confirm(this.$t("tips.shifoushanchu"), function () {
          var msg = {
            ProductId: ID
          };
          that.apipost(
            "dict_post_HotelProduct_Remove",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.initData();
              } else {
                that.Error(res.data.message);
              }
            },
            null
          );
        });
      },
      saveInfo() {
        this.HotelProductTypeList.forEach(item => {
          if (this.addMsg.HotelProductType == item.Id) {
            this.addMsg.Name = item.Name
          }
        })
        this.isDisable = true
        this.comBtnText = '保存中'
        this.apipost(
          "dict_post_HotelProduct_Set",
          this.addMsg,
          res => {
            this.isDisable = false;
            this.comBtnText = '保存'
            if (res.data.resultCode == 1) {
              this.tips(this.$t('tips.saveYes'), "success");
              this.initData();
              this.resetForm("addMsg");
              this.outerVisible = false;
            } else {
              this.innerVisible = true;
              this.insideDialogTxt = res.data.message;
              this.isDeleteNote = true;
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      initAddMsg() {
        //初始化创建、修改表单数据
        let newMsg = {
          ID: 0,
          Hotel_ID: parseInt(this.HotelID),
          Name: "",
          Description: "",
          ServiceNumber: "",
          BreakfastType: 1,
          BedType: 1,
          BedDesc: '',
          HasWindow: 1,
          IsCancel: 1,
          CancelTime: '',
          RoomImage: [],
          RoomSize: '', // 房间大小
          Floor: '', //楼层
          IsSmoking: 0, //是否禁烟 1禁烟 0不禁
          IsWifi: 1 //是否有wifi 1有 0无
        };
        this.addMsg = newMsg;
      },
      closeChangeMachie(done) {
        //弹出框关闭初始化弹框内表单
        done();
        this.resetForm("addMsg");
      },
      resetForm(formName) {
        //弹出框取消 初始化谈框内表单
        this.$refs[formName].resetFields();
      },
      updateProduct(index, ID) {
        let msg = {
          ProductId: ID
        };
        this.apipost(
          "dict_post_HotelProduct_Get",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.addMsg = res.data.data;
            }
          },
          null
        );
      },
      goUrl(path, id) {
        this.$router.push({
          path: path,
          query: {
            id: id,
            HotelID: this.HotelID,
            Country: this.Country,
            IsSelfBook: this.IsSelfBook,
            blank: 'y',
            tab: '报价管理'
          }
        });
      },
      submitForm(addMsg) {
        //提交创建、修改表单
        let that = this;
        that.$refs[addMsg].validate(valid => {
          if (valid) {
            that.saveInfo();
          } else {
            return false;
          }
        });
      },
      tips(msg, type) {
        this.$message({
          message: msg,
          duration: 2000,
          type: type
        });
      }
    },
    mounted() {
      this.HotelID = this.$route.query.id;
      this.Country = this.$route.query.Country;
      this.IsSelfBook = this.$route.query.IsSelfBook;
      this.initData();
      this.initHotel();
      this.GetHotelProductType();
    }
  };

</script>