<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">
            <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>
            <!--  不能直接去更改 v-model 绑定的 这个数据 ,否则会造成无限递归-->
            <nut-checkbox-group v-else v-model="item.selectedGroup" @change="(arr) => checkboxGroupChange(arr, index)" style="display: flex; flex-direction: column">
              <nut-checkbox
                v-model="items.isSelected"
                @change="(state, label) => checkboxChange(state, label, index, i)"
                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, nextTick } 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) => {
        if (item.snowFlakeId == modelValue) {
          element.selected_points = item.deductionPoints //添加扣分项
        }
      })
    }
  })
}

const checkboxGroupChange = function (arr, 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
}
const checkboxChange = async function (state, label, index, i) {
  // DOM 还未更新
  await nextTick() //等待下一次 DOM 更新刷新的工具方法。
  // DOM 此时已经更新

  let arr

  if (label === '达标' && i === 0) {
    arr = ['null']
  } else {
    arr = starRating.value[findIndex.value].itemList[index].selectedGroup.filter((selectedId) => selectedId != 'null')
  }
  if (arr?.length === 0) {
    arr = ['null']
  }

  if (JSON.stringify(arr) !== JSON.stringify(starRating.value[findIndex.value].itemList[index].selectedGroup)) {
    starRating.value[findIndex.value].itemList[index].selectedGroup = arr
  }
}
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>
