<template>
<view class="ipicker" :style="containerStyle">
  <IPickerColumn
      v-for="(list,index) in value"
      :list="list"
      :value="targets[index]"
      :key="index"
      :indicator-class="indicatorClass"
      :select-row-style="selectRowStyle"
      :indicator-style="indicatorStyle"
      :height="pickerHeight"
      :row-height="rowHeight"
      @change="value=>changeColumn(index,value)"
  >
    <template #default="{item}">
      <slot :item="item">
      </slot>
    </template>
  </IPickerColumn>
</view>
</template>

<script setup lang="ts">
import IPickerColumn from "@/components/IPickerColumn.vue";
import {ref, watch} from "vue";
const props=withDefaults(defineProps<{
  value: Array<Array<any>>,
  indicatorStyle?: object,
  indicatorClass?: string,
  selectRowStyle?: object,
  containerStyle?: object,
  pickerHeight?: number,
  rowHeight?: number,
}>(),{
})
// 选中的下标
const targets=ref<Array<number>>([])
watch(()=>targets.value,value=>{
  emits('change',value);
},{deep: true})
// 根据value元素个数设置选中的下标个数
watch(()=>props.value,value=>{
  targets.value=[];
  value.forEach(()=>targets.value.push(0));
},{deep: true})
const changeColumn=(index:number,value:number)=>{
  targets.value[index]=value;
}
const emits=defineEmits<{
  (e:'change',index:Array<number>):void;
}>()
</script>

<style scoped lang="scss">
.ipicker{
  width: 100%;
  display: flex;
  background: #D7FFFBFF;
}
</style>