
<template>
  <div class="layout-pd">
    <el-row>
<!--操作-->
      <el-col :xs="24" >
        <el-card class="mt8"  shadow="hover" >
<el-form :model="state.filter" :inline="true" @submit.stop.prevent>
            <el-form-item prop="name" style="width: 100%">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
  <el-form-item label="主板类型">
                  <el-select v-model="state.filter.boardType" placeholder="">
                    <el-option v-for="(value, key) in PCBABoardType" :key="key" :label="value[1].name"
                      :value="Number(value[1].value)" />
                  </el-select>
                </el-form-item>
              </el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="code">
                  <el-input v-model="state.filter.code" placeholder="单行输入" clearable></el-input>
                </el-form-item>
              </el-col>
</el-form-item>
          </el-form>
<div class="my-flex my-flex-start" >
<el-button  type="primary" icon="ele-CirclePlus" @click="onQuery"> 查询 </el-button>
<el-button  type="primary" icon="ele-CirclePlus" @click="onAdd"> 添加 </el-button>
</div>
</el-card>
      </el-col>
<!--表格-->
      <el-col  :xs="24" >
        <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
<el-table v-loading="state.loading" stripe :data="state.tableModel" row-key="id" style="width: 100%">
        <el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label"  >
        </el-table-column> 
<el-table-column label="操作"  fixed="right" header-align="center" align="center" class="right-operation" width="140">
        <template #default="{ row }" >
<el-link
                  class="my-el-link mr12 ml12"
                  type="primary"
                  icon="ele-Upload"
                  @click="onDateUpdate(row)"
                  :underline="false"
                  target="_blank"
                >编辑</el-link>
<el-link
                  class="my-el-link mr12 ml12"
                  type="primary"
                  icon="ele-Upload"
                  @click="onDataDelete(row)"
                  :underline="false"
                  target="_blank"
                >删除</el-link>
</template>
            </el-table-column>
</el-table>
<div class="my-flex my-flex-end" style="margin-top: 20px">
            <el-pagination
              v-model:currentPage="state.pageInput.CurrentPage"
              v-model:page-size="state.pageInput.PageSize"
              :total="state.total"
              :page-sizes="[10, 20, 50, 100]"
              small
              background
              @size-change="onSizeChange"
              @current-change="onCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
</el-card>
      </el-col>
</el-row>
<EditDialog ref="editDialogRef" />
    </div>
  </template>
  <script setup lang="ts">
  import {defineAsyncComponent,ref,onBeforeMount, onMounted, reactive, watch} from "vue";
  import eventBus from "/@/utils/mitt";
import { BoardFunctionListApi } from '/@/api/admin/PCBA/boardFunctionListApi'
import { BoardFunctionListDto } from '/@/api/admin/PCBA/boardFunctionListDto'
import { BoardAllFunctionAPI } from '/@/api/admin/PCBA/boardAllFunctionApi'
import type { pageInput } from "/@/api/admin/shareDto/shareDto";


/**引入组件*/
const EditDialog = defineAsyncComponent(() => import('../components/form-edit-functionList.vue'))

/**
 * 绑定EditDialog
 */
const editDialogRef = ref()


/**数据对象*/
  const state = reactive({
    /**加载显示 */
    loading: false,
    /**条件查询模块 */
      filter: {
/**boardType */
        boardType: -1,
/**code */
        code: -1,},
  /**表格信息 */
tableModel: [] as BoardFunctionListDto,
    /**动态表头 */
    dynamicColumns: [
{ prop: 'boardType', label: '主板类型' },
{ prop: 'code', label: '功能码' },],
/**分页标识 */
    pageInput:{
      CurrentPage: 1,
      PageSize: 10,
    } as pageInput,

    /**分页标识2 */
    pageInput2:{
      CurrentPage: 1,
      PageSize: 100,
    } as pageInput,

    /**分页总数 */
    total: 0,
})
  onMounted(() => {
    init()
    eventBus.off('refreshView')
    eventBus.on('refreshView', async () => {
      await init()
    })
 
  })
  onBeforeMount(() => {
    eventBus.off('refreshView')
  })

  
  /**页条数变化*/
const onSizeChange = () => {
  init()
}

/**页数变化*/
const onCurrentChange = () => {
  init()
}

var res_all:any = [];

  /**
  * 监听变换
  */
  watch(() => {},() => {})
/**条件查询 */
          const onQuery = () => {
          init()
        }
        /**初始化 */
        const init = async () => {
          state.loading = true

          res_all = await new BoardAllFunctionAPI().getList({...state.pageInput, Filter:state.filter}).catch(() => {
    state.loading = false
  })
            state.total = res_all?.data?.total ?? 0
           // console.log(res_all?.data?.list ?? [])


const res:any = await new BoardFunctionListApi().getList({...state.pageInput, Filter:state.filter})
            state.total = res?.data?.total ?? 0
          //  console.log( res?.data)
state.tableModel = res?.data?.list ?? []
          state.loading = false
        }


/**添加 */
        const onAdd=()=>{
          editDialogRef.value.openDialog(0,res_all?.data?.list ?? [])
        }
/**编辑 */
      const onDateUpdate=(row)=>{
        editDialogRef.value.openDialog(1,res_all?.data?.list ?? [])
      }
/**删除 */
      const onDataDelete=(row)=>{}
</script>
<style scoped lang="scss">
  </style>