<template>
  <view class="userinform">
    <view class="userItem">
      <!-- v-model="item.snowFlakeId" 展开所有 -->
      <nut-collapse v-model="item.snowFlakeId" accordion v-for="(item, index) in starRating[findIndex].itemList" :key="item.snowFlakeId">
        <nut-collapse-item :name="item.snowFlakeId" :title="item.name">
          <view class="singleChoice">
            <!-- v-model="form[item.name]" -->
            <nut-radio-group v-if="item.type.value === 'radio'" v-model="item.selectedID" @change="(modelValue) => onChange(modelValue, item.name)">
              <nut-radio v-for="(items, indexs) in item.standardList" size="40" :label="items.snowFlakeId" :key="indexs"> {{ items.name }}</nut-radio>
            </nut-radio-group>

            <nut-checkbox-group v-else v-model="item.selectedGroup" @change="(arr) => checkboxGroupChange(arr, index)" style="display: flex; flex-direction: column">
              <nut-checkbox
                @change="(state, label) => checkboxChange(state, label)"
                v-for="(items, i) in item.standardList"
                size="40"
                :label="items.snowFlakeId"
                :key="i"
                style="margin-bottom: 20rpx"
                shape="button"
                >{{ items.name }}</nut-checkbox
              >
            </nut-checkbox-group>
          </view>
        </nut-collapse-item>
      </nut-collapse>
    </view>
  </view>
</template>

<script setup>
import Taro, { useLoad, useUnload } from '@tarojs/taro'
import { ref, computed, watch } from 'vue'

import { useDailyStore } from '@/store/daily.ts'
const store = useDailyStore()
const starRating = ref([])
const findIndex = ref(0)
const airdefenceEnumdata = ref([])
useLoad((options) => {
  Taro.setNavigationBarTitle({
    title: options.name,
  })

  findIndex.value = options.index
})

const daily = computed(() => store.getdailyinspection)

watch(
  daily,
  (newData) => {
    starRating.value = newData
  },
  { immediate: true }
)

/**
 * @assessmentRecordDetails 选择后的数据用于提交
 */
const assessmentRecordDetails = ref([])

const onChange = (modelValue, name) => {
  starRating.value[findIndex.value].itemList.forEach((element) => {
    if (name === element.name) {
      element.selectedID = modelValue
      element.standardList.forEach((item) => {
        // console.log('item.snowFlakeId, modelValue_________________', item.snowFlakeId, modelValue)
        if (item.snowFlakeId == modelValue) {
          element.selectedName = item.name // 添加扣分选项名字 selectedName 为标识数据———————便于区分测试
          element.selected_points = item.deductionPoints //添加扣分项
        }
      })
    }
  })
}
const checkboxGroupChange = function (arr, index) {
  // console.log('🚀 ~ checkboxGroupChange ~ arr:', arr)
  // console.log(index)

  // console.log(starRating.value[findIndex.value].itemList[index])
  let points = 0
  starRating.value[findIndex.value].itemList.forEach((element, i) => {
    if (i === index) {
      element.selectedGroup.forEach((selectedId) => {
        element.standardList.forEach((standardItem) => {
          if (selectedId === standardItem.snowFlakeId) {
            points += standardItem.deductionPoints
          }
        })
      })
    }
  })
  starRating.value[findIndex.value].itemList[index].selected_points = points
  // console.log(points)
  // console.log(starRating.value[findIndex.value].itemList[index].selected_points)
}
const checkboxChange = function (state, label) {
  // console.log('🚀 ~ checkboxChange ~ state, label:', state, label)
}
useUnload(() => {
  let points = 0
  starRating.value[findIndex.value].itemList.forEach((element) => {
    points += element.selected_points
  })
  starRating.value[findIndex.value].currentScore = points

  store.dailyinspectionList([...starRating.value])
})
</script>
