<template>
  <div class="guide-wrap">
    <nav-bar title="选择国家或地区" :class="{showback: showback}"/>
    <div class="flex wrap pr">
      <div class="country">
        <p
          class="lineHidden"
          :key="item.id"
          :class="{active: country == item.id}"
          @click="selectCountry(item)"
          v-for="item in data">{{item.name}}</p>
      </div>
      <div class="city">
        <template v-for="(item, index) in cityData">
          <div v-if="index == 0" :key="item.id">
            <span :id="item.firstWord">{{item.firstWord}}</span>
            <p
              @click="selectCity(item)"
              >{{item.name}}</p>
          </div>
        </template>
        <template v-for="(item, index) in cityData">
          <div v-if="index != 0" :key="item.id">
            <span :id="item.firstWord" v-if="item.firstWord != cityData[index-1].firstWord">{{item.firstWord}}</span>
            <p
              @click="selectCity(item)"
              >{{item.name}}</p>
          </div>
        </template>
      </div>
      <div id="cityLine">
        <a
          :href="'#' + item"
          v-for="item in alphabetData"
          :key="item"
        >{{item}}</a>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";

export default {
  name: "Guide",
  components: {
    NavBar
  },
  data() {
    return {
      showback: false,
      data: [],
      cityData: [],
      alphabetData: [],
      country: null,
      city: null,
      isService: false,
      serviceCityItem: {}
    };
  },
  created() {
    // 判断页面来源
    this.$util.sessionStorage.fetch("isService")
      ? (this.isService = true)
      : (this.isService = false);
    // 获取国家城市
    if (this.isService) {
      this.getCountry();
    } else {
      let countryItems = this.$store.state.countryArr;
      countryItems.length ? (this.data = countryItems) : this.getCountry();
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      !from.params.cityTag ? (vm.showback = true) : (vm.showback = false);
    });
  },
  methods: {
    // 设置国家索引top高度
    setTop() {
      let el = document.getElementById("cityLine");
      el.style.top =
        (document.documentElement.offsetHeight - el.offsetHeight) / 2 + "px";
    },
    // 选择国家
    selectCountry(item) {
      this.country = item.id;
      this.serviceCityItem.countryId = item.id;
      this.serviceCityItem.countryName = item.name;
      this.data.forEach(element => {
        if (element.id === item.id) {
          this.cityData = element.son;
          this.setTop();
          let alphabetData = [];
          element.son.forEach(element => {
            alphabetData.push(element.firstWord);
          });
          this.alphabetData = [...new Set(alphabetData)];
          this.setTop();
        }
      });
    },
    // 选择城市
    selectCity(item) {
      let lang = this.$store.state.langStr;
      if (this.isService) {
        this.serviceCityItem.cityId = item.id;
        this.serviceCityItem.cityName = item.name;
        this.$util.sessionStorage.save(
          "serviceCityItem",
          JSON.stringify(this.serviceCityItem)
        );
        this.$router.go(-1);
      } else {
        this.city = item.id;
        this.$store.commit("setCityItemObj", item);
        this.$util.storage.save("CityItem", item);
        this.$router.push({
          path: `/${lang}/${item.other_name}`
        });
      }
    },
    // 获取国家城市
    getCountry() {
      let params = {};
      params.url = this.$apis.api_national_real_all_city;
      this.$net.req(params, this).then(
        res => {
          this.data = res.data;
          this.$store.commit("setCountryArr", res.data);
          this.selectCountry(res.data[0]);
        },
        e => {
          console.log(e);
        }
      );
    }
  }
};
</script>

<style scoped lang='less'>
.guide-wrap {
  height: 100vh;
  overflow: hidden;
  .country {
    height: calc(100vh - 44px);
    overflow-y: auto;
    width: 105px;
    flex-shrink: 0;
    background: rgba(249, 249, 249, 1);
    p {
      width: 105px;
      height: 54px;
      font-size: 16px;
      font-weight: 600;
      color: #222;
      background: rgba(249, 249, 249, 1);
      position: relative;
      display: flex;
      align-items: center;
      padding: 0 0 0 20px;
    }
    p:before {
      content: "";
      position: absolute;
      width: 3px;
      height: 17px;
      background: rgba(249, 249, 249, 1);
      left: 11px;
      top: 19px;
    }
    p.active {
      background: rgba(255, 255, 255, 1);
      color: rgba(255, 82, 61, 1);
    }
    p.active:before {
      background: rgba(255, 82, 61, 1);
    }
  }
  .city {
    height: calc(100vh - 44px);
    overflow-y: auto;
    background: #fff;
    width: 100%;
    flex-shrink: 0;
    p,
    span {
      height: 38px;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: #222;
      padding: 0 0 0 15px;
    }
  }
  #cityLine {
    position: fixed;
    right: 0;
    top: 20%;
    display: flex;
    width: 22px;
    flex-direction: column;
    z-index: 2;
    a {
      width: 100%;
      text-align: center;
      height: 13px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
      line-height: 13px;
      margin: 0 0 2px;
    }
  }
}
</style>
