<template>
  <scroll-view class="flex-1 box-border" :scroll-y="true">
    <view class="mx-4 pt-4 flex flex-items-center text-3.5 font-bold">
      <view class="bg-#dfecff flex-1 px-3 py-6 rounded-2">
        <view>使用指南</view>
      </view>
      <view class="w-4"></view>
      <view class="bg-#feebda flex-1 px-3 py-6 rounded-2">
        <view>常见问题</view>
      </view>
    </view>
    <view class="py-4">
      <wd-collapse v-model="collapseRoot" custom-class="!bg-transparent !border-0">
        <wd-collapse-item
          v-for="group in list"
          :key="group.groupId"
          :name="group.groupName"
          :title="group.groupName"
        >
          <view
            v-for="(item, index) in group.processDefs"
            :key="item.processDefId"
            :class="[index === group.processDefs.length - 1 ? '' : 'mb-2']"
            class="flex flex-items-center bg-white px-3 py-3 mx-1 rounded-2"
          >
            <image :src="item.icon" class="w-7 h-7 rounded-2"></image>
            <view class="text-3.5 ml-2">{{ item.processDefName }}</view>
          </view>
        </wd-collapse-item>
      </wd-collapse>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
  const collapseRoot = ref<string[]>([])

  onMounted(() => {
    collapseRoot.value = props.list.map(item => item.groupName)
  })

  const props = defineProps({
    list: {
      type: Array,
      required: true
    }
  })
</script>

<style lang="scss" scoped>
  .wd-collapse-item::after {
    height: 0 !important;
  }

  :deep(.wd-collapse-item__header::after) {
    height: 0 !important;
  }
</style>
