<template>
  <div class="car-manager">
    <el-card class="mb-4">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold text-blue-400">车辆信息管理</h2>
        <el-button type="primary" @click="handleAdd" icon="el-icon-plus">新增车辆</el-button>
      </div>
      
      <!-- 搜索栏 -->
      <div class="search-bar mb-4 p-3 bg-blue-900/20 rounded">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input 
              v-model="searchForm.carNumber" 
              placeholder="车牌号" 
              prefix-icon="el-icon-search"
              size="small"
            />
          </el-col>
          <el-col :span="6">
            <el-select 
              v-model="searchForm.carType" 
              placeholder="车型" 
              size="small"
            >
              <el-option 
                v-for="item in carTypeOptions" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select 
              v-model="searchForm.status" 
              placeholder="车辆状态" 
              size="small"
            >
              <el-option 
                v-for="item in carStatusOptions" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6" class="text-right">
            <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
            <el-button size="small" @click="handleReset">重置</el-button>
          </el-col>
        </el-row>
      </div>
      
      <!-- 车辆信息表格 -->
      <el-table 
        :data="carData" 
        style="width: 100%"
        stripe
        :row-key="row => row.CarId"
      >
        <el-table-column 
          v-for="column in tableColumns" 
          :key="column.field"
          :prop="column.field"
          :label="column.title"
          :width="column.width"
          :align="column.align"
          :sortable="column.sort"
          :show-overflow-tooltip="true"
        >
          <template v-if="column.bind && column.bind.key === '车辆类型'" slot-scope="scope">
            <el-tag>{{ getCarTypeLabel(scope.row.CarType) }}</el-tag>
          </template>
          <template v-else-if="column.bind && column.bind.key === '车辆状态'" slot-scope="scope">
            <el-tag>{{ getStatusLabel(scope.row.Status) }}</el-tag>
          </template>
          <template v-else-if="column.field === 'BuyTime'" slot-scope="scope">
            {{ formatDateTime(scope.row.BuyTime) }}
          </template>
        </el-table-column>
        
        <!-- 操作列 -->
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            <el-button size="small" type="success" @click="handleApply(scope.row)">申请</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="mt-4 flex justify-end">
        <el-pagination
          layout="prev, pager, next, jumper, sizes, total"
          :total="total"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </el-card>
    
    <!-- 新增/编辑车辆弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form 
        :model="formData" 
        :rules="rules" 
        ref="formRef"
        label-width="120px"
        class="mt-4"
      >
        <el-form-item label="车牌号" prop="CarNumber">
          <el-input v-model="formData.CarNumber" placeholder="请输入车牌号" />
        </el-form-item>
        <el-form-item label="车型" prop="CarType">
          <el-select v-model="formData.CarType" placeholder="请选择车型">
            <el-option 
              v-for="item in carTypeOptions" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="购买时间" prop="BuyTime">
          <el-date-picker 
            v-model="formData.BuyTime" 
            type="datetime" 
            placeholder="请选择购买时间" 
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="使用年限（年）" prop="ServiceLife">
          <el-input v-model.number="formData.ServiceLife" placeholder="请输入使用年限" type="number" />
        </el-form-item>
        <el-form-item label="保养周期" prop="ServiceInterval">
          <el-input v-model="formData.ServiceInterval" placeholder="请输入保养周期" />
        </el-form-item>
        <el-form-item label="车辆状态" prop="Status">
          <el-select v-model="formData.Status" placeholder="请选择车辆状态">
            <el-option 
              v-for="item in carStatusOptions" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.Memo" placeholder="请输入备注信息" type="textarea" rows="3" />
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
    
    <!-- 车辆申请弹窗 -->
    <el-dialog
      title="车辆申请"
      :visible.sync="applyDialogVisible"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form 
        :model="applyForm" 
        :rules="applyRules" 
        ref="applyFormRef"
        label-width="100px"
        class="mt-4"
      >
        <el-form-item label="申请车辆">
          <el-input v-model="applyForm.carNumber" disabled placeholder="车牌号" />
        </el-form-item>
        <el-form-item label="申请人" prop="applicant">
          <el-input v-model="applyForm.applicant" placeholder="申请人" />
        </el-form-item>
        <el-form-item label="申请事由" prop="reason">
          <el-input v-model="applyForm.reason" placeholder="请输入申请事由" type="textarea" rows="4" />
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="applyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleApplySubmit">提交申请</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CarManager',
  data() {
    return {
      // 表格数据
      carData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      
      // 搜索表单
      searchForm: {
        carNumber: '',
        carType: '',
        status: ''
      },
      
      // 新增/编辑对话框
      dialogVisible: false,
      dialogTitle: '',
      formData: {
        CarId: '',
        CarNumber: '',
        CarType: '',
        BuyTime: '',
        ServiceLife: '',
        ServiceInterval: '',
        Status: '',
        Memo: ''
      },
      
      // 申请对话框
      applyDialogVisible: false,
      applyForm: {
        carId: '',
        carNumber: '',
        applicant: '',
        reason: ''
      },
      
      // 验证规则
      rules: {
        CarNumber: [
          { required: true, message: '请输入车牌号', trigger: 'blur' }
        ],
        CarType: [
          { required: true, message: '请选择车型', trigger: 'change' }
        ],
        BuyTime: [
          { required: true, message: '请选择购买时间', trigger: 'change' }
        ],
        ServiceLife: [
          { required: true, message: '请输入使用年限', trigger: 'blur' },
          { type: 'number', message: '请输入有效的数字', trigger: 'blur' }
        ],
        ServiceInterval: [
          { required: true, message: '请输入保养周期', trigger: 'blur' }
        ],
        Status: [
          { required: true, message: '请选择车辆状态', trigger: 'change' }
        ]
      },
      
      applyRules: {
        applicant: [
          { required: true, message: '请输入申请人', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '请输入申请事由', trigger: 'blur' }
        ]
      },
      
      // 车型选项
      carTypeOptions: [
        { label: '轿车', value: '轿车' },
        { label: 'SUV', value: 'SUV' },
        { label: '货车', value: '货车' },
        { label: '客车', value: '客车' },
        { label: '其他', value: '其他' }
      ],
      
      // 车辆状态选项
      carStatusOptions: [
        { label: '正常', value: 'normal' },
        { label: '维修中', value: 'repairing' },
        { label: '已报废', value: 'scrapped' },
        { label: '已借出', value: 'borrowed' }
      ]
    }
  },
  
  computed: {
    tableColumns() {
      return [
        {field:'CarId',title:'车辆ID',type:'int',width:110,hidden:true,require:true,align:'left'},
        {field:'CarNumber',title:'车牌号',type:'string',link:true,sort:true,width:150,align:'left'},
        {field:'CarType',title:'车型',type:'string',bind:{ key:'车辆类型',data:[]},width:150,align:'left'},
        {field:'BuyTime',title:'购买时间',type:'datetime',width:180,align:'left'},
        {field:'ServiceLife',title:'使用年限（年）',type:'int',width:130,align:'left'},
        {field:'ServiceInterval',title:'保养周期',type:'string',width:150,align:'left'},
        {field:'Status',title:'车辆状态',type:'string',bind:{ key:'车辆状态',data:[]},width:120,align:'left'},
        {field:'Memo',title:'备注',type:'string',width:200,align:'left'}
      ]
    }
  },
  
  mounted() {
    this.loadData()
    this.loadCurrentUser()
  },
  
  methods: {
    // 加载数据
    loadData() {
      // 模拟数据加载
      this.carData = [
        {
          CarId: 1,
          CarNumber: '京A12345',
          CarType: '轿车',
          BuyTime: '2022-01-15 10:30:00',
          ServiceLife: 5,
          ServiceInterval: '每3个月',
          Status: 'normal',
          Memo: '公司行政用车'
        },
        {
          CarId: 2,
          CarNumber: '京B54321',
          CarType: 'SUV',
          BuyTime: '2023-03-20 14:20:00',
          ServiceLife: 3,
          ServiceInterval: '每6个月',
          Status: 'repairing',
          Memo: '项目组用车'
        },
        {
          CarId: 3,
          CarNumber: '京C67890',
          CarType: '货车',
          BuyTime: '2021-06-10 09:15:00',
          ServiceLife: 4,
          ServiceInterval: '每2个月',
          Status: 'normal',
          Memo: '物资运输用车'
        }
      ]
      this.total = this.carData.length
    },
    
    // 加载当前登录用户
    loadCurrentUser() {
      // 模拟获取当前登录用户
      // 实际项目中应该从用户存储或接口获取
      this.applyForm.applicant = '张三' // 默认申请人
    },
    
    // 搜索
    handleSearch() {
      // 模拟搜索逻辑
      console.log('搜索条件:', this.searchForm)
      this.loadData()
    },
    
    // 重置
    handleReset() {
      this.searchForm = {
        carNumber: '',
        carType: '',
        status: ''
      }
      this.loadData()
    },
    
    // 新增
    handleAdd() {
      this.dialogTitle = '新增车辆'
      this.formData = {
        CarId: '',
        CarNumber: '',
        CarType: '',
        BuyTime: '',
        ServiceLife: '',
        ServiceInterval: '',
        Status: '',
        Memo: ''
      }
      this.dialogVisible = true
    },
    
    // 编辑
    handleEdit(row) {
      this.dialogTitle = '编辑车辆'
      this.formData = { ...row }
      // 格式化日期时间
      if (row.BuyTime) {
        this.formData.BuyTime = new Date(row.BuyTime)
      }
      this.dialogVisible = true
    },
    
    // 删除
    handleDelete(row) {
      this.$confirm(`确定要删除车辆【${row.CarNumber}】吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 模拟删除操作
        console.log('删除车辆:', row)
        this.loadData()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    
    // 申请
    handleApply(row) {
      this.applyForm = {
        carId: row.CarId,
        carNumber: row.CarNumber,
        applicant: this.applyForm.applicant, // 保持当前用户
        reason: ''
      }
      this.applyDialogVisible = true
    },
    
    // 提交表单
    handleSubmit() {
      // 确保表单引用存在
      if (!this.$refs.formRef) {
        console.warn('表单引用未找到')
        return
      }
      
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 模拟提交操作
          console.log('提交数据:', this.formData)
          this.dialogVisible = false
          this.loadData()
          // 模拟消息提示
          alert('操作成功')
        }
      })
    },
    
    // 提交申请
    handleApplySubmit() {
      // 确保表单引用存在
      if (!this.$refs.applyFormRef) {
        console.warn('申请表单引用未找到')
        return
      }
      
      this.$refs.applyFormRef.validate((valid) => {
        if (valid) {
          // 模拟申请提交操作
          console.log('申请数据:', this.applyForm)
          this.applyDialogVisible = false
          // 模拟消息提示
          alert('申请已提交')
        }
      })
    },
    
    // 分页处理
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadData()
    },
    
    handleSizeChange(val) {
      this.pageSize = val
      this.loadData()
    },
    
    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return ''
      const date = new Date(dateTime)
      return date.toLocaleString('zh-CN')
    },
    
    // 获取车型标签
    getCarTypeLabel(value) {
      const item = this.carTypeOptions.find(opt => opt.value === value)
      return item ? item.label : value
    },
    
    // 获取状态标签
    getStatusLabel(value) {
      const item = this.carStatusOptions.find(opt => opt.value === value)
      return item ? item.label : value
    },
    
    // 获取状态类型（用于标签颜色）
    getStatusType(value) {
      const statusMap = {
        'normal': 'success',
        'repairing': 'warning',
        'scrapped': 'danger',
        'borrowed': 'info'
      }
      return statusMap[value] || 'info'
    }
  }
}
</script>

<style scoped>
.car-manager {
  padding: 20px;
  color: #fff;
}

.search-bar {
  margin-bottom: 20px;
}

:deep(.el-card){
  background: transparent !important;
  border: 1px solid rgba(104, 201, 255, 0.3);
}

/* 表格背景透明 */
:deep(.el-table) {
  background-color: transparent !important;
  border: 1px solid rgba(104, 201, 255, 0.3);
}

:deep(.el-table tr){
  background-color: transparent !important;
}

:deep(.el-table__body-wrapper) {
  background-color: transparent !important;
}

:deep(.el-table__row) {
  background-color: transparent !important;
}

/* 表头透明 */
:deep(.el-table__header) {
  background: transparent !important;
}

:deep(.el-table__header) th {
  background: transparent !important;
  background-color: transparent !important;
  color: #68c9ff !important;
  border-color: rgba(104, 201, 255, 0.3) !important;
  font-weight: 500;
}

/* 确保表头在各种状态下都保持透明 */
:deep(.el-table th.is-leaf) {
  background: transparent !important;
  background-color: transparent !important;
}

/* 表格边框 */
:deep(.el-table__row td) {
  border-color: rgba(104, 201, 255, 0.2) !important;
  color: #91d5ff !important;
}

/* 表格悬停效果 */
:deep(.el-table__row:hover td) {
  background-color: rgba(104, 201, 255, 0.1) !important;
}

/* 操作按钮样式 */
:deep(.el-button) {
  color: #fff !important;
  border-color: rgba(104, 201, 255, 0.5) !important;
  background-color: rgba(0, 89, 158, 0.3) !important;
}

:deep(.el-button:hover) {
  background-color: rgba(0, 89, 158, 0.5) !important;
  border-color: #68c9ff !important;
}

:deep(.el-button--primary) {
  background-color: rgba(104, 201, 255, 0.3) !important;
  border-color: #68c9ff !important;
}

:deep(.el-button--primary:hover) {
  background-color: rgba(104, 201, 255, 0.5) !important;
}

:deep(.el-button--danger) {
  background-color: rgba(245, 108, 108, 0.3) !important;
  border-color: #f56c6c !important;
}

:deep(.el-button--danger:hover) {
  background-color: rgba(245, 108, 108, 0.5) !important;
}

:deep(.el-button--success) {
  background-color: rgba(103, 194, 58, 0.3) !important;
  border-color: #67c23a !important;
}

:deep(.el-button--success:hover) {
  background-color: rgba(103, 194, 58, 0.5) !important;
}

/* 对话框样式增强 */
:deep(.el-dialog) {
  background-color: rgba(0, 58, 97, 0.95) !important; /* 增加不透明度，确保可见 */
  backdrop-filter: blur(8px);
  border: 1px solid rgba(104, 201, 255, 0.3);
  z-index: 9999 !important; /* 使用更高的z-index确保显示在最上层 */
}

:deep(.el-dialog__header) {
  background-color: rgba(0, 58, 97, 0.8) !important;
  border-bottom: 1px solid rgba(104, 201, 255, 0.3);
  padding-top: 15px;
  padding-bottom: 15px;
}

:deep(.el-dialog__title) {
  color: #91d5ff !important;
  font-weight: 600;
  font-size: 16px;
}

:deep(.el-dialog__footer) {
  background-color: rgba(0, 58, 97, 0.8) !important;
  border-top: 1px solid rgba(104, 201, 255, 0.3);
  padding-top: 15px;
  padding-bottom: 15px;
}

/* 表单样式 */
:deep(.el-form-label) {
  color: #68c9ff !important;
  font-weight: 500;
}

/* 输入框样式 */
:deep(.el-input__inner) {
  background-color: rgba(0, 58, 97, 0.5) !important;
  border-color: rgba(104, 201, 255, 0.3) !important;
  color: #91d5ff !important;
}

:deep(.el-input__inner:focus) {
  border-color: #68c9ff !important;
  box-shadow: 0 0 0 2px rgba(104, 201, 255, 0.2) !important;
}

/* 选择框样式 */
:deep(.el-select .el-input__inner) {
  background-color: rgba(0, 58, 97, 0.5) !important;
  border-color: rgba(104, 201, 255, 0.3) !important;
  color: #91d5ff !important;
}

:deep(.el-select-dropdown) {
  background-color: rgba(0, 58, 97, 0.95) !important;
  border-color: rgba(104, 201, 255, 0.3) !important;
}

:deep(.el-select-dropdown__item) {
  color: #91d5ff !important;
}

:deep(.el-select-dropdown__item.hover) {
  background-color: rgba(104, 201, 255, 0.1) !important;
}

/* 日期选择器样式 */
:deep(.el-date-editor .el-input__inner) {
  background-color: rgba(0, 58, 97, 0.5) !important;
  border-color: rgba(104, 201, 255, 0.3) !important;
  color: #91d5ff !important;
}

/* 标签样式 */
:deep(.el-tag) {
  background-color: rgba(0, 89, 158, 0.3) !important;
  color: #91d5ff !important;
  border-color: rgba(104, 201, 255, 0.3) !important;
}

/* 表格行样式确保内容可见 */
:deep(.el-table .cell) {
  color: #91d5ff !important;
  font-size: 14px;
}

/* 分页组件样式 */
:deep(.el-pagination button) {
  background-color: rgba(0, 58, 97, 0.5) !important;
  border-color: rgba(104, 201, 255, 0.3) !important;
  color: #91d5ff !important;
}

:deep(.el-pagination__sizes .el-input__inner) {
  background-color: rgba(0, 58, 97, 0.5) !important;
  border-color: rgba(104, 201, 255, 0.3) !important;
  color: #91d5ff !important;
}

:deep(.el-pagination__total) {
  color: #91d5ff !important;
}

:deep(.el-pagination .el-pager li) {
  color: #91d5ff !important;
}

:deep(.el-pagination .el-pager li.active) {
  background-color: rgba(104, 201, 255, 0.3) !important;
  color: #fff !important;
}

/* 确认对话框样式 */
:deep(.el-message-box) {
  background-color: rgba(0, 58, 97, 0.95) !important;
  border-color: rgba(104, 201, 255, 0.3) !important;
}

:deep(.el-message-box__title) {
  color: #91d5ff !important;
}

:deep(.el-message-box__content) {
  color: #91d5ff !important;
}
</style>