<template>
  <el-collapse-item :name="keyName" :title="title">
    <el-radio-group v-model="value" v-if="options.length > 0" @input="input">
      <el-radio label="" class="order-radio" v-if="noLimit">不限</el-radio>
      <el-radio v-for="(item,index) in options" :label="item.value || item.value == 0?item.value:item.label" :key="index" class="order-radio">
        {{item.label}}
        <template v-if="item.slotName">
          <slot :name="item.slotName" />
        </template>
      </el-radio>
      <slot />
    </el-radio-group>
  </el-collapse-item>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class OrderCheckbox extends Vue {
  value:any=''
  activeNames:Array<any>=[1]
  checkAll= false
  isIndeterminate= false

  @Prop()
  noLimit?:boolean

  @Prop()
  title:string|undefined

  @Prop() 
  options!:Array<any>

  @Prop()
  keyName:any

  getValue(){
    return this.value;
  }

  clear(){
    this.value = ''
  }

  input(){
    this.$emit('radioChange',this.value);
  }


}
</script>

<style lang="scss" scoped>
.order-radio{
  margin-bottom: 8px;
}
</style>