<template>
  <div class="car-use-log">
    <el-card class="mb-4">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold text-blue-400">车辆出入库记录</h2>
      </div>
      
      <!-- 搜索栏 -->
      <div class="search-bar mb-4 p-3 bg-blue-900/20 rounded">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-select 
              v-model="searchForm.carId" 
              placeholder="选择车辆" 
              size="small"
            >
              <el-option 
                v-for="item in carListOptions" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select 
              v-model="searchForm.action" 
              placeholder="动作类型" 
              size="small"
            >
              <el-option 
                v-for="item in actionOptions" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select 
              v-model="searchForm.actionUser" 
              placeholder="动作执行人员" 
              size="small"
            >
              <el-option 
                v-for="item in userListOptions" 
                :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="logData" 
        style="width: 100%"
        stripe
        :row-key="row => row.Id"
      >
        <el-table-column 
          v-for="column in tableColumns" 
          :key="column.field"
          :prop="column.field"
          :label="column.title"
          :width="column.width"
          :align="column.align"
          v-if="!column.hidden"
        >
          <template v-if="column.field === 'CarId'" slot-scope="scope">
            <el-tag>{{ getCarLabel(scope.row.CarId) }}</el-tag>
          </template>
          <template v-else-if="column.field === 'Action'" slot-scope="scope">
            <el-tag :type="getActionType(scope.row.Action)">{{ getActionLabel(scope.row.Action) }}</el-tag>
          </template>
          <template v-else-if="column.field === 'ActionUser'" slot-scope="scope">
            <el-tag>{{ getUserLabel(scope.row.ActionUser) }}</el-tag>
          </template>
          <template v-else-if="column.field === 'CreateDate'" slot-scope="scope">
            {{ formatDateTime(scope.row.CreateDate) }}
          </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="新增出入库记录"
      :visible.sync="dialogVisible"
      width="500px"
      :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="CarId">
          <el-select v-model="formData.CarId" placeholder="请选择车辆">
            <el-option 
              v-for="item in carListOptions" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="动作" prop="Action">
          <el-select v-model="formData.Action" placeholder="请选择动作类型">
            <el-option 
              v-for="item in actionOptions" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="动作执行人员" prop="ActionUser">
          <el-select v-model="formData.ActionUser" placeholder="请选择执行人员">
            <el-option 
              v-for="item in userListOptions" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="动作时间" prop="CreateDate">
          <el-date-picker 
            v-model="formData.CreateDate" 
            type="datetime" 
            placeholder="请选择动作时间" 
            style="width: 100%"
          />
        </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>
    
    <!-- 操作按钮 -->
    <div class="fixed bottom-4 right-4">
      <el-button type="primary" icon="el-icon-plus" circle size="medium" @click="handleAdd" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'CarUseLog',
  data() {
    return {
      // 表格数据
      logData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      
      // 搜索表单
      searchForm: {
        carId: '',
        action: '',
        actionUser: ''
      },
      
      // 新增记录对话框
      dialogVisible: false,
      formData: {
        Id: '',
        CarId: '',
        Action: '',
        ActionUser: '',
        CreateDate: ''
      },
      
      // 验证规则
      rules: {
        CarId: [
          { required: true, message: '请选择车辆', trigger: 'change' }
        ],
        Action: [
          { required: true, message: '请选择动作类型', trigger: 'change' }
        ],
        ActionUser: [
          { required: true, message: '请选择执行人员', trigger: 'change' }
        ],
        CreateDate: [
          { required: true, message: '请选择动作时间', trigger: 'change' }
        ]
      },
      
      // 车辆列表选项
      carListOptions: [
        { label: '京A12345', value: 1 },
        { label: '京B54321', value: 2 },
        { label: '京C67890', value: 3 }
      ],
      
      // 动作类型选项
      actionOptions: [
        { label: '出库', value: '出库' },
        { label: '入库', value: '入库' }
      ],
      
      // 人员列表选项
      userListOptions: [
        { label: '张三', value: '张三' },
        { label: '李四', value: '李四' },
        { label: '王五', value: '王五' },
        { label: '赵六', value: '赵六' }
      ]
    }
  },
  
  computed: {
    tableColumns() {
      return [
        {field:'Id',title:'车辆记录ID',type:'int',width:110,hidden:true,require:true,align:'left'},
        {field:'CarId',title:'车辆',type:'int',bind:{ key:'车辆列表',data:[]},link:true,width:150,align:'left'},
        {field:'Action',title:'动作（出库/入库）',type:'string',bind:{ key:'车辆出入状态',data:[]},width:150,align:'left'},
        {field:'ActionUser',title:'动作执行人员',type:'string',bind:{ key:'人员列表',data:[]},width:150,align:'left'},
        {field:'CreateDate',title:'动作时间',type:'datetime',width:180,align:'left'}
      ]
    }
  },
  
  mounted() {
    this.loadData()
  },
  
  methods: {
    // 加载数据
    loadData() {
      // 模拟数据加载
      this.logData = [
        {
          Id: 1,
          CarId: 1,
          Action: '出库',
          ActionUser: '张三',
          CreateDate: '2024-01-20 09:30:00'
        },
        {
          Id: 2,
          CarId: 1,
          Action: '入库',
          ActionUser: '张三',
          CreateDate: '2024-01-20 18:45:00'
        },
        {
          Id: 3,
          CarId: 2,
          Action: '出库',
          ActionUser: '李四',
          CreateDate: '2024-01-21 10:15:00'
        },
        {
          Id: 4,
          CarId: 3,
          Action: '出库',
          ActionUser: '王五',
          CreateDate: '2024-01-21 14:20:00'
        },
        {
          Id: 5,
          CarId: 2,
          Action: '入库',
          ActionUser: '李四',
          CreateDate: '2024-01-21 19:30:00'
        }
      ]
      this.total = this.logData.length
    },
    
    // 搜索
    handleSearch() {
      // 模拟搜索逻辑
      console.log('搜索条件:', this.searchForm)
      this.loadData()
    },
    
    // 重置
    handleReset() {
      this.searchForm = {
        carId: '',
        action: '',
        actionUser: ''
      }
      this.loadData()
    },
    
    // 新增
    handleAdd() {
      this.formData = {
        Id: '',
        CarId: '',
        Action: '',
        ActionUser: '',
        CreateDate: new Date()
      }
      this.dialogVisible = true
    },
    
    // 提交表单
    handleSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 模拟提交操作
          console.log('提交数据:', this.formData)
          this.dialogVisible = false
          this.loadData()
          this.$message.success('记录添加成功')
        }
      })
    },
    
    // 分页处理
    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')
    },
    
    // 获取车辆标签
    getCarLabel(value) {
      const item = this.carListOptions.find(opt => opt.value === value)
      return item ? item.label : value
    },
    
    // 获取动作标签
    getActionLabel(value) {
      const item = this.actionOptions.find(opt => opt.value === value)
      return item ? item.label : value
    },
    
    // 获取动作类型（用于标签颜色）
    getActionType(value) {
      return value === '出库' ? 'warning' : 'success'
    },
    
    // 获取用户标签
    getUserLabel(value) {
      const item = this.userListOptions.find(opt => opt.value === value)
      return item ? item.label : value
    }
  }
}
</script>

<style scoped>
.car-use-log {
  padding: 20px;
}

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

/* 表格背景透明 */
:deep(.el-table) {
  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;
}

/* 确保表头在各种状态下都保持透明 */
: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-dialog) {
  background-color: rgba(0, 58, 97, 0.4) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(104, 201, 255, 0.3);
}

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

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

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

:deep(.el-form-label) {
  color: #68c9ff !important;
  font-weight: 500;
}
</style>