<template>
  <view v-if="isNotReleaseEnv" class="container">
    <picker :value="value" :range="envList" @change="bindPickerChange">
      <image class="goods-order" src="https://img.lkbang.net/xcx/dev.png" />
      <text>{{ currentEnv }}</text>
    </picker>
  </view>
</template>
<script>
import qaList from "./qa.api";
import { mapActions, mapState } from "vuex";
export default {
  name: "QASelector",
  data() {
    return {
      envList: [],
      value: ""
    };
  },
  computed: {
    currentEnv() {
      return this.envList[this.value] || "切换环境";
    },
    ...mapState({
      isNotReleaseEnv: state => state.qa.isNotReleaseEnv,
      localEnv: state => state.qa.currentEnv
    })
  },
  mounted() {
    this.isNotReleaseEnv && this.getList();
  },
  methods: {
    ...mapActions({
      changeEnvTag: "changeEnvTag"
    }),
    getList() {
      this.envList = qaList.map(item => item.name);
      this.value = this.envList.findIndex(item => item === this.localEnv);
      // this.envList.push = "线上(暂时无效)";
    },
    bindPickerChange: function(e) {
      this.value = e.target.value;
      this.changeEnvTag(this.currentEnv);
      const storageKeyMap = ["token", "openid", "phone", "userAuthInfo", "userBaseInfo", "orderNo"];
      storageKeyMap.forEach(item => {
        uni.removeStorageSync(item);
      });
      uni.showModal({
        title: "提示",
        content: "切换成功，本地登录信息已清除，请重新登录后继续访问",
        showCancel: false,
        success: res => {
          if (res.confirm) {
            this.$emit("clear", true);
            uni.$emit("qaEnvChange");
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  image {
    width: 80rpx;
    height: 80rpx;
    display: block;
  }
  text {
    display: block;
    text-align: center;
    color: #f00;
  }
}
</style>
