import { ref } from "vue"

<template>
     <el-dialog  :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" >
        <div class='table-box'>
            <ProTable
                ref='proTable'
                :columns='columns'
                :request-api="getTableList"
                :pagination="false"
                :toolButton ='false' 
                 :style="{ height: '250px',maxHeight: '400px',overflow:'hidden'}"
            >
                <!-- :data='testScriptData' 如果要显示静态数据，就切换该配置 -->
                <!-- 表格 header 按钮 -->
                <template #tableHeader='scope'>
                <el-button v-auth.testScript="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
                <el-button v-auth.testScript="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
                            @click='batchDelete(scope.selectedListIds)'>
                    删除
                </el-button>
                </template>
                <!-- 表格操作 -->
                <template #operation='scope'>
                    <el-button v-auth.testScript="'upgrade'" type='primary' v-if="scope.row.type !== 1" link :icon='Share' @click='updateType(scope.row)'>复制</el-button>
                <el-button v-auth.testScript="'edit'" type='primary' link :icon='EditPen' :model-value="false" @click="openDialog('edit', scope.row)">编辑</el-button>
                <el-button v-auth.testScript="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
                </template>
        
            </ProTable>
        </div>

            <template #footer>
                <div >
                    <el-button @click='close()'>取 消</el-button>
                    <el-button type="primary" @click='save()'>保存</el-button>
                </div>
            </template>
    </el-dialog>

    <SetValuePopup  ref='setValuePopup' />

  </template>

<script setup lang="ts">
import type { TestScript } from '@/api/device/interface/testScript'
import type { ColumnProps } from '@/components/ProTable/interface'
import {reactive, ref } from 'vue'
import { dialogBig } from '@/utils/elementBind'

const dialogVisible = ref(false)
const dialogTitle = ref('')


// 表格配置项
const columns = reactive<ColumnProps<TestScript.ResTestScript>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  { type: 'index', fixed: 'left', width: 70, label: '序号' },
  {
    prop: 'name',
    label: '参考设定值类型',
    minWidth: 350,
  },
  {
    prop: 'standardName',
    label: '参考设定值子类型',
    minWidth: 150,
  },
  {
    prop: 'standardTime',
    label: '参考设定值',
    minWidth: 150,
  },
  { prop: 'operation', label: '操作', fixed: 'right', width: 250 },
])

// 打开弹窗，可能是新增，也可能是编辑
const open =  (sign: string,row: any) => {
    dialogVisible.value = true
    dialogTitle.value = sign === 'add'? '新增检测项目信息' : '编辑检测项目信息'
}


// 关闭弹窗
const close = () => {
    dialogVisible.value = false
}

// 对外映射
defineExpose({ open })
</script>

<style scoped>

</style>