<template>
  <div class="app-container">
    <!-- 增加操作列用于打开弹窗选择排产单，选择后展示选择的排产单的信息 -->
    <PlanSheetList @row-click="handleRowClick" :readonly="true" />

    <div v-if="currentPlanSheetId" class="plan-detail-container" v-loading="loading">
      <!-- 排产单信息 -->
      <div class="card-header">
        <h3>{{ currentPlanSheetInfo.planSheetName || '排产单详情' }}</h3>
      </div>
      <div class="plan-info">
        <el-row :gutter="20">
          <el-col :span="6">
            <span class="label">排产单号：</span>
            <span>{{ currentPlanSheetInfo.planCode }}</span>
          </el-col>
          <el-col :span="6">
            <span class="label">排产人：</span>
            <span>{{ currentPlanSheetInfo.scheduler }}</span>
          </el-col>
          <el-col :span="6">
            <span class="label">排产时间：</span>
            <span>{{ currentPlanSheetInfo.planDate }}</span>
          </el-col>
          <el-col :span="6">
            <span class="label">产线：</span>
            <span>{{ currentPlanSheetInfo.lineName }}</span>
          </el-col>
        </el-row>
      </div>

      <!-- 可编辑表格 -->

      <el-row :gutter="10">
        <el-col :span="12">
          <!-- 统计信息 -->
          <div class="coil-stats" style="margin-bottom: 10px; padding: 10px; background-color: #f5f7fa; border-radius: 4px;">
            <span style="margin-right: 20px;"><strong>总条数：{{ totalCount }}</strong></span>
            <span><strong>总重量：{{ totalWeight }} t</strong></span>
          </div>
          <KLPTable v-loading="loading" :data="planDetailList" style="width: 100%" border :floatLayer="true" :floatLayerConfig="floatLayerConfig">
            <el-table-column label="序号" align="center" prop="bizSeqNo" width="80" fixed="left" />

            <!-- 订单信息 -->
            <el-table-column label="订单号" align="center" prop="orderCode" width="200" />
            <el-table-column label="合同号" align="center" prop="contractCode" width="150" />
            <el-table-column label="客户" align="center" prop="customerName" width="180" />
            <el-table-column label="业务员" align="center" prop="salesman" width="120" />

            <!-- 原料信息 -->
            <el-table-column label="原料厂家" align="center" prop="rawManufacturer" width="120" />
            <el-table-column label="原料材质" align="center" prop="rawMaterial" width="120" />
            <el-table-column label="原料厚度" align="center" prop="rawThick" width="100" />
            <el-table-column label="原料宽度" align="center" prop="rawWidth" width="100" />

            <!-- 成品信息 -->
            <el-table-column label="成品名称" align="center" prop="productName" width="170" />
            <el-table-column label="成品材质" align="center" prop="productMaterial" width="120" />
            <el-table-column label="成品镀层" align="center" prop="coatingG" width="120" />

            <el-table-column label="成品宽度" align="center" prop="productWidth" width="100" />
            <el-table-column label="轧制厚度" align="center" prop="rollingThick" width="100" />
            <el-table-column label="标签厚度" align="center" prop="markCoatThick" width="120" />
            <el-table-column label="吨钢长度区间" align="center" prop="tonSteelLengthRange" width="120" />
            <el-table-column label="数量" align="center" prop="planQty" width="100" />
            <el-table-column label="重量" align="center" prop="planWeight" width="100" />
            <el-table-column label="表面处理" align="center" prop="surfaceTreatmentDesc" width="100" />
            <el-table-column label="切边要求" align="center" prop="widthReq" width="100" />
            <el-table-column label="包装要求" align="center" prop="productPackaging" width="100" />
            <el-table-column label="宽度要求" align="center" prop="productEdgeReq" width="100" />
            <el-table-column label="用途" align="center" prop="usageReq" width="100" />

            <!-- 生产信息 -->
            <el-table-column label="开始时间" align="center" prop="startTime" width="180" />
            <el-table-column label="结束时间" align="center" prop="endTime" width="180" />
            <el-table-column label="后处理" align="center" prop="postProcess" width="100" />
            <el-table-column label="下工序" align="center" prop="nextProcess" width="100" />
            <el-table-column label="取样" align="center" prop="sampleReq" width="100" />
            <el-table-column label="备注" align="center" prop="remark" />
          </KLPTable>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
        </el-col>
        <el-col :span="12">
          <CoilTable :coilList="coilList" tableHeight="calc(100vh - 340px)" />
        </el-col>
      </el-row>


      
    </div>
    <el-empty v-else class="appempty" description="选择排产单查看详情" />
  </div>
</template>

<script>
import { updatePlanDetail, listPlanDetail, addPlanDetail, delPlanDetail, listPlanCoils } from "@/api/aps/planDetail";
import { getPlanSheet } from "@/api/aps/planSheet";

import { listOrder } from '@/api/crm/order';
import { listOrderItem } from '@/api/crm/orderItem'
import PlanSheetList from "@/views/aps/planSheet/PlanSheetList.vue";
import CoilTable from "@/views/crm/components/CoilTable.vue";

export default {
  name: "PlanSheet",
  dicts: ['sys_lines'],
  components: {
    PlanSheetList,
    CoilTable
  },
  computed: {
    // 计算总条数
    totalCount() {
      return this.planDetailList.length;
    },
    // 计算总重量
    totalWeight() {
      return this.planDetailList.reduce((sum, item) => {
        return sum + (Number(item.planWeight) || 0);
      }, 0).toFixed(2);
    }
  },
  data() {
    return {
      // 当前选中的排产单ID
      currentPlanSheetId: undefined,
      // 当前选中的明细数据
      currentPlanDetail: {},
      // 对话框可见状态
      dialogVisible: false,
      // 当前排产单详情信息
      currentPlanSheetInfo: {},
      // 最近选择的排产单列表
      recentPlanSheets: [],
      // 排产单明细表格数据
      planDetailList: [],
      // 总条数
      total: 0,
      // 加载状态
      loading: false,

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        planSheetId: undefined
      },
      // 订单对话框
      orderDialogVisible: false,
      // 订单明细对话框
      orderItemDialogVisible: false,
      // 订单列表
      orderList: [],
      // 订单总数
      orderTotal: 0,
      // 订单加载状态
      orderLoading: false,
      // 订单查询参数
      orderQueryParams: {
        pageNum: 1,
        pageSize: 50,
        contractCode: undefined,
        customerName: undefined,
        salesman: undefined
      },
      // 订单明细列表
      orderItemList: [],
      // 订单明细加载状态
      orderItemLoading: false,
      // 当前编辑的行
      currentEditingRow: null,
      // 钢卷列表
      coilList: [],
      // floatLayer配置
      floatLayerConfig: {
        columns: [
          { label: '序号', prop: 'bizSeqNo' },
          { label: '订单号', prop: 'orderCode' },
          { label: '合同号', prop: 'contractCode' },
          { label: '客户', prop: 'customerName' },
          { label: '业务员', prop: 'salesman' },
          { label: '原料厂家', prop: 'rawManufacturer' },
          { label: '原料材质', prop: 'rawMaterial' },
          { label: '原料厚度', prop: 'rawThick' },
          { label: '原料宽度', prop: 'rawWidth' },
          { label: '成品名称', prop: 'productName' },
          { label: '成品材质', prop: 'productMaterial' },
          { label: '成品镀层', prop: 'coatingG' },
          { label: '成品宽度', prop: 'productWidth' },
          { label: '轧制厚度', prop: 'rollingThick' },
          { label: '标签厚度', prop: 'markCoatThick' },
          { label: '吨钢长度区间', prop: 'tonSteelLengthRange' },
          { label: '数量', prop: 'planQty' },
          { label: '重量', prop: 'planWeight' },
          { label: '表面处理', prop: 'surfaceTreatmentDesc' },
          { label: '切边要求', prop: 'widthReq' },
          { label: '包装要求', prop: 'productPackaging' },
          { label: '宽度要求', prop: 'productEdgeReq' },
          { label: '用途', prop: 'usageReq' },
          { label: '开始时间', prop: 'startTime' },
          { label: '结束时间', prop: 'endTime' },
          { label: '后处理', prop: 'postProcess' },
          { label: '下工序', prop: 'nextProcess' },
          { label: '取样', prop: 'sampleReq' },
          { label: '备注', prop: 'remark' },
        ],
        title: '详细信息'
      },
    };
  },
  created() {
    // 从本地存储加载最近选择的排产单
    this.loadRecentPlanSheets();
  },
  methods: {
    // 打开管理排产单对话框
    openDialog() {
      this.dialogVisible = true;
    },
    // 点击排产单行，显示详情
    handleRowClick(row) {
      this.currentPlanSheetId = row.planSheetId;
      this.currentPlanDetail = {};
      this.dialogVisible = false;

      // 获取排产单详情
      this.getPlanSheetDetail(row.planSheetId);

      // 获取排产单对应的钢卷列表
      this.getCoilList(row.planSheetId);

      // 添加到最近选择的列表
      this.addToRecentPlanSheets(row);

      // 更新查询参数
      this.queryParams.planSheetId = row.planSheetId;

      // 获取排产单明细列表
      this.getList();
    },
    // 获取排产单详情
    getPlanSheetDetail(planSheetId) {
      getPlanSheet(planSheetId).then(response => {
        this.currentPlanSheetInfo = response.data;
      });
    },
    // 获取排产单对应的钢卷列表
    getCoilList(planSheetId) {
      listPlanCoils(planSheetId).then(response => {
        this.coilList = response.data;
        this.total = response.total;
      });
    },
    // 添加到最近选择的排产单列表
    addToRecentPlanSheets(planSheet) {
      // 移除已存在的相同排产单
      this.recentPlanSheets = this.recentPlanSheets.filter(item => item.planSheetId !== planSheet.planSheetId);

      // 添加到列表开头
      this.recentPlanSheets.unshift(planSheet);

      // 限制最近选择的数量为5个
      if (this.recentPlanSheets.length > 5) {
        this.recentPlanSheets = this.recentPlanSheets.slice(0, 5);
      }

      // 保存到本地存储
      this.saveRecentPlanSheets();
    },
    // 从本地存储加载最近选择的排产单
    loadRecentPlanSheets() {
      try {
        const stored = localStorage.getItem('recentPlanSheets');
        if (stored) {
          this.recentPlanSheets = JSON.parse(stored);
        }
      } catch (error) {
        console.error('Failed to load recent plan sheets:', error);
        this.recentPlanSheets = [];
      }
    },
    // 保存最近选择的排产单到本地存储
    saveRecentPlanSheets() {
      try {
        localStorage.setItem('recentPlanSheets', JSON.stringify(this.recentPlanSheets));
      } catch (error) {
        console.error('Failed to save recent plan sheets:', error);
      }
    },
    // 选择最近的排产单
    selectRecentPlanSheet(item) {
      this.currentPlanSheetId = item.planSheetId;
      this.currentPlanDetail = {};
      this.currentPlanSheetInfo = item;

      // 更新查询参数
      this.queryParams.planSheetId = item.planSheetId;

      // 获取排产单明细列表
      this.getList();
    },
    // 处理排产明细行点击事件
    handlePlanDetailChange(row) {
      this.currentPlanDetail = row;
    },
    // 提交排产明细变更
    submitDetail() {
      updatePlanDetail(this.currentPlanDetail).then(response => {
        this.$message({
          message: "变更保存成功",
          type: "success"
        });
      });
    },
    // 获取排产单明细列表
    getList() {
      this.loading = true;
      listPlanDetail({
        ...this.queryParams,
        planSheetId: this.currentPlanSheetId,
      }).then(response => {
        // 按照序号正序排序
        this.planDetailList = response.rows.sort((a, b) => {
          return parseInt(a.bizSeqNo) - parseInt(b.bizSeqNo);
        });
        this.total = response.total;
        this.loading = false;
      });
    },
    // 新增明细
    handleAdd() {
      const newRow = {
        planSheetId: this.currentPlanSheetId,
        bizSeqNo: this.planDetailList.length + 1
      };

      addPlanDetail(newRow).then(response => {
        this.$message({
          message: "新增成功",
          type: "success"
        });
        this.getList();
      });
    },
    // 保存行
    handleSave(row) {
      updatePlanDetail(row).then(response => {
        this.$message({
          message: "保存成功",
          type: "success"
        });
      }).catch(error => {
        this.$message({
          message: "保存失败，正在重新获取数据",
          type: "error"
        });
        // 保存失败时获取正确数据
        this.getList();
      });
    },
    // 删除行
    handleDelete(row) {
      this.$confirm('是否确认删除该排产单明细？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delPlanDetail(row.planDetailId).then(response => {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.getList();
        });
      });
    },
    // 打开订单选择对话框
    openOrderDialog(row) {
      this.currentEditingRow = row;
      this.orderDialogVisible = true;
      this.getOrderList();
    },
    // 打开订单明细选择对话框
    openOrderItemDialog(row) {
      this.currentEditingRow = row;
      this.orderItemDialogVisible = true;
      this.orderItemLoading = true;
      listOrderItem({ orderId: row.orderId }).then(res => {
        this.orderItemList = res.rows;
        this.orderItemLoading = false;
      });
    },
    // 获取订单列表
    getOrderList() {
      this.orderLoading = true;
      listOrder(this.orderQueryParams).then(response => {
        this.orderList = response.rows;
        this.orderTotal = response.total;
        this.orderLoading = false;
      });
    },
    // 重置订单查询参数
    resetOrderQuery() {
      this.orderQueryParams = {
        pageNum: 1,
        pageSize: 10,
        contractCode: undefined,
        customerName: undefined,
        salesman: undefined
      };
      this.getOrderList();
    },
    // 选择订单
    selectOrder(row) {
      this.currentEditingRow.orderCode = row.orderCode;
      this.currentEditingRow.contractCode = row.contractCode;
      this.currentEditingRow.customerName = row.companyName;
      this.currentEditingRow.salesman = row.salesman;
      this.currentEditingRow.orderId = row.orderId;
      this.orderDialogVisible = false;

      // 保存修改
      this.handleSave(this.currentEditingRow);
    },
    // 选择订单明细
    selectOrderItem(row) {
      this.currentEditingRow.productName = row.productType;
      this.currentEditingRow.productMaterial = row.material;
      this.currentEditingRow.productWidth = row.width;
      this.currentEditingRow.rollingThick = row.thickness;
      this.currentEditingRow.markCoatThick = row.thickness;
      this.currentEditingRow.tonSteelLengthRange = 0;
      this.currentEditingRow.planQty = row.productNum;
      this.currentEditingRow.planWeight = row.weight;
      this.currentEditingRow.surfaceTreatment = row.surfaceTreatment;
      this.currentEditingRow.productPackaging = row.packagingReq;
      this.currentEditingRow.widthReq = row.edgeCuttingReq;
      this.currentEditingRow.productEdgeReq = row.widthTolerance;
      this.currentEditingRow.usageReq = row.purpose;

      this.orderItemDialogVisible = false;

      // 保存修改
      this.handleSave(this.currentEditingRow);
    },
    // 处理订单行点击
    handleOrderSelect(row) {
      this.selectOrder(row);
    }
  }
};
</script>

<style scoped>
.header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plan-info {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.plan-info .label {
  font-weight: 600;
  margin-right: 5px;
}

.mb20 {
  margin-bottom: 20px;
}

.plan-detail-container {
  margin-top: 20px;
}

.el-table {
  margin-top: 10px;
}

.el-table .cell {
  white-space: normal;
  word-break: break-word;
}

.order-dialog-content {
  padding: 10px 0;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.appempty {
  margin-top: 20px;
}

::v-deep .el-table .cell {
  padding: 0;
}

/* ::v-deep .el-input__inner {
  padding: 0 1px;
} */
</style>
