<template>
  <div class="app-container order-adjust-page">
    <el-row :gutter="12" class="order-adjust-layout">
      <!-- 左：上搜索 + 下预留 -->
      <el-col :span="8" class="order-adjust-left">
        <el-card shadow="never" class="left-top-card">
          <div class="search-title">订单分类</div>
          <el-form ref="queryForm" :model="queryParams" label-width="88px" size="small">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="生产日期" prop="productionDate">
                  <el-date-picker
                    v-model="queryParams.productionDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="生产日期"
                    style="width: 100%"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发货日期" prop="deliveryDate">
                  <el-date-picker
                    v-model="queryParams.deliveryDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="发货日期"
                    style="width: 100%"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="产品类型">
              <div class="product-type-block">
                <div class="product-type-six">
                  <el-checkbox v-model="sixTypes.normalByproduct" @change="onSixTypeAnyChange">普通副产品</el-checkbox>
                  <el-checkbox v-model="sixTypes.gasByproduct" @change="onSixTypeAnyChange">气调副产品</el-checkbox>
                  <el-checkbox v-model="sixTypes.frozenByproduct" @change="onSixTypeAnyChange">冻副产品</el-checkbox>
                  <el-checkbox v-model="sixTypes.normalSplit" @change="onSixTypeAnyChange">普通分割品</el-checkbox>
                  <el-checkbox v-model="sixTypes.gasSplit" @change="onSixTypeAnyChange">气调分割品</el-checkbox>
                  <el-checkbox v-model="sixTypes.frozenSplit" @change="onSixTypeAnyChange">冻分割品</el-checkbox>
                </div>
                <el-checkbox v-model="whiteStrip" class="white-strip-check" @change="onWhiteStripChange">白条</el-checkbox>
                <div class="search-actions">
                  <el-button type="primary" size="mini" @click="handleSelectAllSix">全选</el-button>
                  <el-button size="mini" @click="handleClearSix">全清</el-button>
                  <el-button type="primary" size="mini" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </el-card>

        <el-card shadow="never" class="left-bottom-card">
          <div class="placeholder-tip">下方区域预留</div>
        </el-card>
      </el-col>

      <!-- 右：主内容预留 -->
      <el-col :span="16" class="order-adjust-right">
        <el-card shadow="never" class="right-card">
          <div class="right-body">
            <!-- 右上：表单 -->
            <el-card shadow="never" class="right-top-card">
              <el-form ref="rightForm" :model="rightForm" label-width="88px" size="small">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="物料名称" prop="materialName">
                      <el-input v-model="rightForm.materialName" placeholder="请输入物料名称" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="数量" prop="qty">
                      <decimal-input v-model="rightForm.qty" :precision="2" :min="0" placeholder="请输入数量" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="辅助数量" prop="assistQty">
                      <decimal-input v-model="rightForm.assistQty" :precision="2" :min="0" placeholder="请输入辅助数量" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="16">
                    <el-form-item label="备注" prop="remark">
                      <el-input v-model="rightForm.remark" placeholder="请输入备注" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" class="right-top-actions">
                    <el-button type="primary" size="mini" @click="handleConfirm">确认</el-button>
                    <el-button type="primary" plain size="mini" @click="handlePrintCertificate">合格证打印</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>

            <!-- 右下：表格 -->
            <el-card shadow="never" class="right-bottom-card">
              <el-table :data="rightTableData" border stripe height="100%" class="right-table">
                <el-table-column label="序号" type="index" width="55" align="center" />
                <el-table-column label="市场名称" prop="marketName" min-width="120" align="center" show-overflow-tooltip />
                <el-table-column label="发货客户" prop="deliveryCustomer" min-width="130" align="center" show-overflow-tooltip />
                <el-table-column label="物料名称" prop="materialName" min-width="140" align="center" show-overflow-tooltip />
                <el-table-column label="数量" prop="qty" min-width="90" align="center" />
                <el-table-column label="单位" prop="unit" min-width="80" align="center" />
                <el-table-column label="辅助数量" prop="assistQty" min-width="100" align="center" />
                <el-table-column label="辅助单位" prop="assistUnit" min-width="90" align="center" />
                <el-table-column label="是否分配" prop="allocated" min-width="90" align="center">
                  <template slot-scope="{ row }">
                    <el-tag v-if="row.allocated" type="success" size="mini">是</el-tag>
                    <el-tag v-else type="info" size="mini">否</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" min-width="140" align="center" show-overflow-tooltip />
              </el-table>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DecimalInput from "@/views/components/DecimalInput.vue";

export default {
  name: "OrderAdjust",
  components: { DecimalInput },
  data() {
    return {
      /** 查询参数 */
      queryParams: {
        productionDate: null,
        deliveryDate: null,
      },
      /**
       * 产品类型（上面 6 项）：与「白条」互斥；全选/全清仅作用于此 6 项
       */
      sixTypes: {
        normalByproduct: false,
        gasByproduct: false,
        frozenByproduct: false,
        normalSplit: false,
        gasSplit: false,
        frozenSplit: false,
      },
      /** 白条：勾选时清空上面 6 项 */
      whiteStrip: false,

      /** 右上表单 */
      rightForm: {
        materialName: null,
        qty: null,
        assistQty: null,
        remark: null,
      },
      /** 右下表格 */
      rightTableData: [],
    };
  },
  created() {
    /** 初始化：右下表格模拟数据（后续接接口替换） */
    this.rightTableData = [
      {
        marketName: "市场A",
        deliveryCustomer: "客户A",
        materialName: "示例物料",
        qty: "1",
        unit: "kg",
        assistQty: "1",
        assistUnit: "箱",
        allocated: false,
        remark: null,
      },
    ];
  },
  methods: {
    /**
     * 上面 6 类任一项变化：若有选中则取消「白条」
     */
    onSixTypeAnyChange() {
      if (this.isAnySixSelected()) {
        this.whiteStrip = false;
      }
    },
    /**
     * 「白条」变化：勾选则清空上面 6 项
     * @param {boolean} checked 是否选中
     */
    onWhiteStripChange(checked) {
      if (checked) {
        this.clearSixTypes();
      }
    },
    /**
     * 判断上面 6 类是否至少选了一项
     * @returns {boolean}
     */
    isAnySixSelected() {
      return Object.values(this.sixTypes).some(Boolean);
    },
    /**
     * 上面 6 项全部取消勾选
     */
    clearSixTypes() {
      Object.keys(this.sixTypes).forEach((key) => {
        this.$set(this.sixTypes, key, false);
      });
    },
    /**
     * 全选：仅勾选上面 6 项，并取消「白条」
     */
    handleSelectAllSix() {
      Object.keys(this.sixTypes).forEach((key) => {
        this.$set(this.sixTypes, key, true);
      });
      this.whiteStrip = false;
    },
    /**
     * 全清：仅清空上面 6 项，不修改「白条」
     */
    handleClearSix() {
      this.clearSixTypes();
    },
    /**
     * 搜索（预留接口）
     */
    handleSearch() {
      /** TODO：接订单调整查询接口，携带 queryParams、sixTypes、whiteStrip */
      this.$message.info("搜索待接入接口");
    },
    /**
     * 确认（预留）
     */
    handleConfirm() {
      /** TODO：接确认接口 */
      this.$message.info("确认待接入接口");
    },
    /**
     * 合格证打印（预留）
     */
    handlePrintCertificate() {
      /** TODO：接打印逻辑 */
      this.$message.info("合格证打印待接入");
    },
  },
};
</script>

<style scoped lang="scss">
.order-adjust-page {
  min-height: calc(100vh - 120px);
}

.order-adjust-layout {
  min-height: calc(100vh - 140px);
}

.order-adjust-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.left-top-card,
.left-bottom-card {
  flex-shrink: 0;
}

.left-bottom-card {
  flex: 1;
  min-height: 550px;
}

.search-title {
  font-weight: 600;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #ebeef5;
}

.product-type-block {
  width: 100%;
}

.product-type-six {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 8px;
}

.white-strip-check {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #dcdfe6;
}

.search-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

::v-deep .left-top-card > .el-card__body {
  padding: 10px 12px;
}

::v-deep .left-top-card .el-form-item {
  margin-bottom: 10px;
}

.order-adjust-right {
  min-height: 400px;
}

.right-card {
  min-height: calc(100vh - 140px);
}

.right-body {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 170px);
  min-height: 400px;
  gap: 12px;
}

::v-deep .right-card > .el-card__body {
  height: 100%;
}

.right-top-card {
  flex-shrink: 0;
}

.right-bottom-card {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

::v-deep .right-bottom-card > .el-card__body {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.right-top-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.placeholder-tip {
  color: #909399;
  font-size: 13px;
  padding: 24px;
  text-align: center;
}
</style>
