<template>
  <div class="combo">
    <div class="title"><span class="point"></span>请选择套餐</div>
    <!-- v-if="combos.type === '1'" -->
    <a-radio-group class="items-radios" v-model="chooseId" @change="onChange">
      <ul class="items">
        <li
          class="item"
          v-for="item in chooseList"
          :key="item.id"
          @click.stop="item.show = !item.show"
        >
          <a-radio :value="item.id" @focus="item.show = !item.show">
            <span>{{ item.servicecententName }}</span>
          </a-radio>
          <div class="desc-div" v-if="item.articleList && item.show">
            <div
              class="flex li"
              v-for="(ite, i) in item.articleList"
              :key="ite.id"
            >
              <div class="title">{{ i + 1 }}. 标题：{{ ite.title }}</div>
              <div class="content">内容：{{ ite.content }}</div>
            </div>
          </div>
        </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: {
    id: {
      type: String | Number,
      default: "",
    },
  },
  data() {
    return {
      chooseId: "",
      chooseList: [],
      reservedInfo: [], //可选择的体检套餐
    };
  },
  created() {
    //获取产品信息-可选体检套餐
    this.reservedInfo = JSON.parse(window.localStorage.getItem("reservedInfo"));
    let chooseList = JSON.parse(window.localStorage.getItem("chooseList"));
    console.log("？？？？", chooseList, this.reservedInfo);
    this.chooseId = chooseList ? chooseList[0].id : "";
    this.chooseList = this.reservedInfo.chooseList.map((item) => {
      return {
        ...item,
        show: false,
      };
    });
    console.log(this.chooseList);
  },
  methods: {
    onChange(checkedValues) {
      console.log("这个？？？", checkedValues);
      const chooseList = [];
      chooseList.push({
        id: this.chooseId || checkedValues,
      });
      // 本地存储数据-选择的体检套餐
      window.localStorage.setItem("chooseList", JSON.stringify(chooseList));
      console.log("选择体检套餐chooseId===", this.chooseId);
      // 显示"下一步"
      this.$parent.next = true;
    },
  },
};
</script>

<style lang="less" scoped>
.desc-div {
  box-sizing: border-box;
  padding: 10px;
  border-radius: 6px;
  background: #f8f8f8;
}
.combo {
  .items-radios {
    margin-top: 20px;
  }
  .items {
    width: 700px;
    .item {
      background: #fafafa;
      border-radius: 2px;
      margin-top: 20px;
      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: 700px;
    margin-top: 20px;
    line-height: 58px;
    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>
