<template>
  <div>
    <div class="banner">
      <img v-if="language==0" src="@/assets/booking/cl_text_c.png">
      <img v-else src="@/assets/booking/cl_text_e.png">
    </div>
    <div class="box">
      <div class="searchBar">
        <el-input v-model="query.name" :placeholder="language==0?'请输入关键字搜索':'Search'" class="no-border">
        </el-input>
        <el-button class="btn-lineG" icon="search" size="large" type="primary" @click="getList">
          {{ language == 0 ? '搜索' : 'Search' }}
        </el-button>
      </div>
    </div>
    <div v-loading="loading" class="box">
      <el-collapse v-model="activeName" accordion style="--el-collapse-header-height:'auto'">
        <el-collapse-item v-for="(h,index) in list" :name="index" class="hotel">
          <template #title>
            <el-row :gutter="20" align="middle" class="w100">
              <el-col :span="4">
                <div class="index">{{ language == 0 ? '路线' : 'Route' }}{{ index + 1 }}
                  <img src="@/assets/booking/arrow.png"/>
                </div>
              </el-col>
              <el-col :span="7">
                <p class="esp">{{ h.checkIn }}</p>
              </el-col>
              <el-col :span="4" class="text-center">
                <img class="mauto w40px" src="@/assets/booking/wf.png"/>
              </el-col>
              <el-col :span="7">
                <p class="esp ">{{ h.checkOut }}</p>
              </el-col>
            </el-row>
          </template>

<!--          <div class="plr20">-->
<!--            <div v-for="(r,index) in h.carVoList" :key="index" class="room">-->
<!--              <el-row :gutter="30" align="middle">-->
<!--                <el-col :span="4">-->
<!--                  <div class="roomImg">-->
<!--                    <img :src="fillImgUrl(r.photos?.split(',')[0])">-->
<!--                  </div>-->
<!--                </el-col>-->
<!--                <el-col :span="14">-->
<!--                  <h3 class="name flex">{{ r.carType }}-->
<!--                    <div class="tagbox">-->
<!--                      <span class="tag">{{ r.carColor }}</span>-->
<!--                      <span v-show="r.checkOut==1" class="tag">{{ language == 0 ? '可送车' : 'drop-off' }}</span>-->
<!--                      <span v-show="r.checkIn==1" class="tag">{{ language == 0 ? '可接车' : 'pick-up' }}</span>-->
<!--                    </div>-->
<!--                  </h3>-->
<!--                  <div class="text-gray mt20">-->
<!--                    <span class="mr20">{{ language == 0 ? '座位数' : 'Seats' }}: {{ r.carSeat }}</span>-->
<!--                    <span class="mr20">|</span>-->
<!--                    <span :span="8">{{-->
<!--                        language == 0 ? '运营时间' : 'Servers Time'-->
<!--                      }}: {{ r.operStart }} ~ {{ r.operEnd }}</span>-->
<!--                  </div>-->
<!--                </el-col>-->
<!--                <el-col :span="3">-->
<!--                  <div v-if="language==0" class="price">¥-->
<!--                    <span-->
<!--                      v-if="r.outPrice&&r.inPrice">{{ Number(r.inPrice) > Number(r.outPrice) ? r.outPrice : r.inPrice }}</span>-->
<!--                    <span v-else-if="r.inPrice>0">{{ r.inPrice }}</span>-->
<!--                    <span v-else>{{ r.outPrice }}</span>-->
<!--                    起-->
<!--                  </div>-->
<!--                  <div v-else class="price">-->
<!--                    €-->
<!--                    <span-->
<!--                      v-if="r.outPriceEn&&r.inPriceEn">{{ (Number(r.inPriceEn) || 0) > Number(r.outPriceEn) ? r.outPriceEn : r.inPriceEn }}</span>-->
<!--                    <span v-else-if="r.inPriceEn>0">{{ r.inPriceEn }}</span>-->
<!--                    <span v-else>{{ r.outPriceEn }}</span>-->
<!--                  </div>-->

<!--                </el-col>-->
<!--                <el-col :span="3">-->
<!--                  <el-button class="btn-lineG w100" round type="primary" @click="goOrder(h,r)">-->
<!--                    {{ language == 0 ? '我要预订' : 'Select' }}-->
<!--                  </el-button>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </div>-->

<!--            <el-empty v-if="h.carVoList.length == 0" :image="`/img/order_no.png`" :image-size="228" description=""/>-->
<!--          </div>-->

        </el-collapse-item>
      </el-collapse>


      <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description=""/>
      <div style="height: 50px"></div>
    </div>

  </div>
</template>

<script setup>
import {onMounted} from "@vue/runtime-core"
import * as booking from "@/apiPc/booking"
import {useRouter, useRoute} from "vue-router";
import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";

const user = useUserStore().user
const router = useRouter()
const route = useRoute()
const language = useStorage('language', 0)
const query = ref({
  name: ''
})
const activeName = ref(0)
const cptId = ref('')
const list = ref([])
const loading = ref(false)
onMounted(() => {
  query.value.activityId = route.params.cptId
  // if (language.value==0)
  getList()
})

function getList() {
  // if (language.value!=0)return
  loading.value = true
  booking.getActivityCarList(query.value).then(res => {
    list.value = res.rows
    loading.value = false
  }).catch(e => {
    loading.value = false
  })
}

function goOrder(item, car) {
  if (!user) {
    useUserStore().setReLogin()
    return
  }
  router.push({
    name: 'carOrder',
    params: {
      id: item.id,
    },
    query: {
      item: encodeURIComponent(JSON.stringify(item)),
      car: encodeURIComponent(JSON.stringify(car)),
    }
  })
}
</script>

<style lang="scss" scoped>

.hotel {
  margin-bottom: 20px;
  cursor: pointer;

  .index {
    display: flex;
    font-weight: 500;
    padding-left: 20px;
    font-size: 18px;
    align-items: center;

    img {
      margin-left: 15px;
    }
  }

  p {
    font-weight: 500;
    font-size: 24px;
    color: #000000;
  }

  &:hover .el-card {
    box-shadow: 0 0 10px #aaa;
  }
}

.hotel:nth-child(7n) .index {
  color: #009E96;
}

.hotel:nth-child(7n+1) .index {
  color: #FF8124;
}

.hotel:nth-child(7n+2) .index {
  color: #E4007F;
}

.hotel:nth-child(7n+3) .index {
  color: #0068B7;
}

.hotel:nth-child(7n+4) .index {
  color: #32B16C;
}

.hotel:nth-child(7n+5) .index {
  color: #920783;
}

.hotel:nth-child(7n+6) .index {
  color: #00B7EE;
}

.banner {
  height: 140px;
  background-size: cover;
  text-align: center;
  background: url("@/assets/booking/cl_bg.png") center;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    display: block;
    margin: -30px auto 0;
    width: auto;
  }
}

.searchBar {
  position: relative;
  top: -30px;
  background: #FFFFFF;
  display: flex;
  padding: 20px;
  border-radius: 10px;
}

.no-border {
  border: none;
  background: #F5F7F9;

  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none;
    background: #F5F7F9;
  }
}

.starBox {
  img {
    display: inline-block;
    margin-right: 4px
  }
}

.tagbox {
  margin: 15px 0;

  a {
    color: #AFB5B9;
    font-size: 12px;
  }

  span {
    border-radius: 13px;
    font-size: 12px;
    padding: 4px 10px;
    margin-right: 10px;
    font-weight: 400;
  }

  span:nth-child(4n) {
    background: rgba(50, 177, 108, 0.2);
    color: rgba(50, 177, 108, 1);
  }

  span:nth-child(4n+1) {
    background: rgba(243, 152, 0, 0.2);
    color: rgba(243, 152, 0, 1);
  }

  span:nth-child(4n+2) {
    background: rgba(0, 160, 233, 0.2);
    color: rgba(0, 160, 233, 1);
  }

  span:nth-child(4n+3) {
    background: rgba(247, 64, 166, 0.2);
    color: rgba(247, 64, 166, 1);
  }
}

.name.flex {
  align-items: center;
}

.name .tagbox {
  margin: 0 0 0 15px;
}

.room {
  background: #FAFBFD;
  margin: 20px 0 0;
  padding: 20px;
  border: 1px solid #E5E5E5;

  .name {
    font-size: 20px;
    margin: 0 0 10px;
  }

  .roomImg {
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;

    img {
      width: 100%;
      object-fit: cover;
      object-position: center;
      height: 100%;
    }
  }

  .price {
    color: #FF8124;
    font-size: 24px;

    span {
      font-size: 36px;
      font-family: "DIN Alternate"
    }
  }

  .bg-lineg {
    margin: auto;
    border-radius: 10px;
    text-align: center;
    padding: 7px 2px 2px;
    font-size: 24px;
    width: 66px;
    cursor: pointer;

    div {
      background: #fff;
      font-size: 13px;
      border-radius: 20px;
      padding: 0 10px;
      color: #453DEA;
      font-weight: 500;
    }
  }
}

</style>