<template>
  <div class="guidecar">
    <scroll-view
      :scroll-y="true"
      @scroll="scrollHandler"
      @scrolltoupper="scrollTopHandler"
      style="min-height: 100vh"
    >
      <view
        :style="{
          'background-image':
            'url(' + (info.Background ? info.Background : '') + ')',
          backgroundSize: '100% 500rpx',
          paddingTop: `${statusNav}px`,
        }"
        class="topbox"
      >
        <view class="headStatus" :style="[headStyle]">
          <view class="arrow" @click="redirectPrev">
            <!-- #ifdef MP-WEIXIN -->
            <u-icon name="arrow-left" size="48" color="#fff"></u-icon>
            <!-- #endif -->
          </view>
          <view class="title">租车</view>
          <view class="arrow"></view>
        </view>
      </view>
      <view class="content">
        <view class="content_box">
          <view class="c_row" style="padding: 0; border: none">
            <!-- #ifdef MP-WEIXIN -->
            <u-tabs
              style="width: 100%"
              :is-scroll="false"
              name="Name"
              :list="navs"
              :active-color="mainColor"
              :current="active"
              @change="changeHandler2"
              :show-bar="true"
              :activeFontSize="34"
              :inactive-color="secondary"
              :bold="true"
              height="100"
              duration="0"
              font-size="28"
            ></u-tabs>
            <!-- #endif -->
            <!-- #ifdef MP-ALIPAY -->
            <view
              v-for="(item, index) in navs"
              :key="index"
              class="navName"
              :style="{
                fontSize: active === index ? '34rpx' : '28rpx',
                fontWeight: active === index ? 700 : 500,
                color: active === index ? '#000' : '',
              }"
              @click="changeHandler2(index)"
            >
              {{ item.Name }}
              <view class="navbg" v-if="active === index"></view>
            </view>
            <!-- #endif -->
          </view>

          <view v-if="active == 1" style="width: 100%; padding: 10px 0">
            <view class="dingzhitop">
              <view style="font-size: 11px; color: #919191">出行类型</view>
              <view class="dingzhitop_r">
                <view
                  class="dingzhitop_r_item"
                  @click="carMsg.returnId = 1"
                  :class="carMsg.returnId == 1 ? 'xuanzhong' : 'weixuan'"
                  >单程</view
                >
                <view
                  class="dingzhitop_r_item"
                  @click="carMsg.returnId = 2"
                  :class="carMsg.returnId == 2 ? 'xuanzhong' : 'weixuan'"
                  style="margin-left: 15px"
                  >往返</view
                >
              </view>
            </view>
            <view
              class="c_row"
              v-if="info.IsShowDate == 1"
              style="
                justify-content: space-between;
                border-bottom: 1px solid #e2e2e2;
              "
            >
              <view class="ac_o" @click="goaddressx(1)">
                <span class="ac_o_h" v-if="carMsg.StartCityName == ''"
                  >出发地</span
                >
                <span class="ztext2" v-else>{{ carMsg.StartCityName }}</span>
              </view>
              <view
                class="topB"
                style="height: 20px; align-items: center"
                @click="exchange()"
              >
                <image
                  src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zhuanghuan.png"
                  mode="aspectFill"
                  style="width: 21px; height: 21px"
                ></image>
              </view>
              <view
                class="ac_o"
                style="text-align: right"
                @click="goaddressx(2)"
              >
                <span class="ac_o_h" v-if="carMsg.ArriveCityName == ''"
                  >到达地</span
                >
                <span class="ztext2" v-else>{{ carMsg.ArriveCityName }}</span>
              </view>
            </view>
            <view
              style="
                width: 100%;
                color: #919191;
                font-size: 11px;
                height: 30px;
                line-height: 30px;
                border: none;
              "
              v-if="carMsg.returnId == 1"
            >
              时间
            </view>
            <view
              v-if="carMsg.returnId == 1"
              style="
                width: 100%;
                height: 50px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #e2e2e2;
                font-size: 14px;
                color: #1b1d1e;
                font-weight: 800;
              "
            >
              <picker
                mode="date"
                :value="cardate"
                :start="startDate"
                @change="bindDateChange"
              >
                <view>
                  <span>{{ showcardate }}</span>
                  <span style="margin-left: 5px">{{ showweek }}</span>
                </view>
              </picker>
            </view>
            <view
              style="
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border: none;
                height: 30px;
                color: #919191;
                font-size: 11px;
              "
              v-if="carMsg.returnId == 2"
            >
              <span>去程时间</span>
              <span>返程时间</span>
            </view>
            <view
              v-if="carMsg.returnId == 2"
              style="
                width: 100%;
                height: 50px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #e2e2e2;
                font-size: 14px;
                color: #1b1d1e;
                font-weight: 800;
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
              @click="showTimePopup = true"
            >
              <view>
                <span>{{ showcardate2 }}</span>
                <span style="margin-left: 5px">{{ showweek2 }}</span>
              </view>
              <view>
                <span>{{ showcardate3 }}</span>
                <span style="margin-left: 5px">{{ showweek3 }}</span>
              </view>
            </view>

            <view class="carbtn" @click="godingche"> 去订车 </view>
          </view>
          <view v-if="active == 0">
            <view class="c_row">
              <view class="topB" v-if="info.IsShowCity == 1" @click="gocity">
                <span class="titext">城市</span>
                <view
                  style="
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                  "
                >
                  <span class="ztext">{{ Pickcar }}</span>
                  <u-icon name="arrow-down" size="28" color="#C8C8C8"></u-icon>
                </view>
              </view>
              <view
                class="topB"
                style="width: 150px; align-items: flex-start"
                v-if="info.IsShowAddress == 1"
                @click="openmap"
              >
                <span class="titext">接送位置</span>
                <span
                  class="ztext"
                  style="
                    width: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                  v-if="address != ''"
                  >{{ address }}</span
                >
                <span class="ztext" style="color: #e2e2e2" v-if="address == ''"
                  >请选择</span
                >
              </view>
              <view
                class="topB"
                v-if="info.IsShowCarpooling == 1 && msg.CarType == 5"
                style="align-items: center"
              >
                <span class="titext">是否拼车</span>
                <u-switch
                  v-model="Ischecked"
                  size="30"
                  @change="goIsSpell"
                ></u-switch>
              </view>
            </view>
            <view class="c_row">
              <view
                class="topB"
                v-if="info.IsShowGuideCarGoodsType == 1"
                @click="show2 = true"
              >
                <span class="titext">出行类型</span>
                <view
                  style="
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                  "
                >
                  <span
                    class="ztext"
                    :style="{
                      color: msg.CarType == '' ? '#E2E2E2' : '#1C1E1F',
                    }"
                    >{{ EnumName }}</span
                  >
                  <u-icon name="arrow-down" size="28" color="#C8C8C8"></u-icon>
                </view>
              </view>
              <view
                class="topB"
                v-if="info.IsShowCarClass == 1"
                @click="show = true"
              >
                <span class="titext">车辆类型</span>
                <view
                  style="
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                  "
                >
                  <span class="ztext" style="color: #1c1e1f">{{
                    carName
                  }}</span>
                  <u-icon name="arrow-down" size="28" color="#C8C8C8"></u-icon>
                </view>
              </view>
              <view
                class="topB"
                v-if="info.IsShowTravelGuestNum == 1"
                style="align-items: center"
              >
                <span class="titext">出行人数</span>
                <input
                  class="uni-input"
                  v-model="msg.RideNum"
                  style="width: 50px; text-align: center"
                />
              </view>
            </view>
            <view class="c_row" v-if="msg.CarType == 5">
              <view class="topB">
                <span class="titext">线路名称</span>
                <input
                  class="uni-input"
                  v-model="msg.LineName"
                  style="width: 80px"
                  placeholder="请输入"
                />
              </view>
              <view class="topB">
                <span class="titext">关联城市或景点</span>
                <input
                  class="uni-input"
                  v-model="msg.LineDescription"
                  style="width: 80px"
                  placeholder="请输入"
                />
              </view>
              <view class="topB" style="width: 50px"></view>
            </view>
            <view class="c_row" v-if="info.IsShowDate == 1">
              <view
                class="topB"
                @click="
                  (showStart = true),
                    (timeType = 1),
                    (defaultTime = msg.StartTime)
                "
              >
                <span class="ztext">{{ STime.month }}月{{ STime.day }}日</span>
                <span class="titext">{{
                  STime.week + " " + STime.hour + ":" + STime.minute
                }}</span>
              </view>
              <view class="topB" style="height: 60rpx; 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="
                  (showStart = true),
                    (timeType = 2),
                    (defaultTime = msg.EndTime)
                "
              >
                <span class="ztext">{{ ETime.month }}月{{ ETime.day }}日</span>
                <span class="titext">{{
                  ETime.week + " " + ETime.hour + ":" + ETime.minute
                }}</span>
              </view>
            </view>
            <view class="c_row_t">
              <image
                :src="info.TipsIco"
                mode="aspectFill"
                style="width: 15px; height: 13px"
              ></image>
              <span style="font-size: 12px; color: #121212; margin-left: 5px">{{
                info.Tips
              }}</span>
            </view>
            <view
              class="btnstyle"
              :style="{
                color: info.ButtonTextColor,
                background: info.ButtonColor,
                'border-radius': info.ButtonFilletPX + 'px',
              }"
              @click="goList"
            >
              {{ info.ButtonText ? info.ButtonText : "" }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <u-popup v-model="show" mode="bottom" border-radius="16">
      <view class="popupBox">
        <view class="popup_top">
          <view></view>
          <Text>车辆类型</Text>
          <u-icon
            name="cross"
            color="#9F9F9F"
            @click="show = false"
            size="40"
          ></u-icon>
        </view>
        <scroll-view :scroll-y="true" style="max-height: 420px">
          <view class="txtype">
            <view
              class="typeitem"
              v-for="(item, index) in classList"
              :key="index"
              @click="radioChange(item)"
            >
              <Text>{{ item.Name }}</Text>
              <u-radio-group v-model="carName">
                <u-radio
                  v-model="item.checked"
                  active-color="#EE4454"
                  shape="circle"
                  :name="item.Name"
                >
                </u-radio>
              </u-radio-group>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <u-popup v-model="show2" mode="bottom" border-radius="16">
      <view class="popupBox">
        <view class="popup_top">
          <view></view>
          <Text>出行类型</Text>
          <u-icon
            name="cross"
            color="#9F9F9F"
            @click="show2 = false"
            size="40"
          ></u-icon>
        </view>
        <scroll-view :scroll-y="true" style="max-height: 420px">
          <view class="txtype">
            <view
              class="typeitem"
              v-for="(item, index) in EnumList"
              :key="index"
              @click="radioChange2(item)"
            >
              <Text>{{ item.Name }}</Text>
              <u-radio-group v-model="EnumName">
                <u-radio
                  v-model="item.Id"
                  active-color="#EE4454"
                  shape="circle"
                  :name="item.Name"
                >
                </u-radio>
              </u-radio-group>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <u-picker
      v-model="showStart"
      mode="time"
      :params="params"
      @confirm="btnStart"
      :default-time="defaultTime"
    ></u-picker>
    <!-- 定制包车的往返时间选择 -->
    <u-popup
      v-model="showTimePopup"
      mode="bottom"
      border-radius="20"
      length="85%"
      :safe-area-inset-bottom="true"
    >
      <canlendar @finish="chosenDateResult" :immediately="true"></canlendar>
    </u-popup>
  </div>
</template>

<script>
import AddressParse from "../address/zh-address-parse.min.js";
import amap from "./components/amap-wx.js";
import canlendar from "./components/time/index.vue";
export default {
  components: {
    canlendar,
  },
  data() {
    return {
      showTimePopup: false,
      info: {},
      contentHeight: 0,
      navs: [{ Name: "司导专车" }, { Name: "景区专车" }],
      active: 1,
      mainColor: "",
      scrollTop: 0,
      headStyle: {},
      nav: 0,
      iscarpool: false,
      classList: [],
      EnumList: [],
      EnumName: "请选择",
      show: false,
      show2: false,
      carName: "请选择",
      value: "",
      defaultTime: "",
      showStart: false,
      Pickcar: "成都", //取车城市
      STime: {}, //显示的出行时间
      ETime: {}, //显示的结束时间
      intervalDay: "", //间隔天数
      address: "", //详情地址
      Ischecked: false,
      msg: {
        StartTime: "", //取车时间
        EndTime: "", //还车时间
        CarType: 0, //服务类型
        LineName: "", //线路名称
        LineDescription: "", //关联城市/景点
        RideNum: 1, //出行人数
        CarClass: 0, //车辆类型
        RegionIds: 0, //地区（省市区：1,2,3）
        IsSpell: 2, //是否拼座 1是 2否
      },
      params: {
        //时间的配置
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
      },
      amapPlugin: null,
      key: "c785085c46d1eb41b1ebe8d1ec7fd945",
      latitude: "",
      longitude: "",

      carMsg: {
        StartCityId: 0,
        StartCityType: "",
        ArriveCityId: 0,
        ArriveCityType: "",

        StartCityName: "",
        ArriveCityName: "",
        Q_Date: "",
        returnId: 1, //暂定1位单程 2为往返
        F_Date: "", //返程时间
        day: 1, //间歇几天
      },
      cardate: "",
      startDate: "",
      showcardate: "",
      showweek: "",
      showcardate2: "",
      showweek2: "",
      showcardate3: "",
      showweek3: "",
      qDate: "",
      fDate: "",
      statusNav: 0,
    };
  },
  created() {
    this.statusNav = uni.getSystemInfoSync().statusBarHeight;
    this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
    this.mainColor = this.$uiConfig.mainColor;
    this.nav = uni.getMenuButtonBoundingClientRect().top;
    this.headStyle.paddingTop = this.statusNav + "px";
    let myDate = new Date();
    myDate = myDate.setDate(myDate.getDate() + 1); //多一天的日期
    myDate = new Date(myDate);
    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 day = myDate.getDay();
    obj.week = this.getweek(day); //星期几
    this.STime = obj;
    this.ETime = obj;
    this.msg.StartTime =
      obj.year +
      "/" +
      obj.month +
      "/" +
      obj.day +
      " " +
      obj.hour +
      ":" +
      obj.minute +
      ":00";
    this.msg.EndTime =
      obj.year +
      "/" +
      obj.month +
      "/" +
      obj.day +
      " " +
      obj.hour +
      ":" +
      obj.minute +
      ":10";

    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 = "半天";
      }
    }
    //获取景区专车的 单程的出发时间
    let carDate = new Date();
    let carMonth =
      carDate.getMonth() + 1 < 10
        ? "0" + (carDate.getMonth() + 1)
        : carDate.getMonth() + 1;
    let carDays =
      carDate.getDate() < 10 ? "0" + carDate.getDate() : carDate.getDate();
    this.carMsg.Q_Date = carDate.getFullYear() + "-" + carMonth + "-" + carDays;
    let carday = carDate.getDay();
    this.startDate = carDate.getFullYear() + "-" + carMonth + "-" + carDays; //从啥时候开始
    this.showcardate = carMonth + "-" + carDays;
    this.showweek = this.getweek(carday); //得到定制专车的周几
    //获取景区专车的 往返情况下的 出发和到达时间
    this.qDate = carDate.getFullYear() + "-" + carMonth + "-" + carDays;
    this.showcardate2 = carMonth + "-" + carDays; //定制专车的返程出发时间
    this.showweek2 = this.getweek(carday); //定制专车的返程出发周几

    let qcarMonth =
      myDate.getMonth() + 1 < 10
        ? "0" + (myDate.getMonth() + 1)
        : myDate.getMonth() + 1;
    let fcarDays =
      myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate();
    let fcarday = myDate.getDay();
    this.fDate = myDate.getFullYear() + "-" + qcarMonth + "-" + fcarDays;
    this.showcardate3 = qcarMonth + "-" + fcarDays; //定制专车的返程返程时间
    this.showweek3 = this.getweek(fcarday); //定制专车的返程 返程周几
  },
  onLoad(options) {
    this.init(); //获取司导首页配置
    this.getCarClassList(); //车辆分类下拉
    this.getOrderListExportEnumList(); //获取出行类型
    this.amapPlugin = new amap.AMapWX({
      key: this.key,
    });
    if (options && options.obj) {
      let carMsg = JSON.parse(decodeURIComponent(options.obj));
      this.carMsg.StartCityId = carMsg.StartCityId;
      this.carMsg.StartCityType = carMsg.StartCityType;
      this.carMsg.ArriveCityId = carMsg.ArriveCityId;
      this.carMsg.ArriveCityType = carMsg.ArriveCityType;
      this.carMsg.StartCityName = carMsg.StartCityName;
      this.carMsg.ArriveCityName = carMsg.ArriveCityName;
      this.active = 1;
    }
  },
  methods: {
    //获取明天的日期
    getDefaultDate() {
      var dd = new Date();
      dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
      var year = dd.getFullYear();
      var mon = dd.getMonth() + 1; //获取当前月份的日期
      var day = dd.getDate();
      return year + "-" + mon + "-" + day;
    },
    godingche() {
      //跳入订车页面
      if (this.carMsg.StartCityName == "") {
        uni.showToast({
          title: "请选择出发地址",
          icon: "none",
        });
        return;
      }
      if (this.carMsg.ArriveCityName == "") {
        uni.showToast({
          title: "请选择到达地址",
          icon: "none",
        });
        return;
      }
      if (this.carMsg.returnId == 2) {
        if (this.qDate == "" || this.fDate == "") {
          uni.showToast({
            title: "请选择往返时间",
            icon: "none",
          });
          return;
        }
        this.carMsg.Q_Date = this.qDate;
        this.carMsg.F_Date = this.fDate;
      }
      //对象编码
      console.log(this.carMsg);
      let obj = encodeURIComponent(JSON.stringify(this.carMsg));
      uni.navigateTo({
        url: "/pages/guidecar/bookaCarList?carMsg=" + obj,
      });
    },
    exchange() {
      //出发地和到达地互换
      let obj = {
        StartCityId: this.carMsg.ArriveCityId,
        StartCityType: this.carMsg.ArriveCityType,
        StartCityName: this.carMsg.ArriveCityName,

        ArriveCityId: this.carMsg.StartCityId,
        ArriveCityType: this.carMsg.StartCityType,
        ArriveCityName: this.carMsg.StartCityName,
      };
      this.carMsg.StartCityId = obj.StartCityId;
      this.carMsg.StartCityType = obj.StartCityType;
      this.carMsg.StartCityName = obj.StartCityName;
      this.carMsg.ArriveCityId = obj.ArriveCityId;
      this.carMsg.ArriveCityType = obj.ArriveCityType;
      this.carMsg.ArriveCityName = obj.ArriveCityName;
    },
    goaddressx(type) {
      if (type == 1) {
        uni.navigateTo({
          url: "/pages/guidecar/pickcarcity2?type=" + type,
        });
      } else {
        if (this.carMsg.StartCityName == "") {
          uni.showToast({
            title: "请先选择出发地",
            icon: "none",
          });
        } else {
          uni.navigateTo({
            url:
              "/pages/guidecar/pickcarcity2?type=" +
              type +
              "&StartCityId=" +
              this.carMsg.StartCityId +
              "&StartCityType=" +
              this.carMsg.StartCityType,
          });
        }
      }
    },
    bindDateChange(e) {
      let value = e.detail.value;
      console.log(value);
      let carDate = new Date(value);
      if (carDate >= new Date()) {
        this.carMsg.Q_Date = value;
        this.cardate = value;
        let carday = carDate.getDay();
        this.showcardate = carDate.getMonth() + 1 + "-" + carDate.getDate();
        this.showweek = this.getweek(carday); //得到定制专车的周几
      } else {
        uni.showToast({
          title: "时间不能小于今天",
          icon: "none",
        });
      }
    },
    chosenDateResult(obj) {
      //往返的日期

      this.qDate = obj.start;
      this.carMsg.day = obj.day;
      this.fDate = obj.end;
      this.showcardate2 = obj.startDay;
      this.showweek2 = obj.startWeek;
      this.showcardate3 = obj.endDay;
      this.showweek3 = obj.endWeek;
      this.showTimePopup = false;
    },
    changeHandler2(e) {
      this.active = e;
    },
    getRegeo() {
      //进入页面获取当前地址位置
      this.amapPlugin.getRegeo({
        success: (data) => {
          this.Pickcar = data[0].regeocodeData.addressComponent.city;
        },
      });
    },
    init() {
      uni.showLoading({
        title: "加载中",
      });
      this.request2(
        {
          url: "/api/AppletGuideCar/GetGuideCarSearchInfo",
          data: {},
        },
        (res) => {
          uni.hideLoading();
          this.info = res.data;
        }
      );
    },
    getCarClassList() {
      this.request2(
        {
          url: "/api/AppletGuideCar/GetCarClassList",
          data: {},
        },
        (res) => {
          this.classList = res.data;
          let obj = {
            Name: "不限",
            Id: 0,
          };
          this.classList.unshift(obj);
          this.classList.forEach((x) => {
            x.checked = false;
          });
          this.carName = this.classList[0].Name;
          this.msg.CarClass = this.classList[0].Id;
          this.classList[0].checked = true;
        }
      );
    },
    getOrderListExportEnumList() {
      this.request2(
        {
          url: "/api/AppletGuideCar/GetOrderListExportEnumList",
          data: {},
        },
        (res) => {
          this.EnumList = res.data;
          this.EnumList.forEach((x) => {
            x.checked = false;
          });
          this.EnumName = this.EnumList[0].Name;
          this.msg.CarType = this.EnumList[0].Id;
          this.EnumList[0].checked = true;
        }
      );
    },
    getPickcar(Name) {
      //选择取消地址
      this.Pickcar = Name;
    },
    getcar(ID, type, Name, cartype) {
      //定制专车的返回地址
      if (cartype == 1) {
        this.carMsg.StartCityId = ID;
        this.carMsg.StartCityType = type;
        this.carMsg.StartCityName = Name;
        this.carMsg.ArriveCityId = 0;
        this.carMsg.ArriveCityType = "";
        this.carMsg.ArriveCityName = "";
      } else {
        this.carMsg.ArriveCityId = ID;
        this.carMsg.ArriveCityType = type;
        this.carMsg.ArriveCityName = Name;
      }
    },
    radioChange(item) {
      //车辆类型
      this.carName = item.Name;
      this.msg.CarClass = item.Id;
      this.show = false;
    },
    radioChange2(item) {
      //出行类型
      this.EnumName = item.Name;
      this.msg.CarType = item.Id;
      this.show2 = false;
    },
    scrollHandler(e) {
      this.scrollTop = e.detail.scrollTop;
    },
    scrollTopHandler() {
      this.scrollTop = 0;
    },
    redirectPrev() {
      uni.navigateBack({
        delta: 1,
      });
    },
    goIsSpell(val) {
      if (val == true) {
        this.msg.IsSpell = 1;
      } else {
        this.msg.IsSpell = 2;
      }
    },
    btnStart(val) {
      if (this.timeType == 1) {
        //出行时间的选择
        this.msg.StartTime =
          val.year +
          "/" +
          val.month +
          "/" +
          val.day +
          " " +
          val.hour +
          ":" +
          val.minute +
          ":00";
        this.STime = val;
        let myDate = new Date(this.msg.StartTime);
        let days = myDate.getDay();
        this.STime.week = this.getweek(days);
      } else {
        //结束时间的选择
        this.msg.EndTime =
          val.year +
          "/" +
          val.month +
          "/" +
          val.day +
          " " +
          val.hour +
          ":" +
          val.minute +
          ":10";
        this.ETime = val;
        let myDate = new Date(this.msg.EndTime);
        let days = myDate.getDay();
        this.ETime.week = this.getweek(days);
      }
      let startTime = new Date(this.msg.StartTime); // 开始时间
      let endTime = new Date(this.msg.EndTime); // 结束时间
      console.log(startTime.getTime(), endTime.getTime());
      if (startTime.getTime() > endTime.getTime()) {
        //如果开始时间大于结束时间吧结束时间赋值和开始时间一样
        this.msg.StartTime =
          val.year +
          "/" +
          val.month +
          "/" +
          val.day +
          " " +
          val.hour +
          ":" +
          val.minute +
          ":00";
        this.msg.EndTime =
          val.year +
          "/" +
          val.month +
          "/" +
          val.day +
          " " +
          val.hour +
          ":" +
          val.minute +
          ":10";
        this.STime = val;
        this.ETime = val;
        let myDate = new Date(this.msg.EndTime);
        let days = myDate.getDay();
        this.STime.week = this.getweek(days);
        this.ETime.week = this.getweek(days);
        this.intervalDay = "半天";
      } else {
        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 = "半天";
          }
        }
      }
    },
    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 "星期日";
      }
    },
    openmap() {
      //打开地图选择详情地址
      let that = this;
      //   #ifdef MP-WEIXIN
      uni.getSetting({
        success(res) {
          console.log("res是否开启授权", res);
          if (!res.authSetting["scope.userLocation"]) {
            uni.authorize({
              scope: "scope.userLocation",
              success() {
                if (that.latitude != "" && that.longitude != "") {
                  that.getYLocation();
                } else {
                  that.getNLocation();
                }
              },
              fail() {
                // 用户点击不允许引导重新获取授权
                console.log("111");
                that.fetchAgainLocation();
              },
            });
          } else {
            // 已经授权了就会直接进入地图
            if (that.latitude != "" && that.longitude != "") {
              that.getYLocation();
            } else {
              that.getNLocation();
            }
          }
        },
      });
      // #endif
      //   #ifdef MP-ALIPAY

      if (that.latitude != "" && that.longitude != "") {
        that.getYLocation();
      } else {
        that.getNLocation();
      }

      // #endif
    },
    fetchAgainLocation() {
      let that = this;
      uni.getSetting({
        success: (res) => {
          var statu = res.authSetting;
          if (!statu["scope.userLocation"]) {
            uni.showModal({
              title: "是否授权当前位置",
              content:
                "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
              success: (tip) => {
                if (tip.confirm) {
                  uni.openSetting({
                    success: (data) => {
                      console.log(data);
                      //   #ifdef MP-WEIXIN
                      if (data.authSetting["scope.userLocation"]) {
                        uni.showToast({
                          title: "授权成功",
                          icon: "success",
                          duration: 1000,
                        });
                        if (that.latitude != "" && that.longitude != "") {
                          that.getYLocation();
                        } else {
                          that.getNLocation();
                        }
                      } else {
                        uni.showToast({
                          title: "授权失败",
                          icon: "success",
                          duration: 1000,
                        });
                      }
                      // #endif
                    },
                    fail: () => {},
                    complete: () => {},
                  });
                }
              },
            });
          }
        },
        fail: () => {},
        complete: () => {},
      });
    },
    getYLocation() {
      let that = this;
      uni.chooseLocation({
        longitude: that.longitude,
        latitude: that.latitude,
        success: function (res) {
          that.latitude = res.latitude;
          that.longitude = res.longitude;
          that.address = res.address;
          let parseResult = AddressParse(that.address, 0);
          let nameList = [
            parseResult.province,
            parseResult.city,
            parseResult.area,
          ];
          that.getDestination(nameList);
        },
      });
    },
    getNLocation() {
      let that = this;
      uni.chooseLocation({
        success: function (res) {
          that.latitude = res.latitude;
          that.longitude = res.longitude;
          that.address = res.address;
          let parseResult = AddressParse(that.address, 0);
          let nameList = [
            parseResult.province,
            parseResult.city,
            parseResult.area,
          ];
          that.getDestination(nameList);
        },
      });
    },
    getDestination(nameList) {
      this.request2(
        {
          url: "/api/AppletGuideCar/GetDestinationListByNames",
          data: {
            area: nameList,
          },
        },
        (res) => {
          if (res.data.length == 3) {
            this.msg.RegionIds =
              res.data[0].ID + "," + res.data[1].ID + "," + res.data[2].ID;
          } else {
            this.msg.RegionIds = res.data[0].ID + "," + res.data[1].ID + ",0";
          }
        }
      );
    },
    gocity() {
      uni.navigateTo({
        url: "/pages/guidecar/pickcarcity",
      });
    },
    goList() {
      let that = this;
      let msg = that.msg;
      if (msg.RegionIds == 0) {
        uni.showToast({
          title: "接送地址不能为空",
          icon: "none",
        });
        return false;
      }
      let tic = 0;
      that.classList.forEach((x, i) => {
        if (x.Id == msg.CarClass) {
          tic = i;
        }
      });
      uni.navigateTo({
        url:
          "/pages/guidecar/guidecarList?item=" +
          encodeURIComponent(JSON.stringify(msg)) +
          "&tic=" +
          tic +
          "&address=" +
          that.address +
          "&Pickcar=" +
          that.Pickcar,
      });
    },
  },
};
</script>

<style>
.guidecar {
  width: 100%;
  height: 100%;
  background: #ffffff;
}

.guidecar .headStatus {
  overflow: hidden;
  position: relative;
  width: 140vw;
  padding-right: 40vw;
  padding-bottom: 10px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.guidecar .arrow {
  height: 24px;
  margin: 5px 10px;
  width: 24px;
}

.guidecar .headStatus .title {
  font-size: 16px;
  color: #fff;
  line-height: 34px;
}

.guidecar .topbox {
  width: 100%;
  height: 500rpx;
}

.guidecar .content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -50px;
  padding: 10px 0;
}

.guidecar .content_box {
  width: 92%;
  border-radius: 7px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  box-shadow: 0 2px 2px 2px #fbf4f2;
}

.guidecar .c_row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.guidecar .c_row_t {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 15px 0;
}

.guidecar .topB {
  display: flex;
  flex-direction: column;
  height: 45px;
  justify-content: space-between;
}

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

.guidecar .ztext {
  font-size: 28rpx;
  color: #1c1e1f;
  font-weight: bold;
}
.guidecar .ztext2 {
  font-size: 28rpx;
  color: #1c1e1f;
  font-weight: bold;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.guidecar .btnstyle {
  width: 100%;
  height: 44px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 2px 2px #fbced2;
}

.guidecar .popupBox {
  width: 100%;
  padding-bottom: 15px;
  max-height: 500px;
}

.popupBox .popup_top {
  width: 100%;
  height: 45px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}

.popupBox .txtype {
}

.guidecar .typeitem {
  padding: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f5f5f5;
}
.guidecar .ac_o {
  width: calc((100vw - 72px - 30px) / 2);
  height: 40px;
  line-height: 40px;
}
.guidecar .ac_o_h {
  color: #919191;
}
.guidecar .carbtn {
  width: 100%;
  margin-top: 34px;
  height: 44px;
  border-radius: 10px;
  background: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  margin-bottom: 20px;
}
.guidecar .dingzhitop {
  width: 100%;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e2e2e2;
}
.guidecar .dingzhitop_r {
  display: flex;
  align-items: center;
}
.guidecar .dingzhitop_r_item {
  width: 50px;
  height: 28px;
  font-size: 12px;
  border-radius: 5px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guidecar .weixuan {
  border: 1px solid #888888;
  color: #888888;
}
.guidecar .xuanzhong {
  border: 1px solid #111111;
  color: #111111;
  font-weight: bold;
}
.navName {
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 28rpx;
  transition-duration: 0s;
  flex: 1 1 0%;
  position: relative;
}
.navbg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30%;
  opacity: 0.5;
  width: 1.3rem;
  height: 15rpx;
  border-radius: 4rpx;
  background-color: #dfbe6e;
}
</style>
