<template>
  <div class="page-container column-container">
    <!-- 搜索区 -->
    <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="产品描述：">
        <el-input placeholder="请输入产品描述" v-model.trim="queryParams.productDescription" style="width: 150px" clearable
          @keyup.enter="handleQuery" @keydown.enter.prevent />
      </el-form-item>
      <el-form-item label="生产计划单号：">
        <el-input placeholder="请输入生产计划单号" v-model.trim="queryParams.productionPlanNo" style="width: 120px" clearable
          @keyup.enter="handleQuery" @keydown.enter.prevent />
      </el-form-item>
      <el-form-item label="批次号：">
        <el-input placeholder="请输入批次号" v-model.trim="queryParams.lotCode" style="width: 130px" clearable
          @keyup.enter="handleQuery" @keydown.enter.prevent />
      </el-form-item>
      <el-form-item label="工段：">
        <el-autocomplete v-model.trim="deptName" clearable :fetch-suggestions="queryDeptSearchAsync" placeholder="请选择工段"
          @select="handleDeptSelect" style="width: 140px" @clear="handleClearDept">
          <template #default="{ item }">
            <div style="
                display: flex;
                flex-direction: row;
                justify-content: space-between;
              ">
              <div class="name" style="font-size: 12px">
                {{ item.deptName }}
              </div>
            </div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item label="标识：">
        <el-select style="width: 160px" multiple v-model="queryParams.flags" collapse-tags collapse-tags-tooltip
          clearable placeholder="请选择标识" @change="handleFlagChange">
          <el-option v-for="item in is_identification" :key="item.value" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间：">
        <el-date-picker v-model="queryParams.startTime" type="date" value-format="YYYY-MM-DD" :editable="false"
          :clearable="false" placeholder="请选择开始时间" style="width: 130px" @change="handleDateChange" />
        <span>To</span>
        <el-date-picker v-model="queryParams.endTime" type="date" value-format="YYYY-MM-DD" :editable="false"
          :clearable="false" placeholder="请选择结束时间" style="width: 130px" @change="handleDateChange" />
      </el-form-item>
      <el-form-item>
        <el-button type="info" icon="Search" @click="handleQuery">搜索</el-button>
      </el-form-item>
      <div style="margin-top: 20px">
        <el-button :disabled="selections.length == 0" type="primary" @click="handleUpDateFurnace">炉号修改</el-button>
      </div>
    </el-form>
    <!-- 列表区 -->
    <div class="el-table-container">
      <div class="el-table-inner-container">
        <el-table ref="dayworkTable" v-loading="loading" row-key="lotId" @selection-change="handleSelectionChange"
          height="100%" :data="dayworkList">
          <el-table-column type="selection" width="40" align="center" />
          <el-table-column label="客户简称" prop="companyAlias" width="120" align="center" />
          <el-table-column label="生产计划单号" width="100" prop="productionPlanNo" align="center" />
          <el-table-column label="序号" width="60" prop="lineNumber" align="center" />

          <el-table-column label="批次号" prop="lotCode" align="center" width="150px">
            <template #default="scope">
              <el-button link type="primary" @click="handleColumnClick(scope.row.lotCode)"><span>{{ scope.row.lotCode
                  }}</span></el-button>
            </template>
          </el-table-column>
          <el-table-column label="产品描述" prop="productDescription" align="center" />
          <el-table-column label="图纸版本" width="80" prop="technologyVersion" align="center" />
          <el-table-column label="投产量" width="100" prop="productionQuantity" align="center" />
          <el-table-column label="下达日期" prop="createTime" width="100" align="center">
            <template #default="scope">
              <span>{{
                proxy.moment(scope.row.createTime).format("YYYY-MM-DD")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="当前工段" width="100" prop="deptName" align="center" />
          <el-table-column label="当前工序" width="120" prop="processAlias" align="center" />
          <el-table-column label="标识" width="300" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.isWaste == 1" class="spacing" type="danger">{{ "批废" }}</el-tag>
              <el-tag v-if="scope.row.isAmend == 1" class="spacing" type="danger">{{ "工艺修改" }}</el-tag>
              <el-tag v-if="scope.row.isWasteRecycling == 1" class="spacing" type="primary">{{ "废品回用" }}</el-tag>
              <el-tag v-if="scope.row.isSuperaddition == 1" class="spacing" type="warning">{{ "追增" }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="母批号" prop="fromCode" align="center">
            <template #default="scope">
              <el-button link type="primary" width="150px" @click="handleColumnClick(scope.row.fromCode)"><span>{{
                scope.row.fromCode }}</span></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getDaywork" />
      <furnace-dialog ref="furnaceDialogRef" @handleSaveSuccess="getDaywork"></furnace-dialog>
  </div>
</template>
<script setup name="furnaceInfo">
import { listDept } from "@/api/system/dept";
import { getDeptList } from "@/api/system/dept.js";
import { getDayworkList} from "@/api/business/daywork.js";
import { ref } from "vue";
import furnaceStore from "@/store/modules/furnaceInfo";
import router from "@/router";
import furnaceDialog from "./furnaceDialog"
const { proxy } = getCurrentInstance();
/** 字典数组区 */
const { is_identification } = proxy.useDict("is_identification");
/** 表单抽屉 页变量 */
const loading = ref(false);
const dayworkList = ref([]);
const total = ref(0);
const deptName = ref("");
const visible = ref(false);
const selections = ref([]);
const deptList = ref([]);

/** 查询对象 */
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  productDescription: "",
  productionPlanNo: "",
  lotCode: "",
  deptId: null,
  flag: null,
  lineNumber: null,
  deptName: "",
  startTime: "",
  endTime: "",
});

/***********************  方法区  ****************************/
/** 打开抽屉 */
function getDept() {
  getNowDate();
  getPassDate();
  //获取工段信息
  queryParams.value.productionPlanNo = "";
  queryParams.value.lineNumber = null;
  getDeptList({ type: 0, isWorkSection: 1 }).then((res) => {
    if (res.code == 200) {
      deptList.value = res.data;
    }
    if (furnaceStore().lotQueryParams != null) {
      deptName.value = furnaceStore().lotQueryParams.deptName;
    }
  });

  getDaywork();
  visible.value = true;
}
function handleDateChange() {
  // queryParams.value.startTime = queryParams.value.startTime + " 00:00:00";
  // queryParams.value.endTime = queryParams.value.endTime + " 23:59:59";
  console.log(queryParams.value.startTime);
}
/** 打开批次详情页 */
function handleColumnClick(lotCode) {
  router.push({ path: "/reviseBath/lotFormParticulars/" + lotCode });
}
window.addEventListener('beforeunload', (event) => {

console.log("999")


// 您可以添加更多需要清除的键


});
//更改炉号
function handleUpDateFurnace() {
  if (selections.value[0].isWaste == 1) {
    proxy.$message.error("批废不能再进行操作");
    return;
  }
  const allIdsSame = selections.value.map(item => item.productionPlanDetailId).every(id => id === selections.value[0].productionPlanDetailId);
  if (!allIdsSame) {
    proxy.$message.error("请选择相同生产计划单号的批次");
    return;
  }
  let data = {
    productionPlanNo: selections.value[0].productionPlanNo,
    lineNumber: selections.value[0].lineNumber,
    dayworkIds :selections.value.map(item => item.id)
  }
  proxy.$refs.furnaceDialogRef.open(data);
}

/**获取生产计划列表 */
function getDaywork() {
  const lotQueryParams = furnaceStore().lotQueryParams;
  console.log("getDaywork", lotQueryParams);

  if (lotQueryParams != null) {
    queryParams.value = lotQueryParams;
  }

  loading.value = true;
  getDayworkList(queryParams.value).then((res) => {
    if (res.code == 200) {
      console.log(res);
      dayworkList.value = res.rows;
      total.value = res.total;
      loading.value = false;
    }
  });
}

function getNowDate() {
  // var nowDate = new Date();
  // var date = {
  //   year: nowDate.getFullYear(),
  //   month: nowDate.getMonth() + 1,
  //   day: nowDate.getDate(),
  // };
  // const dayDate =
  //   date.year +
  //   "-" +
  //   (date.month >= 10 ? date.month : "0" + date.month) +
  //   "-" +
  //   (date.day >= 10 ? date.day : "0" + date.day);
  // console.log(dayDate);
  // queryParams.value.endTime = dayDate;
  queryParams.value.endTime = proxy.moment().format('YYYY-MM-DD');
}

function getPassDate() {
  // var myDate = new Date();
  // myDate.setDate(myDate.getDate() - 29);
  // var dateTemp;
  // var day;
  // for (var i = 0; i < 30; i++) {
  //   if (myDate.getDate() < 10) {
  //     day = "0" + myDate.getDate().toString();
  //   } else {
  //     day = myDate.getDate().toString();
  //   }
  // }
  // var month = myDate.getMonth() + 1;
  // dateTemp =
  //   myDate.getFullYear() +
  //   "-" +
  //   (month < 10 ? "0" + month : "" + month) +
  //   "-" +
  //   day;
  // queryParams.value.startTime = dateTemp;
  queryParams.value.startTime = proxy.moment().subtract(1, 'month').format('YYYY-MM-DD');
}

/**搜索 */
function handleQuery() {
  queryParams.value.lineNumber = null;
  if (
    queryParams.value.endTime < queryParams.value.startTime &&
    queryParams.value.endTime != "" &&
    queryParams.value.startTime != ""
  ) {
    proxy.$modal.msgError("结束时间不能小于开始时间");
  } else {
    const lotQueryParams = JSON.parse(JSON.stringify(queryParams.value));
    console.log("lotQueryParams", lotQueryParams);
    furnaceStore().setlotQueryParams(lotQueryParams);
    getDaywork();
  }
}

function handleSelectionChange(selection) {
  selections.value = selection;
}

const queryDeptSearchAsync = (arg, cb) => {
  const params =
    arg != null
      ? { pageSize: 200, deptName: arg, isWorkSection: 1 }
      : { pageSize: 200 };
  listDept(params).then((res) => {
    const depts = res.rows;
    cb(depts);
  });
};

const handleDeptSelect = (item) => {
  console.log(item);
  deptName.value = item.deptName.trim();
  queryParams.value.deptName = deptName.value;
  queryParams.value.deptId = item.deptId;
};
const handleClearDept = () => {
  deptName.value = "";
  queryParams.value.deptId = null;
};
const handleFlagChange = (selection) => {
  console.log(selection);
};

onMounted(() => {
  getDept();
  // getDaywork();
});
</script>