<template>
  <div class='p-2'>
    <transition :enter-active-class='proxy?.animate.searchAnimate.enter'
                :leave-active-class='proxy?.animate.searchAnimate.leave'>
      <div v-show='showSearch' class='mb-[10px]'>
        <el-card shadow='hover'>
          <el-form ref='queryFormRef' :model='queryParams' :inline='true'>
            <el-form-item label='物料名称' prop='materialName'>
              <el-input v-model='queryParams.materialName' placeholder='请输入物料名称' clearable @keyup.enter='handleQuery' />
            </el-form-item>
<!--            <el-form-item label='顶级标识' prop='topFlag'>-->
<!--              <el-input v-model='queryParams.topFlag' placeholder='请输入顶级标识' clearable-->
<!--                        @keyup.enter='handleQuery' />-->
<!--            </el-form-item>-->
<!--            <el-form-item label='校验类型' prop='checkType'>-->
<!--              <el-select v-model='queryParams.checkType' placeholder='请选择校验类型' clearable>-->
<!--                <el-option v-for='dict in mes_check_type' :key='dict.value' :label='dict.label' :value='dict.value' />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--            <el-form-item label='激活标识' prop='activeFlag'>-->
<!--              <el-input v-model='queryParams.activeFlag' placeholder='请输入激活标识' clearable @keyup.enter='handleQuery' />-->
<!--            </el-form-item>-->
            <el-form-item>
              <el-button type='primary' icon='Search' @click='handleQuery'>搜索</el-button>
              <el-button icon='Refresh' @click='resetQuery'>重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow='never'>
<!--      <template #header>-->
<!--        <el-row :gutter='10' class='mb8'>-->
<!--          <el-col :span='1.5'>-->
<!--            <el-button type='primary' plain icon='Plus' @click='handleAdd()' v-hasPermi="['mes:materialBom:add']">新增-->
<!--            </el-button>-->
<!--          </el-col>-->
<!--          <el-col :span='1.5'>-->
<!--            <el-button type='info' plain icon='Sort' @click='handleToggleExpandAll'>展开/折叠</el-button>-->
<!--          </el-col>-->
<!--          <right-toolbar v-model:showSearch='showSearch' @queryTable='getList'></right-toolbar>-->
<!--        </el-row>-->
<!--      </template>-->
      <el-table
        v-loading='loading'
        :data='materialBomList'
        ref="tableRef"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        highlight-current-row
      >
<!--        <el-table-column label='主键标识' align='center' prop='materialBomId' />-->
<!--        <el-table-column label='父级标识' align='center' prop='parentId' />-->
<!--        <el-table-column label='物料ID' align='center' prop='materialId' />-->
        <el-table-column label='物料名称' align='center' prop='materialName' width='180'/>
        <el-table-column label='bom说明' align='center' prop='materialBomDesc' />
        <el-table-column label='bom版本' align='center' prop='materialBomVersion' />
<!--        <el-table-column label='祖级列表' align='center' prop='ancestors' />-->
        <el-table-column label='标准数量' align='center' prop='standardAmount' />
        <el-table-column label='顶级标识' align='center' prop='topFlag'>
          <template #default='scope'>
            <dict-tag :options='active_flag' :value='scope.row.topFlag' />
          </template>
        </el-table-column>
        <el-table-column label='校验类型' align='center' prop='checkType'>
          <template #default='scope'>
            <dict-tag :options='mes_check_type' :value='scope.row.checkType' />
          </template>
        </el-table-column>
<!--        <el-table-column label='项目ID' align='center' prop='projectId' />-->
<!--        <el-table-column label='装配时长(秒)' align='center' prop='assembleTime' />-->
        <el-table-column label='物料分类' align='center' prop='materialClassfication'>
          <template #default='scope'>
            <dict-tag :options='material_classfication' :value='scope.row.materialClassfication' />
          </template>
        </el-table-column>
<!--        <el-table-column label='附件信息' align='center' prop='attachId' />-->
        <el-table-column label='激活标识' align='center' prop='activeFlag'>
          <template #default='scope'>
            <dict-tag :options='active_flag' :value='scope.row.activeFlag' />
          </template>
        </el-table-column>
        <el-table-column label='备注' align='center' prop='remark' />
<!--        <el-table-column label='创建部门' align='center' prop='createDept' />-->
<!--        <el-table-column label='创建人' align='center' prop='createBy' />-->
<!--        <el-table-column label='创建时间' align='center' prop='createTime' width='180'>-->
<!--          <template #default='scope'>-->
<!--            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label='更新人' align='center' prop='updateBy' />-->
<!--        <el-table-column label='更新时间' align='center' prop='updateTime' width='180'>-->
<!--          <template #default='scope'>-->
<!--            <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </el-card>
  </div>
</template>

<script setup name='MaterialBom' lang='ts'>
import {
  listMaterialBom
} from '@/api/mes/materialBom';
import {MaterialBomQuery, MaterialBomForm } from '@/api/mes/materialBom/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const { mes_check_type, material_classfication, active_flag } = toRefs<any>(proxy?.useDict('mes_check_type', 'material_classfication', 'active_flag'));

const materialBomList = ref([]);
const selectedRow = ref({});
const buttonLoading = ref(false);
const showSearch = ref(true);
const isExpandAll = ref(true);
const loading = ref(false);
const tableRef = ref()

const materialIdForm = defineProps(['materialIdForm']);

const queryFormRef = ref<ElFormInstance>();
const materialBomFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});


const initFormData: MaterialBomForm = {
  materialBomId: undefined,
  parentId: undefined,
  materialId: undefined,
  materialName: undefined,
  materialBomDesc: undefined,
  materialBomVersion: undefined,
  ancestors: undefined,
  standardAmount: undefined,
  topFlag: undefined,
  checkType: '1',
  projectId: undefined,
  assembleTime: undefined,
  materialClassfication: undefined,
  attachId: undefined,
  activeFlag: '1',
  remark: undefined
};

const data = reactive<PageData<MaterialBomForm, MaterialBomQuery>>({
  form: { ...initFormData },
  queryParams: {
    materialBomId: undefined,
    parentId: undefined,
    materialId: undefined,
    materialName: undefined,
    materialBomDesc: undefined,
    materialBomVersion: undefined,
    ancestors: undefined,
    standardAmount: undefined,
    topFlag: '1',
    checkType: undefined,
    projectId: undefined,
    assembleTime: undefined,
    materialClassfication: undefined,
    attachId: undefined,
    activeFlag: undefined,
    params: {}
  },
  rules: {
    materialBomId: [
      { required: true, message: '主键标识不能为空', trigger: 'blur' }
    ],
    parentId: [
      { required: true, message: '父级标识不能为空', trigger: 'blur' }
    ],
    materialId: [
      { required: true, message: '物料ID不能为空', trigger: 'blur' }
    ]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询物料BOM信息列表 */
const getList = async () => {
  loading.value = true;
  if (materialIdForm.materialIdForm !== null){
    queryParams.value.materialId = materialIdForm.materialIdForm
  }
  const res = await listMaterialBom(queryParams.value);
  materialBomList.value = res.data;
  loading.value = false;
};

// 取消按钮
const cancel = () => {
  reset();
  dialog.visible = false;
};

// 表单重置
const reset = () => {
  form.value = { ...initFormData };
  materialBomFormRef.value?.resetFields();
};

/** 搜索按钮操作 */
const handleQuery = () => {
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

/** 选中列赋值 */
const handleRowClick = (row) =>{
  selectedRow.value = row
};

onMounted(() => {
  getList();
});
defineExpose({tableRef})
</script>
