<template>
  <div>
    <div class="relative box" :class="cls" v-for="(item,index) in items" :key="item[keyValue]">
      <div class="span" :class="{active:item.checked==1}" @click="selectHandle(index,item.checked)">
        {{item[keyName]}}
        <slot :name="'slot'+index"></slot>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'ZghSelectButton',
    props: {
      type: {
        type: String,
        default: 'radio'
      },
      keyValue: {
        type: String,
        default: 'value'
      },
      keyName: {
        type: String,
        default: 'name'
      },
      name: {
        type: String,
        default: 'SelectButton'
      },
      cls: {
        type: String,
        default: 'pd10'
      },
      value: {
        default() {
          return [{
            value: '1',
            name: 'name1'
          }]
        }
      },
      list: {
        default() {
          return [{
            value: '1',
            name: 'name1'
          }, {
            value: '2',
            name: 'name2'
          }]
        }
      }
    },
    data() {
      return {
        selectValue: this.value,
        initSelectValue: this.value,
        items: this.list
      }
    },
    watch: {
      selectValue(val) {
        this.$emit('input', val);
      },
      value() {
        this.selectValue = this.value;
      }
    },
    mounted() {

      if (this.initSelectValue.length > 0) {
        let newItems = []
        this.initSelectValue.forEach((val) => {
          this.items.forEach((item) => {
            item.checked = item[this.keyValue] == val[this.keyValue] ? 1 : 0
            newItems.push(item)
          })
        })
        this.items = newItems
      }
    },
    methods: {
      selectHandle(index, checked) {
        if (this.type == 'checkbox') {
          let isCheck = checked == 1 ? 0 : 1;
          let item = Object.assign({}, this.items[index], {checked: isCheck});
          this.$set(this.items, index, item);
          this.selectValue=this.items.filter((val)=>{
            return val.checked==1
          })
        } else {
          this.items.forEach((val, idx) => {
            val.checked = index == idx
          })

          this.selectValue.push(this.items[index]);
        }
        console.log(this.selectValue)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import url("../../assets/config.less");

  .box {
    .span {
      cursor: pointer;

    }
    span, i {
      transition: all .2s;
    }
  }

  .zgh-radio-box {
    display: inline-block;
    vertical-align: middle;
    .span,
    .checkbox,
    input[type="checkbox"],
    input[type="radio"] {
      &:checked,
      &.active {
        color: @common_cl;
        i {
          color: @common_cl;
        }
      }
    }
  }

  .zgh-checkbox-button,
  .zgh-radio-button {
    display: inline-block;
    text-align: center;
    margin-top: 12px;
    margin-right: 8px;
    margin-bottom: 0;
    /*font-weight: normal;*/
    input[type="checkbox"],
    input[type="radio"],
    .span,
    .checkbox {
      padding: 8px 15px;
      border-radius: 8px;
      background: #eeeeee;
      width: 100%;
      height: 100%;
      &:checked,
      &.active {
        background: @common_cl;
        color: #fff;
        border-color: @common_cl;
        i {
          color: #fff;
        }

      }
    }
  }

  .zgh-radio-bar {
    display: block;
    width: 100%;
    input[type="radio"],
    input[type="checkbox"],
    .span,
    .checkbox {
      display: block;
      width: 100%;
      text-align: left;
      font-weight: normal;
      i {
        float: right;
      }

      &:checked,
      &.active {
        color: @common_cl;
        i {
          color: @common_cl;
        }
      }

    }
  }
</style>
