<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 === 'phone'">
        <a @click="viewOrderInfo(record)">{{record.phone}}</a>
      </template>
    </template>
  </a-table>

  <!-- 订单详情 -->
  <a-modal
    v-model:open="openOrderInfo"
    title="订单详情"
    width="1000px"
    :maskClosable="false"
    :footer="[]"
    :key="modalOrderKey"
  >
    <OrderInfo ref="formModelOrderInfo"></OrderInfo>
  </a-modal>
</template>


<script setup>
import { ref, defineProps, reactive } from 'vue'
import config from '@/utils/config.js'
import OrderInfo from '../orderinfo/OrderInfo.vue';

const props = defineProps({
  onCallBack: {
    type: Function,
    required: true
  },
});

const openOrderInfo = ref(false);
const formModelOrderInfo = ref(null);
const modalOrderKey = ref(null);

// 表格行数据
const dataSource = ref([])

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: 'orderId',
    width: 200,
    key: 'orderId',
    align: 'center'
  },
  {
    title: '所属区域',
    dataIndex: 'operate',
    width: 200,
    key: 'operate',
    align: 'center'
  },
  {
    title: '车辆编号',
    dataIndex: 'bikeCode',
    width: 200,
    key: 'bikeCode',
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 200,
    key: 'createTime',
    align: 'center'
  },
  {
    title: '骑行时长',
    dataIndex: 'cyclingDuration',
    width: 200,
    key: 'cyclingDuration',
    align: 'center'
  },
  {
    title: '实付金额 (元)',
    dataIndex: 'actualAmount',
    width: 200,
    key: 'actualAmount',
    align: 'center'
  },
  {
    title: '订单金额 (元)',
    dataIndex: 'totalAmount',
    width: 200,
    key: 'totalAmount',
    align: 'center'
  },
  {
    title: '骑行卡抵扣 (元)',
    dataIndex: 'cyclingCardAmount',
    width: 200,
    key: 'cyclingCardAmount',
    align: 'center'
  },
  {
    title: '优惠券抵扣 (元)',
    dataIndex: 'couponAmount',
    width: 200,
    key: 'couponAmount',
    align: 'center'
  },
  {
    title: '优惠金额 (元)',
    dataIndex: 'discountAmount',
    width: 200,
    key: 'discountAmount',
    align: 'center'
  },
  {
    title: '起步费 (元)',
    dataIndex: 'startupCost',
    width: 200,
    key: 'startupCost',
    align: 'center'
  },
  {
    title: '时长费 (元)',
    dataIndex: 'durationCost',
    width: 200,
    key: 'durationCost',
    align: 'center'
  },
  {
    title: '车辆状态',
    dataIndex: 'bikeState',
    width: 200,
    key: 'bikeState',
    align: 'center'
  },
  {
    title: '还车类型',
    dataIndex: 'returnCarType',
    width: 200,
    key: 'returnCarType',
    align: 'center'
  },
  {
    title: '锁车时间',
    dataIndex: 'lockCarTime',
    width: 200,
    key: 'lockCarTime',
    align: 'center'
  },
  {
    title: '结束时间',
    dataIndex: 'endTime',
    width: 200,
    key: 'endTime',
    align: 'center'
  },
  {
    title: '支付方式',
    dataIndex: 'payMethod',
    width: 200,
    key: 'payMethod',
    align: 'center'
  },
  {
    title: '支付状态',
    dataIndex: 'payState',
    width: 200,
    key: 'payState',
    align: 'center'
  },
  {
    title: '付款时间',
    dataIndex: 'payTime',
    width: 200,
    key: 'payTime',
    align: 'center'
  },
  {
    title: '交易号',
    dataIndex: 'tradeSerialNumber',
    width: 200,
    key: 'tradeSerialNumber',
    align: 'center'
  },
  {
    title: '订单来源',
    dataIndex: 'orderSource',
    width: 200,
    key: 'orderSource',
    align: 'center'
  }
  ,
  {
    title: '是否上报故障',
    dataIndex: 'hasFaultReport',
    width: 200,
    key: 'hasFaultReport',
    align: 'center'
  },
  {
    title: '订单备注',
    dataIndex: 'orderRemark',
    width: 200,
    key: 'orderRemark',
    align: 'center'
  }
]);

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 = () => {
}

const viewOrderInfo = (record) => {
  openOrderInfo.value = true;
  modalOrderKey.value = getGUID();
  nextTick(() => {
    if (formModelOrderInfo.value) {
      const params = record == null ? {} : {
        ebikeCode: record['ebikeCode'],
        startTime: record['startTime'],
        endTime: record['endTime'],
        ridePoint: record['ridePoint'],
        returnPoint: record['returnPoint'],
        orderNumber: record['cyclingOrderNumber'],
      }
      formModelOrderInfo.value.openForm(params);
    } else {
      console.log('formModel is not ready yet');
    }
  });
}

</script> 