<template>
  <div class="radioGroup">
    <template v-if="clueOptionList && clueOptionList.length && clueOptionList[0]">
      <template v-if="clueOptionList[0].answerType == 'dx'">
        <van-radio-group v-model="clueOptionList[0].searchValue" @change="radioGroupChange">
          <template v-for="(item, index) in clueOptionList[0].customerClueOptionList">
            <van-radio :name="item.customerClueOptionId" :key="index" @click="radioClick">
              {{ item.customerClueOption }}
            </van-radio>
            <radioGroup
              :clueOptionList="item.customerClueItemList"
              :parentOptionList="item"></radioGroup>
          </template>
        </van-radio-group>
      </template>
      <template v-if="clueOptionList[0].answerType == 'wb'">
        {{ clueOptionList[0].customerClueName }}
        <van-field
          v-model="clueOptionList[0].searchValue"
          :placeholder="clueOptionList[0].customerClueName" />
      </template>
    </template>
  </div>
</template>
<script>
export default {
  name: 'radioGroup',
  props: {
    clueOptionList: {
      type: Array,
      default: () => [],
    },
    parentOptionList: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    getParentId(list, name) {
      for (let i in list) {
        if (list[i].customerClueOptionId == name) {
          return [list[i]];
        }
        if (list[i].customerClueItemList) {
          let node = this.getParentId(list[i].customerClueOptionList, name);
          if (node !== undefined) {
            return node.concat(list[i]);
          }
        }
      }
    },
    radioGroupChange(name) {
      if (!name) return;
      console.log(name);
      // console.log(this.clueOptionList);
      // 如果选中的数据有父级，将父级数据修改为选中状态
      if (this.parentOptionList) {
        // console.log(this.parentOptionList);
        // this.$set(this.parentOptionList, 'searchValue', 'Y');
        // console.log(this.getParentId(this.parentOptionList.customerClueOptionList, name));
        // 获取选中数据
        // let activaRadio = this.parentOptionList.customerClueOptionList.find(
        //   (val) => val.customerClueOptionId == name
        // );
      } else {
      }
      // 获取选中数据
      let activaRadio = this.clueOptionList[0].customerClueOptionList.find(
        (val) => val.customerClueOptionId == name,
      );
      console.log(this.parentOptionList);
      // 修改选中状态
      // console.log(activaRadio);
      this.$set(activaRadio, 'value', 'Y');

      // 过滤未选中的数据
      let exceptItself = this.clueOptionList[0].customerClueOptionList.filter(
        (val) => val.customerClueOptionId !== name,
      );
      // 删除未选中数据状态兄弟级和子级
      // console.log(exceptItself);
      this.toggleOtheChildren(exceptItself);
    },
    toggleOtheChildren(exceptItself) {
      if (!exceptItself) return;
      exceptItself.forEach((val) => {
        this.$set(val, 'value', 'N');
        if (val.customerClueItemList && val.customerClueItemList[0]) {
          this.$set(val.customerClueItemList[0], 'searchValue', null);
          if (
            val.customerClueItemList[0] &&
            val.customerClueItemList[0].customerClueOptionList.length
          ) {
            this.toggleOtheChildren(val.customerClueItemList[0].customerClueOptionList);
          }
        }
      });
    },
    radioClick(event) {
      // console.log(event);
    },
  },
};
</script>
<style lang="scss">
.radioGroup {
  .van-radio-group {
    padding-left: 20px;
  }
}
</style>
