<template>
  <!--  IP选择器 -->
  <view class="">
    <picker mode='selector' @change="selectIP" @cancel="selectIPStatus = false; IPclickNum = 0" :value="selectIPindex"
      :range="IPArray" range-key="title">
      <view class="uni-input" style="text-align: center;color: #fff;background-color: #000;" v-if="selectIPStatus">
        <text>当前服务器：</text>
        <text>{{ IPArray[selectIPindex].title }}</text>
      </view>
    </picker>

    <!-- 自定义IP弹出框 -->
    <uniPopup ref="changeIPRef">
      <view class=""
        style="width: 80vw;height: 30vh;background-color: #FFFFFF;border-radius: 20rpx;padding: 30rpx;text-align: center;">
        <view style="width: 100%;font-size: 40rpx;border-bottom: 1rpx solid #e3e3e3;margin-bottom: 20rpx;">自定义服务器</view>
        <view class="">
          <textarea v-model="ipConfigChange" style="border: 1rpx solid #e3e3e3;padding: 20rpx;" :maxlength="80" focus
            auto-height placeholder-style="color:#ffee89" placeholder="注意使用英文标点符号与大小写" />
          <text style="color: #dadada;font-size: 20rpx;">参考案例：<text
              style="color: #ef6d53;">https://www.baidu.com/</text></text>
          <button type="primary" style="position: absolute;bottom: 0;width: 90%;margin-bottom: 20rpx;"
            @tap="comfirmSelectIP(selectIPindex, ipConfigChange)">确定</button>
        </view>
      </view>
    </uniPopup>
  </view>
</template>

<script>
import uniPopup from "./uni-popup/uni-popup"
export default {
  name: "egg",
  components: {
    uniPopup
  },
  props: {
    // 时间范围限制(单位毫秒：1s=1000ms)
    IPArray: {
      type: Array
    },
    defaultIP: {
      type: String,
    },
    time: {
      type: Number,
      default: 1200
    },
    // 触发条件
    clickNum: {
      type: Number,
      default: 8
    }
  },
  data() {
    return {
      ipConfigChange: "", // 自定义IP
      selectIPStatus: false,
      selectIPindex: 0,
      IPclickNum: 0,
    }
  },
  methods: {
    // 打开IP选择器 使用方法 this.$refs.switchIp.openSelectIP()
    openSelectIP() {
      this.IPclickNum++
      let countNum = this.clickNum // 点击触发次数配置
      // if (this.IPclickNum > (countNum - countNum / 2) && this.IPclickNum < countNum) {
      //   uni.showToast({
      //     title: '距离打开隐藏关卡，还差' + (countNum - this.IPclickNum) + '步',
      //     icon: "none",
      //     duration: 800
      //   });
      // }
      if (this.IPclickNum >= countNum) {
        this.IPclickNum = 0
        // 查找当前IP配置
        this.IPArray.find((item, index) => {
          if (item.ipConfig == this.defaultIP) {
            this.selectIPindex = index
          }
        })
        uni.showToast({
          title: '您当前正在使用IP:' + this.defaultIP,
          icon: "none",
          duration: 3000
        });
        this.selectIPStatus = true // 显示IP配置
      }
      // 时间限制
      setTimeout(() => {
        this.IPclickNum = 0
      }, this.time)
    },
    // 选择指定IP
    selectIP(event) {
      // 设置选中下标
      this.selectIPindex = event.detail.value
      // 选择自定义IP
      if (event.detail.value === 2) {
        // 为自定义IP赋默认值，方便快速修改
        this.ipConfigChange = this.IPArray[event.detail.value].ipConfig
        // 打开自定义IP弹出框
        this.$refs.changeIPRef.open()
      }
      this.comfirmSelectIP(event.detail.value)
    },
    // 自定义IP确定更改
    comfirmSelectIP(index, value) {
      // 自定义IP配置
      if (value && index === 2) {
        this.IPArray[index].ipConfig = value
        this.$refs.changeIPRef.close()
      }
      // 公用设置
      this.selectIPStatus = false
      // 修改IP配置
      this.$emit("change", this.IPArray[index])
      uni.showToast({
        title: '请注意！正在使用' + JSON.stringify(this.IPArray[index]),
        icon: "none",
        duration: 3000
      });
    },
  }
}
</script>
