<template>
<el-dialog
  model-value="dialogVisible"
  title="订单详情"
  width="40%"
  @close="handleClose">
  <el-table
    :data="tableData"stripe style="width:100%">
    <el-table-column prop="goodspic" label="商品图片" width="200">
      <template v-slot="scope">
        <img width="80" height="80" :src="getServerUrl()+'/image/product/'+scope.row.goodspic"/>
      </template>
    </el-table-column>
    <el-table-column prop="goodsname" label="商品名称" ></el-table-column>
    <el-table-column prop="goodsprice" label="商品价格" width="100"></el-table-column>
    <el-table-column prop="goodsnumber" label="商品数量" width="100"></el-table-column>
  </el-table>
</el-dialog>
</template>

<script setup>
import {defineEmits, defineProps, ref, watch} from "vue";
import axios,{getServerUrl} from "@/util/axios";

const props=defineProps({
  id:{
    type:Number,
    default:-1,
    required:true
  }
})
watch(
    ()=>props.id,
    ()=>{
      let id=props.id;
      if (id != -1){
        initOrderDetailData(id)
      }
    }
)
const tableData=ref(null);
const initOrderDetailData=async (id)=>{
  const res=await axios.get("admin/orderDetial/list/"+id);
  tableData.value=res.data.list;
  console.log(res.data.list)
}
const emits=defineEmits(['update:modelValue'])
const handleClose=()=>{
  emits('update:modelValue',false)
}
</script>

<style scoped>

</style>