<template>
  <div class="carList">
    
    <Table ref="table" :table_config="table_config">
      <!-- 入库图片 -->
      <template #inPicture="{ data }">
        <img :src="data.inPicture" style="width: 80%">
      </template>
      <!-- 出库图片 -->
      <template #outPicture="{ data }">
        <img :src="data.outPicture" style="width: 80%">
      </template>
      <!-- 编辑/删除 -->
      <template #operation="{ data }">
         <!-- @click="editParking(data.id)"  -->
        <el-button type="primary" size="small" @click="detailmember(data.carId)">评价</el-button>
        <el-button size="small"  @click="orderPact(data)">还车</el-button>
        <!-- <el-button size="small"  @click="returnCar(data)">还车</el-button> -->
        <!-- 上传照片弹窗 -->
      
      </template>
    </Table>
    <!-- 评论 -->
    <orderReview ref="dialog"></orderReview>
     <!-- 合同 -->
     <orderPact ref="pact"></orderPact>
  </div>
</template>

<script>
import Form from '@/components/Form/form'
import Table from '@/components/TableData/table'
import orderReview from './orderReview.vue';
import orderPact from './orderPact.vue';
import CityArea from '@/components/Commons/cityArea'
import Upload from '@/components/Upload/index'
export default {
  name: "CarList",
  components: { Form, CityArea, Table ,orderReview,orderPact,Upload},
  data() {
    return {
      dialogVisible: false,
      imageUrl: "",
      orderMoneys:'',
      // 表格配置
      table_config: {
        table_headers: [ 
          { label: "订单号", prop: "orderId"},
          { label: "车牌号", prop: "carLicense"},
          { label: "租车人", prop: "userName"},
          { label: "车辆型号", prop: "carModel"},
          { label: "出库图片", prop: "outPicture", type: "slot", slotName: "outPicture"},
          { label: "入库图片", prop: "inPicture", type: "slot", slotName: "inPicture"},
          { label: "模式", prop: "mode", type: 'function',
            callback: (row) => {
              return row.mode === 0 ? "时租" : row.mode === 1 ? "日租" : '日租'
            }},
          { label: "入库时间", prop: "inTime", formatter: this.formatDateTime},
          { label: "出库时间", prop: "outTime", formatter: this.formatDateTime},
          { label: "订单金额", prop: "orderMoney"},
          { label: "状态", prop: "orderStatus", type: 'function',
            callback: (row) => {
              return row.orderStatus === 0 ? "未完成" : row.orderStatus === 1 ? "已完成" : '未完成'
            }},
          { label: "操作", type: "slot", slotName: "operation", width: 160},
        ],
        axios_config: {
          url: '/FindOrderById',
          method: 'POST'
        },
        requestData: {
          userId: window.localStorage.getItem("userId"),
          pageNumber: 1,
          pageSize: 10
        },
        checkedColumn: true,
        pagination: true,
      },
      // 防止网络慢，多次点击的
      delete_id: '',
      switch_id: ''
    };
  }
  ,computed: {
    // 格式化日期时间
    formatDateTime() {
      return (dateTimeString) => {
        if (!dateTimeString) return ''; // 如果日期时间为空，则返回空字符串
        const date = new Date(dateTimeString); // 创建日期时间对象
        const year = date.getFullYear(); // 获取年份
        const month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，并补零
        const day = ('0' + date.getDate()).slice(-2); // 获取日期，并补零
        const hours = ('0' + date.getHours()).slice(-2); // 获取小时，并补零
        const minutes = ('0' + date.getMinutes()).slice(-2); // 获取分钟，并补零
        const seconds = ('0' + date.getSeconds()).slice(-2); // 获取秒钟，并补零
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 拼接日期时间字符串
      }
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    handleUploadSuccess(url) {
      this.imageUrl = url;
    },
   // 评论
   detailmember(id) {
      this.$refs.dialog.open(id)
    },
    // 合同
   orderPact(data) {
    if(data.orderStatus==1||data.inTime!=null){
      this.$message.error("订单已完成");
      }else{
        this.$refs.pact.open(data)
      }
     
    },
    
    
    }
}
</script>

<style lang="scss" scoped>
.carList {
  padding: 20px;
}
</style>