<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;
  }

  .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: 266px;
    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;
  }

</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="酒店名称" prop="Hotel_ID">
          <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="$t('hotel.product_name')">
          <el-input class="w300" type="text" v-model="addMsg.Name" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item :label="$t('hotel.table_servers')" 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="$t('hotel.hotel_produceDes')" prop="Description">
          <el-input class="w300" type="textarea" v-model="addMsg.Description"></el-input>
        </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 class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</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>{{$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 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>
        </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: ""
        },
        rules: {
          //表单必填验证
          Hotel_ID: [{
            required: true,
            message: this.$t('ground.qingxuanzjdzy')
          }],
          HotelProductType: [{
            required: true,
            message: this.$t('ground.qingxuanzcpmc')
          }],
          ServiceNumber: [{
            required: true,
            pattern: this.$commonUtils.Regex.el_isInteger,
            message: this.$t('ground.qingshuruzqdsz')
          }]
        }
      };
    },
    methods: {
      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 => {})
      },
      saveInfo() {

        this.HotelProductTypeList.forEach(item => {
          if (this.addMsg.HotelProductType == item.Id) {
            this.addMsg.Name = item.Name
          }
        })

        this.apipost(
          "dict_post_HotelProduct_Set",
          this.addMsg,
          res => {
            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;
            }
          },
          null
        );
      },
      initAddMsg() {
        //初始化创建、修改表单数据
        let newMsg = {
          ID: 0,
          Hotel_ID: parseInt(this.HotelID),
          Name: "",
          Description: "",
          ServiceNumber: ""
        };
        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>
