<template>
  <el-scrollbar>
    <el-table :data="list" style="width: 100%" @cell-click="openDetail">
      <el-table-column prop="code" label="订单号" show-overflow-tooltip/>
      <el-table-column prop="status" label="状态" width="80">
        <template #default="scope">
          <el-tag :type="scope.row.status === 0 ? 'info' : scope.row.status === 1 ? 'success' : scope.row.status === 2 ? 'warning' : 'danger'">{{ getStatusStr(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="payType" label="类别">
        <template #default="scope">
          {{ getPayTypeStr(scope.row.payType) }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="日期">
        <template #default="{row}">
          {{ formatDate(row.payTime) }}
        </template>
      </el-table-column>
    </el-table>
  </el-scrollbar>
  <OrderDetail ref="orderDetailRef"></OrderDetail>
</template>
<script setup lang="ts">
import {ref, defineProps, onMounted, watch} from 'vue'
import OrderDetail from "@/components/retail/OrderDetail.vue";

const prop = defineProps({
  purchaseList: {
    type: Array,
    default: () => []
  }
})
const list = ref<any[]>([])

onMounted(() => {
  list.value = prop.purchaseList
})
watch(() => prop.purchaseList, (newVal) => {
  list.value = newVal
})

const statusObj = {
  0: "未完成",
  1: "已完成",
  2: "已取消",
  3: "已退款"
}
const payTypeObj = {
  0: "微信",
  1: "支付宝",
  2: "现金",
  3: "医保"
}
type StatusKey = 0 | 1 | 2 | 3;
type PayTypeKey = 0 | 1 | 2 | 3;
//修改时间格式化
const formatDate = (isoStr: any) => {
  const date = new Date(isoStr);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
}
const getStatusStr = (status: number): string => {
  if (Object.keys(statusObj).includes(String(status))) {
    return statusObj[status as StatusKey] || "未知";
  }
  return "未知";
};
const getPayTypeStr = (payType: number): string => {
  if (Object.keys(payTypeObj).includes(String(payType))) {
    return payTypeObj[payType as PayTypeKey] || "未知";
  }
  return "未知";
};
const orderDetailRef = ref<any>();
const openDetail = (row: any) => {
  orderDetailRef.value.init(row)
}
</script>
<style scoped lang="scss">


</style>