<template>
  <view class="pickcarcity" :style="{ height: contentHeight }">
    <view class="qcity">
      <view class="ctrl-box">
        <u-search
          action-text="搜索"
          :focus="true"
          :show-action="true"
          radius="40"
          v-model="searchKey"
          @search="searchHandler"
          @custom="searchHandler"
          @change="changeHandler"
        ></u-search>
      </view>
      <view v-if="show == true">
        <scroll-view :scroll-y="true" style="height: calc(100vh - 50px)">
          <view class="txtype">
            <view
              class="list-cell"
              v-for="(x, index) in searchList"
              :key="index"
              @click="goback(x, 2)"
            >
              {{ x.Name }}
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="kaitong" v-if="show == false">
        <div style="width: 100%">
          <span style="color: #9a9a9a; font-size: 12px">已开通城市</span>
        </div>
        <view
          v-for="(item, index) in RegionList"
          :key="index"
          class="region"
          @click="goback(item, 1)"
        >
          {{ item.RegionName }}
        </view>
      </view>

      <div style="height: calc(100vh - 50px)" v-if="show == false">
        <u-index-list :scrollTop="scrollTop">
          <view v-for="(item, index) in indexList" :key="index">
            <u-index-anchor :index="item.ti" />
            <view
              class="list-cell"
              v-for="(x, y) in item.children"
              :key="y"
              @click="goback(x, 2)"
            >
              {{ x.Name }}
            </view>
          </view>
        </u-index-list>
      </div>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: "取车城市",
      scrollTop: 0,
      contentHeight: 0,
      mainColor: "",
      secondary: "",
      RegionList: [],
      cityList: [],
      searchList: [], //搜索出来的
      searchKey: "",
      show: false,
      indexList: [
        { ti: "A" },
        { ti: "B" },
        { ti: "C" },
        { ti: "D" },
        { ti: "E" },
        { ti: "F" },
        { ti: "G" },
        { ti: "H" },
        { ti: "I" },
        { ti: "J" },
        { ti: "K" },
        { ti: "L" },
        { ti: "M" },
        { ti: "N" },
        { ti: "O" },
        { ti: "P" },
        { ti: "Q" },
        { ti: "R" },
        { ti: "S" },
        { ti: "T" },
        { ti: "U" },
        { ti: "V" },
        { ti: "W" },
        { ti: "X" },
        { ti: "Y" },
        { ti: "Z" },
      ],
    };
  },
  onLoad(option) {},
  created() {
    this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
    this.mainColor = this.$uiConfig.mainColor;
    this.secondary = this.$uiConfig.secondary;
    this.init(); //城市列表
    this.getSiteRegionList();
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
  },
  methods: {
    init() {
      uni.showLoading({
        title: "加载中",
      });
      this.request2(
        {
          url: "/api/AppletGuideCar/GetAllList",
          data: {},
        },

        (res) => {
          this.cityList = res.data;
          this.indexList.forEach((x) => {
            x.children = [];
            this.cityList.forEach((j) => {
              let obj = {};
              if (x.ti == j.PinYin.substr(0, 1)) {
                x.children.push(j);
              }
            });
          });

          uni.hideLoading();
        }
      );
    },
    getSiteRegionList() {
      this.request2(
        {
          url: "/api/AppletGuideCar/GetSiteRegionList",
          data: {},
        },

        (res) => {
          this.RegionList = res.data;
        }
      );
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    goback(item, type) {
      let Name;
      if (type == 1) {
        Name = item.RegionName;
      } else {
        Name = item.Name;
      }
      let pages = getCurrentPages(); // 当前页面
      let beforePage = null;
      beforePage = pages[pages.length - 2]; // 前一个页面
      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
          success: function () {
            beforePage.$vm.getPickcar(Name); // 执行前一个页面的方法
          },
        });
      }, 100);
    },
    searchHandler(val) {
      if (val != "") {
        this.searchList = [];
        this.cityList.forEach((x) => {
          if (x.Name.indexOf(val) != -1) {
            this.searchList.push(x);
          }
        });

        this.show = true;
      } else {
        this.show = false;
      }
    },
    changeHandler(val) {
      if (val == "") {
        this.show = false;
      }
    },
  },
};
</script>

<style>
.pickcarcity {
  background: #ffffff;
}
.pickcarcity .qcity {
}
.pickcarcity .list-cell {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 24rpx;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
  position: relative;
}

.pickcarcity .anchor-text {
  color: red;
}
.pickcarcity .kaitong {
  width: 100%;
  padding: 15px;
  background: #faf8f9;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.pickcarcity .region {
  width: 200rpx;
  height: 68rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;
  margin-top: 30rpx;
}
.pickcarcity .ctrl-box {
  padding: 5px 10px;
}
.pickcarcity .txtype {
  width: 100%;
  background: #fff;
  height: calc(100vh - 50px);
}
</style>
