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

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

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

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

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

  .RestaurantPackage .Ldata {
    color: #333333;
    margin-top: 5px;
  }

  .RestaurantPackage .LP {
    color: #e95252;
  }

  .RestaurantPackage .HP {
    color: #2aaef2;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    padding-left: 5px;
    display: inline-block;
  }

  .RestaurantPackage .T1 {
    text-align: right;
    color: #666666;
    display: inline-block;
  }

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

  .RestaurantPackage .descripTion {
    border-radius: 4px;
    width: 266px;
    text-align: left;
    padding: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

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

  .RestaurantPackage .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 RestaurantPackage'>
    <div class="query-box">
      <ul>
        <li>
          <label>{{$t('restaurant.res_packageName')}}</label>
          <el-input v-model="msg.MealName" maxlength="30" @keyup.native.enter="getList"></el-input>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="getList(),resetPageIndex()" />
          <input type="button" class="normalBtn" v-if="IsEditDmcSource==1"
            @click="resetId(),outerVisible = true,dialogTitle=$t('ground.tianjiataocan')" :value="$t('pub.addBtn')" />
        </li>
      </ul>
    </div>
    <table class="singeRowTable centerTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading"
      style="border-collapse:separate;border-spacing:0px 10px;table-layout:fixed;">
      <tr>
        <th width="200">{{$t('restaurant.res_packageName')}}</th>
        <th width="200">{{$t('objFill.v101.Rest.shiyongcis')}}</th>
        <th>{{$t('scen.sc_dj')}}</th>
        <th>{{$t('scen.sc_gj')}}</th>
        <th width="300">{{$t('hotel.hotel_remark')}}</th>
        <th>{{$t('hotel.table_operat')}}</th>
      </tr>
      <tr v-for="item in DataList" :key="item.subCode">
        <td>
          <el-tooltip class="item" effect="dark" :content="item.MealName" placement="top-start" popper-class="max-w250">
            <span class="roomName">{{item.MealName}}</span>
          </el-tooltip>
        </td>
        <td class="DaysInfo">
          <span><i class="iconfont icon-kaoqintongji"></i>{{item.UseTime}} 次</span>
        </td>
        <td>
          <p class="clearfix">
            <span class="tit_name T1">
              {{item.CurrencyName==''?'':item.CurrencyName}}<span
                v-if="item.CurrencyCode">({{item.CurrencyCode}})</span></span><span
              class='tit_name T2'>{{item.LPrice}}/{{$t('hotel.hotel_people')}}</span>
          </p>
          <p class="Ldata">{{item.LDate}}</p>
        </td>
        <td>
          <p class="clearfix">
            <span class="tit_name T1">
              {{item.CurrencyName==''?'':item.CurrencyName}}<span
                v-if="item.CurrencyCode">({{item.CurrencyCode}})</span></span><span
              class='tit_name HP'>{{item.HPrice}}/{{$t('hotel.hotel_people')}}</span>
          </p>
          <p class="Ldata">{{item.HDate}}</p>
        </td>
        <td>
          <el-tooltip class="item" effect="dark" v-if="item.Remark" :content="item.Remark" placement="top-start"
            popper-class="max-w250">
            <span class="descripTion">{{item.Remark}}</span>
          </el-tooltip>
        </td>
        <td>
          <el-button-group>
            <template v-if="IsEditDmcSource==1">
              <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
                <el-button type="primary" icon="iconfont icon-Edit"
                  @click="outerVisible = true,dialogTitle=$t('ground.xiugaitaocan'),updateResturant(item.Id)">
                </el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="$t('restaurant.res_bidManage')" placement="top-start">
                <el-button type="primary" icon="iconfont icon-ico_shezhi" @click="goUrl('RestaurantPrice',item.Id)">
                </el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
                <el-button type="danger" icon="el-icon-delete" @click="isDelete(item.Id)"></el-button>
              </el-tooltip>
            </template>
          </el-button-group>
        </td>
      </tr>
    </table>
    <el-dialog custom-class='w500' :visible.sync="outerVisible" :title="dialogTitle" center
      :before-close="closeChangeMachie">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="110px">
        <el-form-item :label="$t('restaurant.res_packageResource')" prop="DiningId">
          <el-select :placeholder="$t('pub.pleaseSel')" class="w300" disabled v-model="addMsg.DiningId">
            <el-option v-for="item in resList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('restaurant.res_packageName')" prop="MealName">
          <el-input class="w300" type="text" v-model="addMsg.MealName" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item :label="$t('restaurant.res_package_type_Name')" prop="DiningMealType">
          <el-select filterable v-model='addMsg.DiningMealType' :placeholder="$t('pub.pleaseSel')" class="w300">
            <el-option v-for='item in DiningMealTypeList' :label='item.Name' :value='item.ID' :key='item.ID'>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('hotel.hotel_produceDes')" prop="MealDesc">
          <el-input class="w300" type="textarea" v-model="addMsg.MealDesc" maxlength="200"></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>
    <div class="noData" v-show="noData">
      {{$t('system.content_noData')}}
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="msg.total"></el-pagination>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 6,
          DiningId: "",
          MealName: "",
          total: 0,
          currentPage: 1
        },
        addMsg: {
          Id: "0",
          DiningId: "",
          MealName: "",
          MealDesc: "",
          DiningMealType: "",
        },
        loading: true,
        DiningMealTypeList: [],
        outerVisible: false,
        dialogTitle: "",
        noData: false,
        DataList: "",
        //餐厅列表
        resList: [],
        rules: {
          //表单必填验证
          DiningId: [{
            required: true,
            message: this.$t('ground.qingxuanzetczy')
          }],
          DiningMealType: [{
            required: true,
            message: this.$t('ground.qingxztc')
          }]
        },
        IsEditDmcSource: 0, //是否可修改套餐
      };
    },
    methods: {
      //获取酒店修改与报价添加修改权限
      GetHotelPirceStockAuth() {
        let editDmcSource = "F_EditDmcSource";
        this.apipost('userauth_get_CheckUserAuthNewService', '', res => {
          if (res.data.resultCode == 1) {
            var tempData = res.data.data;
            if (tempData && tempData.length > 0) {
              if (tempData.includes(editDmcSource)) { //查看列表权限
                this.IsEditDmcSource = 1;
              }
            }
          }
        });
      },
      getList() {
        this.loading = true;
        this.apipost(
          "meal_post_GetPageList",
          this.msg,
          res => {
            if (res.data.resultCode == 1) {
              this.msg.total = res.data.data.count;
              if (this.msg.total > 0) {
                this.noData = false;
                this.DataList = res.data.data.pageData;
              } else {
                this.noData = !this.noData;
              }
              this.loading = false;
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      GetDiningMealTypeList() {
        this.apipost('meal_post_GetDiningMealType', {}, res => {
          if (res.data.resultCode == 1) {
            this.DiningMealTypeList = res.data.data
          }
        }, err => {})
      },
      saveResource() {
        this.DiningMealTypeList.forEach(item => {
          if (this.addMsg.DiningMealType == item.ID) {
            // HK 2020-05-06注释
            //this.addMsg.MealName = item.Name
          }
        })
        this.apipost(
          "meal_post_Set",
          this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.getList();
              this.Success(this.$t('tips.saveYes'));
              this.outerVisible = false;
              this.resetForm("addMsg");
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      updateResturant(Id) {
        let msg = {
          ID: Id
        };
        this.apipost(
          "meal_post_Get",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.addMsg = res.data.data;
              this.addMsg.DiningId = parseInt(res.data.data.DiningId);
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      resetId() {
        this.addMsg.Id = "0";
      },
      isDelete(ID) {
        this.$confirm(this.$t('tips.shifoushanchu'), this.$t('tips.tips'), {
            confirmButtonText: this.$t('pub.sureBtn'),
            cancelButtonText: this.$t('pub.cancelBtn'),
            type: "warning"
          })
          .then(() => {
            let msg = {
              ID: ID
            };
            this.apipost(
              "meal_post_Remove",
              msg,
              res => {
                if (res.data.resultCode == 1) {
                  this.Success(res.data.message);
                  this.getList();
                } else if (res.data.resultCode == 2) { //该套餐下面存在报价信息不能删除
                  this.$confirm(this.$t('objFill.v101.Rest.gaitcxczbjxx')+ this.$t('restaurant.res_confirm') + this.$t('system.table_delete'),
                      this.$t('tips.tips'), {
                        confirmButtonText: this.$t('pub.sureBtn'),
                        cancelButtonText: this.$t('pub.cancelBtn'),
                        type: "warning"
                      })
                    .then(() => {
                      let msg = {
                        ID: ID,
                        IsDel: 1,
                      };
                      this.apipost(
                        "meal_post_Remove",
                        msg,
                        res => {
                          if (res.data.resultCode == 1) {
                            this.Success(res.data.message);
                            this.getList();
                          } else {
                            this.Error(res.data.message);
                          }
                        },
                        null
                      );
                    })
                    .catch(() => {
                      this.Info(this.$t('ground.yiquxsc'));
                    });
                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
          })
          .catch(() => {
            this.Info(this.$t('ground.yiquxsc'));
          });
      },
      goUrl(path, id) {
        this.$router.push({
          path: path,
          query: {
            MealId: id,
            DiningId: this.addMsg.DiningId,
            blank: 'y',
            tab: this.$t('restaurant.res_bidManage')
          }
        });
      },
      handleCurrentChange(val) {
        //翻页功能按钮
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        //查询初始化页码
        this.msg.pageIndex = 1;
        this.msg.currentPage = 1;
      },
      initResrestaurant() {
        //初始化套餐资源
        let msg = {};
        this.apipost(
          "dining_post_GetList",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.resList = res.data.data;
            }
          },
          null
        );
      },
      submitForm(addMsg) {
        //提交创建、修改表单
        let that = this;
        that.$refs[addMsg].validate(valid => {
          if (valid) {
            that.saveResource();
          } else {
            return false;
          }
        });
      },
      closeChangeMachie(done) {
        //弹出框关闭初始化弹框内表单
        done();
        this.resetForm("addMsg");
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    mounted() {
      this.GetHotelPirceStockAuth();
      this.initResrestaurant();
      this.addMsg.DiningId = parseInt(this.$route.query.id);
      this.msg.DiningId = this.$route.query.id;
      this.getList();
      this.GetDiningMealTypeList();
    }
  };

</script>
