<template>   
  <div>订单号: {{ orderId }}</div>  
  <div v-for="(service, index) in services" :key="service.gid" class="service-box">  
        <p>{{ service.nickname }}</p>  
        <p>{{ service.endDate }}</p>
        <!-- 添加一个按钮，并绑定 click 事件处理器 sendServiceId -->  
        <button @click="sendServiceId(service.gid)">同意</button>  
    </div>
</template>  
  
<script>  
import axios from 'axios'; 
  
export default {  
  props: ['orderId'],  
  data() {  
    return {  
      services: [] 
    };  
  },
	methods: {  
	    async sendServiceId(gid) {  
	      try {  
	        // 假设后端API接受gid和did作为POST请求体
			const orderIdAsInt = parseInt(this.orderId, 10);
			const gidAsInt = parseInt(gid, 10);
	        const response = await axios.post('http://192.168.243.35:9000/DemandMatch/confirmed', { did:orderIdAsInt,gid:gidAsInt});  
	        alert('已同意');  
	      } catch (error) {  
	        console.error('Error sending service ID and order ID:', error);  
	      }  
	    }  
	  },
  async created() {
    // 在组件创建后立即发送请求  
    axios.get(`http://192.168.243.35:9000/DemandMatch/confirmedPage?did=${this.orderId}`)
        .then(response => {
    		this.services = response.data
        })
        .catch(error => {
          console.error('Error fetching user:', error);
        });
  },  
};  
</script>  
  
<style scoped>  
/* 样式代码，定义 .service-box 的样式 */

  
/* 为按钮添加一些样式 */  
.service-box button {  
  margin-left: auto; /* 将按钮推到右侧 */  
}   
  
/* 为按钮添加一些样式 */  
.service-box button {  
  margin-left: auto; /* 将按钮推到右侧 */  
}   
  
.service-box {  
  border: 1px solid #ccc;  
  padding: 10px;  
  margin-bottom: 10px;  
  /* 其他样式 */  
}

</style>