<template>
  <div class="graph-container-box">
    <el-row>
      <el-col :span="16">
        <knova-stage @rectClick="selectCard" :matMapList="matMapList" :rects="rects" :lines="lines"></knova-stage>
      </el-col>
      <el-col :span="8">
        <div style="border: 1px solid #000; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
          <!-- 调整工具，选择两个位置，两个下拉选，分别双向绑定 -->
          <el-form :model="adjustForm" ref="adjustForm" label-width="80px">
            <el-form-item label="当前位置" prop="current">
              <el-select v-model="adjustForm.current" placeholder="请选择当前位置">
                <el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn" :value="item.positionNameEn"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目标位置" prop="target">
              <el-select v-model="adjustForm.target" placeholder="请选择目标位置">
                <el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn" :value="item.positionNameEn"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-button type="primary" :disabled="!adjustForm.current || !adjustForm.target" @click="handleConfirmAdjust">确认调整</el-button>
        </div>

        <div style="border: 1px solid #000; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
          <el-row v-if="selectedCard">
            <el-col :span="12">
              <div class="detail-item">
                <span class="detail-label">位置名称：</span>
                <span class="detail-value">{{ selectedCard.positionNameCn || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">位置代号：</span>
                <span class="detail-value">{{ selectedCard.positionNameEn || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">钢卷号：</span>
                <span class="detail-value">{{ selectedCard.matId || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">计划ID：</span>
                <span class="detail-value">{{ selectedCard.planId || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">计划号：</span>
                <span class="detail-value">{{ selectedCard.planNo || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">开卷机编号：</span>
                <span class="detail-value">{{ selectedCard.porIdx || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">卷取机编号：</span>
                <span class="detail-value">{{ selectedCard.trIdx || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <!-- 加载状态 -->
              <div class="empty-tip" v-if="isLoadingReturn">加载回退信息中...</div>

              <!-- 错误状态 -->
              <div class="empty-tip" v-else-if="returnError" style="color: #f56c6c;">
                {{ returnError }}
              </div>

              <!-- 回退信息内容 -->
              <div class="detail-list" v-else-if="Object.keys(returnInfo).length > 0">
                <div class="detail-item">
                  <span class="detail-label">回退钢卷号：</span>
                  <span class="detail-value">{{ returnInfo.entryMatId || '-' }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">回退计划ID：</span>
                  <span class="detail-value">{{ returnInfo.planId || '-' }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">回退计划号：</span>
                  <span class="detail-value">{{ returnInfo.planNo || '-' }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">回退类型：</span>
                  <span class="detail-value">{{ returnInfo.returnType || '-' }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">回退重量：</span>
                  <span class="detail-value">
                    {{ returnInfo.returnWeight || '-' }}
                    {{ returnInfo.returnWeight ? 'kg' : '' }}
                  </span>
                </div>
              </div>

              <!-- 无回退信息 -->
              <div class="empty-tip" v-else>无回退信息</div>
            </el-col>
          </el-row>
          <el-row v-else>
            <div class="empty-tip">请选择钢卷卡片查看详情</div>
          </el-row>
        </div>

        <div style="border: 1px solid #000; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
          <el-row v-if="selectedCard">
            <div class="operation-panel">
              <div class="panel-content">
                <!-- 非调整模式：显示操作按钮 -->
                <div class="operation-buttons">
                  <div class="button-group">
                    <el-button size="mini" type="primary" @click="handleOperate(selectedCard, 'ONLINE')"
                      class="btn-block">
                      钢卷上线
                    </el-button>
                    <el-button size="mini" type="warning" @click="handleOperate(selectedCard, 'UNLOAD')"
                      class="btn-block mt-2">
                      手动卸卷
                    </el-button>
                    <el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'ALL_RETURN')"
                      class="btn-block mt-2">
                      整卷回退
                    </el-button>
                    <el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'HALF_RETURN')"
                      class="btn-block mt-2">
                      半卷回退
                    </el-button>
                    <el-button size="mini" type="info" @click="handleOperate(selectedCard, 'BLOCK')"
                      class="btn-block mt-2">
                      卸卷并封闭
                    </el-button>
                    <!-- <el-button size="mini" type="info" @click="handleOperate(selectedCard, 'THROW_TAIL')" class="btn-block mt-2">
                甩尾
              </el-button> -->
                  </div>
                </div>
              </div>
            </div>
          </el-row>

          <el-row v-else>
            <div class="empty-tip">请选择钢卷卡片进行操作</div>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="operateMatStatus" :title="getOperateTitle" width="50%">
      <el-form :model="operateMatForm" :rules="operateRules" ref="operateForm" label-width="120px">
        <el-form-item label="开卷机编号" prop="porIdx">
          <el-input v-model="operateMatForm.porIdx"></el-input>
        </el-form-item>
        <el-form-item label="卷取机编号" prop="trIdx">
          <el-input v-model="operateMatForm.trIdx"></el-input>
        </el-form-item>
        <el-form-item label="计划id" prop="planId">
          <el-input v-model="operateMatForm.planId" placeholder="请输入计划ID"></el-input>
        </el-form-item>
        <el-form-item label="钢卷号" prop="entryMatId">
          <el-input v-model="operateMatForm.entryMatId" placeholder="请输入钢卷号"></el-input>
        </el-form-item>
        <!-- <el-form-item label="计划号" prop="planNo">
          <el-input v-model="operateMatForm.planNo" placeholder="请输入计划号"></el-input>
        </el-form-item> -->
        <el-form-item label="操作类型" prop="operation">
          <el-select v-model="operateMatForm.operation" disabled>
            <el-option label="钢卷上线" value="ONLINE"></el-option>
            <el-option label="手动卸卷" value="UNLOAD"></el-option>
            <el-option label="整卷回退" value="ALL_RETURN"></el-option>
            <el-option label="半卷回退" value="HALF_RETURN"></el-option>
            <el-option label="卸卷并封闭" value="BLOCK"></el-option>
            <!-- <el-option label="甩尾" value="THROW_TAIL"></el-option> -->
          </el-select>
        </el-form-item>

        <!-- 回退相关字段 -->
        <template v-if="['ALL_RETURN', 'HALF_RETURN'].includes(operateMatForm.operation)">
          <el-form-item label="回退卷号" prop="returnMatId">
            <el-input v-model="operateMatForm.returnMatId" placeholder="请输入回退卷号"></el-input>
          </el-form-item>
          <el-form-item label="回退重量" prop="returnWeight">
            <el-input v-model="operateMatForm.returnWeight" placeholder="请输入回退重量"></el-input>
          </el-form-item>
          <el-form-item label="回退备注" prop="returnRemark">
            <el-input v-model="operateMatForm.returnRemark" rows="3"></el-input>
          </el-form-item>
        </template>

        <!-- 产出长度字段 -->
        <template v-if="['PRODUCING', 'PRODUCT'].includes(operateMatForm.operation)">
          <el-form-item label="产出钢卷长度" prop="coilLength">
            <el-input v-model="operateMatForm.coilLength" type="number" placeholder="请输入产出钢卷长度"></el-input>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="operateMatStatus = false">取消</el-button>
        <el-button type="primary" @click="submitOperateForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import createFetch from '@/api/l2/track'
import KnovaStage from '../../components/knovaStage.vue'
import { rects, lines } from './rects'

export default {
  components: {
    KnovaStage
  },
  props: {
    baseURL: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fetchApi: undefined,
      rects,
      lines,
      matMapList: [],
      selectedCard: null, // 非调整模式选中的单个卡片
      adjustForm: {
        current: null,
        target: null
      }, // 调整模式选中的位置：[当前, 目标]，双向绑定
      adjustMode: false, // 是否为调整模式
      deviceMap: {},
      operateMatForm: {
        porIdx: null,
        trIdx: null,
        planId: '',
        entryMatId: '',
        // planNo: '',
        operation: '',
        returnMatId: '',
        returnWeight: null,
        returnRemark: '',
        coilLength: null
      },
      operateRules: {
        planId: [{ required: true, message: '请输入计划id', trigger: 'blur' }],
        entryMatId: [{ required: true, message: '请输入钢卷号', trigger: 'blur' }],
        operation: [{ required: true, message: '请选择操作类型', trigger: 'change' }],
        returnMatId: [
          {
            required: true,
            message: '请输入回退卷号',
            trigger: 'blur',
            validator: (rule, val, cb) => {
              if (['ALL_RETURN', 'HALF_RETURN'].includes(this.operateMatForm.operation) && !val) {
                cb(new Error('请输入回退卷号'))
              } else cb()
            }
          }
        ],
        returnWeight: [
          {
            required: true,
            message: '请输入回退重量',
            trigger: 'blur',
            validator: (rule, val, cb) => {
              if (['ALL_RETURN', 'HALF_RETURN'].includes(this.operateMatForm.operation) && (val === null || val === '')) {
                cb(new Error('请输入回退重量'))
              } else cb()
            }
          }
        ]
      },
      operateMatStatus: false, // 操作对话框显示状态
      returnInfo: {}, // 存储回退接口返回的数据
      isLoadingReturn: false, // 回退信息加载状态
      returnError: '' // 回退信息获取失败的提示
    }
  },
  computed: {
    // 操作对话框标题
    getOperateTitle() {
      const titleMap = {
        'ONLINE': '钢卷上线',
        'UNLOAD': '手动卸卷',
        'ALL_RETURN': '整卷回退',
        'HALF_RETURN': '半卷回退',
        'BLOCK': '卸卷并封闭',
        'THROW_TAIL': '甩尾'
      }
      return titleMap[this.operateMatForm.operation] || '钢卷操作'
    }
  },

  methods: {
    // 获取钢卷数据
    fetchData() {
      this.fetchApi.getTrackMatPosition().then(res => {
        this.matMapList = res.data.matMapList || []
        // this.deviceMap = res.data.matMapList || {}
      }).catch(err => {
        console.error('获取钢卷数据失败：', err)
        this.$message.error('获取数据失败，请重试')
      })
    },

    /**
     * 获取回退信息
     * @param {Number} posIdx - 位置索引（接口必填query参数）
     */
    fetchReturnData(posIdx) {
      // 1. 校验posIdx
      if (!posIdx && posIdx !== 0) {
        this.returnInfo = {};
        this.returnError = '缺少位置索引（posIdx），无法获取回退信息';
        return;
      }

      // 2. 加载状态初始化
      this.isLoadingReturn = true;
      this.returnError = '';

      // 3. 调用回退接口（posIdx作为query参数传递）
      this.fetchApi.getBackData({ posIdx })
        .then(res => {
          this.isLoadingReturn = false;
          // 接口成功且有数据
          if (res.code === 200 && res.data) {
            this.returnInfo = res.data;
          } else {
            this.returnInfo = {};
            this.returnError = res.msg || '获取回退信息失败';
          }
        })
        .catch(err => {
          this.isLoadingReturn = false;
          this.returnInfo = {};
          this.returnError = '获取回退信息出错，请重试';
          console.error('回退信息接口异常：', err);
        });
    },

    // 选择卡片（区分调整/非调整模式）
    selectCard(item) {
      this.selectedCard = this.selectedCard === item ? null : item
      // 选中卡片时查询回退信息，取消选中时清空
      if (this.selectedCard) {
        this.fetchReturnData(this.selectedCard.posIdx);
        this.adjustForm.current = this.selectedCard.positionNameEn
      } else {
        this.returnInfo = {};
        this.returnError = '';
        this.adjustForm.current = null
      }
    },

    // 确认调整位置
    handleConfirmAdjust() {
      const { current, target } = this.adjustForm

      if (!current || !target) {
        this.$message.warning('请选择当前位置和目标位置')
        return
      }

      const params = {
        currentPos: current,
        targetPos: target,
      }

      this.$confirm(`确定将 ${current} 的钢卷调整到 ${target}？`, '确认调整', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fetchApi.adjustPosition(params).then(() => {
          this.$message.success('调整成功')
          this.exitAdjustMode()
          this.fetchData()
        }).catch(err => {
          console.error('调整失败：', err)
          this.$message.error('调整失败，请重试')
        })
      }).catch(() => {
        this.$message.info('已取消调整')
      })
    },

    // 打开操作对话框
    handleOperate(row, operation) {
      this.$refs.operateForm?.resetFields()
      this.operateMatForm = {
        porIdx: row.posIdx || null,
        trIdx: row.posIdx || null,
        planId: row.planId || '',
        entryMatId: row.matId || '',
        planNo: row.planNo || '',
        operation: operation,
        returnMatId: '',
        returnWeight: null,
        returnRemark: '',
        coilLength: null
      }
      this.operateMatStatus = true
    },

    // 提交操作表单 
    submitOperateForm() {
      this.$refs.operateForm.validate(valid => {
        if (valid) {
          this.fetchApi.operateMat(this.operateMatForm).then(() => {
            this.$message.success('操作成功')
            this.operateMatStatus = false
            this.fetchData()
          }).catch(err => {
            console.error('操作失败：', err)
            this.$message.error('操作失败，请重试')
          })
        } else {
          this.$message.warning('请完善表单信息')
        }
      })
    }
  },

  mounted() {
    this.fetchApi = createFetch(this.baseURL)
    this.fetchData()
  }
}
</script>

<style scoped lang="scss">
.graph-container-box {
  width: 100%;
  box-sizing: border-box;
  height: calc(100vh - 86px);
  padding: 20px;
  // background-color: #c0c0c0;
  overflow: hidden;
}

.graph-container {
  width: 100%;
  height: 100%;
  position: relative;

  img {
    width: 1881px;
    height: 608px;
  }

  // 图形元素基础样式
  .graph-list>div {
    position: absolute;
  }

  // 文字容器样式
  .text-wrapper {
    position: relative;
    height: 100%;
  }

  // 文字基础样式（可被配置项覆盖）
  .text-wrapper span {
    position: absolute;
    color: #333;
    /* 默认文字颜色 */
    font-size: 14px;
    /* 默认文字大小 */
  }
}
</style>
