<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 type="primary" size="small" @click="showDetail(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>
    <ProcessGoal ref="processGoalRef" />
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import ProcessGoal from "./processGoal.vue";
import dictDataUtil from "@/common/configs/dictDataUtil";
// 传入一个url，后面不带/
const { form, data, option, search, page, Methords, Utils } =
  useCrud({
    src: "/api/v1/categoryTarget",
  });
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
const tablesData = ref([]);
const crudRef = ref(null); //crudRef.value 获取avue-crud对象

onMounted(() => {
  dataList();
});

const processGoalRef = ref(null);

const showDetail = (row) => {
  processGoalRef.value && processGoalRef.value.toShowDrawer(row);
};

// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  searchEnter: true,
  viewBtn: false,
  column: [
    {
      label: "产品类型",
      prop: "prodtCategory",
      type: "select",
      search: "true",
      dicUrl:
        dictDataUtil.request_url +
        dictDataUtil.EXPAND_FIELD_TABLE.prodt_category,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      rules: [
        {
          required: true,
          message: "请选择产品类型",
          trigger: "blur",
        },
      ],
    },
    {
      label: "年份",
      prop: "year",
      type: "year",
      format: "YYYY",
      search: "true",
      valueFormat: "YYYY",
      rules: [
        {
          required: true,
          message: "请选择年份",
          trigger: "blur",
        },
      ],
    },
    {
      label: "成品率(%)",
      prop: "yield",
      rules: [
        {
          required: true,
          message: "请填写成品率",
          trigger: "blur",
        },
      ],
    },
    {
      label: "是否显示",
      prop: "isShow",
      search: "true",
      type: "radio", //类型为单选框
      addDisplay: false,
      dicData: [
        {
          label: "否",
          value: "0",
        },
        {
          label: "是",
          value: "1",
        },
      ],
      value: "1",
    },
  ],
});
</script>
