<style>
  .travelDinner .cm_hotelTitle {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #d1d1d1;
    padding: 0 20px 10px 20px;
  }

  .travelDinner .com_SaveBtn {
    margin: 10px 20px 0 45%;
  }

  .travelDinner .ck_goUrl {
    color: blue;
    cursor: pointer;
    margin-left: 10px;
  }

  .travelDinner .q-mt-lg {
    margin-top: 20px
  }

  .travelDinner .item-poi {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    background-size: cover;
    background-position: center;
    background-color: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    cursor: pointer;
    border: 2px solid transparent;
  }

  .travelDinner .checkDinner {
    border: 2px solid red;
  }

  .travelDinner .item-poi:hover {
    box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important;
  }

  .travelDinner .item-poi .container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 8px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  }

  .travelDinner .UseTypeTitle {
    font-size: 10px;
    padding: 0 3px;
    margin-left: 3px;
  }

  .travelDinner .UseTypeTitle:first-child {
    margin-left: 0;
  }

  .travelDinner .full-width {
    width: 100%;
  }

  .travelDinner .text-white {
    color: #FFF !important;
  }

  .travelDinner .fixed-p {
    position: absolute;
    bottom: 2px;
  }

  .travelDinner .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .travelDinner .col {
    min-width: 1px;
    flex: 1;
    min-height: 1px;
  }

  .travelDinner .search-card-detail {
    width: 400px;
  }

  .travelDinner .search-card-detail .item-poi-img {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
  }

  .travelDinner .search-card-detail .item-poi-img .container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .travelDinner .search-card-detail .item-poi-img .container img {
    border-radius: 8px;
    cursor: pointer;
  }

  .travelDinner .search-card-detail .item-poi-img .container .last-img {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;

  }

  .travelDinner .search-card-detail .item-poi-img .container .last-img .content {
    background: rgba(0, 0, 0, .2);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
  }

  .travelDinner .text-info {
    color: #b1b7cf;
  }

  .travelDinner .details ::-webkit-scrollbar {
    width: 0;
    /* 确保垂直滚动条宽度为 0 */
    height: 8px;
    overflow-x: hidden;
    /* 隐藏横向滚动条 */
  }

  .travelDinner .details ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .travelDinner .details ::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
  }

</style>

<template>
  <div class="travelDinner">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('objFill.v101.traveltrip.xitongct')" name="first">
        <div class="cm_hotelTitle clearfix">
          <el-row :gutter="12">
            <el-col :span="4">
              <el-select filterable v-model="searchParmeters.Province" :placeholder="$t('pub.area')" @change="reSearch" clearable
                @clear="reSearch">
                <el-option v-for="item in ProvinceList" :label='item.Name' :value='item.ID' :key='item.ID'>
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select filterable v-model="searchParmeters.UseType" :placeholder="$t('objFill.v101.traveltrip.shiyonglx')" @change="reSearch" clearable
                @clear="reSearch">
                <el-option v-for="item in diningUseTypeList" :label='item.Name' :value='item.ID' :key='item.ID'>
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select filterable v-model="searchParmeters.DiningType" :placeholder="$t('objFill.v101.traveltrip.canleix')" @change="reSearch" clearable
                @clear="reSearch">
                <el-option v-for="item in diningTypeList" :label='item.Name' :value='item.ID' :key='item.ID'>
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select filterable v-model="searchParmeters.DiningPriceType" :placeholder="$t('objFill.v101.traveltrip.canbiao')" @change="reSearch"
                clearable @clear="reSearch">
                <el-option v-for="item in diningPriceTypeList" :label='item.Name' :value='item.ID' :key='item.ID'>
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-input type="text" v-model="searchParmeters.keywords" @keyup.native.enter="reSearch" clearable
                @clear="reSearch" :placeholder="$t('salesModule.keyWords')"></el-input>
            </el-col>
            <el-col :span="4">
              <input type="button" class="normalBtn" :value="$t('pub.searchBtn')" @click="reSearch()" />
            </el-col>
          </el-row>
        </div>
        <div v-loading="loading" style="min-heoght:200px;">
          <el-row :gutter="12" class="q-mt-lg" v-if="!loading">
            <el-col :span="8" v-for="(x, i) in dataList" :key="i">
              <div class="item-poi" :class="x.Checked?'checkDinner':''" @click="setSelectedPoiItem(x)"
                :style="{ 'background-image': `url('${x.PicPath.split('?')[0]}')` }">
                <div class="container column">
                  <div class="row items-center">
                    <template v-if="x.UseTypeList&&x.UseTypeList.length>0">
                      <el-tag :type="index==0?'danger':index==1?'warning':index==2?'':'info'" size="mini"
                        class="text-bold UseTypeTitle" v-for="(item,index) in x.UseTypeList" :key="`u_`+i+index">
                        <template v-if="item.indexOf('团')!=-1">{{ item.replace('团', "")}}</template>
                        <template v-else>{{ item.replace('常用', "")}}</template>
                      </el-tag>
                    </template>
                  </div>
                  <div class="col"></div>
                  <el-tooltip class="item" effect="dark" placement="right">
                    <div slot="content" style="max-width:400px;">
                      <div class="search-card-detail details">
                        <div class="row items-center">
                          <div class="sub-title1 col q-mx-md">{{$t('objFill.v101.traveltrip.canxiangq')}}</div>
                        </div>
                        <el-scrollbar max-height="50vh" style="overflow-x:hidden;">
                          <div class="q-mt-md">
                            <p>{{ x.Name }}</p>
                            <template v-if="x.RealName && x.RealName != ''">
                              <div class="text-small text-info col q-mt-md" style=" margin-top: 10px">{{$t('objFill.v101.traveltrip.zhenshixm')}}</div>
                              <span class="text-small q-mt-sm" style=" margin-top: 5px">{{ x.RealName }}</span>
                            </template>
                            <div class="q-mt-md row items-center" style=" margin-top: 10px">
                              <div class="text-small text-info col">{{$t('admin.admin_address')}}</div>
                            </div>
                            <span class="text-small" style=" margin-top: 5px">{{ x.CountryName }}·{{ x.CityName }} {{ x.Address
                        }}</span>

                            <template v-if="x.Tel && x.Tel != ''">
                              <div class="text-small text-info col q-mt-md" style=" margin-top: 10px">{{$t('restaurant.res_ContactNumber')}}</div>
                              <span class="text-small q-mt-sm" style=" margin-top: 5px">{{ x.Tel }}</span>
                            </template>
                            <template v-if="x.Url && x.Url != ''">
                              <div class="text-small text-info col q-mt-md" style=" margin-top: 10px">{{$t('system.table_Url')}}</div>
                              <a :href="x.Url" target="_blank" style="color:white;margin-top: 5px">{{ x.Url }}</a>
                            </template>

                            <template v-if="x.UseTypeList&&x.UseTypeList.length>0">
                              <div class="text-small text-info col q-mt-md" style=" margin-top: 10px">{{$t('objFill.v101.traveltrip.shiyonglex')}}</div>
                              <el-tag class="q-mt-sm" style=" margin-top: 5px;margin-left:5px;"
                                :type="subindex==0?'danger':subindex==1?'warning':subindex==2?'':'info'"
                                :class="[!subindex?'':'q-ml-md']" size="small"
                                v-for="(subitem,subindex) in x.UseTypeList" :key="`de_`+subindex">
                                {{subitem}}</el-tag>

                            </template>
                            <template v-if="x.PriceList&&x.PriceList.length>0">
                              <div class="text-small text-info col q-mt-md" style=" margin-top: 10px">{{$t('objFill.v101.traveltrip.taocanjiag')}}</div>
                              <el-tag class="q-mt-sm q-mr-md" style=" margin-top: 5px;margin-left:5px;" size="small"
                                v-for="(subItem,subIndex) in x.PriceList" :key="`d_p_`+subIndex">
                                {{subItem.MealName}} / {{subItem.MealPrice}}

                              </el-tag>
                            </template>
                            <template v-if="x.Feature && x.Feature != ''">
                              <div class="text-small text-info col q-mt-md" style=" margin-top: 10px">{{$t('objFill.v101.traveltrip.xiangxijies')}}</div>
                              <span class="text-small q-mt-sm" style=" margin-top: 5px">{{ x.Feature }}</span>
                            </template>

                            <template v-if="x.About && x.About != ''">
                              <div class="text-small text-info col q-mt-md" style=" margin-top: 10px">{{$t('Operation.Op_Warmprompt')}}</div>
                              <span class="text-small q-mt-sm" style=" margin-top: 5px">{{ x.About }}</span>
                            </template>
                            <template v-if="x.BookingInfo && x.BookingInfo != ''">
                              <div class="text-small text-info col q-mt-md" style=" margin-top: 10px">{{$t('objFill.yudinxuzhi')}}</div>
                              <span class="text-small q-mt-sm" style=" margin-top: 5px">{{ x.BookingInfo }}</span>
                            </template>
                          </div>
                        </el-scrollbar>
                      </div>
                    </div>
                    <p class="text-white full-width fixed-p"
                      style="text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); font-size: 12px;  vertical-align: bottom;">
                      {{ x.Name }}
                    </p>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
          </el-row>
          <div style="display:flex;justify-content:center;align-items:center;">
            <el-pagination layout="prev, pager, next" hide-on-single-page :page-size="searchParmeters.pageSize"
              @current-change="handleSearch" :current-page="searchParmeters.pageIndex" :total="total" small />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('objFill.v101.traveltrip.morenct')" name="second">
        <div style="padding-left:20px;">
          <template v-if="qMsg.DinnerType==1">
            <el-radio-group v-model="checkDinner">
              <el-radio :label="item.Id" v-for="(item) in breakFirstList" :key="item.Id"
                style="display:block;text-align:left;padding-top:5px;">{{item.name}}</el-radio>
            </el-radio-group>
          </template>
          <template v-else>
            <el-radio-group v-model="checkDinner">
              <el-radio :label="item.ID" v-for="(item) in otherDinner" :key="item.ID"
                style="display:block;text-align:left;padding-top:5px;">{{item.Name}}</el-radio>
            </el-radio-group>
          </template>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div style="display:flex;justify-content:center;align-items:center;">
      <input type="button" class="normalBtn" @click="sendCkedHotel()" :value="$t('restaurant.res_confirm')" />
      <input type="button" class="normalBtn" @click="closeDinnerDig()" :value="$t('pub.closeSel')" />
    </div>
  </div>
</template>
<script>
  export default {
    props: ["qMsg", "otherDinner", "breakFirstList"],
    data() {
      return {
        loading: false,
        dataList: [],
        activeName: "first",
        searchParmeters: {
          keywords: '',
          platform: 2,
          type: 2,
          pageIndex: 1,
          pageSize: 9,
          Province: "",
          DiningType: "",
          DiningPriceType: "",
          UseType: [],
          QType: 2, //ERP查询
        },
        total: 0,
        ckedDinner: {},
        ProvinceList: [],
        diningPriceTypeList: [], //餐标
        diningTypeList: [], //餐类型
        diningUseTypeList: [], //适用类型
        defaultDinnerList: [],
        checkDinner: 0,
      };
    },
    methods: {
      handleClick() {

      },
      changeDinner(value) {
        this.checkDinner = value;
      },
      setSelectedPoiItem(item) {
        if (this.dataList && this.dataList.length > 0) {
          this.dataList.forEach(item => {
            item.Checked = false;
          })
        }
        item.Checked = !item.Checked;
      },
      //关闭弹窗
      closeDinnerDig() {
        this.$emit("closeDinner");
      },
      //向父组件传递选中酒店
      sendCkedHotel() {
        var ckDinnerObj = {
          DiningId: 0,
          DiningName: "",
          UnitPrice: 0,
        };
        if (this.activeName == "first") {
          if (this.dataList && this.dataList.length > 0) {
            this.dataList.forEach(item => {
              if (item.Checked) {
                ckDinnerObj.DiningId = item.ID;
                ckDinnerObj.DiningName = item.Name;
                ckDinnerObj.UnitPrice = item.UnitPrice;
              }
            })
            if (ckDinnerObj.UnitPrice <= 0) {
              this.Error(this.$t('objFill.v101.traveltrip.cictwsjcbqlxoppz'));
              return;
            }
          }
        } else {
          if (this.qMsg.DinnerType == 2 || this.qMsg.DinnerType == 3) {
            var tempObj = this.otherDinner.find((item) => {
              return item.ID === this.checkDinner;
            })
            if (tempObj) {
              ckDinnerObj.DiningId = tempObj.ID;
              ckDinnerObj.DiningName = tempObj.Name;
              ckDinnerObj.UnitPrice = 0;
            }
          } else {
            var tempBObj = this.breakFirstList.find((item) => {
              return item.Id === this.checkDinner;
            })
            if (tempBObj) {
              ckDinnerObj.DiningId = tempBObj.Id;
              ckDinnerObj.DiningName = tempBObj.name;
              ckDinnerObj.UnitPrice = 0;
            }
          }
        }

        this.$emit("chooseDinner", ckDinnerObj);
      },
      //获取日本下面的市->下拉框用
      getProvinceList() {
        let msg = {
          Id: this.qMsg.Country
        };
        this.apipost("dict_post_Destination_GetChildList", msg, res => {
            if (res.data.resultCode == 1) {
              this.ProvinceList = res.data.data;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //获取使用类型
      getUseType() {
        this.apipost("dining_get_GetDiningUseType", "", res => {
          this.diningUseTypeList = res.data.data;
        })
      },
      //获取餐类型
      getDiningType() {
        this.apipost("dining_get_GetDiningType", "", res => {
          this.diningTypeList = res.data.data;
        })
      },
      //获取价格类型
      getDiningPriceType() {
        this.apipost("dining_get_GetDiningPriceType", "", res => {
          this.diningPriceTypeList = res.data.data;
        });
      },
      //查询餐厅信息
      getDmcSourcePage() {
        this.loading = true;
        this.apipost("hotel_post_GetDmcSourcePage", this.searchParmeters, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
          }
        });
      },
      reSearch() {
        this.searchParmeters.pageIndex = 1;
        this.getDmcSourcePage();
      },
      handleSearch(val) {
        this.searchParmeters.pageIndex = val;
        this.getDmcSourcePage();
      }
    },
    created() {
      this.getProvinceList();
      this.getDiningPriceType();
      this.getUseType();
      this.getDiningType();
      this.getDiningType();
    },
    mounted() {

    }
  };

</script>