
<script lang="ts">
export default {
    name: 'algorithmVersioning'
};
</script>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { getAlarmLogPage, addOrUpdateAlgorithmModel, downloadAlgorithmModel, pushAlgorithmModelToAnalysisHost, uploadModelFile, deleteModelFile, getRecogParams } from "@/api/algorithmVersioning";
import { getDeviceByType } from "@/api/device";
import Page from '@/components/Pagination/page.vue';
import Viewfile from '@/components/Viewfile/index.vue'
import { useUserStore } from '@/store/modules/user';
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
const userStore = useUserStore();
const regionName = ref()
const stationName = ref()
const versionnum = ref({
    majorVersion: '',
    subNumber: '',
    stageNumber: '',
    dateNumber: '',
    greekNumber: ''
})
const modelCode = ref()
const modelName = ref()
const total = ref()
const infoAll = ref({
    size: 10,
    current: 1,
})
const versionNum = ref()
function versionNumber() {
    versionNum.value = versionnum.value.majorVersion + '.' + versionnum.value.subNumber + '.' + versionnum.value.stageNumber + '.' + versionnum.value.dateNumber + '_' + versionnum.value.greekNumber
}
const loading = ref(false)
const tableData = ref([])
const info: any = ref({
    id: '',
    sectionId: userStore.regionId,
    stationId: userStore.stationId,
    modelCode: '',
    modelName: '',
    modelType: '',
    algorithmmanufacturer: '',
    version: '',
    algorithmdesc: ''
})
const addAlgorithm = ref(false)
const title = ref()
const infoForm = ref();

function getData() {
    loading.value = true
    const params = {
        size: infoAll.value.size,
        current: infoAll.value.current,
        stationId: userStore.stationId,
        modelCode: modelCode.value,
        modelName: modelName.value,
    }
    getAlarmLogPage(params).then((res: any) => {
        loading.value = false
        if (res.code == 0) {

            tableData.value = res.data.records
            total.value = res.data.total
            infoAll.value.size = res.data.size
            infoAll.value.current = res.data.current
        }


    })
}
const modelType: any = ref([])
function getDevice() {

    getDeviceByType({ dictcode: 'model_type' }).then((res: any) => {
        modelType.value = res.data
    })
}
function updateclick() {
    loading.value = true
    getRecogParams({ sectionId: userStore.regionId, stationId: userStore.stationId }).then((res: any) => {
        if (res.code == 0) {
            ElMessage({
                type: "success",
                message: "同步成功！",
            });
            getData()
        } else {
            ElMessage({
                type: "error",
                message: "同步失败！",
            });
            loading.value = true
        }
    })
}
function addclick() {
    getDevice()
    info.value = {
        sectionName: userStore.regionName,
        stationName: userStore.stationName,
        sectionId: userStore.regionId,
        stationId: userStore.stationId,
        modelCode: '',
        modelName: '',
        modelType: '',
        algorithmmanufacturer: '',
        version: '',
        algorithmdesc: ''
    }
    title.value = '新增模型算法'
    addAlgorithm.value = true
}
function handleClose() {
    addAlgorithm.value = false
}
function modifyclick(row: any) {
    if (row.version) {
        versionNum.value = row.version
        versionnum.value.majorVersion = row.version.split('.')[0]
        versionnum.value.subNumber = row.version.split('.')[1]
        versionnum.value.stageNumber = row.version.split('.')[2]
        row.version.split('.')[3].split('_')
        versionnum.value.dateNumber = row.version.split('.')[3].split('_')[0]
        versionnum.value.greekNumber = row.version.split('.')[3].split('_')[1]
    }
    info.value = row
    title.value = '修改模型算法'
    addAlgorithm.value = true
}
function addLgorithm() {
    info.value.version = versionNum.value
    addOrUpdateAlgorithmModel(info.value).then((res: any) => {
        if (res.code == 0) {
            ElMessage({
                type: "success",
                message: "保存成功",
            });
            getData()
            addAlgorithm.value = false
        }
    })
}
function renew(row: any) {
    ElMessageBox.confirm(
        '您确定将' + row.version + '版本的' + row.modelName + '模型更新到智能分析主机上？',
        '提示信息',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            pushAlgorithmModelToAnalysisHost({ ModelId: row.id }).then((res: any) => {
                if (res.code == 0) {
                    ElMessage({
                        type: "success",
                        message: "更新成功",
                    });
                    getData()
                }
            })
        })
}
//下载
function download(row: any) {
    loading.value = true
    downloadAlgorithmModel({ modelId: row.id }).then((res: any) => {
        loading.value = false
        if (res.code == 0) {
            ElMessage({
                type: "success",
                message: "下载成功",
            });
            getData()
        }
    })
}
const fileId = ref()
function importclick(row: any) {
    fileId.value = row.id
    const avatar = document.getElementById('avatar');
    avatar?.click();
}
function changeFiless(e: any) {
    var name = getCaption(e.target.files[0].name)
    if (name != 'pdf' && name != 'PDF') {
        ElMessage({
            type: "error",
            message: "请上传pdf格式文件",
        });
        var file: any = document.getElementById('avatar');
        file.value = '';
        return false
    }
    const files = new FormData()
    files.append('file', e.target.files[0])
    files.append('modelId', fileId.value)
    uploadModelFile(files).then((res: any) => {
        if (res.code != 1) {
            getData()
            ElMessage({
                type: 'success',
                message: '上传成功',
            })
        }
        var file: any = document.getElementById('avatar');
        file.value = '';
    })
}
function getCaption(obj: any) {
    var index = obj.lastIndexOf(".");
    obj = obj.substring(index + 1, obj.length);
    return obj;
}
//预览pdf
const ViewfileUrl = ref("")
const title1 = ref('')
const isViewfile = ref(false)
function viewReport(row: any) {
    title1.value = row.modelName
    ViewfileUrl.value = userStore.webApiBaseUrl + '/basedata/algorithmmodel/viewModelFile?fileName=' + row.custom1
    isViewfile.value = true
}
function CloseView() {
    isViewfile.value = false
}
onMounted(() => {
    regionName.value = userStore.regionName
    stationName.value = userStore.stationName
    getData();
    getDevice();
});
function currency(list: any, itemcode: any) {
    let dictname = ''
    list.forEach((element: any) => {
        if (element.itemcode == itemcode) {
            dictname = element.dictname
        }
    })
    return dictname
}
function delectReport(row: any) {
    ElMessageBox.confirm(
        '您确定要删除该文件吗',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteModelFile({ fileName: row.custom1, id: row.id }).then((res: any) => {
                if (res.code == 0) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getData()
                }
            })
        })
        .catch(() => {
            getData()
        })

}
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: any
    rowIndex: number
}) => {
    if (rowIndex % 2 === 0) {
        return 'warning-row'
    } else if (rowIndex % 2 === 1) {
        return 'success-row'
    }
    return ''
}
</script>

<template>
    <div style="padding:60px 15px 8px 15px;">
        <div class="faulttemplate-box">
            <div class="souchtitle" style="display: flex;justify-content: space-between;">
                <div>
                    <el-input v-model="regionName" style="width: 20%;" placeholder="请输入区域" disabled></el-input>
                    <el-input v-model="stationName" style="width: 23%;margin-left: 10px;" placeholder="请输入变电站"
                        disabled></el-input>
                    <el-input v-model="modelCode" style="width: 20%;margin-left: 10px;" @input="getData"
                        placeholder="请输入模型编号"></el-input>
                    <el-input v-model="modelName" style="width: 20%;;margin-left: 10px;" @input="getData"
                        placeholder="请输入模型名称"></el-input>
                    <el-button  class="searchButton" type="primary" style="margin-left: 10px;" @click="getData">搜索</el-button>
                </div>
                <div>
                    <el-button  class="searchButton" type="primary" @click="updateclick">下载</el-button>
                    <el-button  class="searchButton" type="primary" @click="addclick"> 新增</el-button>
                </div>
            </div>
            <el-table v-loading="loading" :data="tableData"
                style="width: 100%; height: calc(100vh - 300px);margin-top: 10px;" :row-class-name="tableRowClassName"
                :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }">
                <el-table-column type="index" label="序号" width="50" align="center" />
                <el-table-column prop="modelCode" label="模型编号"></el-table-column>
                <el-table-column prop="modelName" label="模型名称"></el-table-column>
                <el-table-column prop="modelType" label="模型类型">
                    <template #default="scope">
                        <span>{{ currency(modelType, scope.row.modelType) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="stationName" label="所属变电站" width="200"></el-table-column>
                <el-table-column prop="midversionnum" label="中间版本数" align="center"></el-table-column>
                <el-table-column prop="version" label="算法版本号" width="170">
                    <template #default="scope">
                        <div v-if="scope.row.isnew == 1" style="display:flex;align-items:center"><img
                                src="@/assets/MenuIcon/u502.png" alt="" style="padding-right:5px">{{ scope.row.version }}
                        </div>
                        <div v-else>{{ scope.row.version }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="modelFile" label="模型文件" width="90" align="center">
                    <template #default="scope">
                        <div v-if="scope.row.modelFile" style="display: flex;align-items: center;justify-content: center;"><img src="@/assets/MenuIcon/u531.png" alt=""></div>
                        <div v-else>--</div>
                    </template>
                </el-table-column>
                <el-table-column prop="modelFile" label="算法说明文件" width="110" align="center">
                    <template #default="scope">
                        <div v-if="scope.row.custom1" class="previewImg"
                            style="display: flex;align-items: center;justify-content: center;position: relative;width: 100%;height: 30px;">
                            <img @click="viewReport(scope.row)" src="@/assets/MenuIcon/pdf.png" alt=""
                                style="cursor: pointer;">
                            <div @click="delectReport(scope.row)" class="preview">x</div>
                        </div>
                        <div v-else>--</div>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="状态" align="center" width="80">
                    <template #default="scope">
                        <div v-if="scope.row.runstate == 1" style="color: #00cc66;">使用中</div>
                        <div v-else style="color: #C9C9C9;">未使用</div>
                    </template>
                </el-table-column>
                <el-table-column prop="lastmodifier" label="更新人" width="80"></el-table-column>
                <el-table-column prop="lastmodifydate" label="更新时间" width="180"></el-table-column>
                <el-table-column label="操作" width="180px">
                    <template #default="scope">
                        <div style="display: flex;justify-content: space-around;align-items: center;">
                            <div><img @click="importclick(scope.row)" style="cursor: pointer;"
                                    src="@/assets/newimg/ht_svwj.png" title="上传算法说明文件">
                            </div>
                            <div @click="modifyclick(scope.row)"><img style="cursor: pointer;"
                                    src="@/assets/newimg/ht_xg.png" title="修改">
                            </div>
                            <div><img @click="download(scope.row)" style="cursor: pointer;" src="@/assets/newimg/ht_xz.png"
                                    title="下载">
                            </div>

                            <div @click="renew(scope.row)"
                                style="padding:0px 10px;height: 24px;background-color: #009bff;color: #fff;font-size: 12px;border-radius: 2px;text-align: center;line-height: 24px;cursor: pointer;">
                                更新推送</div>
                            <input type="file" id="avatar" style="display:none" @change="changeFiless">
                        </div>

                    </template>
                </el-table-column>
            </el-table>
            <Page style="margin-top: 10px;" :total="total" v-model:size="infoAll.size" v-model:current="infoAll.current"
                @pagination="getData()"></Page>
            <Eldialog v-if="addAlgorithm" :title="title" :zIndex="2000" :width="'916px'" :height="'600px'"
                @before-close="handleClose">
                <template v-slot:PopFrameContent>
                    <el-form ref="infoForm" :model="info" label-width="90px" style="margin-top: 15px;" >
                        <div style="display: flex;flex-wrap: wrap;align-items: center">
                            <el-form-item label="所属区域" style="width: 49%;">
                                <el-input v-model="regionName" style="width: 100%;;" disabled
                                    placeholder="请输入所属区域"></el-input>
                            </el-form-item>
                            <el-form-item label="所属变电站" style="width: 49%;margin-left: 15px;">
                                <el-input v-model="stationName" style="width: 100%;;" disabled
                                    placeholder="请输入所属变电站"></el-input>
                            </el-form-item>
                            <el-form-item label="模型编号" style="width: 49%;">
                                <el-input v-model="info.modelCode" style="width: 100%;"
                                    placeholder="请输入模型编号"></el-input>
                            </el-form-item>
                            <el-form-item label="模型名称" style="width: 49%;margin-left: 15px;">
                                <el-input v-model="info.modelName" style="width: 100%;"
                                    placeholder="请输入模型名称"></el-input>
                            </el-form-item>
                            <el-form-item label="模型类型" style="width: 49%;">
                                <el-select placeholder="请选择模型类型" v-model="info.modelType" clearable
                                    style="width: 100%;">
                                    <el-option v-for="item in modelType" :key="item.itemcode" :label="item.dictname"
                                        :value="item.itemcode" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="算法厂商" style="width: 49%;margin-left: 15px;">
                                <el-input v-model="info.algorithmmanufacturer" style="width: 100%;"
                                    placeholder="请输入算法厂商"></el-input>
                            </el-form-item>
                            <el-form-item label="算法版本" style="width: 100%;">

                                <div style="width: 75%;display: inline-block;">
                                    <el-input v-model="versionnum.majorVersion" style="width: 15%;"
                                        @input="versionNumber" placeholder="主版本号"></el-input>
                                    <el-input v-model="versionnum.subNumber"
                                        style="width: 15%;margin-left: 10px;" @input="versionNumber"
                                        placeholder="子版本号"></el-input>
                                    <el-input v-model="versionnum.stageNumber"
                                        style="width: 18%;margin-left: 10px;" @input="versionNumber"
                                        placeholder="阶段版本号"></el-input>
                                    <el-input v-model="versionnum.dateNumber"
                                        style="width: 18%;margin-left: 10px;" @input="versionNumber"
                                        placeholder="日期版本号"></el-input>
                                    <el-input v-model="versionnum.greekNumber"
                                        style="width: 22%;margin-left: 10px;" placeholder="希腊字母版本号"
                                        @input="versionNumber"></el-input>
                                </div>
                                <div v-if="versionnum.greekNumber"
                                    style="margin-left: 15px;font-family: 'Arial Normal', 'Arial'; font-weight: 400; font-style: normal; font-size: 16px; color: rgb(64 158 255);display: inline-block;">
                                    {{ versionNum }}</div>

                            </el-form-item>
                            <el-form-item label="算法描述" style="width: 100%;">
                                <el-input v-model="info.algorithmdesc" style="width: 100%;" :rows="4" type="textarea"
                                    placeholder="请输入算法描述"></el-input>
                            </el-form-item>
                        </div>
                        <div class="footbutton">
                            
                            <div class="details-button" @click="handleClose">取消</div>
                            <div class="details-button" @click="addLgorithm">确定</div>
                        </div>
                    </el-form>
                </template>
            </Eldialog>
            <!-- <el-dialog v-model="addAlgorithm" :close-on-click-modal="false" :before-close="handleClose" :title="title"
                append-to-body width="916px" draggable>

            </el-dialog> -->
            <Viewfile v-if="isViewfile" :showTime="true" :title="title1" :url="ViewfileUrl" :type="'pdf'"
                :clientHeight="600" @update="CloseView" />
        </div>
    </div>
</template>
<style scoped  lang="scss">
.faulttemplate-box {
    padding: 20px;
    width: 100%;
    height: calc(100vh - 160px);
    overflow: auto;
    background-color: rgba(255, 255, 255, 0);
    border: none;
    border-radius: 3px;
    box-sizing: border-box;
    background: url(@/assets/newimg/cjrw_1890.png);
    background-size: 100% 100%;

}

.footbutton {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 10px 0px;
}

button {
    width: 60px;
    
}

:deep(.el-form) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
.previewImg {
    .preview {
        position: absolute;
        top: 0px;
        left: 50px;
        font-size: 12px;
        color: #fff;
        background-color: red;
        width: 12px;
        height: 12px;
        text-align: center;
        line-height: 10px;
        border-radius: 40px;
        display: none;
    }
}

.previewImg:hover {
    .preview {
        position: absolute;
        top: 0px;
        left: 50px;
        font-size: 12px;
        color: #fff;
        background-color: red;
        width: 12px;
        height: 12px;
        text-align: center;
        line-height: 10px;
        border-radius: 40px;
        display: block;
        cursor: pointer
    }
}
</style>
