<template>
    <div >
        <TableHeader :showReset="false">
            <template v-slot:operation>
                <el-button :icon="Plus" type="primary" @click="addMenu">新增</el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef" />
        <!-- <el-tabs type="border-card">
            <el-tab-pane v-for="item in tabPane" :label="item.name">
               
            </el-tab-pane>
        </el-tabs> -->

        <PopupBinding ref="bindingRef"></PopupBinding>
        <PopupAdd ref="addRef" @over="init"></PopupAdd>
    </div>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import PopupBinding from './binding.vue'
import PopupAdd from './add.vue'
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
import { dicDelete } from '@/api/system-boot/dic'

defineOptions({
    name: 'govern/setting/statisticalType'
})
const tabPane = [{ name: '在线监测' }, { name: '治理' }, { name: '测试' }]
const tableRef = ref()
const bindingRef = ref()
const addRef = ref()
const options = ref([
    { name: '通用指标', value: 2 },
    { name: 'APF模块', value: 3 },
    { name: '星型接线', value: 4 },
    { name: '角型接线', value: 5 },
    { name: 'V型接线', value: 6 },
    { name: '驾驶舱指标', value: 7 }
])
const tableStore = new TableStore({
    showPage: false,
    url: '/system-boot/dictTree/query',
    method: 'POST',
    paramsPOST: true,
    publicHeight: 60,
    column: [
        {
            title: '序号',
            width: 80,
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { title: '统计类型', field: 'name' },
        {
            title: '类型',
            field: 'type',
            width: 250,
            formatter: row => {
                return options.value.filter((item: any) => item.value == row.cellValue)[0]?.name
            }
        },
        {
            title: '操作', fixed: 'right',
            align: 'center',
            width: '200',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '绑定指标',
                    type: 'primary',
                    icon: 'el-icon-Connection',
                    render: 'basicButton',
                    click: row => {
                        bindingRef.value.open(row.id)
                    }
                },
                {
                    name: 'edit',
                    title: '编辑',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    click: row => {
                        addRef.value.open('编辑', row)
                    }
                },
                {
                    name: 'del',
                    title: '删除',
                    type: 'danger',
                    icon: 'el-icon-Delete',
                    render: 'confirmButton',
                    popconfirm: {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        confirmButtonType: 'danger',
                        title: '确定删除该菜单吗？'
                    },
                    click: row => {
                        dicDelete(row.id).then(() => {
                            init()
                        })
                    }
                }
            ]
        }
    ],
    loadCallback: () => {
        // // 过滤数组中type等于1的数据，children下钻
        // const filterData = (arr: any[]) => {
        //     return arr.filter((item: any) => {
        //         if (item.children.length) {
        //             item.children = filterData(item.children)
        //         }
        //         return item.type != 1
        //     })
        // }
        // tableStore.table.data = filterData(tableStore.table.data)
    }
})
provide('tableStore', tableStore)
const init = () => {
    tableStore.table.loading = true
    queryByCode('Statistical_Type').then(res => {
        tableStore.table.params.pid = res.data.id
        queryCsDictTree(res.data.id).then(res => {
            tableStore.table.data = res.data
            tableStore.table.loading = false
        })
    })
}
onMounted(() => {
    tableStore.table.ref = tableRef.value
    init()
})

const addMenu = () => {
    // console.log(bindingRef)
    addRef.value.open('新增', {
        sort: tableStore.table.data.length ? tableStore.table.data[tableStore.table.data.length - 1].sort + 1 : 1,
        code: '',
        pid: '',
        id: '',
        remark: '',
        name: ''
    })
}
</script>
