<template>
  <div class="mainContentBox">
    <avue-crud
      ref="crudRef1"
      v-model:search="data1.search"
      :data="data1.data"
      :option="data1.option"
      v-model:page="data1.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-right="{}">
        <el-button
          class="ml-3"
          @click="
            data1.Utils.exportData('/api/v1/process/census/outputInfo/export')
          "
        >
          <template #icon> <i-ep-download /> </template>导出
        </el-button>
      </template>
    </avue-crud>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import { useCommonStoreHook, useDictionaryStore } from "@/store";
import dictDataUtil from "@/common/configs/dictDataUtil";
import editSkill from "@/views/base/skill/components/edit-skill.vue";
import { getEchartData } from "@/api/report";
import * as echarts from "echarts";
// 数据字典相关
const { dicts } = useDictionaryStore();
const editDialog = ref({ visible: false, title: "订单详情" });
const key = ref(false);
// const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
//   useCrud({
//     src: "/api/v1/process/census/completeOrder",
//   });
// ;
const data1 = ref(
  useCrud({
    src: "/api/v1/process/census/outputInfo",
  })
);
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  data1.value.Methords;

const { selectionChange, multipleDelete } = data1.value.Methords;

// 设置表格列或者其他自定义的option
data1.value.option = Object.assign(data1.value.option, {
  selection: false,
  menuWidth: 100,
  addBtn: false,
  filterBtn: false,
  searchShowBtn: false,
  columnBtn: false,
  gridBtn: false,
  editBtn: false,
  viewBtn: false,
  delBtn: false,
  column: [
    {
      label: "日期范围",
      prop: "searchTime",
      search: true,
      hide: true,
      type: "date",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD",
      searchRange: true,
      startPlaceholder: "开始日期",
      endPlaceholder: "结束日期",
    },
    {
      label: "订单编码",
      prop: "orderCode",
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "订单名称",
      prop: "orderName",
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "物料编码",
      prop: "materialCode",
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "工单编码",
      prop: "workOrderCode",
      width: 140,
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "报工人员",
      prop: "userName",
      width: 140,
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "工序code",
      prop: "operationCode",
      width: 140,
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "订单名称",
      prop: "orderName",
      search: false,
    },
    {
      label: "订单编码",
      prop: "orderCode",
      search: false,
    },
    {
      label: "工单编码",
      prop: "workOrderCode",
      search: false,
    },
    {
      label: "物料编码",
      prop: "materialCode",
      search: false,
    },
    {
      label: "物料名称",
      prop: "materialName",
      search: false,
    },
    {
      label: "物料规格",
      prop: "materialModel",
      search: false,
    },
    {
      label: "工序编码",
      prop: "operationCode",
      search: false,
    },
    {
      label: "工序名称",
      prop: "operationName",
      search: false,
    },
    {
      label: "工位",
      prop: "stationName",
      search: false,
    },
    {
      label: "流转卡号",
      prop: "seqNo",
      search: false,
    },

    {
      label: "开始时间",
      prop: "realStartWhen",
      search: false,
    },
    {
      label: "结束时间",
      prop: "realEndWhen",
      search: false,
    },
    {
      label: "标准用时(秒)",
      prop: "standardWorktime",
      search: false,
    },
    {
      label: "总共用时(秒)",
      prop: "totalTime",
      search: false,
    },
    {
      label: "人员占比",
      prop: "userTime",
      search: false,
    },
  ],
});

const getCurrentMonthStartAndEndDates = () => {
  // 获取当前日期
  let now = new Date();

  // 获取当前月份的第一天
  let startDate = new Date(now.getFullYear(), now.getMonth(), 1);

  // 获取当前月份的最后一天
  let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);

  // 格式化日期为'YYYY-MM-DD'格式
  function formatDate(date) {
    let year = date.getFullYear();
    let month = String(date.getMonth() + 1).padStart(2, "0");
    let day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }

  // 返回包含开始和结束日期的数组
  return [formatDate(startDate), formatDate(endDate)];
};

//设置搜索条件中的时间范围为默认此月
const setTime = () => {
  data1.value.search.searchTime = getCurrentMonthStartAndEndDates();
};

onMounted(async () => {
  setTime();
  dataList();
});
</script>
<style lang="scss" scoped>
:deep(.avue-crud__left) {
  width: 100%;
}
</style>
