<template>
    <vxe-drawer
      v-model="drawerVisibleFromProp"
      placement="right"
      title="近5年填报数据对比"
      width="90%"
      :footer="{ show: true }"
    >
        <div>
            <vxe-grid v-bind="gridOptions"></vxe-grid>
        </div>
    </vxe-drawer>
</template>
 
<script lang="ts" setup>
import { ref,reactive, computed } from 'vue'
import type { VxeGridProps } from 'vxe-table'
import type { VxeGridPropTypes } from 'vxe-table'
import { findFillHistoryForCheck } from '/@/views/baosong/record/BaosongTaskRecord.api';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const tableData = ref<RowVO[]>([]);
const drawerVisible = ref(false);
const drawerVisibleFromProp = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

interface RowVO {
  id: number
  itemId: number
  itemName: string
  values: string[]
}


const gridOptions = reactive<VxeGridProps<RowVO>>({
  border: true,
  size: 'small',
  columns: [
    { type: 'seq', width: 70 },
    { field: 'itemId', title: '字段ID',width: "10%",visible:false},
    { field: 'itemName', title: '字段名称',width: "15%"},
    { field: 'values', title: '最近5年填报数据',width: "75%",
     children: [
        { field: 'value0', title: '第一次',width: "15%"},
        { field: 'value1', title: '第二次',width: "15%"},
        { field: 'value2', title: '第三次',width: "15%"},
        { field: 'value3', title: '第四次',width: "15%"},
        { field: 'value4', title: '第五次',width: "15%"},
      ],
    },
    { field: 'opt', title: '操作' ,width: "10%"},
  ],
  data: []
})

async function onDrawerShow(tplid: number) {
    const retData = await findFillHistoryForCheck({
        tplid: tplid
    });
    // 调试：查看数据结构
    console.log('原始数据:', retData);

    // 处理 values 数据
    const processedData = retData.map((item, itemIndex) => {
        const processedItem = {...item};
        // 将 values 数组中的 value 属性提取出来
        if (Array.isArray(processedItem.values)) {
            processedItem.values.forEach((valueItem, index) => {
                // 将每个 valueItem 的 value 属性设置到单独的字段中
                // 注意：index从0开始，但字段名应该从1开始
                processedItem[`value${index + 1}`] = valueItem.value;
            });
        }
        return processedItem;
    });

    console.log('处理后的数据:', processedData);
    gridOptions.data = processedData;
    return false;
}

const closeDrawer = () => {
  drawerVisible.value = false;
  emit('update:modelValue', false);
}

defineExpose({
    onDrawerShow,
    closeDrawer
});
</script>
