<!--  -->
<template>
    <div class="">
        <el-button type="primary" size="small" @click="showdialog">查看</el-button>
        <el-dialog v-model="dialogTableVisible" title="查看" draggable :append-to-body="true">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane :label="item.label" :name="item.name" v-for="item,index in data.tabLabel" :key="index">
                    <tables :gridData="data.gridData"></tables>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,watch} from "vue";
import type { TabsPaneContext } from 'element-plus'
import tables from "./tables.vue";
const dialogTableVisible = ref(false)
const activeName = ref('first')
const data:any = reactive({
    gridData: [],
    tabLabel:[
        {label:'出入库记录',name:'first'},
        {label:'关联项目记录',name:'second'}
    ]
})
const props = defineProps({
    btnData:{
        type:Object,
        default: () => {},
    }
})
watch(()=>activeName.value,(newData)=>{
    handleClick()
})
//函数
const showdialog = ()=>{
    dialogTableVisible.value = true
    handleClick()
}

const handleClick = () => {
  let str:any = {...props.btnData}
  activeName.value=='first'?setJoin(str.T_remark):setJoin(str.T_project_log)
}
const setJoin = (str:any) => {
    let arr = str.split('|').filter(Boolean)
    data.gridData = arr.map((item:any) => ({name:item}))
}

</script>
<style lang="scss">
/* @import url(); 引入css类 */
</style>