<template>
  <u-popup :show="show" mode="bottom">
    <view class="popup-view">
      <view class="title">
        <u-icon
          @tap="$emit('close')"
          class="btn"
          size="42rpx"
          name="arrow-leftward"
        ></u-icon>
        请选择区号
      </view>
      <u-index-list
        ref="uIndexList"
        class="scroll-view"
        :index-list="indexList"
        :customNavHeight="0"
      >
        <template v-for="(item, index) in countoryList">
          <!-- #ifdef APP-NVUE -->
          <u-index-anchor
            height="64rpx"
            :text="indexList[index]"
            :key="index"
          ></u-index-anchor>
          <!-- #endif -->
          <u-index-item :key="index">
            <!-- #ifndef APP-NVUE -->
            <u-index-anchor
              height="64rpx"
              :text="indexList[index]"
            ></u-index-anchor>
            <!-- #endif -->
            <view v-for="(cell, i) in item" :key="i">
              <view
                @click="selectCountryTap(index, cell)"
                class="list-cell"
                :class="cell.en === country ? 'list-cell-active' : ''"
              >
                <view class="cell-left">
                  <view class="cn-name">{{ cell.cn }}</view>
                  <view class="en-name">{{ cell.en }}</view>
                </view>
                <view class="cell-right">{{ cell.code }}</view>
              </view>
            </view>
          </u-index-item>
        </template>
      </u-index-list>
    </view>
  </u-popup>
</template>

<script>
import countory from "./country.js";
export default {
  name: "countryCode",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    anchor: {
      type: [String, Number],
      default: "",
    },
    country: {
      type: [String, Object],
      default: "",
    },
  },
  data() {
    return {};
  },
  computed: {
    indexList() {
      const list = [];
      countory.list.forEach((v) => {
        list.push(v.letter);
      });
      return list;
    },
    countoryList() {
      const list = [];
      countory.list.forEach((v) => {
        list.push(v.data);
      });
      return list;
    },
  },
  watch: {
    show(state) {
      if (state) {
        this.$nextTick(() => {
          // uni.$u.config.unit = "px";
          this.$refs.uIndexList.setValueForTouch(this.anchor);
        });
      } else {
        // uni.$u.config.unit = "rpx";
      }
    },
  },
  destroyed() {
    // uni.$u.config.unit = "rpx";
  },
  mounted() {},
  methods: {
    selectCountryTap(index, data) {
      let postData = {
        anchor_index: index,
        country_en: data.en,
        country_cn: data.cn,
        country_code: data.code,
      };
      this.$emit("select", postData);
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-view {
  width: 100%;
  height: 100vh;
  background: #fff;
  .title {
    text-align: center;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    .btn {
      position: absolute;
      left: 0;
      top: 0;
      padding: 24rpx 30rpx;
    }
  }
}
::v-deep .u-index-bar__sidebar {
  z-index: 999;
}
.scroll-view {
  width: 100%;
  height: 100%;

  .list-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx;
    height: 110rpx;
    border-bottom: 1px solid #f9f9fa;

    .cell-left {
      flex: 0 0 60%;
      min-width: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .cn-name {
        color: #1b252f;
        font-size: 28rpx;
      }

      .en-name {
        color: #7d8894;
        font-size: 24rpx;
      }
    }

    .cell-right {
      flex: 0 0 40%;
      display: flex;
      justify-content: flex-end;
      color: #7d8894;
      font-size: 26rpx;
      padding-right: 20rpx;
    }
  }

  .list-cell-active {
    background-color: #f9f9fa;

    .cell-left {
      .cn-name,
      .en-name {
        color: #416fff;
      }
    }

    .cell-right {
      color: #416fff;
    }
  }
}
</style>
