<!--
 * @Author: ysh
 * @Date: 2024-03-27 11:10:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-01-16 11:07:37
-->
<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="车牌号：">
        <el-input v-model="queryParams.licensePlate" clearable></el-input>
      </el-form-item>
      <el-form-item label="品牌：">
        <el-input v-model="queryParams.brand" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getList" type="primary">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="chooseCar" :data="list" @selection-change="handleSelectionChange" :row-key="getRowKeys">
      <el-table-column type="selection" width="50" align="center" :reserve-selection="true" :selectable="isSelectable" />
      <el-table-column label="车辆状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag :type="statusTypeStyle(scope.row.status)">{{ statusTypeText(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="车牌号" align="center" prop="licensePlate" />
      <el-table-column label="驾驶员" align="center" prop="driverUser.nickName" />
      <el-table-column label="品牌" align="center" prop="brand" />
      <el-table-column label="单日成本" align="center" prop="dayCost" />
    </el-table>
    <div style="text-align: right;">
      <el-pagination @current-change="getList" :current-page.sync="queryParams.pageNum" :page-size="queryParams.pageSize"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <div>
      已选车辆：
      <el-tag v-for="item in chooseList" style="margin: 5px;" :key="item.carId">
        {{ item.licensePlate + item.brand }}
      </el-tag>
    </div>
    <div style="text-align: center;margin-top: 20px;">
      <el-button type="primary" @click="confirmChoose">确认选择</el-button>
      <el-button @click="clearChoose">清空选择</el-button>
    </div>
  </div>
</template>

<script>
import { listCar } from "@/api/oa/car/car";
import { getUserByPost } from "@/api/system/post";
export default {
  props: {
    selectedCarIds: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      list: [],
      form: {},
      total: 0,
      loading: false,
      chooseList: [],
      driverList: [],
    }
  },
  created() {
    this.getList();
    // this.getDriverList();
  },
  methods: {
    /** 查询cmc车辆信息列表 */
    getList() {
      this.loading = true;
      listCar(this.queryParams).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 查询驾驶员列表
    getDriverList() {
      getUserByPost({ postName: '驾驶员' }).then(response => {
        this.driverList = response.data;
      })
    },
    handleSelectionChange(val) {
      this.chooseList = val
    },
    getRowKeys(row) {
      return row.carId;
    },
    confirmChoose() {
      if (!this.chooseList || this.chooseList.length === 0) {
        return;
      }
      const existedCars = this.chooseList.filter(c => this.selectedCarIds.includes(c.carId));
      let cars = this.chooseList.filter(c => !this.selectedCarIds.includes(c.carId));
      if (cars.length === 0) {
        const names = existedCars.map(c => c.licensePlate + c.brand).join('、');
        this.$message.warning(`所选车辆【${names}】已存在，无法重复添加`);
        return;
      }
      if (existedCars.length > 0) {
        const names = existedCars.map(c => c.licensePlate + c.brand).join('、');
        this.$message.warning(`车辆【${names}】已存在，已自动过滤`);
      }
      this.$emit('chooseList', cars);
      this.clearChoose();
    },
    isSelectable(row) {
      return !this.selectedCarIds.includes(row.carId);
    },
    clearChoose() {
      this.$refs.chooseCar.clearSelection();
    },
    statusTypeText(row) {
      if (row == '0') {
        return '已派出'
      }
      if (row == '1') {
        return '可使用'
      }
      if (row == '2') {
        return '维修中'
      }
      if (row == '3') {
        return '已还车'
      }
      if (row == '4') {
        return '已报废'
      }
    },
    statusTypeStyle(row) {
      if (row == '0') {
        return 'warning'
      }
      if (row == '1') {
        return 'success'
      }
      if (row == '2') {
        return 'primary'
      }
      if (row == '3') {
        return 'danger'
      }
      if (row == '4') {
        return 'info'
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>