<template>
  <div>
    <ibps-link
      v-if="type==='link'"
      type="primary"
      @click="show = true"
    >
      <van-icon name="wifi" class-prefix="ibps-icon" /> {{ $t('platform.my.switchEnvironment') }}
    </ibps-link>
    <van-cell
      v-else
      :title="$t('platform.my.switchEnvironment')"
      icon-prefix="ibps-icon"
      icon="wifi"
      is-link
      size="large"
      @click="show = true"
    />

    <van-action-sheet
      v-model="show"
      :actions="actions"
      :cancel-text="$t('cancel')"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import { SINGLE_APP, BASE_API } from '@/api/baseUrl'
import IbpsLink from '@/components/ibps-link'
export default {
  components: {
    IbpsLink
  },
  props: {
    type: {
      type: String
    }
  },
  data() {
    return {
      show: false,
      custom: BASE_API(),
      customSingle: SINGLE_APP()
    }
  },
  computed: {
    ...mapState('ibps/api', [
      'base',
      'single'
    ]),
    ...mapGetters('ibps/api', [
      'options'
    ]),
    actions() {
      return this.options.map((option) => {
        option.name = this.getTitle(option.name)
        option.disabled = this.base === option.value
        return option
      })
    }
  },
  methods: {
    ...mapActions('ibps/api', {
      baseUrlSet: 'set',
      baseUrlOptionRemove: 'remove'
    }),
    onClose() {
      this.active = false
      this.$router.replace('/refresh')
    },
    onSelect(action) {
      const { value, single } = action
      this.baseUrlSet({
        value,
        single,
        vm: this
      })
    },
    onRemove(value) {
      this.baseUrlOptionRemove(value)
    },
    getTitle(name) {
      const nameLower = name.toLowerCase()
      if (this.$te('common.env.' + nameLower)) {
        return this.$t('common.env.' + nameLower)
      }
      return name
    }
  }
}
</script>

