<template>
    <el-dialog v-model="policyView" title="承载能力评估策略" width="1400" :before-close="handleClose">
        <div style="display: flex; justify-content:end">
            <el-button icon="el-icon-Refresh" type="primary" >一键还原</el-button>
        </div>
        <el-divider content-position="left">光伏电站承载能力评估策略</el-divider>
        <vxe-table
            v-bind="defaultAttribute"
            ref="xTable"
            :column-config="{ resizable: true }"
            :loading="loading"
            :data="tableData"
            :edit-config="{ trigger: 'manual', mode: 'row', autoClear: false, showIcon: false }"
        >
            <vxe-colgroup field="group0" title="等级" align="right">
                <vxe-column field="name" width="180" title="结果" :edit-render="{}">
                    <template #edit="{ row }">
                        <vxe-input v-model="form.name" type="text"></vxe-input>
                    </template>
                </vxe-column>
            </vxe-colgroup>

            <vxe-column field="role" title="安全(个)" :edit-render="{}">
                <template #edit="{ row }">
                    <vxe-input v-model="form.role" type="text" placeholder="请输入昵称"></vxe-input>
                </template>
            </vxe-column>

            <vxe-column field="num6" title="III级预警(个)" :edit-render="{}">
                <template #edit="{ row }">
                    <vxe-input v-model="form.num6" type="text"></vxe-input>
                </template>
            </vxe-column>
            <vxe-column field="date12" title="II级预警(个)" :edit-render="{}">
                <template #edit="{ row }">
                    <vxe-input v-model="form.date12" type="text"></vxe-input>
                </template>
            </vxe-column>
            <vxe-column field="date13" title="I级预警(个)" :edit-render="{}">
                <template #edit="{ row }">
                    <vxe-input v-model="form.date13" type="text"></vxe-input>
                </template>
            </vxe-column>

            <vxe-column title="操作" width="160">
                <template #default="{ row }">
                    <template v-if="isActiveStatus(row)">
                        <el-button type="primary" size="small" @click="saveRowEvent(row)" link>保存</el-button>
                        <el-button type="primary" size="small" @click="cancelRowEvent(row)" link>取消</el-button>
                    </template>
                    <template v-else>
                        <el-button size="small" @click="editRowEvent(row)" link>编辑</el-button>
                    </template>
                </template>
            </vxe-column>
        </vxe-table>
        <el-divider content-position="left">充电站、电加热负荷、电气化铁路承载能力评估</el-divider>
        <vxe-table
            v-bind="defaultAttribute"
            ref="xTable"
            :column-config="{ resizable: true }"
            :loading="loading"
            :data="tableData"
            :edit-config="{ trigger: 'manual', mode: 'row', autoClear: false, showIcon: false }"
        >
            <vxe-colgroup field="group0" title="等级" align="right">
                <vxe-column field="name" width="180" title="结果" :edit-render="{}">
                    <template #edit="{ row }">
                        <vxe-input v-model="form.name" type="text"></vxe-input>
                    </template>
                </vxe-column>
            </vxe-colgroup>

            <vxe-column field="role" title="THD(%)" :edit-render="{}">
                <template #edit="{ row }">
                    <vxe-input v-model="form.role" type="text" placeholder="请输入昵称"></vxe-input>
                </template>
            </vxe-column>

            <vxe-column field="num6" title="2~25次谐波合格个数" :edit-render="{}">
                <template #edit="{ row }">
                    <vxe-input v-model="form.num6" type="text"></vxe-input>
                </template>
            </vxe-column>
            <vxe-column field="date12" title="畸次谐波合格个数" :edit-render="{}">
                <template #edit="{ row }">
                    <vxe-input v-model="form.date12" type="text"></vxe-input>
                </template>
            </vxe-column>
            <vxe-column field="date13" title="偶次谐波合格个数" :edit-render="{}">
                <template #edit="{ row }">
                    <vxe-input v-model="form.date13" type="text"></vxe-input>
                </template>
            </vxe-column>

            <vxe-column title="操作" width="160">
                <template #default="{ row }">
                    <template v-if="isActiveStatus(row)">
                        <el-button type="primary" size="small" @click="saveRowEvent(row)" link>保存</el-button>
                        <el-button type="primary" size="small" @click="cancelRowEvent(row)" link>取消</el-button>
                    </template>
                    <template v-else>
                        <el-button size="small" @click="editRowEvent(row)" link>编辑</el-button>
                    </template>
                </template>
            </vxe-column>
        </vxe-table>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'
import { json } from 'stream/consumers'
defineOptions({
    name: 'Advancedanalysis/eventcorrelation'
})
const emit = defineEmits(['View'])
const view = ref(false)
const policyView = ref(true)

const xTable = ref()
const loading = ref(false)

const tableData = ref([
    {
        id: 10001,
        name: '安全',
        role: '0',
        num6: '0',
        date12: '0',
        date13: '0'
    },
    {
        id: 10002,
        name: 'III级预警',
        role: '0',
        num6: '0',
        date12: '0',
        date13: '0'
    },
    {
        id: 10003,
        name: 'II级预警',
        role: 'Test',
        date12: '0',
        num6: '0',
        date13: '0'
    },
    {
        id: 10004,
        name: 'I级预警',
        role: '0',
        date12: '0',
        num6: '0',
        date13: '0'
    }
])
const form = ref({
    id: '',
    name: '',
    role: '',

    num6: '',
    date12: '',
    date13: ''
})

const isActiveStatus = row => {
    return xTable.value.isEditByRow(row)
}
// 编辑配置
const editRowEvent = row => {
    form.value = JSON.parse(JSON.stringify(row))
    xTable.value.setEditRow(row)
}
// 保存配置
const saveRowEvent = row => {
    xTable.value.clearEdit().then(() => {
        loading.value = true
        setTimeout(() => {
            loading.value = false
            console.log('🚀 ~ saveRowEvent ~ row:', form.value)
        }, 300)
    })
}
// 取消配置
const cancelRowEvent = row => {
    xTable.value.clearEdit().then(() => {
        // 还原行数据
        xTable.value.revertData(row)
    })
}

// 取消
const handleClose = () => {
    emit('View')
}
</script>

<style lang="scss" scoped>
::v-deep .vxe-table--header thead tr:first-of-type th:first-of-type {
    background: #f8f8f9;
}
::v-deep .vxe-table--header thead tr:first-of-type th:first-of-type:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 98px; /*这里需要自己调整，根据td的宽度和高度*/
    top: 0;
    left: 0;
    background-color: grey;
    opacity: 0.3;
    display: block;
    transform: rotate(-66deg); /*这里需要自己调整，根据线的位置*/
    transform-origin: top;
}
::v-deep .vxe-table--header thead tr:last-of-type th:first-of-type:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 98px; /*这里需要自己调整，根据td的宽度和高度*/
    bottom: 0;
    right: 0;
    background-color: grey;
    opacity: 0.3;
    display: block;
    transform: rotate(-66deg); /*这里需要自己调整，根据线的位置*/
    transform-origin: bottom;
}
</style>
