<template>
    <div class="bigBox">
        <MOSTY.FromPage :title="'详情'" @closeDialog="handleClose">
            <template #content>
                <!-- 三级自外 -->
                <div>
                    <MOSTY.Assort :title="onetitle">
                        <template #btn>
                            <div class="foot-back">
                                <el-button @click="seeqdql"
                                    style='margin-right:20px;'>查看签到&nbsp;/&nbsp;签离二维码</el-button>
                            </div>
                        </template>
                    </MOSTY.Assort>
                    <div>
                        <fromtemp v-if='ruleForm.id' :ruleForm='ruleForm' />
                    </div>
                    <div>
                        <MOSTY.Assort :title="qtxxtitle" />
                        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                            <el-tab-pane label="考勤情况" name="01">
                                <kqqktable :id='ruleForm.id' :pxsstype='"1"' :state='state' />
                            </el-tab-pane>
                            <el-tab-pane label="评价情况" name="02">
                                <div class="barboxs" v-if='activeName == "02"'>
                                    <Lineone v-if='pjtitle.length > 0' :loadingshow="binshow" :ids="pxsspjqk"
                                        :barNum="pjList" :barTitle='pjtitle' :lineKey="pjkey" />
                                    <span v-else style='color:#bbb;font-size:20px;margin:auto;'>暂无评价情况</span>
                                </div>

                            </el-tab-pane>
                            <el-tab-pane label="考试情况" name="03">
                                <div style='display:flex;justify-content:space-between;' v-if='activeName == "03"'>
                                    <div class='leftks'>
                                        <AnnularPie v-if='barsShow' :data="ksqklist" :keys="cjkey" :text='kstext' />
                                        <span v-else style='color:#bbb;font-size:20px;margin:auto;'>暂无考试数据</span>
                                    </div>
                                    <div class='leftks2'>
                                        <gagues :loadingshow="barsShow" ids="fxdybsfgl" :key="keys" :barNum="kscount" />
                                    </div>

                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="查看附件" name="04">
                                <MOSTY.Assort :title="'培训课件'" />
                                <div style="margin: 10px">
                                    <MOSTY.Upload :widthNumber="800" :limit="5" :nopicer="true" :isImg="false"
                                        :ShowfileList="true" v-model="ruleForm.files" :showbut='false'
                                      :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']"  :showinput="false" :delrow="delrow" :disabled='true'>
                                    </MOSTY.Upload>
                                </div>
                                <MOSTY.Assort :title="'培训方案附件'" />
                                <div style="margin: 10px">
                                    <MOSTY.Upload v-if='ruleForm.pxfa' :widthNumber="800" :limit="5" :nopicer="true"
                                        :isImg="false" :ShowfileList="true" v-model="ruleForm.pxfa" :showbut='false'
                                      :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']"  :showinput="false" :delrow="delrow" :disabled='true'></MOSTY.Upload>
                                    <span v-else style='color:#bbb;font-size:20px;margin:auto;'>暂无培训课件附件信息</span>
                                </div>
                                <MOSTY.Assort :title="'培训通知文件附件'" />
                                <div style="margin: 10px">
                                    <MOSTY.Upload v-if='ruleForm.pxtzwj' :widthNumber="800" :limit="5" :nopicer="true"
                                        :isImg="false" :ShowfileList="true" v-model="ruleForm.pxtzwj" :showbut='false'
                                       :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :showinput="false" :delrow="delrow" :disabled='true'></MOSTY.Upload>
                                    <span v-else style='color:#bbb;font-size:20px;margin:auto;'>暂无培训课件附件信息</span>
                                </div>
                                <MOSTY.Assort :title="'签到表附件'" />
                                <div style="margin: 10px">
                                    <MOSTY.Upload v-if='ruleForm.qdb' :widthNumber="800" :limit="5" :nopicer="true"
                                        :isImg="false" :ShowfileList="true" v-model="ruleForm.qdb" :showbut='false'
                                       :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :showinput="false" :delrow="delrow" :disabled='true'></MOSTY.Upload>
                                    <span v-else style='color:#bbb;font-size:20px;margin:auto;'>暂无培训课件附件信息</span>
                                </div>
                                <div>
                                    <MOSTY.Assort :title="'培训过程资料'" />
                                    <div style="margin: 10px">
                                        <MOSTY.Upload :width="'100%'" :limit="5" :nopicer="false" :isImg="true"
                                            :ShowfileList="false" v-model="ruleForm.imgs" :nameshow='true'
                                            :gsgfList="['jpg', 'png']" @filehandleChange="changeFiles" :disabled='true'>
                                        </MOSTY.Upload>
                                    </div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div v-if='sjtype == "ej"'>
                        <MOSTY.Assort :title="'三级培训信息'" />
                        <div v-if='sjpxlist.length' style="height: 30vh;">
                            <MOSTY.Table :table-columns="tableColumns" :tableData="sjpxlist"
                                :tableloading="tableloading" :tableHeight="'100%'" :isSelect="false"
                                style="width: 100%;" :isSort="false">
                                <template #actions="{ row }">
                                    <span class="operesee" @click='erjxq(row, "sj")'><el-icon>
                                            <View />
                                        </el-icon>查看</span>
                                </template>
                            </MOSTY.Table>
                        </div>
                        <div v-else>
                            <span style='color:#bbb;font-size:20px;'>暂无三级培训信息</span>
                        </div>

                    </div>
                </div>

            </template>
            <template #footer>
                <el-button @click="handleClose" type="primary">
                    <el-icon>
                        <DocumentDelete />
                    </el-icon>
                    <span>关闭</span>
                </el-button>
            </template>
            <template #dwbox>
                <!-- 详情-->
                <Ewmdialoag v-model="showerw" @closezzjg="showerw = false" :pxinfo="ruleForm" />

            </template>
        </MOSTY.FromPage>
    </div>
</template>

<script setup>
// 引入
import { ref, onMounted, defineProps, defineEmits, reactive, watch, getCurrentInstance } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import AnnularPie from "@/views/dutyBook/jgryandzz/commponents/total/AnnularPie.vue"
import * as MOSTY from "@/components/MyComponents/index";
import fromtemp from "./fromtemp.vue";
import Ewmdialoag from "./pxjhcoms/ewmdialoag.vue";
import kqqktable from "./kqqktable.vue";
import Lineone from "./pxjhcoms/eachers/lineone.vue";
import gagues from "./pxjhcoms/eachers/gauge.vue";
const tableColumns = ref([
    {
        title: "开始时间",
        prop: "startDate"
    },
    {
        title: "结束时间",
        prop: "finshDate"
    },
    {
        title: "培训项目名称",
        prop: "planName"
    },
    {
        title: "主办部门",
        prop: "planHostsDeptName"
    }
])
const ruleForm = ref({
});
const sjpxlist = ref([])//三级列表
const pjkey = ref(1)
const kscount = ref(0);
const pjtitle = ref([])
const pjList = ref([])
const kstext = ref('0人' + '\n\n' + '总人数')
const binshow = ref(true);
const onetitle = ref('基础信息')
const qtxxtitle = ref('其他信息')
const cjkey = ref(1)
const keys = ref(1)
const activeName = ref('01')
const showerw = ref(false)
const barsShow = ref(false)
const state = ref(null)//实施下发状态
const sjtype = ref('')//判断是几级培训
const id = ref(null)
const emits = defineEmits(["changeAddVi", "changeclose"]);


const props = defineProps({
    id: String,
    type: String,
    orgcode: String,
});
const ksqklist = ref([
    { value: 0, name: '已合格', color: "#05a445" },
    { value: 0, name: '未合格', color: "#f9cc05" }
])
// 初始化
onMounted(() => {
    id.value = props.id
    sjtype.value = props.type
    if (props.id) {
        getApi({ id: props.id }, '/mosty-jcgl/training/pxssInfoJhn').then((res) => {
            ruleForm.value = res
            ruleForm.value.sffz = res.library.sffz ? res.library.sffz : ''
            ruleForm.value.examStartTime = res.library.examStartTime ? res.library.examStartTime : ''
            ruleForm.value.examEndTime = res.library.examEndTime ? res.library.examEndTime : ''
            ruleForm.value.examTime = res.library.examTime ? res.library.examTime : ''
            ruleForm.value.specialityType = ruleForm.value.specialityType.split(",");
            if (sjtype.value == 'sj') {
                onetitle.value = '三级培训基本信息'
                qtxxtitle.value = '三级培训其他信息'
            } else {
                onetitle.value = '二级培训基本信息'
                qtxxtitle.value = '二级培训其他信息'
                //获取三级培训列表
                getsjtable(ruleForm.value.yjid, props.orgcode)
            }
            getpjqklist()
        });
    }

})
//获取三级培训表
function getsjtable(id, orgcode) {
    getApi({ id, orgcode }, '/mosty-jcgl/training/getSjpxById').then(res => {
        sjpxlist.value = res
    })

}
//查看签到签离二维码
function seeqdql() {
    showerw.value = true
}
function handleClick(val) {
    var tabname = val.props.name
    if (tabname == '02') {
        getpjqklist()
    } else if (tabname == '03') {
        getkslist()
    }
}
//	计划内实施-详情-评价情况统计
function getpjqklist() {
    if (id.value) {
        getApi({ id: id.value }, '/mosty-jcgl/training/getPjStatistics').then((res) => {
            if (res) {
                pjtitle.value = res.map(item => { return item.TQuestion })
                pjList.value = res.map(it => { return Number(it.avg).toFixed(1) })

                binshow.value = true;
                pjkey.value++
            }

        })
    }

}
//查看考试情况
function getkslist() {
    ksqklist.value[0].value = 0
    ksqklist.value[1].value = 0
    kscount.value = 0
    getApi({ id: id.value }, '/mosty-jcgl/training/getHgl').then((res) => {
        if (res) {
            ksqklist.value[0].value = res.hgrs ? res.hgrs : 0
            ksqklist.value[1].value = res.whgrs ? res.whgrs : 0
            kscount.value = res.pjf ? Number(res.pjf).toFixed(1) : 0
            var count = ksqklist.value[0].value + ksqklist.value[1].value
            kstext.value = `${count}人` + '\n' + '总人数'
            cjkey.value++
            keys.value++
            barsShow.value = true;

        }

    })
}

// 关闭
const handleClose = () => {
    emits("changeAddVi", false);
};

// 关闭×
const closeDialog = () => {
    emits("changeAddVi", false);
    emits("changeclose", false);
};

</script>

<style lang="scss" scoped>
// ::v-deep .el-dialog__body {
//     overflow: auto !important;
//     max-height: 78vh !important;
// }

::v-deep .el-tabs__header {
    margin-bottom: 0px !important;
}

::v-deep .el-tabs__item {
    color: #000;
}

::v-deep .el-tabs__nav-scroll {
    background-color: var(--el-table-cell-bmx-backgroundcolor) !important;
}

::v-deep .el-tabs__item.is-active {
    color: var(--el-color-primary) !important;
}

::v-deep .el-tabs__active-bar {
    background-color: var(--el-color-primary) !important;
}

::v-deep .el-tabs__nav-wrap::after {
    background: none !important;
    margin-left: 21px;

}

::v-deep .el-tabs__nav {
    padding: 0 22px;
}

.sele-title {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    padding: 10px 20px;
}

.sele-titles {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    padding: 10px 20px 0px 50px;

    // >span {
    //     display: block;
    //     width: 33%;
    //     text-align: center;
    // }
}

.beiz {
    width: 100%;
    padding: 10px;
    background: #0b6047;
}

.addbtn {
    margin: 10px;
    display: flex;
    justify-content: end;
}

.barboxs {
    width: 100%;
    height: 397px;
    padding: 10px 20px;
    position: relative;
}

.leftks {
    width: 40%;
    height: 300px;
    padding: 10px 20px;
    position: relative;
}

.leftks2 {
    width: 50%;
    height: 300px;
    padding: 10px 20px;
    position: relative;
}
</style>
