<template>
  <div class="combo">
    <div class="title"><span class="point"></span>请选择套餐</div>
    <a-radio-group
      class="items-radios"
      v-if="combos.type === '1'"
      v-model="value"
      @change="onChange"
    >
      <ul class="items">
        <li class="item" v-for="(item, index) in combos.items" :key="index">
          <a-radio :style="radioStyle" :value="item.id">
            {{ item.title }}
          </a-radio>
        </li>
      </ul>
    </a-radio-group>

    <ul class="items">
      <li>
        <a-checkbox-group
          :options="combos2.items"
          v-model="chkvalue"
          @change="onChange"
        >
        </a-checkbox-group>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "componentName",
  components: {},
  props: {},
  data() {
    return {
      value: 1,
      chkvalue: [],
      combos: {
        type: "2",
        items: [
          {
            id: 0,
            title: "21招商信诺-银保客户-豪华套餐女未婚",
          },
          {
            id: 1,
            title: "22招商信诺-银保客户-豪华套餐女未婚",
          },
          {
            id: 2,
            title: "23招商信诺-银保客户-豪华套餐女未婚",
          },
          {
            id: 3,
            title: "24招商信诺-银保客户-豪华套餐女未婚",
          },
        ],
      },
      combos2: {
        type: "1",
        items: [
          {
            value: 0,
            label: "21招商信诺-银保客户-豪华套餐女未婚",
          },
          {
            value: 1,
            label: "22招商信诺-银保客户-豪华套餐女未婚",
          },
          {
            value: 2,
            label: "23招商信诺-银保客户-豪华套餐女未婚",
          },
          {
            value: 3,
            label: "24招商信诺-银保客户-豪华套餐女未婚",
          },
        ],
      },
    };
  },
  methods: {
    onChange(checkedValues) {
      console.log("checked = ", checkedValues);
      console.log("value = ", this.chkvalue);
    },
  },
};
</script>

<style lang="less" scoped>
.combo {
  .items-radios {
    margin-top: 20px;
  }
  .items {
    width: 400px;
    .item {
      background: #fafafa;
      border-radius: 2px;
      width: 400px;
      margin-top: 20px;
      height: 36px;
      line-height: 36px;
      font-size: 14px !important;
      padding-left: 10px;
      ::v-deep .ant-radio-wrapper {
        font-size: 14px;
      }
    }
  }
  ::v-deep .ant-checkbox-group-item {
    background: #fafafa;
    border-radius: 2px;
    width: 400px;
    margin-top: 20px;
    height: 36px;
    line-height: 36px;
    font-size: 14px !important;
    padding-left: 10px;
  }
  .point {
    display: inline-block;
    border-radius: 5px;
    width: 6px;
    height: 6px;
    background-color: #3f7ffb;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }
}
</style>
