<template>
  <div class="radio">
    <div v-if="Disabled">
      <div
        v-for="(item,index) in Data"
        :key="index"
        class="item"
      >
        <span
          v-if="state"
          :class="{'foucss': foucs(item,Value)}"
        >{{item.key}}</span>
        <span
          v-else
          :class="{'foucs': foucs(item,Value)}"
        >{{item.key}}</span>
        <span v-html="item.label"></span>
      </div>
    </div>
    <div v-else>
      <div
        v-for="(item,index) in Data"
        :key="index"
        class="item"
        @click="Success(item)"
      ><span :class="{'foucs': foucs(item,Value)}">{{item.key}}</span><span v-html="item.label"></span></div>
    </div>
  </div>
</template>
<script>
// [{ key: "A", label: '公园' }, { key: "B", label: '公园' }, { key: "C", label: '公园' }, { key: "D", label: '公园' }]
export default {
  props: {
    Data: {
      type: Array,
      default: []
    },
    Value: {
      type: Array,
      default: []
    },
    Disabled: {
      type: Boolean,
      default: false
    },
    state: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      value: [],//储存记忆
    }
  },
  created () {
    this.State();
  },
  methods: {
    State () {
      let lock = [];
      this.Data.forEach(item => {
        if (item.state) {
          this.Success(item);
          lock.push(item.state);
        };
      })
      if (lock.length == 0) this.$emit('Func', [])
    },
    foucs (item, value) {
      let lock = true, len = value.length, i = 0;
      if (len == 0) return false;
      do {
        if (item.key == value[i].key) return true;
        i++;
        if (i >= len) lock = false;
      } while (lock)
    },
    Success (data) {
      let data_clear = JSON.parse(JSON.stringify(data)), value = [], lock = false;
      this.value.forEach(item => {
        if (item.key != data_clear.key) value.push(item);
        if (item.key == data_clear.key) lock = true;
      })
      lock ? '' : value.push(data_clear);
      this.value = value;
      this.$emit('Func', value)
    }
  },
  watch: {
    Data (val, oldval) {
      this.value = [];
      this.State();
    }
  }
}
</script>
<style lang="less" scoped>
.radio {
  .item {
    font-size: 12px;
    margin: 10px 0;
    cursor: pointer;
    & > span:first-child {
      background-color: #eee;
      border-radius: 50%;
      width: 14px;
      line-height: 14px;
      text-align: center;
    }
    span {
      display: inline-block;
      padding: 5px;
    }
  }
  .foucs {
    background-color: #67c23a !important;
    color: #fff;
  }
  .foucss {
    background-color: #f03 !important;
    color: #fff;
  }
}
</style>