<template>
    <el-row :gutter="20" :style="{ height: height }">
        <el-col :span="9" class="col1">
            <policyTree @tactics="tactics"/>
        </el-col>
        <el-col :span="15" class="col1">
            <div class="mb10" style="height: 32px">
                <el-button type="primary" icon="el-icon-Plus">新增策略</el-button>
            </div>
            <div :style="`height: calc(${height} - 43px)`">
                <vxe-table ref="tableRef" height="auto" :data="dataList" v-bind="defaultAttribute">
                    <vxe-column field="name" title="策略名称"></vxe-column>
                    <vxe-column field="type" title="策略类型">
                        <template #default="{ row }">
                            {{ row.type === 0 ? '预警单' : '告警单' }}
                        </template>
                    </vxe-column>
                    <vxe-column field="grade" title="策略等级">
                        <template #default="{ row }">
                            {{ row.grade === 0 ? '自动策略' : row.grade === 1 ? '手动策略' : '排他策略' }}
                        </template>
                    </vxe-column>
                    <vxe-column field="state" title="状态">
                        <template #default="{ row }">
                            <el-switch
                                v-model.number="row.state"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="1"
                                :inactive-value="2"
                                @change="stateChange($event, row.id)"
                            ></el-switch>
                        </template>
                    </vxe-column>
                    <vxe-column title="操作">
                        <template #default="{ row }">
                            <el-button type="primary" size="small" link>查看</el-button>
                            <el-button type="primary" size="small" link>修改</el-button>
                            <el-button type="primary" size="small" link>删除</el-button>
                        </template>
                    </vxe-column>
                </vxe-table>
            </div>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import policyTree from '@/components/tree/pqs/policyTree.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'
import { ref, reactive } from 'vue'
const height = mainHeight(80).height
const dataList = ref([{}])

const stateChange = (val: number, id: number) => {}
const tactics = (row: any, id: number) => {
    console.log("🚀 ~ tactics ~ row:", row,id)
    
}
</script>

<style lang="scss" scoped></style>
