<template>
    <el-dialog
      title="归还车辆(订单详细)"
      :visible.sync="dialogVisible"
      width="40%"
      :close-on-click-modal="false"
      :before-close="close"
    >
      <!-- <div class="text" v-for="(item,index) in datas"> -->
        <div class="text">
        <el-row>
          <el-col :span="5">租借人</el-col>
          <el-col :span="16">{{datas.userName}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">租借车牌</el-col>
          <el-col :span="16">{{datas.carLicense || '无'}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">租借车辆</el-col>
          <el-col :span="16">{{datas.carModel || '无'}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">租借类型</el-col>
          <el-col :span="16">{{datas.mode==0?"按时租定":"按天租定"}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">租借时长</el-col>
          <el-col :span="16">{{rentalHours==''?rentalDays.toFixed(1)+"天":rentalHours.toFixed(1)+"小时"}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">费用合计</el-col>
          <el-col :span="16">{{hourmoney==''?dayMoney.toFixed(1)+"元":hourmoney.toFixed(1)+"元"}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5">选择还车点</el-col>
            <el-select v-model="value" filterable placeholder="请选择停车场">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
            </el-select>
        </el-row>
        <el-row>
        <!-- 上传车辆照片 -->
        <el-col :span="5">上传实时照片</el-col>
        <Upload @upload-success="handleUploadSuccess"></Upload>
        <img v-if="imageUrl" :src="imageUrl" alt="Uploaded Image" style="width: 30%;">
       </el-row>
      <el-row>
        <el-col :span="5">确认归还</el-col>
        <el-button type="success" @click="returnCar()">确认归还</el-button>
      </el-row>
      </div>
    </el-dialog>
  </template>
  
  <script>
  import Upload from '@/components/Upload/index'
  export default {
    name: "orderPact",
    components: { Upload},
    data() {
      return {
        dialogVisible: false,
        datas: {},
        rentalDays: '',
        rentalHours: '',
        dayMoney: '',
        hourmoney: '',
        options: [],
        value: '',
        imageUrl: "",
      };
    },
    methods: {
      handleUploadSuccess(url) {
      this.imageUrl = url;
    },
      close() {
        this.dialogVisible = false;
      },
      open(data) {
        this.dialogVisible = true;
        this.fetchOrderPact(data);
        console.log(data);
      },
      // 获取信息
      async fetchOrderPact(data) {
        this.datas=data
        // 获取停车场信息
        this.$API.parking.getParking().then(result => {
      if (result.status == 200) {
        this.$message.success(result.message);
        let options = [];
        result.data.forEach(item => {
           options.push({
                value: item.id,
                label: item.parkingName
            });
          });
          this.options=options;
      } else {
        this.$message.error(result.message);
      }
    }).catch(error => {
      console.error(error);
    });
                  // 租车模式为小时
            if (data.mode == 0) {
              let hourmoney = data.carHoursMoney;
              let startTime = new Date(); // 假设这是起租时间，可以根据实际情况设置
              let outTime = new Date(data.outTime); // 将字符串转换为日期对象
            // 将 outTime 转换为本地时间
            outTime = new Date(outTime.getTime() + outTime.getTimezoneOffset() * 60000);
            // 判断是否是有效的日期对象
            if (!isNaN(outTime.getTime())) {
                // 计算时间差
                let rentalHours = (startTime.getTime() - outTime.getTime()) / (1000 * 3600); // 毫秒转小时
                // 按时租计算费用
                let totalCost = rentalHours * hourmoney;
                console.log("小时时间", rentalHours.toFixed(1));
                console.log("小时总费用", totalCost.toFixed(1));
                this.rentalHours=rentalHours;
                this.hourmoney=totalCost;
            } else {
                console.error("出错了:", data.outTime);
            }
            // 按天租计算费用
       } else if (data.mode == 1) {
        let dayMoney = data.carDayMoney;
            let startTime = new Date(); // 开始时间（假设为当前时间）
            // 将结束时间转换为日期对象
            let endTime = new Date(data.outTime);
            // 判断是否是有效的日期对象
            if (!isNaN(endTime.getTime())) {
                // 计算租车天数，向上取整
                let rentalDays = Math.ceil((endTime.getTime() - startTime.getTime()) / (1000 * 3600 * 24));
                // 按天租计算费用
                let totalCost = rentalDays * dayMoney;
                console.log("天数:", rentalDays.toFixed(1));
                console.log("总费用:", totalCost.toFixed(1));
                this.rentalDays=rentalDays;
                this.dayMoney=totalCost;
            } else {
              console.error("Invalid outTime:", data.OutTime);
             }
             }
            },

returnCar() {
  this.$confirm('确认归还该车辆，请尽快支付避免逾期造成征信黑名单, 是否继续?', '提示', {
    confirmButtonText: '去付款',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 在这里执行实际的归还操作
    let data = {
      // 车辆id
      carId: this.datas.carId,
      // 订单id
      orderId: this.datas.orderId,
      // 订单状态为已归还
      OrderStatus: 1,
      // 停车场id
      parking_id: this.value,
      // 改车辆状态为可用
      CarStatus: 1,
      // 入库照片
      InPicture: this.imageUrl,
      // 订单金额
      OrderMoney: this.hourmoney == '' ? this.dayMoney.toFixed(1) : this.hourmoney.toFixed(1)
    };
console.log(data)
    this.$API.car.returnCar(data).then(result => {
      if (result.status == 200) {
        this.$message.success(result.message);
        this.$router.push({ path: '/carManage/carList' });
      } else {
        this.$message.error(result.message);
      }
    }).catch(error => {
      console.error(error);
    });

  }).catch(() => {
    // 用户取消付款不显示任何消息
  });
}

    },
  };
  </script>
  
  <style lang="scss" scoped>
  .text {
      height: 100%;
      font-size: 18px;
  }
  </style>