<template>
  <div class="mainContentBox">
    <Search :searchOptions="searchForm" @data-list="getList" ref="searchRef" />
    <div class="btns">
      <el-button type="primary" @click="add">新增</el-button>
    </div>
    <el-table :data="tableData" border>
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="workOrderCode" label="工单编码" />
      <el-table-column prop="materialCode" label="物料编码" />
      <el-table-column prop="materialModel" label="物料型号" />
      <el-table-column prop="materialName" label="物料名称" />
      <el-table-column prop="orderCode" label="订单编号" />
      <!-- <el-table-column prop="seqNoList" label="管号">
        <template #default="scope">
          {{ scope.row.seqNoList.join(", ") }}
        </template>
      </el-table-column> -->
      <el-table-column prop="hOrder" label="H级">
        <template #default="{ row }">
          {{ row.hOrder == "1" ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            link
            type="primary"
            size="small"
            @click="showSeq(row.seqNoList)"
            >查看管号</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            v-if="row?.state != '3'"
            v-hasPerm="[ButtonPermKeys.PLAN.BTNS.filtersheet_del]"
            @click="deleteSheet(row.id)"
            >删除</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="showProExcel(row.id)"
            >筛选单列表</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="float: right">
      <pagination
        v-model:total="paginationObj.total"
        v-model:page="paginationObj.pageNo"
        v-model:limit="paginationObj.pageSize"
        @pagination="getList"
      />
    </div>

    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      width="950px"
      :before-close="(checkAll = false)"
      @close="dialog.visible = false"
      style="padding-bottom: 40px"
    >
      <!-- <el-card
        style="cursor: pointer; font-size: 20px"
        shadow="always"
        :key="item"
        @click="toShowExcel(item)"
        v-for="item in showProList"
        >{{ item.formName }}</el-card
      > -->
      <el-form
        :model="form"
        ref="formRef"
        label-width="auto"
        style="max-width: 800px"
      >
        <el-form-item
          label="工单编码"
          :rules="[
            {
              required: true,

              trigger: 'blur',
            },
          ]"
          prop="workOrderCode"
        >
          <el-select
            class="tep"
            :disabled="!addStatus"
            v-model="form.workOrderCode"
            @click="dialog1.visible = true"
          />
        </el-form-item>

        <el-form-item
          label="管号"
          :rules="[
            {
              required: true,
              trigger: 'blur',
            },
          ]"
          prop="seqNoList"
        >
          <el-select class="tep" v-model="form.seqNoList" multiple>
            <template #header>
              <el-checkbox v-model="checkAll" @change="handleCheckAll">
                全选
              </el-checkbox>
            </template>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </el-form-item>
        <div class="btns" style="float: right">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog
      v-model="dialog1.visible"
      :title="dialog1.title"
      width="950px"
      @close="dialog1.visible = false"
    >
      <work-order-page @order-info="materialInfo1" />
    </el-dialog>
    <el-dialog
      v-model="workOderShow"
      :title="updateTitle"
      @close="workOderShow = false"
      width="1600"
    >
      <proWorkOrderExcel :data="ExDataObj" @close="closeShow" />
    </el-dialog>
    <el-dialog
      v-model="dialog8.visible"
      :title="dialog8.title"
      width="950px"
      @close="dialog8.visible = false"
    >
      <el-card
        style="cursor: pointer; font-size: 20px"
        shadow="always"
        :key="item"
        @click="toShowExcel(item)"
        v-for="item in showProList"
        >{{ item.formName }}</el-card
      >
    </el-dialog>
    <el-dialog
      v-model="dialog2.visible"
      :title="dialog2.title"
      width="950px"
      @close="dialog2.visible = false"
    >
      <el-card
        style="cursor: pointer; font-size: 20px"
        shadow="always"
        :key="item"
        v-for="item in showSeqList"
        >{{ item }}</el-card
      >
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue";
import dictDataUtil from "@/common/configs/dictDataUtil";
import ButtonPermKeys from "@/common/configs/buttonPermission";
import {
  filterList,
  getSeqList,
  addFilter,
  updateFilter,
  delFilter,
  getProExcel,
} from "@/api/plan";
const updateTitle = ref("筛选单详情");
const tableData = ref([]);
const formRef = ref(null);
const addStatus = ref(false);
const ExDataObj = ref({});
const workOderShow = ref(false);
const showProList = ref([]);
const showSeqList = ref([]);
const showSeq = (seqs) => {
  showSeqList.value = seqs;
  dialog2.visible = true;
};
const showProExcel = async (id) => {
  const { data, code } = await getProExcel(id);
  showProList.value = data;
  dialog8.visible = true;
};
const toShowExcel = (item) => {
  ExDataObj.value = item;
  workOderShow.value = true;
};
const dialog = reactive({
  visible: false,
  title: "新增筛选单",
});
const dialog1 = reactive({
  visible: false,
  title: "工单编码选择",
});
const dialog2 = reactive({
  title: "管号列表",
  visible: false,
});
const dialog8 = reactive({
  title: "筛选单列表",
  visible: false,
});
const paginationObj = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 0,
});
const submit = async () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (addStatus.value == true) {
        toAdd();
      } else {
        toEdiet();
      }
    } else {
      ElMessage.warning("请检查表单选项");
    }
  });
};
const closeShow = () => {
  workOderShow.value = false;
};
const resetForm = () => {
  form.value.id = "";
  form.value.seqNoList = [];
  form.value.workOrderCode = "";
};
const toAdd = async () => {
  const { code } = await addFilter({ ...form.value });
  if (code == "200") {
    ElMessage.success("新增成功");
    resetForm();
    getList();
    dialog.visible = false;
  }
};
const toEdiet = async () => {
  const { code } = await updateFilter({ ...form.value });
  if (code == "200") {
    ElMessage.success("修改成功");
    resetForm();
    getList();
    dialog.visible = false;
  }
};
const deleteSheet = async (id) => {
  const { code } = await delFilter({ id });
  if (code === "200") {
    ElMessage.success("删除成功");
    getList();
  }
};
const options = ref([]);

const checkAll = ref(false);

const handleCheckAll = (val) => {
  if (val) {
    form.value.seqNoList = options.value
      .filter((item) => !item.disabled)
      .map((item) => item.value);
  } else {
    form.value.seqNoList = [];
  }
};

const searchRef = ref(null);
const form = ref({ seqNoList: [] });
const searchForm = [
  {
    label: "工单编码",
    prop: "workOrderCode",
    type: "input",
  },
  {
    label: "物料编码",
    prop: "materialCode",
    type: "input",
  },
  {
    label: "物料名称",
    prop: "materialName",
    type: "input",
  },
];
const materialInfo1 = async (value) => {
  form.value.workOrderCode = value.workOrderCode;
  await setSeqList();
  dialog1.visible = false;
};
const setSeqList = async () => {
  const { data } = await getSeqList(form.value.workOrderCode);
  options.value = [];
  data.forEach((element) => {
    if (element.state == "0") {
      options.value.push({
        value: element.seqNo,
        label: element.seqNo,
      });
    } else {
      options.value.push({
        value: element.seqNo,
        label: element.seqNo,
        disabled: true,
      });
    }
  });
};
const getList = async () => {
  const { data, totalCount } = await filterList({
    ...searchRef.value.searchForm,
    pageNo: paginationObj.pageNo,
    pageSize: paginationObj.pageSize,
  });
  tableData.value = data.records;
  paginationObj.total = data.totalCount;
};
const add = () => {
  resetForm();
  addStatus.value = true;
  dialog.visible = true;
};
const edit = async (row) => {
  addStatus.value = false;
  form.value = row;
  await setSeqList();
  dialog.visible = true;
};
const cancel = () => {
  resetForm();
  dialog.visible = false;
};
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.btns {
  margin-bottom: 10px;
}
</style>
