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

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getAlarmLogPage, getOneById, uploadConfigFile, deleteConfigFile } from "@/api/versionVersioning";
import { ElMessage, ElMessageBox } from 'element-plus';
import Viewfile from '@/components/Viewfile/index.vue'
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const info: any = ref({
    id: '',
    syscode: '',
    sysname: '',
    sysdesc: '',
    lastmodifydate: '',
    custom1: '',
    version: '',
    custom3:''
})
const versionnum = ref({
    majorVersion: '',
    subNumber: '',
    stageNumber: '',
    dateNumber: '',
    greekNumber: ''
})
const versionNum = ref()
function versionNumber() {
    versionNum.value = versionnum.value.majorVersion + '.' + versionnum.value.subNumber + '.' + versionnum.value.stageNumber + '.' + versionnum.value.dateNumber + '_' + versionnum.value.greekNumber
}
function addtontent() {
    if(isNaN(info.value.custom3)){
        ElMessage({
                type: "error",
                message: "审计上限阈值必须为数字！",
            });
        return
    }
    info.value.version = versionNum.value
    getAlarmLogPage(info.value).then((res: any) => {
        if (res.code == 0) {
            ElMessage({
                type: "success",
                message: "保存成功",
            });
            getData()
        }
    })
}
function getData() {
    getOneById().then((res: any) => {
        info.value = res
        if (info.value.version) {
            versionNum.value = info.value.version
            versionnum.value.majorVersion = info.value.version.split('.')[0]
            versionnum.value.subNumber = info.value.version.split('.')[1]
            versionnum.value.stageNumber = info.value.version.split('.')[2]
            info.value.version.split('.')[3].split('_')
            versionnum.value.dateNumber = info.value.version.split('.')[3].split('_')[0]
            versionnum.value.greekNumber = info.value.version.split('.')[3].split('_')[1]
        }

    })
}
function importclick() {
    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])
    uploadConfigFile(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;
}
function delectReport(row: any) {
    ElMessageBox.confirm(
    '您确定要删除该文件吗',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        deleteConfigFile({ fileName: row.custom2, id: row.id }).then((res: any) => {
        if (res.code == 0) {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            getData()
        }
    })
    })
    .catch(() => {
        getData()
    })
   
}

//预览pdf
const ViewfileUrl = ref("")
const title1 = ref('')
const isViewfile = ref(false)
function viewReport(row: any) {
    title1.value = row.sysname
    ViewfileUrl.value = userStore.webApiBaseUrl + '/basedata/algorithmmodel/viewModelFile?fileName=' + row.custom2
    isViewfile.value = true
}
function CloseView() {
    isViewfile.value = false
}
function checkInput() {
    // info.value.custom3 = info.value.custom3.replace((/^\d+(?=\.{0,1}\d+$|$))/g, '')
    }
onMounted(() => {
    getData();
});
</script>

<template>
    <div class="faulttemplate-box">
        <div class="title">
            <div class="title-left"></div>
            <div class="titlte-right">系统信息</div>
        </div>
        <div class="content">
            <div class="content-box">
                <div class="content-box-left">系统编号</div>
                <div class="content-box-right"> <el-input v-model="info.syscode"
                        style="width: 100%;margin-left: 8px;height: 40px;" placeholder="请输入系统编号"></el-input></div>
            </div>
            <div class="content-box">
                <div class="content-box-left">系统名称</div>
                <div class="content-box-right"> <el-input v-model="info.sysname"
                        style="width: 100%;margin-left: 8px;height: 40px;" placeholder="请输入系统名称"></el-input></div>
            </div>
            <div class="content-box">
                <div class="content-box-left">审计上限阈值</div>
                <div class="content-box-right"> <el-input v-model="info.custom3"
                        style="width: 100%;margin-left: 8px;height: 40px;" placeholder="请输入" @keyup="checkInput"></el-input></div>
            </div>
            <div class="content-box">
                <div class="content-box-left">系统功能介绍</div>
                <div class="content-box-right"> <el-input v-model="info.sysdesc"
                        style="width: 100%;margin-left: 8px;height: 40px;" :rows="6" type="textarea"
                        placeholder="请输入系统功能介绍"></el-input></div>
            </div>
            <div class="content-box" style="margin-top: 90px;width: 100%;">
                <div class="content-box-left">系统版本号</div>
                <div class="content-box-right" style="display: flex ;align-items: center;justify-content: space-between;margin-left: 6px;">
                    <el-input v-model="versionnum.majorVersion" style="width: 18%;height: 40px;"
                        placeholder="主版本号" @input="versionNumber"></el-input>
                    <el-input v-model="versionnum.subNumber" style="width: 17%;height: 40px;"
                        placeholder="子版本号" @input="versionNumber"></el-input>
                    <el-input v-model="versionnum.stageNumber" style="width: 17%;height: 40px;"
                        placeholder="阶段版本号" @input="versionNumber"></el-input>
                    <el-input v-model="versionnum.dateNumber" style="width: 17%;height: 40px;"
                        placeholder="日期版本号" @input="versionNumber"></el-input>
                    <el-input v-model="versionnum.greekNumber" style="width: 22%;height: 40px;"
                        placeholder="希腊字母版本号" @input="versionNumber"></el-input>
                </div>
                <div
                    style="margin-left: 15px;font-family: 'Arial Normal', 'Arial'; font-weight: 400; font-style: normal; font-size: 16px; color: #009BFF;">
                    {{ versionNum }}</div>
            </div>
            <div class="content-box">
                <div class="content-box-left">系统更新说明</div>
                <div class="content-box-right"> <el-input v-model="info.custom1"
                        style="width: 100%;margin-left: 8px;height: 40px;" :rows="4" type="textarea"
                        placeholder="请输入系统更新说明"></el-input></div>
            </div>
            <div class="content-box" style="margin-top: 50px;">
                <div class="content-box-left">更新时间</div>
                <div class="content-box-right">
                    <el-date-picker type="date" placeholder="请选择" v-model="info.lastmodifydate"
                        style="margin-left: 8px;width: 100%;height: 40px;" popper-class="elDatePicker" />
                </div>
            </div>
            <div class="content-box">
                <div class="content-box-left">操作手册</div>
                <div class="content-box-right">
                    <div style="margin-left: 8px;display: flex;align-items: center;"><el-button  class="searchButton" @click="importclick" style="height: 40px;"
                            type="primary">点击上传</el-button>
                            <input type="file" id="avatar" style="display:none" @change="changeFiless">
                        <div @click.stop="viewReport(info)" class="previewImg" style="position:relative ;margin-left:10px;width:100%;height:40px;display:flex;align-items:center;justify-content:space-between; padding:0px 5px ; " v-if="info.custom2" >
                            <div style="display:flex;">
                                <img  title="文档预览" src="@/assets/MenuIcon/pdf.png" alt="" style="cursor: pointer">
                                <div class="pretext" style="font-size:13px;margin-left:5px;">系统操作手册.pdf</div>
                            </div>
                           
                            <div class="preview1"> <img src="@/assets/MenuIcon/x.png" > </div>
                            <div class="preview2" style="position:relative;  z-index:20;"> <img src="@/assets/MenuIcon/x2.png" @click.stop="delectReport(info)"  > </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div style="display: flex;align-items: center;width: 660px;justify-content: flex-end;margin-left: 60px;margin-top: 20px;">
            <div class="footbutton">
                <el-button  class="searchButton" @click="getData">取消</el-button>
                <el-button  class="searchButton" type="primary" @click="addtontent">保存</el-button>
            </div>
        </div>
        <Viewfile v-if="isViewfile" :showTime="true" :title="title1" :url="ViewfileUrl" :type="'pdf'" :clientHeight="600"
            @update="CloseView" />
    </div>
</template>
<style scoped  lang="scss">
.faulttemplate-box {
    padding: 20px;
    width: 100%;
    height: calc(100vh - 130px);
    overflow: auto;
    background-color: rgba(255, 255, 255, 0);
    border: none;
    border-radius: 3px;
    box-sizing: border-box;
    padding-left: 45px;
    padding-top: 35px;
}

.title {
    display: flex;
    align-items: center;

    .title-left {
        width: 5px;
        height: 15px;
        background: inherit;
        background-color: rgba(32, 159, 132, 1);
        border: none;
        border-radius: 0px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .titlte-right {
        margin-left: 10px;
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight: 700;
        font-style: normal;
        font-size: 16px;
        color: #282828;
    }
}

.content {
    .content-box {
        padding-top: 20px;
        display: flex;
        width: 715px;
        align-items: center;
        font-family: 微软雅黑;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #b5d7ff;

        .content-box-left {
            width: 115px;
            text-align: right;
        }

        .content-box-right {
            width: 600px;
            height: 40px;
        }
    }
}

.footbutton {
    // width: 715px;
    display: flex;
    justify-content: flex-end;
    // margin-top: 20px;

    button {
        width: 60px;
        height: 40px;
    }
}

.previewImg {
    .preview1 {
        display:block;
    }
    .preview2 {
        display:none;
    }
}

.previewImg:hover {
    background:rgba(89, 122, 173, 0.205);
    border-radius:3px;
    cursor:pointer;
    .pretext{
        text-decoration:underline;
        color:#409eff;
    }
    .preview1 {
        display:none;
    }
    .preview2 {
        display:block;
        cursor:pointer;
        
    }
}
:deep(.el-textarea){
    --el-input-text-color:#fff;
}
</style>
