<!-- *******************  多选框  *******************  -->
<template>
  <view class="list">
    <view
      v-for="(item, index) in settings"
      :key="index"
      :class="{ txt: true, active: checkStatus(item.key) }"
      @click="setValue(item.key)"
      >{{ item.label }}
    </view>
  </view>
</template>

<script>
import arrMixin from './arrMixin'
export default {
  name: 'XhRadio',
  components: {},
  mixins: [arrMixin],
  props: {},
  filters: {},
  data() {
    return {}
  },
  computed: {
    settings() {
      return this.item.fieldsOptions || []
    },
  },
  watch: {},
  mounted() {},
  methods: {
    checkStatus(item) {
      if (!item) {
        return false
      }
      const dataValue = this.dataValue
      let flag = Array.isArray(dataValue) && dataValue.indexOf(item) > -1
      return flag
    },
    setValue(txt) {
      if (this.disabled) return
      const dataValue = this.dataValue || []
      let idx = dataValue.indexOf(txt)
      if (idx > -1) {
        dataValue.splice(idx, 1)
      } else {
        dataValue.push(txt)
      }
      this.dataValue = dataValue
      this.valueChange(this.dataValue)
    },
  },
}
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  .txt {
    color: #333;
    padding: 10rpx 30rpx;
    margin: 10rpx;
    background: #f4f5f7;
    border-radius: 10rpx;
    display: flex;
    flex-wrap: wrap;
    line-height: 50rpx;
    max-width: 46%;
    align-items: center;
    &.active {
      background-color: #2272ff;
      color: #fff;
    }
  }
}
</style>
