<template>
  <div class="mainContentBox">
    <avue-crud
      ref="crudRef"
      v-model:search="search"
      v-model="form"
      :data="data"
      :option="option"
      v-model:page="page"
      @row-save="createRow"
      @row-update="updateRow"
      @row-del="deleteRow"
      @search-change="searchChange"
      @search-reset="resetChange"
      @size-change="dataList"
      @current-change="dataList"
      @selection-change="selectionChange"
    >
      <template #menu="{ row, index, type }">
        <el-button link type="primary" size="small" @click="openBatchs(row)"
          >生成批号</el-button
        ></template
      >
      <!--      <template #menu-right="{}">-->
      <!--        <el-button-->
      <!--          class="ml-3"-->
      <!--          @click="exportData('/api/v1/quality/report/export')"-->
      <!--        >-->
      <!--          <template #icon> <i-ep-download /> </template>导出-->
      <!--        </el-button>-->
      <!--      </template>-->
    </avue-crud>
    <InspectItemDialog
      ref="inspectItemRef"
      @confirm="handleInspectItemsConfirm"
    />
    <CrudTable
      ref="ctableRef"
      tableTitle="选择统计产品"
      tableType="BASE_MATERIAL"
      @selected-sure="handleConfirm"
    />
    <BatchItemDialog ref="batchItemRef" />
  </div>
</template>

<script setup>
import { useCrud } from "@/hooks/userCrud";
import dictDataUtil from "@/common/configs/dictDataUtil";
import * as Api from "@/api/statistic/consistencyInspection";
import InspectItemDialog from "./InspectItemDialog.vue";
import BatchItemDialog from "./BatchItemDialog.vue";

// 传入一个url，后面不带/
const { form, data, option, search, page, Methords, Utils } = useCrud({
  src: "/api/v1/quality/prod/inspect",
});
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
const crudRef = ref(null); //crudRef.value 获取avue-crud对象

onMounted(async () => {
  // 初始化菜单
  await fetchFirstLevel();
  await fetchAllOpts();
  dataList();
});

const ctableRef = ref(null);
const inspectItemRef = ref(null); // 检验项目弹窗

//一二级菜单
const firstLevel = ref([]);
const secondLevel = ref([]);
// 所有检验项目选项
const allOpts = ref([]);
const batchItemRef = ref(null); // 批号弹窗
const isTypeChange = ref(false);

// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  searchEnter: true,
  viewBtn: false,
  column: [
    {
      label: "产品编码",
      prop: "productCode",
      type: "input",
      search: "true",
      rules: [
        {
          required: true,
          message: "请选择产品编码",
          trigger: "blur",
        },
      ],
      click: ({ value, column }) => {
        if (column.boxType) {
          ctableRef.value && ctableRef.value.startSelect();
        }
      },
    },
    {
      label: "产品名称",
      prop: "productName",
      type: "input",
      disabled: true,
      rules: [
        {
          required: true,
          message: "请选择产品名称",
          trigger: "blur",
        },
      ],
    },
    {
      label: "产品型号",
      prop: "productModel",
      type: "input",
      search: "true",
      disabled: true,
      rules: [
        {
          required: true,
          message: "请填写产品型号",
          trigger: "blur",
        },
      ],
    },
    {
      label: "检验类型",
      prop: "inspectType",
      type: "select",
      dicData: firstLevel,
      rules: [
        {
          required: true,
          message: "请选择检验类型",
          trigger: "blur",
        },
      ],
      click: () => {
        isTypeChange.value = true;
      },
      change: () => {
        if (isTypeChange.value) {
          form.value.inspectItems = [];
        }
        isTypeChange.value = false;
      },
    },
    {
      label: "检验项目",
      prop: "inspectItems",
      type: "select",
      dicData: allOpts,
      multiple: true,
      disabled: computed(() => !form.value.inspectType),
      rules: [
        {
          required: true,
          message: "请选择检验项目",
          trigger: "blur",
        },
      ],
      click: () => {
        if (form.value.inspectType) {
          inspectItemRef.value.openDrawer(
            form.value.inspectType,
            form.value.inspectItems || [],
            form.value.durations || []
          );
        } else {
          ElMessage.error("请先选择检验类型");
        }
      },
    },
    {
      label: "周期",
      prop: "durations",
      hide: true,
      addDisplay: false,
      editDisplay: false,
      valueFormat: "array",
      display: false,
    },
    {
      label: "备注",
      prop: "remark",
      type: "textarea",
      span: 24,
    },
  ],
});

const handleConfirm = (row) => {
  if (row) {
    form.value.productCode = row.materialCode;
    form.value.productName = row.materialName;
    form.value.productModel = row.spec;
  }
};

// 获取检验类型
const fetchFirstLevel = async () => {
  const response = await Api.getFirstLevel();
  firstLevel.value = response.data.map((item) => ({
    label: item.name,
    value: item.id,
  }));
};

// 获取所有检验项目
const fetchAllOpts = async () => {
  const response = await Api.getAllOpts();
  allOpts.value = response.data.map((item) => ({
    label: item.name,
    value: item.id,
  }));
};

// 处理检验项目选择
const handleInspectItemsConfirm = (selectedItems) => {
  form.value.inspectItems = selectedItems.map((item) => item.id);
  form.value.durations = selectedItems.map((item) => item.duration);
};

// 创建批号
const openBatchs = (row) => {
  batchItemRef.value.openBatchs(row);
};
</script>
