<template>
  <div style="width: 1000px">
    <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"
    >
    </avue-crud>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import { checkPerm } from "@/directive/permission";
import ButtonPermKeys from "@/common/configs/buttonPermission";
import {queryOutSourceDetails,updateOutSourceApply} from "@/api/process";
import { useCommonStoreHook } from "@/store";
import dictDataUtil from "@/common/configs/dictDataUtil";
const { isShowTable, tableType } = toRefs(useCommonStoreHook());
const test = () => {
  isShowTable.value = true;
  tableType.value = tableType.value == 1 ? 2 : 1;
};
const props = defineProps({
  applyId: {
    type: String,
    default: ""
  }
})
const radio = ref(0)
// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
    useCrud({
      dataListUrl: "/api/v1/process/tdmOrder/bomPage"
    });
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
const loading = ref(false)
const crudRef = ref(null); //crudRef.value 获取avue-crud对象
const dialog = reactive({
  title: "委外详情",
  visible: false,
  type: 0
});
const openDialog = (type,id) =>{
  dialog.title = type === 0 ? '委外详情' : '委外审核' ;
  queryOutSourceDetails(id).then((data)=>{
    form.value = data.data
    radio.value = 0
    if(form.value){
      if(form.value.state === '2'){
        radio.value = 1
      }
    }
    dialog.visible = true
    dialog.type = type
  })
}
const audit = () =>{
  form.value.state = radio.value === 0 ? 1: 2;
  updateOutSourceApply(form.value).then((data)=>{
    if(data.code === '200'){
      ElMessage.success("操作成功")
      dialog.visible = false
      dataList()
    }else{
      ElMessage.error(data.msg)
    }
  })
}
const fileUrl = import.meta.env.VITE_APP_UPLOAD_URL;
// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  addBtn: false,
  editBtn: false,
  viewBtn: false,
  delBtn: false,
  selection: true,
  menu: false,
  searchShow: false,
  searchShowBtn: false,
  column: [
    {
      label: "工序名称",
      prop: "operationName",
    },
    {
      label: "bom文件",
      prop: "tbomUrl",
      html: true,
      formatter: (val) => {
          return '<a class="el-tag el-tag--info el-tag--light" href="'+fileUrl+ val.tbomUrl + '">文件下载</a>';
      },
    }
  ],
});

onMounted(() => {
  // console.log("crudRef", crudRef)
  search.value.applyId = props.applyId
  dataList();
});
</script>
<style>
/* 添加自定义类名以区分不同表格的样式 */
.gray-header-table .el-table__header-wrapper {
  background-color: #f2f2f2; /* 灰色背景 */
}
</style>
