<template>
  <div class="stoppage-management">
    <!-- 查询表单区域 -->
    <div class="stop-header">
      <el-form :inline="true" :model="queryForm" ref="queryForm" label-width="80px" size="small">
        <el-form-item label="开始时间" prop="startDate">
          <el-date-picker v-model="queryForm.startDate" type="date" placeholder="选择开始时间" value-format="yyyy-MM-dd"
            :clearable="true"></el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间" prop="endDate">
          <el-date-picker v-model="queryForm.endDate" type="date" placeholder="选择结束时间" value-format="yyyy-MM-dd"
            :clearable="true"></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleQuery" :loading="btnLoading" icon="el-icon-search">查询</el-button>
          <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 卡片网格布局 -->
    <div v-loading="tableLoading" class="card-grid-container">
      <el-row :gutter="10">
        <el-col 
          v-for="(item, index) in tableData" 
          :key="index" 
          :xs="24" 
          :sm="12" 
          :md="8" 
          :lg="6"
          :xl="5"
          class="card-col"
        >
          <el-card 
            class="parameter-card" 
            shadow="never" 
            :body-style="{ padding: '8px' }"
            :class="{ 'card-selected': currentRow.stopid === item.stopid }"
            @click.native="handleRowClick(item)"
          >
            <div slot="header" class="card-header">
              <div class="card-title">停机ID: {{ item.stopid || '-' }}</div>
              <div class="card-subtitle">钢卷号: {{ item.coilid || '-' }}</div>
            </div>
            <div class="card-body">
              <div class="param-groups-row">
                <!-- 基本信息 -->
                <div class="param-group">
                  <div class="group-title">基本信息</div>
                  <div class="param-list">
                    <div class="param-line">
                      <span class="param-label">停机类型:</span>
                      <span class="param-value">{{ item.stopType || '-' }}</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">班:</span>
                      <span class="param-value">{{ item.shift || '-' }}</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">组:</span>
                      <span class="param-value">{{ item.crew || '-' }}</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">区域:</span>
                      <span class="param-value">{{ item.area || '-' }}</span>
                    </div>
                  </div>
                </div>

                <!-- 设备信息 -->
                <div class="param-group">
                  <div class="group-title">设备信息</div>
                  <div class="param-list">
                    <div class="param-line">
                      <span class="param-label">设备:</span>
                      <span class="param-value">{{ item.seton || '-' }}</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">机组:</span>
                      <span class="param-value">{{ item.unit || '-' }}</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">停机时长:</span>
                      <span class="param-value">{{ item.duration || '-' }} 分钟</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">更新时间:</span>
                      <span class="param-value">{{ formatTime(item.insdate) }}</span>
                    </div>
                  </div>
                </div>

                <!-- 时间信息 -->
                <div class="param-group">
                  <div class="group-title">时间信息</div>
                  <div class="param-list">
                    <div class="param-line">
                      <span class="param-label">开始时间:</span>
                      <span class="param-value">{{ formatTime(item.startDate) }}</span>
                    </div>
                    <div class="param-line">
                      <span class="param-label">结束时间:</span>
                      <span class="param-value">{{ formatTime(item.endDate) }}</span>
                    </div>
                    <div class="param-line full-width" v-if="item.remark">
                      <span class="param-label">停机原因:</span>
                      <span class="param-value">{{ item.remark }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-footer">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click.stop="handleEdit(item)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                :loading="item.deleteLoading"
                @click.stop="handleDelete(item)"
              >删除</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div v-if="tableData.length === 0 && !tableLoading" class="empty-data">
        <el-empty description="暂无数据"></el-empty>
      </div>
    </div>

    <!-- 编辑/新增弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
      <el-form :model="formData" ref="formData" label-width="120px" :rules="formRules">
        <el-form-item label="停机ID" prop="stopid" v-if="formData.stopid">
          <el-input v-model="formData.stopid" disabled></el-input>
        </el-form-item>

        <el-form-item label="钢卷号" prop="coilid">
          <el-input v-model="formData.coilid" placeholder="请输入钢卷号"></el-input>
        </el-form-item>

        <el-form-item label="班" prop="shift">
          <el-select v-model="formData.shift" placeholder="请选择班次" clearable>
            <el-option label="早班" value="早班"></el-option>
            <el-option label="中班" value="中班"></el-option>
            <el-option label="晚班" value="晚班"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="组" prop="crew">
          <el-input v-model="formData.crew" placeholder="请输入组号"></el-input>
        </el-form-item>

        <el-form-item label="区域" prop="area">
          <el-input v-model="formData.area" placeholder="请输入区域"></el-input>
        </el-form-item>

        <el-form-item label="机组" prop="unit">
          <el-input v-model="formData.unit" placeholder="请输入机组"></el-input>
        </el-form-item>

        <el-form-item label="设备" prop="seton">
          <el-input v-model="formData.seton" placeholder="请输入设备"></el-input>
        </el-form-item>

        <el-form-item label="开始时间" prop="startDate">
          <el-date-picker v-model="formData.startDate" type="datetime" placeholder="选择开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间" prop="endDate">
          <el-date-picker v-model="formData.endDate" type="datetime" placeholder="选择结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>

        <el-form-item label="停机类型" prop="stopType">
          <el-select v-model="formData.stopType" placeholder="请选择停机类型" clearable>
            <el-option label="计划停机" value="计划停机"></el-option>
            <el-option label="故障停机" value="故障停机"></el-option>
            <el-option label="维护停机" value="维护停机"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="停机原因" prop="remark">
          <el-input v-model="formData.remark" placeholder="请输入停机原因" type="textarea" rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave" :loading="saveLoading">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import createFetch from '@/api/l2/stop'; // 导入接口

export default {
  name: 'StoppageManagement',
  data() {
    return {
      // 查询表单数据
      queryForm: {
        // 只保留年月日YYYY-mm-dd
        startDate: '2023-08-13',
        endDate: '2025-08-20'
      },
      activeUrl: '140.143.206.120:18081',
      // 表格数据
      tableData: [],
      // 加载状态
      tableLoading: false,
      btnLoading: false,
      // 弹窗状态
      dialogVisible: false,
      dialogTitle: '新增停机记录',
      // 表单数据
      formData: {
        stopid: '',
        coilid: '',
        shift: '',
        crew: '',
        area: '',
        unit: '',
        seton: '',
        startDate: '',
        endDate: '',
        duration: 0,
        insdate: '',
        stopType: '',
        remark: ''
      },
      // 表单验证规则
      formRules: {
        startDate: [
          { required: true, message: '请选择开始时间', trigger: 'blur' }
        ],
        endDate: [
          { required: true, message: '请选择结束时间', trigger: 'blur' }
        ],
        seton: [
          { required: true, message: '请输入设备', trigger: 'blur' }
        ]
      },
      // 保存按钮加载状态
      saveLoading: false,
      // 当前操作的行数据
      currentRow: {},
      stopApi: undefined,
    };
  },
  created() {
    // 页面加载时默认查询一次
    this.stopApi = createFetch(this.activeUrl);
    this.getStoppageList();
  },
  methods: {
    // 获取停机记录列表
    getStoppageList() {
      this.tableLoading = true;
      this.stopApi.listStoppage(this.queryForm)
        .then(response => {
          this.tableLoading = false;
          this.btnLoading = false;
          this.tableData = response.data.map(item => ({
            ...item,
            deleteLoading: false
          }));
        })
        .catch(error => {
          this.tableLoading = false;
          this.btnLoading = false;
          console.error('获取数据失败:', error);
          this.$message.error('获取数据失败，请稍后重试');
        });
    },

    // 处理查询
    handleQuery() {
      // 验证开始时间不能晚于结束时间
      if (this.queryForm.startDate && this.queryForm.endDate &&
        new Date(this.queryForm.startDate) > new Date(this.queryForm.endDate)) {
        this.$message.warning('开始时间不能晚于结束时间');
        return;
      }

      this.btnLoading = true;
      this.getStoppageList();
    },

    // 处理重置
    handleReset() {
      this.$refs.queryForm.resetFields();
      this.getStoppageList();
    },

    // 行点击事件
    handleRowClick(row) {
      this.currentRow = row;
    },
    // 格式化时间
    formatTime(time) {
      if (!time) return '-';
      // 如果是日期时间格式，直接返回
      if (time.includes(' ')) {
        return time;
      }
      // 如果是日期格式，返回日期
      return time;
    },

    // 新增
    handleAdd() {
      this.dialogTitle = '新增停机记录';
      this.formData = {
        stopid: '',
        coilid: '',
        shift: '',
        crew: '',
        area: '',
        unit: '',
        seton: '',
        startDate: '',
        endDate: '',
        duration: 0,
        insdate: '',
        stopType: '',
        remark: ''
      };
      this.dialogVisible = true;
    },

    // 编辑
    handleEdit(row) {
      this.dialogTitle = '编辑停机记录';
      this.formData = { ...row };
      this.dialogVisible = true;
    },

    // 删除
    handleDelete(row) {
      this.$confirm(`确定要删除ID为 ${row.stopid} 的停机记录吗？`, '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        // 设置当前行的删除按钮为加载状态
        row.deleteLoading = true;

        this.stopApi.deleteStoppage(row.stopid)
          .then(response => {
            row.deleteLoading = false;

            if (response.code === 200) {
              this.$message.success('删除成功');
              // 重新查询数据
              this.getStoppageList();
            } else {
              this.$message.error(response.msg || '删除失败');
            }
          })
          .catch(error => {
            row.deleteLoading = false;
            console.error('删除失败:', error);
            this.$message.error('删除失败，请稍后重试');
          });
      }).catch(() => {
        // 用户取消删除
        this.$message.info('已取消删除');
      });
    },

    // 保存
    handleSave() {
      this.$refs.formData.validate(valid => {
        if (valid) {
          // 验证开始时间不能晚于结束时间
          if (new Date(this.formData.startDate) > new Date(this.formData.endDate)) {
            this.$message.warning('开始时间不能晚于结束时间');
            return;
          }

          // 计算停机时长(分钟)
          const start = new Date(this.formData.startDate).getTime();
          const end = new Date(this.formData.endDate).getTime();
          this.formData.duration = Math.round((end - start) / (1000 * 60) * 10) / 10;

          // 设置当前时间为更新时间
          const now = new Date();
          this.formData.insdate = now.toISOString().slice(0, 19).replace('T', ' ');

          this.saveLoading = true;

          // 调用更新接口
          this.stopApi.updateStoppage(this.formData)
            .then(response => {
              this.saveLoading = false;

              if (response.code === 200) {
                this.$message.success('保存成功');
                this.dialogVisible = false;
                // 重新查询数据
                this.getStoppageList();
              } else {
                this.$message.error(response.msg || '保存失败');
              }
            })
            .catch(error => {
              this.saveLoading = false;
              console.error('保存失败:', error);
              this.$message.error('保存失败，请稍后重试');
            });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.stoppage-management {
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #f5f5f5;
  overflow: hidden;
}

.stop-header {
  background: #ffffff;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 15px;
  margin-bottom: 15px;
  flex-shrink: 0;
}

.card-grid-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 5px;
  
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f0f0f0;
  }
}

.card-col {
  margin-bottom: 10px;
}

.parameter-card {
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
  
  &.card-selected {
    border-color: #999;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    background: #fafafa;
  }
  
  ::v-deep .el-card__header {
    padding: 6px 8px;
    background: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
  }
  
  &:hover {
    border-color: #999;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
}

.card-header {
  .card-title {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 2px;
    line-height: 1.4;
  }
  
  .card-subtitle {
    font-size: 11px;
    color: #888;
    line-height: 1.3;
  }
}

.card-body {
  .param-groups-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    
    .param-group {
      flex: 1;
      min-width: 0;
      
      .group-title {
        font-size: 11px;
        font-weight: 600;
        color: #555;
        padding: 3px 0;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 4px;
        background: #f5f5f5;
        padding-left: 4px;
        padding-right: 4px;
        margin-left: -4px;
        margin-right: -4px;
        text-align: center;
      }
      
      .param-list {
        .param-line {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 3px 0;
          border-bottom: 1px dotted #e8e8e8;
          
          &.full-width {
            flex-direction: column;
            align-items: flex-start;
            
            .param-label {
              margin-bottom: 2px;
            }
            
            .param-value {
              text-align: left;
              word-break: break-word;
              white-space: normal;
            }
          }
          
          &:last-child {
            border-bottom: none;
          }
          
          .param-label {
            color: #777;
            font-size: 11px;
            flex-shrink: 0;
            margin-right: 8px;
          }
          
          .param-value {
            color: #333;
            font-weight: 500;
            font-size: 11px;
            text-align: right;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid #e0e0e0;
  margin-top: 6px;
  
  .el-button {
    font-size: 11px;
    padding: 2px 6px;
  }
}

.empty-data {
  text-align: center;
  padding: 40px 0;
}

::v-deep .el-form-item {
  margin-bottom: 15px;
}
</style>
