<template>
  <view class="text-field detail-item" v-if="controlName==='field'">
    <view class="key">{{data.field_name}}</view>
    <view class="value">{{field_text || data.field_value}}</view>
  </view>
  <view class="photo" v-if="controlName==='photo-wall'">
    <view class="p-tt key">{{data.field_name}}</view>
    <photo-wall :urls="photos" ></photo-wall>
  </view>
  

</template>

<script lang="ts" setup>
  import { defineProps } from "@vue/runtime-core";
  import { computed } from "vue";
  import { useState } from "vue-vulcan";
  import PhotoWall from 'src/components/photo-wall.vue';

  interface Attr {
    field_name: string; 
    field_value: any;
    control_type: string;
    field_options?: Array<any>;
  }

  const {data} = defineProps<{data: Attr}>();
  const [controlName] = useState('field');
  const [field_text, setFieldText] = useState('');
  const photos      = computed(() => data.field_value?.map( (item: any) => item.url));

  switch (data.control_type) {
      // default:
      case '1':      
      case '6':
        controlName.value = 'field';
        break;
      case '4':
        setFieldText(data.field_value.join('，'))
      break;
      case '2':
      case '3':
        controlName.value = 'field';        
        data.field_options?.forEach( (item: any) => {
          if(item.id === data.field_value) { setFieldText(item.name) }
        })
        break;
      case '9':
        controlName.value = 'photo-wall';
        break;
    }
</script>