<!--
 * @Author: ysh
 * @Date: 2025-05-08 14:18:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-20 16:47:13
-->
<template>
  <div class="car-cost">
    <table border="1" style="width:100%;">
      <tr style="background-color:#f8f8f9">
        <td></td>
        <td>序号</td>
        <td>车牌号</td>
        <td>品牌</td>
        <td>折旧成本（天）</td>
        <td>预算天数</td>
        <td>金额</td>
        <td class="adjust">核算天数</td>
        <td class="adjust">核算金额</td>
      </tr>
      <tr v-for="car, index in carList" :key="'car' + car.carId">
        <td>
          <div class="delete-btn" v-if="car.days == 0" @click="removeCar(car, index)"><i class="el-icon-remove-outline"
              style="color:#F56C6C"></i>
          </div>
        </td>
        <td>{{ index + 1 }}</td>
        <td>{{ car.car ? car.car.licensePlate : '' }}</td>
        <td>{{ car.car ? car.car.brand : '' }}</td>
        <td style="text-align:right;">{{ car.car ? car.car.dayCost : '' }}</td>
        <td style="text-align:right;">{{ car.days }}</td>
        <td style="text-align:right;">{{ car.amount }}</td>
        <td style="text-align:right;">
          <template v-if="taskName === '核算编制'">
            <el-input-number :controls="false" style="width:100%;" v-model="car.daysAdjust"
              @change="handleChange(car)"></el-input-number>
          </template>
          <span v-else>{{ car.daysAdjust }}</span>
        </td>
        <td style="text-align:right;">
          {{ car.amountAdjust }}
        </td>
      </tr>
      <tr>
        <td colspan="4" class="amount">车辆成本合计</td>
        <td class="amount" style="text-align:right;">{{carList.reduce((sum, car) => sum +
          (Number(car.depreciation) || 0), 0).toFixed(2)}}</td>
        <td class="amount" style="text-align:right;">{{carList.reduce((sum, car) => sum +
          (Number(car.days) || 0), 0).toFixed(2)}}</td>
        <td class="amount" style="text-align:right;">{{carList.reduce((sum, car) => sum +
          (Number(car.amount) || 0), 0).toFixed(2)}}</td>
        <td class="amount" style="text-align:right;">{{carList.reduce((sum, car) => sum +
          (Number(car.daysAdjust) || 0), 0).toFixed(2)}}</td>
        <td class="amount" style="text-align:right;">{{carList.reduce((sum, car) => sum +
          (Number(car.amountAdjust) || 0), 0).toFixed(2)}}</td>
      </tr>
    </table>
    <div class="mt10" v-if="taskName === '核算编制'">
      <el-button type="success" plain icon="el-icon-plus" @click="openCar" size="mini">新增车辆</el-button>
    </div>
    <!-- 选择车辆对话框 -->
    <el-dialog title="选择车辆" :visible.sync="isOpenCar" width="700px" append-to-body>
      <choose-car @chooseList="getChooseCar"></choose-car>
    </el-dialog>
  </div>
</template>

<script>
import ChooseCar from '../../components/chooseCar.vue'

export default {
  name: 'CarCost',
  components: {
    ChooseCar
  },
  props: {
    carList: {
      type: Array,
      default: () => []
    },
    taskName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isOpenCar: false
    }
  },
  methods: {
    handleChange(car) {
      car.amountAdjust = (Number(car.car.dayCost) * Number(car.daysAdjust)).toFixed(2);
      this.$emit('update:carList', this.carList);
    },
    openCar() {
      this.isOpenCar = true;
    },
    removeCar(car, index) {
      this.$confirm('确定移除【' + car.car.licensePlate + '】吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let arr = this.carList;
        if (arr.length == 1) {
          return;
        }
        if (index >= 0 && index < arr.length) {
          arr.splice(index, 1);
        }
        this.$emit('update:carList', this.carList);
      }).catch(() => { });
    },
    getChooseCar(val) {
      let arr = [];
      for (let car of val) {
        let obj = {
          carId: car.carId,
          car: car,
          days: 0,
          depreciation: car.dayCost,
          amount: 0,
          daysAdjust: 0,
          amountAdjust: 0,
        }
        arr.push(obj);
      }
      this.carList.push(...arr);
      this.isOpenCar = false;
      this.$emit('update:carList', this.carList);
    }
  }
}
</script>

<style lang="scss" scoped>
.car-cost {
  table {
    text-align: center;
    border-collapse: collapse;
    margin: 0 auto;

    td {
      padding: 5px;
    }
  }

  .adjust {
    color: #F56C6C;
    width: 120px;
  }
}

.delete-btn {
  cursor: pointer;
  font-size: 18px;
}

.amount {
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}
</style>