<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"
      @selection-change="selectionChange"
    >
      <template #menu="{ row }">
        <el-button icon="el-icon-setting" link @click="showSeqPage(row)"
          >产品管号</el-button
        >
        <el-button
          link
          icon="el-icon-copy-document"
          v-if="
            row.flowState == '0' ||
            row.flowState == '2' ||
            row.flowState == '-1'
          "
          @click="openCheckView(row)"
          >提审</el-button
        >

        <el-button
          link
          v-if="row.flowState !== '0'"
          icon="el-icon-copy-document"
          @click="showFlowSteps(row)"
          >流程</el-button
        >

        <el-button
          link
          icon="el-icon-copy-document"
          v-if="row.flowState == '3'"
          @click="onCancelFlow(row)"
          >撤销</el-button
        >
        <el-button
          link
          v-if="
            row.flowState === '0' ||
            row.flowState == '2' ||
            row.flowState == '-1'
          "
          type="danger"
          icon="el-icon-delete"
          @click="deleteRow(row)"
          >删除</el-button
        >
      </template>
    </avue-crud>
    <el-dialog
      v-model="seqDialog.visible"
      :title="seqDialog.title"
      width="950px"
      @close="seqDialog.visible = false"
    >
      <el-card
        style="cursor: pointer; font-size: 20px"
        shadow="always"
        :key="item"
        v-for="item in showSeqList"
        >{{ item }}</el-card
      >
    </el-dialog>
    <LookFlowStep ref="LookFlowStepRef"></LookFlowStep>
    <work-flow-check
      ref="workFlowCheckRef"
      @sureToSave="onWFSave"
    ></work-flow-check>
  </div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import { useCommonStoreHook, useDictionaryStore } from "@/store";
import WorkFlowCheck from "@/components/WorkFlows/workFlowCheck.vue";
import LookFlowStep from "@/views/flow/common/LookFlowStep.vue";
import { cancelFlow, submitFlow } from "@/api/flow";
const { isShowTable, tableType } = toRefs(useCommonStoreHook());
const { dicts } = useDictionaryStore();
//  工作流相关 start
const workFlowCheckRef = ref(null);
const openCheckView = (row) => {
  row.businessId = row.id;
  workFlowCheckRef.value &&
    workFlowCheckRef.value.openDialog(row, "seqInFlowService");
};
const LookFlowStepRef = ref(null);
const showFlowSteps = (row) => {
  LookFlowStepRef.value &&
    LookFlowStepRef.value.openFlowStepDrawer(row.flowIns);
};
const onWFSave = (flowForm) => {
  submitFlow(flowForm).then(() => {
    ElMessage.success("提交成功");
    workFlowCheckRef.value && workFlowCheckRef.value.close();
    dataNoPageList();
  });
};

const seqDialog = ref({
  title: "产品管号",
  visible: false,
});

const showSeqList = ref<any>([]);

const showSeqPage = (row) => {
  showSeqList.value = [];
  row.seqNo.split(",").forEach((item) => {
    showSeqList.value.push(item);
  });
  seqDialog.value.visible = true;
};

const onCancelFlow = (row) => {
  console.log(row);
  cancelFlow({
    businessId: row.id,
    flowIns: row.flowIns,
  }).then(() => {
    ElMessage.success("撤销成功");
    dataNoPageList();
  });
};
//工作流 end

const props = defineProps({
  workOrderCode: {
    type: String,
    default: () => {
      return 0;
    },
  },
  dialog: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const crudRef = ref(null);
// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/plan/seq/in/stock",
  });
const {
  dataNoPageList,
  createRow,
  updateRow,
  deleteRow,
  searchChange,
  resetChange,
} = Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
onMounted(() => {
  search.value.workOrderCode = props.workOrderCode;
  dataNoPageList();
});

// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  searchEnter: true,
  selection: false,
  addBtn: false,
  editBtn: false,
  delBtn: false,
  viewBtn: false,
  menu: true,
  menuWidth: 150,
  columnBtn: false,
  gridBtn: false,
  column: [
    {
      label: "接收人",
      prop: "recipient",
    },
    {
      label: "入库数量",
      prop: "inventoryNum",
    },
    {
      label: "检验码",
      prop: "checkCode",
    },
    {
      label: "单据类型",
      prop: "billType",
      type: "select",
      dicData: dicts.bill_type,
      props: { label: "dictLabel", value: "dictValue" },
      rules: [
        {
          required: true,
          message: "请选择单据类型",
          trigger: "blur",
        },
      ],
    },
    {
      label: "仓库类型",
      prop: "warehouseType",
      span: 24,
      type: "select",
      dicData: dicts.warehouse_type,
      props: { label: "dictLabel", value: "dictValue" },
      rules: [
        {
          required: true,
          message: "请选择仓库类型",
          trigger: "blur",
        },
      ],
    },
    {
      label: "批号",
      prop: "lotCode",
      rules: [
        {
          required: true,
          message: "请输入批号",
          trigger: "blur",
        },
      ],
    },
    {
      label: "流程状态",
      prop: "flowState",
      width: 120,
      addDisplay: false,
      editDisplay: false,
      overHidden: true,
      type: "select",
      dicData: dicts.flow_ins_state,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
    },
    {
      label: "备注",
      prop: "remark",
      span: 24,
      type: "textarea",
    },
    {
      label: "创建人",
      width: 110,
      prop: "creator",
    },
    {
      label: "创建时间",
      prop: "created",
    },
  ],
});
</script>

<style>
.avue-crud__header {
  min-height: 0px;
}
</style>
