<!--
  环境变量切换组件

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/04/12 10:14
-->
<template>
  <view>
    <!-- 当包含环境变量 && 不是生产环境时  -->
    <view
      class="login-test"
      v-if="
        vdata.currentEnvEnum &&
        vdata.currentEnvEnum != appConfig.ENV_ENUM.PRODUCTION
      "
      ><text>{{ vdata.currentEnvEnum }}</text></view
    >
    <!-- 切换环境提示 -->
    <uni-popup ref="uniPopupRef" :mask-click="false" :open="true">
      <view class="uni-popup-dialog">
        <image
          @tap="uniClose"
          class="uni-dialog-close"
          src="/static/indexImg/del.svg"
          mode="scaleToFill"
        />
        <view class="uni-dialog-button-box">
          <view
            class="uni-dialog-button"
            style="border-bottom: 2rpx solid #e1e1e1"
            @click="changeEnvFunc(appConfig.ENV_ENUM.DEVELOPMENT)"
            ><text>开发环境</text></view
          >
          <view
            class="uni-dialog-button"
            style="border-bottom: 2rpx solid #e1e1e1"
            @click="changeEnvFunc(appConfig.ENV_ENUM.TEST)"
            ><text>测试环境</text></view
          >
          <view
            class="uni-dialog-button"
            style="border-bottom: 2rpx solid #e1e1e1"
            @click="changeEnvFunc(appConfig.ENV_ENUM.DEMO)"
            ><text>演示环境</text></view
          >
          <view
            class="uni-dialog-button"
            @click="changeEnvFunc(appConfig.ENV_ENUM.PRODUCTION)"
            ><text>生产环境</text></view
          >
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import appConfig from '@/config/appConfig.js'
import envConfig from '@/env/config.js'
import storageManage from '@/commons/utils/storageManage.js'
import { $getSiteInfos } from '@/http/apiManager.js';

const uniPopupRef = ref()

// emit 
const emit = defineEmits(['change'])

const vdata = reactive({
  currentEnvEnum: '', // 当前环境变量
  count: 0, // 当前点击次数
})

onMounted(() => {
  vdata.currentEnvEnum = storageManage.env()
})

// 父组件的点击事件
function tapFunc() {
  vdata.count++
  if (vdata.count >= 10) {
    vdata.count = 0
    uniPopupRef.value.open()
  }
}

// 改变环境函数
function changeEnvFunc(envMode) {
  vdata.currentEnvEnum = envMode //显示信息
  envConfig.changeEnv(envMode) //更改请求包
  storageManage.env(envMode) // 改变存储
  
  // 更改公司信息
  $getSiteInfos().then( ( { bizData } ) => {
  	storageManage.siteInfos(bizData)
	
	// 调起外层页面
	emit("change")
	
  })
  
  uniPopupRef.value.close() //弹层关闭
}
// 关闭弹窗
function uniClose() {
  uniPopupRef.value.close()
}
defineExpose({ tapFunc })
</script>

<style lang="scss" scoped>
.uni-popup-dialog {
  position: relative;
  box-sizing: border-box;
  width: 500rpx;
  height: 600rpx;
  overflow: hidden;
  border-radius: 30rpx;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .uni-dialog-close {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    width: 50rpx;
    height: 50rpx;
  }
  .uni-dialog-button-box {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    text-align: center;
    padding: 0 40rpx;
    .uni-dialog-button {
      width: 100%;
      height: 150rpx;
      line-height: 150rpx;
      text {
        font-size: 40rpx;
      }
    }
  }
}

.login-test {
  position: absolute;
  bottom: 70rpx;
  width: 100%;
  text-align: center;
  text {
    color: #666f80;
  }
}
</style>
