<style lang="less">
.component-select-switch {
  width: 192rpx;
  height: 64rpx;
  background: rgba(2, 2, 82, 0.05);
  border-radius: 96rpx;
}

.component-select-switch .item {
  display: inline-block;
  text-align: center;
  width: 50%;
  font-size: 24rpx;
  line-height: 64rpx;
  color: rgba(13, 13, 61, 0.86);
}

.component-select-switch .item.selected {
  background: linear-gradient(0deg, #ffffff, #ffffff);
  border: 2rpx solid rgba(2, 2, 82, 0.05);
  box-sizing: border-box;
  box-shadow: 0rpx 4rpx 4rpx rgba(1, 1, 51, 0.03);
  border-radius: 96rpx;
}
</style>

<template>
  <view class="{{(('component-select-switch') + ' ' +(className))}}">
    <block v-for="(item, idx) in options">
      <view
        class="{{(('item') + ' ' +((selected == item.value)?'selected': ''))}}"
        data-value="{{item.value}}"
        @tap.stop="changeOptions"
      >{{item.text}}</view>
    </block>
  </view>
</template>

<script>
import wepy from '@wepy/core';
import config from '@/config';

wepy.component({
  data: {
    // selectedOption: ''
  },
  props: {
    options: [],
    selected: '',
    className: ''
  },
  didMount() {
    // this.selectedOption = this.selected;
  },
  didUpdate() {},
  didUnmount() {},
  methods: {
    changeOptions(e) {
      let value = e.target.dataset.value;
    //   this.selectedOption = selected;
      this.$emit('component-select-switch-change', value); 
    }
  }
});
</script>