<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="年月" style="width: 308px">
        <el-date-picker
          v-model="dateRange"
          type="monthrange"
          value-format="YYYY-MM-DD"
          range-separator="-"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="厂区" prop="factory">
        <el-select v-model="queryParams.factory" placeholder="请选择厂区" clearable style="width: 240px">
          <el-option
            v-for="dict in da_ranch"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['dryMatterCorrection:dryMatterCorrection:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['dryMatterCorrection:dryMatterCorrection:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['dryMatterCorrection:dryMatterCorrection:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['dryMatterCorrection:dryMatterCorrection:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table 
      v-loading="loading" 
      :data="dryMatterCorrectionList" 
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column type="selection" align="center" />
      <el-table-column label="年月" align="center" prop="datetime" sortable>
        <template #default="scope">
          <span>{{ parseTime(scope.row.datetime, '{y}-{m}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="厂区" align="center" prop="factory">
        <template #default="scope">
          <dict-tag :options="da_ranch" :value="scope.row.factory"/>
        </template>
      </el-table-column>
      <el-table-column label="干物质含量" align="center" prop="content" sortable />
      <el-table-column label="干物质标准" align="center" prop="standard" sortable />
      <el-table-column label="干物质系数" align="center" prop="coefficient" sortable>
        <template #default="scope">
          <span>{{ formatCoefficient(scope.row.coefficient) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['dryMatterCorrection:dryMatterCorrection:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['dryMatterCorrection:dryMatterCorrection:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :page-sizes="[20, 50, 100, 200, 500, 1000, 2000]"
      @pagination="getList"
    />

    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="dryMatterCorrectionRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="年月" prop="datetime">
          <el-date-picker clearable
            v-model="form.datetime"
            type="month"
            value-format="YYYY-MM"
            placeholder="请选择年月"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="厂区" prop="factory">
          <el-select v-model="form.factory" placeholder="请选择厂区" style="width: 100%">
            <el-option
              v-for="dict in da_ranch"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="干物质含量" prop="content">
          <el-input v-model="form.content" placeholder="请输入干物质含量" @input="calculateCoefficient" />
        </el-form-item>
        <el-form-item label="干物质标准" prop="standard">
          <el-input v-model="form.standard" placeholder="请输入干物质标准" @input="calculateCoefficient" />
        </el-form-item>
        <el-form-item label="干物质系数">
          <el-input :value="formatCoefficient(form.coefficient)" placeholder="自动计算" readonly>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="DryMatterCorrection">
import { 
  listDryMatterCorrection, 
  getDryMatterCorrection, 
  delDryMatterCorrection, 
  addDryMatterCorrection, 
  updateDryMatterCorrection 
} from "@/api/dairyProducts/dryMatterCorrection/dryMatterCorrection.js"
import { getCurrentInstance, ref, reactive, toRefs } from 'vue'

const { proxy } = getCurrentInstance()
const { da_ranch } = proxy.useDict('da_ranch')

const dryMatterCorrectionList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const dateRange = ref([]) // 新增：日期范围变量

// 修复：直接使用 reactive 定义 queryParams，解决下拉框回显和响应式丢失问题
const queryParams = reactive({
  pageNum: 1,
  pageSize: 20, // 默认20条
  factory: null,
  // datetime 字段已移除，后端使用 params.beginTime 和 params.endTime
})

const form = ref({
  id: null,
  datetime: null,
  factory: null,
  content: null,
  standard: 18,
  coefficient: null
})

const rules = {
  datetime: [{ required: true, message: "年月不能为空", trigger: "blur" }],
  factory: [{ required: true, message: "厂区不能为空", trigger: "blur" }],
  content: [
    { required: true, message: "干物质含量不能为空", trigger: "blur" },
    { pattern: /^\d+(\.\d+)?$/, message: "请输入有效数字", trigger: "blur" }
  ],
  standard: [
    { required: true, message: "干物质标准不能为空", trigger: "blur" },
    { pattern: /^\d+(\.\d+)?$/, message: "请输入有效数字", trigger: "blur" },
    { validator: (rule, value, callback) => {
        if (value == 0) {
          callback(new Error("干物质标准不能为零"));
        } else {
          callback();
        }
      }, trigger: "blur" }
  ]
}

function formatCoefficient(value) {
  if (value === null || value === undefined) return '';
  const num = typeof value === 'string' ? parseFloat(value) : value;
  return !isNaN(num) ? num.toFixed(2) : '';
}

function calculateCoefficient() {
  if (form.value.content && form.value.standard && form.value.standard != 0) {
    const content = parseFloat(form.value.content);
    const standard = parseFloat(form.value.standard);
    form.value.coefficient = Math.round((content / standard) * 100) / 100;
  } else {
    form.value.coefficient = null;
  }
}

/** 查询干物质校正列表 */
function getList() {
  loading.value = true
  // 处理日期范围
  // 注意：虽然是月份选择，为了配合后端 SQL 的 DATE_FORMAT 解析，建议传完整的日期字符串
  proxy.addDateRange(queryParams, dateRange.value)
  
  listDryMatterCorrection(queryParams).then(response => {
    dryMatterCorrectionList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

function cancel() {
  open.value = false
  reset()
}

function reset() {
  form.value = {
    id: null,
    datetime: null,
    factory: null,
    content: null,
    standard: 18,
    coefficient: null
  }
  proxy.resetForm("dryMatterCorrectionRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [] // 清空日期范围
  queryParams.factory = null // 显式重置下拉框绑定值
  proxy.resetForm("queryRef")
  handleQuery()
}

function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

function handleAdd() {
  reset()
  open.value = true
  title.value = "添加干物质校正"
}

function handleUpdate(row) {
  reset()
  const _id = row.id || ids.value
  getDryMatterCorrection(_id).then(response => {
    form.value = response.data
    if (form.value.content && form.value.standard) {
      form.value.coefficient = form.value.content / form.value.standard;
    }
    // 将日期转换为年月格式
    if (form.value.datetime) {
      form.value.datetime = proxy.parseTime(form.value.datetime, "{y}-{m}");
    }
    open.value = true
    title.value = "修改干物质校正"
  })
}

function submitForm() {
  proxy.$refs["dryMatterCorrectionRef"].validate(valid => {
    if (valid) {
      // 重新计算确保数据准确
      if (form.value.content && form.value.standard && form.value.standard != 0) {
        const content = parseFloat(form.value.content);
        const standard = parseFloat(form.value.standard);
        form.value.coefficient = Math.round((content / standard) * 100) / 100;
      }
      
      const request = form.value.id ? updateDryMatterCorrection(form.value) : addDryMatterCorrection(form.value);
      
      request.then(response => {
        proxy.$modal.msgSuccess(form.value.id ? "修改成功" : "新增成功");
        open.value = false;
        getList();
      }).catch(error => {
        if (error.message && error.message.includes("已存在记录")) {
          proxy.$modal.msgError(error.message);
        } else {
          proxy.$modal.msgError((form.value.id ? "修改" : "新增") + "失败：" + (error.message || "未知错误"));
        }
      });
    }
  })
}

function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal.confirm('是否确认删除干物质校正编号为"' + _ids + '"的数据项？').then(function() {
    return delDryMatterCorrection(_ids)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

function handleExport() {
  proxy.download('dryMatterCorrection/dryMatterCorrection/export', {
    ...queryParams
  }, `干物质校正数据_${new Date().getTime()}.xlsx`)
}

getList()
</script>

<style scoped>
.el-table {
  font-size: 14px;
}
.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}
.el-table td, .el-table th {
  padding: 12px 0;
}
.el-table .cell {
  padding: 0 15px;
}
.el-button + .el-button {
  margin-left: 5px;
}
/* 确保表单元素宽度一致 */
.el-input, .el-select {
  width: 100%;
}
.el-form-item {
  margin-bottom: 15px;
}
</style>