<template>
  <div class="guidecarList" style="height: 100vh">
    <view class="guide_ComHead">
      <view style="width: 100%; background: #ffffff; padding-bottom: 10rpx">
        <view class="g_top">
          <view class="row">
            <u-icon name="location" :size="32" color="#EE4454"></u-icon>
            <span>{{ Pickcar }}</span>
            <view
              style="
                width: 4rpx;
                color: #e7e7e7;
                height: 40rpx;
                margin: 0 20rpx;
              "
            ></view>
          </view>
          <view
            class="row"
            style="justify-content: space-between; width: 440rpx"
          >
            <view class="topB" @click="">
              <span class="ztext">{{ STime.month }}月{{ STime.day }}日</span>
              <span class="titext">{{
                STime.week + " " + STime.hour + ":" + STime.minute
              }}</span>
            </view>
            <view class="topB" style="align-items: center">
              <span style="font-size: 22rpx; color: #1c1e1f">{{
                intervalDay
              }}</span>

              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/sanjiao.png"
                mode="aspectFill"
                style="width: 110rpx; height: 8rpx"
              ></image>
            </view>
            <view class="topB" @click="">
              <span class="ztext">{{ ETime.month }}月{{ ETime.day }}日</span>
              <span class="titext">{{
                ETime.week + " " + ETime.hour + ":" + ETime.minute
              }}</span>
            </view>
          </view>
        </view>
      </view>
      <view
        class="g_Second"
        style="position: relative; background: #fff; width: 100%"
      >
        <view style="border-bottom: 1px solid rgba(0, 0, 0, 0.03)">
          <u-tabs
            :list="list"
            :is-scroll="false"
            :show-bar="false"
            font-size="28"
            :activeFontSize="34"
            :bold="true"
            :current="current"
            @change="change"
            bar-height="4"
            active-color="#FF8585"
          ></u-tabs>
        </view>
        <view v-if="screenshow == true" class="tanchu">
          <scroll-view
            :scroll-y="true"
            :enable-back-to-top="true"
            style="max-height: 321px; width: 100%"
          >
            <view
              class="tanchu_item"
              v-for="(item, index) in screenList"
              :key="index"
              @click="onItemSelect(item)"
            >
              <view
                style="display: flex; flex-direction: row; align-items: center"
              >
                <image
                  v-if="current == 1"
                  style="width: 15px; height: 15px; margin-right: 10px"
                  :src="item.BrandLogo"
                ></image>
                <span>{{ item.Name }}</span>
              </view>
              <u-icon
                name="success"
                :color="mainColor"
                size="30"
                v-if="item.ID == msg.OrderBy && current == 0"
              ></u-icon>
              <u-icon
                name="success"
                :color="mainColor"
                size="30"
                v-if="item.ID == msg.CarBrandId && current == 1"
              ></u-icon>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <div style="display: flex; width: 100%; overflow: hidden; overflow-y: auto">
      <view
        v-if="screenshow == true"
        class="Mask"
        @click="screenshow = false"
      ></view>
      <div
        class="left-slider"
        :style="{ height: `calc(100vh - ${scrollHeight})` }"
      >
        <sidebar
          :active="tic"
          bg="#FAF8F9"
          name="Name"
          active-color="#FF8585"
          :border="false"
          :list="classList"
          @change="changeHandler"
        ></sidebar>
      </div>
      <div class="right-slider">
        <u-empty
          v-if="g.length == 0"
          text="暂无相关车辆信息"
          mode="data"
        ></u-empty>
        <scroll-view
          :scroll-y="true"
          :enable-back-to-top="true"
          :enable-flex="true"
          @scrolltolower="lower"
          v-if="g.length > 0"
          :style="{
            height: `calc(100vh - ${scrollHeight})`,
            width: 'calc(100vw - 85px)',
          }"
        >
          <view
            style="
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 10px;
            "
          >
            <view
              class="c_list_item"
              v-for="(x, i) in g"
              :key="i"
              @click="goDetails(x)"
            >
              <view class="itemb">
                <view class="c_t_l">
                  <image
                    :src="x.cover_pic"
                    mode="aspectFill"
                    style="width: 100%; height: 100%"
                  ></image>
                </view>
                <view
                  class="c_t_r"
                  :style="{ width: windowWidth - 85 - 30 - 110 + 'px' }"
                >
                  <span class="ctr_name">{{ x.name }}</span>
                  <span
                    style="
                      font-size: 11px;
                      color: #111111;
                      margin-top: 10px;
                      font-family: aa;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      display: -webkit-box;
                      -webkit-line-clamp: 2;
                      -webkit-box-orient: vertical;
                    "
                    >{{ x.guidecartype }} · 可乘坐{{ x.goods_stock }}人 ·
                    {{ x.carcolorName }}</span
                  >
                </view>
              </view>
              <view
                class="itemb"
                style="justify-content: space-between; margin-top: 10px"
              >
                <view
                  class="itemb"
                  style="
                    height: 43px;
                    padding-right: 3px;
                    width: 180px;
                    background: #faf8f9;
                  "
                >
                  <image
                    :src="x.guidephoto"
                    mode="aspectFill"
                    style="
                      width: 30px;
                      height: 30px;
                      border-radius: 15px;
                      margin-left: 5px;
                    "
                  ></image>
                  <view
                    style="
                      display: flex;
                      flex-direction: column;
                      justify-content: space-between;
                      height: 30px;
                      margin-left: 8px;
                    "
                  >
                    <view class="itemb">
                      <span style="font-size: 11px; color: #111111">{{
                        x.guidename
                      }}</span>
                      <view
                        style="
                          background-image: linear-gradient(
                            to right,
                            #ff8585,
                            #ee4454
                          );
                          color: #fff;
                          font-size: 10px;
                          border-radius: 1px;
                          margin-left: 5px;
                          padding: 0 2px;
                        "
                      >
                        {{
                          x.guidescore == 0 ? "5.0" : x.guidescore.toFixed(1)
                        }}
                      </view>
                    </view>
                    <view class="itemb" style="font-size: 11px; color: #666666">
                      <view class="itemb">
                        <image
                          src="../../static/images/sidao/time.png"
                          mode="aspectFill"
                          style="width: 11px; height: 11px; margin-right: 3px"
                        ></image>
                        <span>从业{{ x.guideworkyears }}年</span>
                      </view>
                    </view>
                  </view>
                </view>
                <view
                  style="
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                  "
                >
                  <view class="price">
                    <text style="font-size: 11px">￥</text>
                    <text class="numfont">{{ x.price.split(".")[0] }}</text>
                    <text style="font-size: 11px" v-if="msg.CarType == 5"
                      >/人</text
                    >
                  </view>
                  <view style="color: #999999; font-size: 11px"
                    >原价￥{{ x.original_price }}</view
                  >
                </view>
              </view>
              <view class="line"></view>
            </view>
          </view>
        </scroll-view>
      </div>
    </div>
  </div>
</template>

<script>
import sidebar from "../../components/sidebar/index.vue";
export default {
  components: {
    sidebar,
  },
  data() {
    return {
      mainColor: "",
      activeStyle: "",
      pageTitle: "订车",
      classList: [],
      current: 0,
      screenshow: false,
      Pickcar: "",
      tic: 0,
      msg: {
        pageIndex: 1,
        pageSize: 15,
        Name: "",
        GoodsType: 1,
        OrderBy: 0,
        StartTime: "",
        EndTime: "",
        CarType: 0,
        LineName: "",
        LineDescription: "",
        RideNum: 0,
        CarClass: "",
        CarBrandId: 0,
        RegionIds: 0,
        IsSpell: 2,
      },
      screenList: [],
      contents: [
        {
          ID: 0,
          Name: "综合排序",
        },
        {
          ID: 1,
          Name: "价格升序",
        },
        {
          ID: 2,
          Name: "价格降序",
        },
        {
          ID: 3,
          Name: "评分升序",
        },
        {
          ID: 4,
          Name: "评分降序",
        },
        {
          ID: 5,
          Name: "最新升序",
        },
        {
          ID: 6,
          Name: "最新降序",
        },
      ],
      contents2: [], //品牌
      list: [
        {
          name: "综合排序",
        },
        {
          name: "全部品牌",
        },
      ],
      STime: "",
      ETime: "",
      intervalDay: "",
      address: "", //出发地址
      BrandList: [], //品牌列表
      g: [],
      page_count: 1,
      status: "loadmore",
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      PagePath: "",
      scrollHeight: 0,
      windowWidth: 0,
    };
  },
  onLoad(options) {
    if (options && options.item) {
      let item = JSON.parse(decodeURIComponent(options.item));
      this.msg.CarClass = item.CarClass;
      this.msg.CarType = item.CarType;
      this.msg.EndTime = item.EndTime;
      this.msg.LineDescription = item.LineDescription;
      this.msg.LineName = item.LineName;
      this.msg.RegionIds = item.RegionIds;
      this.msg.RideNum = item.RideNum;
      this.msg.StartTime = item.StartTime;
      this.msg.IsSpell = item.IsSpell;
      this.STime = this.getTime(item.StartTime);
      this.ETime = this.getTime(item.EndTime);
      let startTime = new Date(this.msg.StartTime); // 开始时间
      let endTime = new Date(this.msg.EndTime); // 结束时间
      let usedTime = endTime - startTime; // 相差的毫秒数
      let days = Math.floor(usedTime / (24 * 3600 * 1000)); // 计算出天数
      let leavel = usedTime % (24 * 3600 * 1000); // 计算天数后剩余的时间
      let hours = Math.floor(leavel / (3600 * 1000)); // 计算剩余的小时数
      if (days > 0) {
        if (leavel > 0) {
          this.intervalDay = days + 1 + "天";
        } else {
          this.intervalDay = days + "天";
        }
      } else {
        if (hours >= 6) {
          this.intervalDay = "1天";
        } else {
          this.intervalDay = "半天";
        }
      }
    }
    if (options && options.address) {
      this.address = options.address;
    }
    if (options && options.Pickcar) {
      this.Pickcar = options.Pickcar;
    }
    if (options && options.tic) {
      this.tic = options.tic;
    }
    this.getCarClassList(); //车辆类型
    this.init();
    this.getGuideCarBrandList(); //车辆品牌
    this.getPagePath(); //获取详情跳转详情地址
    this.windowWidth = this.$utils.SystemInfo().windowWidth;
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    this.activeStyle = `background:${this.mainColor};`;
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
    setTimeout(() => {
      this.getHeadHeight();
    }, 500);
  },
  methods: {
    getHeadHeight() {
      let that = this;
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".guide_ComHead")
        .boundingClientRect((data) => {
          that.scrollHeight = data.height + "px";
        })
        .exec();
    },
    init() {
      uni.showLoading({
        title: "加载中",
      });
      this.request2(
        {
          url: "/api/AppletGuideCar/GetAppletGoodsPageListForZY",
          data: this.msg,
        },
        (res) => {
          uni.hideLoading();
          if (res.resultCode == 1) {
            this.g = this.g.concat(res.data.pageData);
            this.page_count = res.data.pageCount;
            if (this.page_count == 1) {
              this.status = "nomore";
            }
          }
        }
      );
    },
    getTime(time) {
      let myDate = new Date(time);
      let obj = {};
      obj.year = myDate.getFullYear(); //年
      obj.month = myDate.getMonth() + 1; //月
      obj.day = myDate.getDate(); //日
      obj.hour =
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours(); //时
      obj.minute =
        myDate.getMinutes() < 10
          ? "0" + myDate.getMinutes()
          : myDate.getMinutes(); //分
      let days = myDate.getDay();
      obj.week = this.getweek(days); //星期几
      return obj;
    },
    getweek(day) {
      //根据值返回当前时间的星期几
      if (day == 1) {
        return "星期一";
      } else if (day == 2) {
        return "星期二";
      } else if (day == 3) {
        return "星期三";
      } else if (day == 4) {
        return "星期四";
      } else if (day == 5) {
        return "星期五";
      } else if (day == 6) {
        return "星期六";
      } else if (day == 0) {
        return "星期日";
      }
    },
    getGuideCarBrandList() {
      this.request2(
        {
          url: "/api/AppletGuideCar/GetGuideCarBrandList",
          data: {},
        },
        (res) => {
          this.BrandList = res.data;
          let obj = {
            Name: "全部品牌",
            ID: 0,
          };
          this.BrandList.unshift(obj);
          let list = [];
          this.BrandList.forEach((x) => {
            list.push(x);
          });
          this.contents2 = list;
        }
      );
    },
    getCarClassList() {
      this.request2(
        {
          url: "/api/AppletGuideCar/GetCarClassList",
          data: {},
        },
        (res) => {
          this.classList = res.data;
          let obj = {
            Name: "全部",
            Id: 0,
          };
          this.classList.unshift(obj);
        }
      );
    },
    changeHandler(val) {
      this.tic = val;
      this.msg.CarClass = this.classList[val].Id;
      this.msg.pageIndex = 1;
      this.g = [];
      this.init();
    },
    change(val) {
      if (val == 0) {
        if (val == this.current && this.screenshow == true) {
          this.screenshow = false;
        } else {
          this.screenshow = true;
        }
        this.screenList = this.contents;
      } else {
        if (val == this.current && this.screenshow == true) {
          this.screenshow = false;
        } else {
          this.screenshow = true;
        }
        this.screenList = this.contents2;
      }
      this.current = val;
    },
    onItemSelect(val) {
      console.log(val);
      if (this.current == 0) {
        this.msg.OrderBy = val.ID;
        this.list[0].name = val.Name;
      } else {
        this.msg.CarBrandId = val.ID;
        this.list[1].name = val.Name;
      }
      this.screenshow = false;
      this.msg.pageIndex = 1;
      this.g = [];
      this.init();
    },
    getPagePath() {
      this.request2(
        {
          url: "/api/AppletGuideCar/GetGuideCarInfoForPagePath",
          data: {},
        },
        (res) => {
          if (res.resultCode == 1) {
            this.PagePath = res.data.PagePath;
          }
        }
      );
    },
    goDetails(x) {
      //跳转商品详情
      if (this.PagePath != "") {
        uni.navigateTo({
          url:
            this.PagePath +
            "?GoodsId=" +
            x.id +
            "&address=" +
            this.address +
            "&Pickcar=" +
            this.Pickcar +
            "&StartTime=" +
            this.msg.StartTime +
            "&EndTime=" +
            this.msg.EndTime +
            "&RideNum=" +
            this.msg.RideNum,
        });
      } else {
        //如果没有跳转地址的时候 默认
        uni.navigateTo({
          url:
            "/pages/guidecar/guidecarGoodsdetails?GoodsId=" +
            x.id +
            "&address=" +
            this.address +
            "&Pickcar=" +
            this.Pickcar +
            "&StartTime=" +
            this.msg.StartTime +
            "&EndTime=" +
            this.msg.EndTime +
            "&RideNum=" +
            this.msg.RideNum,
        });
      }
    },
    lower(e) {
      if (this.msg.pageIndex < this.page_count) {
        this.msg.pageIndex++;
        this.status = "loading";
        this.init();
      } else {
        this.status = "nomore";
      }
    },
  },
};
</script>

<style>
.guidecarList {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.guidecarList .left-slider {
  width: 85px;
  height: 100%;
  background: #f5f5f5;
}

.guidecarList .right-slider {
  height: 100%;
  width: 1px;
  flex: 1;
}

.guidecarList .g_top {
  width: 96%;
  height: 90rpx;
  border-radius: 45rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background: #faf8f9;
  padding: 0 40rpx;
  margin: 20rpx 2%;
}

.guidecarList .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.guidecarList .topB {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.guidecarList .titext {
  font-size: 22rpx;
  color: #929292;
}

.guidecarList .ztext {
  font-size: 28rpx;
  color: #1c1e1f;
}

.guidecarList .c_list_item {
  width: 96%;
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.guidecarList .itemb {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.c_list_item .c_t_l {
  width: 110px;
  height: 62px;
}

.c_list_item .c_t_r {
  display: flex;
  flex-direction: column;
  height: 62px;
  margin-left: 10px;
}

.c_t_r .ctr_name {
  width: 300rpx;
  font-size: 15px;
  color: #111111;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
  font-family: aa;
}

.guidecarList .price {
  font-size: 16px;
  color: #ff4048;
}

.guidecarList .line {
  width: 100%;
  height: 1px;
  margin-top: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.guidecarList .Mask {
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.3;
  position: absolute;
  left: 0;
  top: 130px;
  z-index: 999;
}

.guidecarList .tanchu {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  position: absolute;
  top: 41px;
  left: 0;
  z-index: 1999;
}

.guidecarList .tanchu_item {
  width: 94%;
  margin-left: 3%;
  height: 45px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f1f1;
}

.guidecarList .numfont {
  font-family: "oswald";
  font-weight: unset;
  font-weight: bold;
}

.guidecarList .guide_ComHead {
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
}
</style>