<template>
  <div class="app-container" style="height: calc(100vh - 84px); display: flex;">
    <!-- 左侧工艺列表 -->
    <div class="left-panel" v-loading="processLoading"
      style="width: 35%; border-right: 1px solid #e4e7ed; overflow-y: auto;">
      <!-- 筛选区 -->
      <div class="filter-section" style="padding: 10px; border-bottom: 1px solid #e4e7ed;">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
          <div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
            <el-input v-model="queryParams.processName" placeholder="工艺名称" clearable @keyup.enter.native="handleSearch"
              style="width: 160px;" />
            <el-button class="aps-btn-red" icon="el-icon-search" size="mini" @click="handleSearch">筛选</el-button>
            <el-button icon="el-icon-refresh" size="mini" class="aps-btn-silver" @click="resetQuery">重置</el-button>
          </div>
          <div style="display: flex; align-items: center; gap: 8px;">
            <el-button class="aps-btn-red" icon="el-icon-plus" size="mini" @click="handleAddProcess">新增工艺</el-button>
            <span style="font-size: 12px; color: #909399;">
              共 <span class="aps-total-count">{{ total }}</span> 条
            </span>
          </div>
        </div>
      </div>

      <!-- 列表区域 -->
      <div class="custom-list">
        <div class="list-body">
          <div v-for="item in processList" :key="item.processId" class="list-item"
            :class="{ 'list-item-active': currentProcess && currentProcess.processId === item.processId }"
            @click="handleProcessClick(item)">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
              <div style="font-weight: bold; font-size: 14px;">{{ item.processName }}</div>
              <div style="display: flex; gap: 4px;">
                <el-button type="text" icon="el-icon-edit" size="mini" @click.stop="handleUpdateProcess(item)"></el-button>
                <el-button type="text" icon="el-icon-delete" size="mini" style="color: #F56C6C;" @click.stop="handleDeleteProcess(item)"></el-button>
              </div>
            </div>
            <div style="font-size: 12px; color: #909399; margin-bottom: 4px;">
              {{ item.processDesc || '暂无描述' }}
            </div>
            <div style="font-size: 12px; color: #909399;">
              备注: {{ item.remark || '-' }}
            </div>
          </div>
          <div v-if="processList.length === 0 && !processLoading"
            style="padding: 40px; text-align: center; color: #909399;">
            暂无工艺数据
          </div>
        </div>
      </div>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getProcessList" style="padding: 10px; margin-bottom: 10px !important;" />
    </div>

    <!-- 右侧工艺步骤区域 -->
    <div class="right-panel" v-if="currentProcess && currentProcess.processId"
      style="flex: 1; display: flex; flex-direction: column;" v-loading="stepLoading">
      <div class="detail-panel">
        <!-- 工艺基本信息卡片 -->
        <div class="detail-card">
          <div class="detail-card-header">
            <span>工艺基本信息</span>
          </div>
          <div class="detail-card-body">
            <div class="form-grid-2">
              <div class="form-field"><label>工艺名称</label>
                <div class="field-value">{{ currentProcess.processName }}</div>
              </div>
              <div class="form-field"><label>工艺描述</label>
                <div class="field-value">{{ currentProcess.processDesc || '-' }}</div>
              </div>
              <div class="form-field" style="grid-column:1/3;"><label>备注</label>
                <div class="field-value">{{ currentProcess.remark || '-' }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 工艺步骤卡片 -->
        <div class="detail-card">
          <div class="detail-card-header">
            <span>工艺步骤（{{ stepList.length }} 步）</span>
            <el-button type="text" icon="el-icon-plus" size="mini" style="color: white;" @click="handleAddStep">新增步骤</el-button>
          </div>
          <div class="detail-card-body">
            <div v-if="stepList.length > 0" class="process-timeline-wrap">
              <el-timeline>
                <el-timeline-item
                  v-for="(step, index) in stepList"
                  :key="step.stepId"
                  :timestamp="'步骤 ' + step.stepOrder"
                  placement="top"
                  :type="index === stepList.length - 1 ? 'success' : 'primary'"
                  :hollow="index !== stepList.length - 1"
                  size="large"
                >
                  <div class="timeline-content">
                    <div class="timeline-header">
                      <span class="step-name">{{ step.stepName }}</span>
                      <div class="step-actions">
                        <el-button type="text" icon="el-icon-edit" size="mini" @click="handleUpdateStep(step)"></el-button>
                        <el-button type="text" icon="el-icon-delete" size="mini" style="color: #F56C6C;" @click="handleDeleteStep(step)"></el-button>
                      </div>
                    </div>
                    <div v-if="step.remark" class="step-remark">{{ step.remark }}</div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
            <el-empty v-else description="暂无工艺步骤" />
          </div>
        </div>
      </div>
    </div>

    <div v-else style="flex: 1; display: flex; flex-direction: column;">
      <el-empty description="选择工艺后查看步骤" />
    </div>

    <!-- 新增/编辑工艺弹窗 -->
    <el-dialog :title="processTitle" :visible.sync="processOpen" width="500px" append-to-body>
      <el-form ref="processForm" :model="processForm" :rules="processRules" label-width="80px">
        <el-form-item label="工艺名称" prop="processName">
          <el-input v-model="processForm.processName" placeholder="请输入工艺名称" />
        </el-form-item>
        <el-form-item label="工艺描述" prop="processDesc">
          <el-input v-model="processForm.processDesc" type="textarea" :rows="3" placeholder="请输入工艺描述" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="processForm.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="submitLoading" @click="submitProcessForm">确 定</el-button>
        <el-button @click="cancelProcess">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 新增/编辑工艺步骤弹窗 -->
    <el-dialog :title="stepTitle" :visible.sync="stepOpen" width="500px" append-to-body>
      <el-form ref="stepForm" :model="stepForm" :rules="stepRules" label-width="80px">
        <el-form-item label="步骤顺序" prop="stepOrder">
          <el-input-number v-model="stepForm.stepOrder" :min="1" :max="99" controls-position="right" />
        </el-form-item>
        <el-form-item label="步骤名称" prop="stepName">
          <el-input v-model="stepForm.stepName" placeholder="请输入步骤名称" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="stepForm.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="submitLoading" @click="submitStepForm">确 定</el-button>
        <el-button @click="cancelStep">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listProcess, getProcess, addProcess, updateProcess, delProcess } from '@/api/aps/process'
import { listProcessStep, addProcessStep, updateProcessStep, delProcessStep } from '@/api/aps/processStep'

export default {
  name: 'ApsProcesses',
  data() {
    return {
      // 工艺相关
      processLoading: false,
      processList: [],
      total: 0,
      currentProcess: null,
      queryParams: {
        processName: '',
        pageNum: 1,
        pageSize: 10
      },
      processTitle: '',
      processOpen: false,
      processForm: {},
      processRules: {
        processName: [
          { required: true, message: '工艺名称不能为空', trigger: 'blur' }
        ]
      },
      // 工艺步骤相关
      stepLoading: false,
      submitLoading: false,
      stepList: [],
      stepTitle: '',
      stepOpen: false,
      stepForm: {},
      stepRules: {
        stepOrder: [
          { required: true, message: '步骤顺序不能为空', trigger: 'blur' }
        ],
        stepName: [
          { required: true, message: '步骤名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getProcessList()
  },
  methods: {
    /** 查询工艺列表 */
    getProcessList() {
      this.processLoading = true
      listProcess(this.queryParams).then(res => {
        this.processList = res.rows || []
        this.total = res.total || 0
      }).catch(() => {
        this.processList = []
        this.total = 0
      }).finally(() => {
        this.processLoading = false
      })
    },
    /** 搜索 */
    handleSearch() {
      this.queryParams.pageNum = 1
      this.getProcessList()
    },
    /** 重置 */
    resetQuery() {
      this.queryParams.processName = ''
      this.handleSearch()
    },
    /** 点击工艺 */
    handleProcessClick(process) {
      this.currentProcess = process
      this.getStepList(process.processId)
    },
    /** 查询工艺步骤列表 */
    getStepList(processId) {
      this.stepLoading = true
      listProcessStep({ processId }).then(res => {
        this.stepList = res.rows || []
      }).catch(() => {
        this.stepList = []
      }).finally(() => {
        this.stepLoading = false
      })
    },
    /** 新增工艺 */
    handleAddProcess() {
      this.resetProcessForm()
      this.processTitle = '新增工艺'
      this.processOpen = true
    },
    /** 修改工艺 */
    handleUpdateProcess(row) {
      this.resetProcessForm()
      const processId = row.processId || this.currentProcess.processId
      getProcess(processId).then(res => {
        this.processForm = res.data
        this.processTitle = '修改工艺'
        this.processOpen = true
      })
    },
    /** 提交工艺表单 */
    submitProcessForm() {
      this.$refs['processForm'].validate(valid => {
        if (valid) {
          this.submitLoading = true
          if (this.processForm.processId != undefined) {
            updateProcess(this.processForm).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.processOpen = false
              this.getProcessList()
            }).finally(() => {
              this.submitLoading = false
            })
          } else {
            addProcess(this.processForm).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.processOpen = false
              this.getProcessList()
            }).finally(() => {
              this.submitLoading = false
            })
          }
        }
      })
    },
    /** 删除工艺 */
    handleDeleteProcess(row) {
      const processIds = row.processId || this.currentProcess.processId
      this.$modal.confirm('是否确认删除该工艺？').then(() => {
        return delProcess(processIds)
      }).then(() => {
        this.getProcessList()
        this.$modal.msgSuccess('删除成功')
        this.currentProcess = null
        this.stepList = []
      }).catch(() => {})
    },
    /** 取消工艺弹窗 */
    cancelProcess() {
      this.processOpen = false
      this.resetProcessForm()
    },
    /** 重置工艺表单 */
    resetProcessForm() {
      this.processForm = {
        processId: undefined,
        processName: undefined,
        processDesc: undefined,
        remark: undefined
      }
      this.resetForm('processForm')
    },
    /** 新增步骤 */
    handleAddStep() {
      this.resetStepForm()
      this.stepForm.processId = this.currentProcess.processId
      // 自动计算下一步骤顺序
      if (this.stepList.length > 0) {
        const maxOrder = Math.max(...this.stepList.map(s => s.stepOrder || 0))
        this.stepForm.stepOrder = maxOrder + 1
      } else {
        this.stepForm.stepOrder = 1
      }
      this.stepTitle = '新增工艺步骤'
      this.stepOpen = true
    },
    /** 修改步骤 */
    handleUpdateStep(row) {
      this.resetStepForm()
      this.stepForm = { ...row }
      this.stepTitle = '修改工艺步骤'
      this.stepOpen = true
    },
    /** 提交步骤表单 */
    submitStepForm() {
      this.$refs['stepForm'].validate(valid => {
        if (valid) {
          this.submitLoading = true
          if (this.stepForm.stepId != undefined) {
            updateProcessStep(this.stepForm).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.stepOpen = false
              this.getStepList(this.currentProcess.processId)
            }).finally(() => {
              this.submitLoading = false
            })
          } else {
            addProcessStep(this.stepForm).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.stepOpen = false
              this.getStepList(this.currentProcess.processId)
            }).finally(() => {
              this.submitLoading = false
            })
          }
        }
      })
    },
    /** 删除步骤 */
    handleDeleteStep(row) {
      const stepIds = row.stepId
      this.$modal.confirm('是否确认删除该工艺步骤？').then(() => {
        return delProcessStep(stepIds)
      }).then(() => {
        this.getStepList(this.currentProcess.processId)
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {})
    },
    /** 取消步骤弹窗 */
    cancelStep() {
      this.stepOpen = false
      this.resetStepForm()
    },
    /** 重置步骤表单 */
    resetStepForm() {
      this.stepForm = {
        stepId: undefined,
        processId: undefined,
        stepOrder: undefined,
        stepName: undefined,
        remark: undefined
      }
      this.resetForm('stepForm')
    }
  }
}
</script>

<style scoped lang="scss">
@import './scss/aps-theme.scss';

.app-container {
  overflow: hidden;
  padding: 0;
}

.left-panel {
  height: calc(100vh - 84px);
  box-sizing: border-box;
  overflow-y: auto;
}

.right-panel {
  height: calc(100vh - 84px);
  overflow: hidden;
  min-height: 0;
}

.custom-list {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

.list-item {
  padding: 12px;
  border-bottom: 2px solid #dddddd;
  cursor: pointer;
  transition: background-color 0.2s;
}

.list-item:hover {
  background-color: $aps-silver-1;
}

.list-item-active {
  background-color: $aps-red-1;
  border-left: 3px solid $aps-red-2;
}

.aps-total-count {
  color: $aps-red-2;
  font-weight: bold;
}

.aps-btn-red {
  @include aps-btn-red;
}

.aps-btn-silver {
  @include aps-btn-silver;
}

.detail-panel {
  flex: 1;
  overflow-y: scroll;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: $aps-bg;
  min-height: 0;
}

.detail-card {
  background: $aps-white;
  border: 1px solid $aps-border;
  border-radius: $aps-radius;
  box-shadow: $aps-shadow-sm;
}

.detail-card-header {
  background: linear-gradient(to right, $aps-red-2, $aps-red-3);
  color: white;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-card-body {
  padding: 14px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.form-field label {
  font-size: 11px;
  color: $aps-text-muted;
  font-weight: 500;
}

.form-field .field-value {
  font-size: 13px;
  color: $aps-text;
  padding: 4px 0;
  border-bottom: 1px solid $aps-silver-mid;
}

.aps-product-table {
  width: 100%;

  ::v-deep th {
    background: $aps-silver-1 !important;
    color: $aps-silver-5 !important;
    font-weight: 600 !important;
  }
}

// ====== 工艺步骤时间线 ======
.process-timeline-wrap {
  padding: 20px 10px;

  ::v-deep .el-timeline {
    padding-left: 10px;
  }

  ::v-deep .el-timeline-item__wrapper {
    padding-left: 20px;
  }

  ::v-deep .el-timeline-item__timestamp {
    font-size: 12px;
    font-weight: 600;
    color: $aps-text-muted;
  }

  ::v-deep .el-timeline-item__tail {
    border-left-color: $aps-silver-3;
  }

  ::v-deep .el-timeline-item__node--primary {
    background-color: $aps-red-2;
    border-color: $aps-red-2;
  }

  ::v-deep .el-timeline-item__node--success {
    background-color: #67C23A;
    border-color: #67C23A;
  }
}

.timeline-content {
  background: $aps-white;
  border: 1px solid $aps-border;
  border-radius: $aps-radius;
  padding: 12px 16px;
  transition: box-shadow 0.2s, border-color 0.2s;

  &:hover {
    border-color: $aps-red-2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.step-name {
  font-size: 14px;
  font-weight: 600;
  color: $aps-text;
}

.step-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;

  .timeline-content:hover & {
    opacity: 1;
  }
}

.step-remark {
  margin-top: 8px;
  font-size: 12px;
  color: $aps-text-muted;
  padding-top: 8px;
  border-top: 1px dashed $aps-silver-3;
}
</style>
