<template>
  <a-table
    bordered
    :pagination="pagination"
    :columns="columns"
    :dataSource="dataSource"
    :scroll="{ x: 'max-content' }"
    @change="handleTableChange"
  >
    <template #bodyCell="{ column ,record}">
      <template v-if="column.key === 'image'">
        <div>
          <a-row :gutter="8">
            <a-col
              v-for="(image, index) in record['image']"
              :key="index"
              :span="8"
            >
              <a-image
                :src="image"
                :width="50"
              />
            </a-col>
          </a-row>
        </div>
      </template>
    </template>
  </a-table>
</template>

<script setup>
import { ref, defineProps, onMounted, reactive } from 'vue'
import { callOrder } from '@/apis/call.js'
import { message } from 'ant-design-vue'
import _ from 'lodash'
import config from '@/utils/config.js'

const props = defineProps({
  orderParams: {
    type: Object,
    required: true
  }
});

// 表格行数据
const dataSource = ref([])
const queryform = ref({
  orderId: "",
  pageParam: {
    pageNum: config.pageParam.pageNum,
    pageSize: config.pageParam.pageSize
  }
})
let pagination = reactive({
  total: dataSource.value.length,
  current: 10,
  pageSize: config.pageParam.pageSize,
  showSizeChanger: true,
  pageSizeOptions: config.pageParam.pageSizeOptions,
  showQuickJumper: true
})

const columns = ref([
  {
    title: '反馈用户',
    dataIndex: 'reportUser',
    width: 200,
    key: 'reportUser',
    align: 'center'
  },
  {
    title: '坐标',
    dataIndex: 'coordinate',
    width: 200,
    key: 'coordinate',
    align: 'center'
  },
  {
    title: '故障部件',
    dataIndex: 'faultPart',
    width: 200,
    key: 'faultPart',
    align: 'center'
  },
  {
    title: '图片',
    dataIndex: 'image',
    key: 'image',
    align: 'center'
  },
  {
    title: '故障说明',
    dataIndex: 'faultDescription',
    width: 200,
    key: 'faultDescription',
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'reportAt',
    width: 200,
    key: 'reportAt',
    align: 'center'
  }
]);

onMounted(() => {
  if (props.orderParams['orderNumber']) {
    queryform.value.orderId = props.orderParams['orderNumber'];
    getData()
  }
})

let handleTableChange = (pagina) => {
  pagination.current = pagina.current
  pagination.pageSize = pagina.pageSize
  queryform.value.pageParam.pageNum = pagina.current
  queryform.value.pageParam.pageSize = pagina.pageSize
  getData()
}

const getData = () => {
  callOrder("/ebikeUserFaultreport/getUserOrderFaultRecord", queryform.value).then(res => {
    if (res.code == 200) {
      dataSource.value = res.data.records
    } else {
      message.error(res.message)
    }
  })
}

</script> 