<template>
  <el-dialog :title="titleValue" width="1200px" :model-value="modelValue" :before-close="closed">
    <div class="flex_box" v-if="props.type == '02'">
      <div style="width: 50%;">
        <div class="tabBox" style="margin-top: 0px;height:320px !important;overflow-y: scroll;">
          <el-table ref="multipleTableRef" stripe :data="tableData" style="width: 100%" v-loading="tableloading"
            element-loading-text="数据加载中..." @selection-change="handleSelectionChange" border>
            <el-table-column label="部门" property="depname"></el-table-column>
            <el-table-column label="姓名" prop="name">
            </el-table-column>
            <el-table-column label="人员类型" property="type">
              <template #default="{ row }">
                <span class="operate" v-if="props.pxsstype == '1'">计划内</span>
                <span class="operate" v-else>计划外</span>
              </template>
            </el-table-column>
            <el-table-column label="签到状态" prop="signState">
              <template #default="{ row }">
                <span class="operate" v-if="row.signState == 'W'">未签到</span>
                <span class="operate" v-else-if="row.signState == 'D'">已签到</span>
                <span class="operate" v-else>已签离</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="fenye" style="margin-top:3px;">
          <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
            layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
        </div>

      </div>
      <div class="barbox">
        <BinManyBar ids="pxssjhn" :binTitle="'考勤情况'" :barTitle="gwBartitle" :series="kqqkList" :key="qdkey"
          :loadingshow="binshow" />
      </div>
    </div>
    <div class="barboxs" v-if="props.type == '03'">
      <BinManyBar ids="pxsspjqk" :binTitle="'评价情况'" :barTitle="pjtitle" :series="pjList" :loadingshow="binshow"
        :key="pjkey" />

    </div>
    <div class="flex_box" v-if="props.type == '04'">
      <div style="width: 100%;">
        <el-button type="primary" @click="export2Excel" v-loading="loadingShow">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出表格</span>
        </el-button>
        <div class="tabBox" style="margin-top: 0px;height:320px !important;overflow-y: scroll;" id="table_Selector">
          <el-table ref="multipleTableRef" stripe :data="tableData" style="width: 100%" v-loading="tableloading"
            element-loading-text="数据加载中..." @selection-change="handleSelectionChange" border>
            <el-table-column label="部门" property="depname"></el-table-column>
            <el-table-column label="姓名" prop="name">
            </el-table-column>
            <el-table-column label="考试次数" prop="count"></el-table-column>
            <el-table-column label="最高分数" prop="examinationScore">
              <template #default="{ row }">
                <span class="operate">{{ row.examinationScore ? row.examinationScore : '--' }}</span>

              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="fenye" style="margin-top:3px;">
          <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
            layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
        </div>

      </div>
      <!-- <div class="barbox">
                <BinManyBar ids="pxssksqk" :binTitle="'考试情况'" :barTitle="gwkstitle" :series="ksList" :key="kskey"
                    :loadingshow="binshow" />
            </div> -->
    </div>
    <div class="flex_box" v-if="props.type == '05'">
      <div style="width: 100%;">
        <div style="margin:11px;">培训课件</div>
        <div>
          <MOSTY.Upload width="800px" :limit="3" :nopicer="true" :isImg="false" :ShowfileList="false"
            :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" v-model="uploadList" :delrow="delrow"
            @filehandleChange="changeFile" :showbut="false">
          </MOSTY.Upload>
        </div>
        <div class="tabBox" style="margin-top: 0px; height:280px !important;overflow-y: scroll;">

          <el-table ref="multipleTableRef" stripe :data="fjtableData" style="width: 100%"
            @selection-change="handleSelectionChange" border>
            <el-table-column label="文件名" property="name"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-popconfirm v-if="!disabled" confirm-button-text="是" cancel-button-text="否" icon-color="red"
                  title="确定要删除?" @confirm="handlefjdelete(scope.row)">
                  <template #reference>
                    <span class="operdel" size="small"><el-icon>
                        <Delete />
                      </el-icon>删除</span>
                  </template>
                </el-popconfirm>
                <span class="operedown" @click="handledlon(scope.row)"><el-icon>
                    <Bottom />
                  </el-icon>下载</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin: 10px;" v-if="props.pxsstype == '2'">
          <div style="margin:11px;">培训图片</div>
          <MOSTY.Upload width="800px" :limit="3" :isImg="true" :delrow="delrows" :ShowfileList="true"
            v-model="uploadimgs" @filehandleChange="changeImg" :disabled="disabled">
          </MOSTY.Upload>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="savefile" v-if="props.type == '05' && !disabled"> <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span></el-button>
        <el-button @click="closed"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import * as rule from "@/utils/rules.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { defineProps, watch, ref, onMounted, getCurrentInstance } from "vue";
import { getApi, postApi, putApi } from "@/api/tobAcco_api.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
import fs from "file-saver";
import * as XLSX from "xlsx";
import { createAndClickLink } from "@/utils/tools.js";
import BinManyBar from '@/views/newsystem/components/charts/binManyBar.vue'
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute()
const disabled = ref(false)
const loadingShow = ref(false);
const { proxy } = getCurrentInstance();
const { D_TB_YWLX } = proxy.$dict("D_TB_YWLX");
const gwBartitle = ref([]);
const gwBarnum = ref([])
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  titleValue: {
    type: String,
    default: "基本信息"
  },
  type: {
    type: String,
    default: "01"
  },
  id: {
    type: String,
    default: null
  },
  pxsstype: {
    type: String,
    default: null
  },
  roleId: {
    type: String,
    default: ""
  },
  fileobj: {
    type: Object,
    default: null
  }

});
const total = ref(0);
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
});
const fjtableData = ref([]);
const tableloading = ref(false);
const testtableloading = ref(false);
const uploadList = ref([]); //上传文件列表
const uploadimgs = ref([]); //上传图片列表
const ShowfileList = ref(true); //是否展示文件列表
const delrow = ref({}); //删除文件列表
const binshow = ref(true);
const FromData = ref({})
const tableData = ref([]);
const testtableData = ref([]);
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
const closed = () => {
  if (props.type == '05' && !disabled) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        uploadList.value = null
        uploadimgs.value = null
        emits("update:modelValue", false);
      })
      .catch(() => {
        // catch error
      })
  } else {
    uploadList.value = null
    uploadimgs.value = null
    emits("update:modelValue", false);
  }

};
//考勤情况图表数据
const qdkey = ref(1)
const kqqkList = ref([
  {
    name: '总人数',
    type: 'bar',
    data: []
  },
  {
    name: '已签到人数',
    type: 'bar',
    data: []
  }
])
//评价情况图表
const pjkey = ref(1)
const pjtitle = ref([])
const pjList = ref([
  {
    name: '评价平均分',
    type: 'bar',
    data: []
  }
])
//考试情况图表
const kskey = ref(1)
const gwkstitle = ref([])
const ksList = ref([
  {
    name: '成绩',
    type: 'bar',
    data: []
  }
])
onMounted(() => {

})

watch(
  () => props.modelValue,
  (val) => {
    if (val === true) {
      listQuery.value.id = props.id
      if (props.type == '02') {
        getListData()
        getkqtbData(props.id)
      }
      if (props.type == '03') {
        getpjqklist(props.id)
      }
      if (props.type == '04') {
        getListData()
      }
      if (props.type == '05') {
        disabled.value = true
        if (props.fileobj.files) {
          uploadList.value = props.fileobj.files;
        }
        if (props.fileobj.imgs) {
          uploadimgs.value = props.fileobj.imgs
        }
      }


    } else {
      listQuery.value.id = null
    }
  }
);
//获取考勤表
function getListData() {
  tableloading.value = true
  getApi(listQuery.value, '/mosty-jcgl/training/signPage').then((res) => {
    if (res.records) {
      tableData.value = res.records
      tableloading.value = false
      total.value = res.total
      gwkstitle.value = res.records.map(item => {
        return item.name
      })
      ksList.value[0].data = res.records.map(item => {
        return item.examinationScore
      })
      binshow.value = true;
      kskey.value++
    }
  })
}
//获取考勤图表数据
function getkqtbData(id) {
  getApi({ id: id }, '/mosty-jcgl/training/qdqkList').then((res) => {
    gwBartitle.value = res.map(item => {
      return item.depname
    })
    kqqkList.value[0].data = res.map(it => {
      return it.num1
    })
    kqqkList.value[1].data = res.map(it => {
      return it.num2
    })
    qdkey.value++
    binshow.value = true;
  })
}
//	计划内实施-详情-评价情况统计
function getpjqklist(id) {
  pjtitle.value = []
  getApi({ id: id }, '/mosty-jcgl/training/getPjStatistics').then((res) => {
    res.forEach(item => {
      if (item.avg) {
        pjtitle.value.push(item.TQuestion)
        pjList.value[0].data.push(item.avg)

      }
    })
    // pjtitle.value = ['培训总体效果', '培训教师', '培训内容适应岗位需求', '培训时间安排', '培训方式', '培训资料']
    // pjList.value[0].data = [1, 2, 3, 4, 3, 2]
    binshow.value = true;
    pjkey.value++
  })
}

//接收附件
const changeFile = (data) => {
  fjtableData.value = data

};

//删除文件
const handlefjdelete = (row) => {
  delrow.value = row;
  fjtableData.value = fjtableData.value.filter((item) => {
    return item != row
  })
};
//点击下载文件
function handledlon(val) {
  createAndClickLink(val.url, val.name)
}
//	计划内、外实施-修改附件
function savefile() {
  FromData.value.id = props.id
  postApi(FromData.value, '/mosty-jcgl/training/pxssUpdateFile').then((res) => {
    ElMessage.success('修改成功');
    emits("update:modelValue", false);
  })
}
//导出
function export2Excel() {
  loadingShow.value = true
  let title = {
    index: '序号',
    name: "姓名",
    examinationScore: "考试成绩",
    orgname: "所属单位",
    depname: "所属部门",


  };
  const param = {
    pageCurrent: 1,
    pageSize: 100000,
    id: listQuery.value.id
  }
  getApi(param, "/mosty-jcgl/training/signPage").then((res) => {
    if (res.records) {
      let data = res.records;
      if (data) {
        for (let i = 0; i < data.length; i++) {
          data[i].examinationScore = data[i].examinationScore ? data[i].examinationScore : 0;
          data[i].index = i + 1;
        }
        let tablename = "考试情况.xlsx";
        let tableTitle = '考试成绩'
        exportXlsx(title, data, tableTitle, tablename);
      }
    }
  }).finally(() => {
    loadingShow.value = false
  })
}

/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();


};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();


};

</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

.flex_box {
  display: flex;
  justify-content: space-between;
}

.barbox {
  width: 48%;
  height: 397px;
  padding: 10px 20px;
  position: relative;
}

.zwsj {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 18px;
}

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

::v-deep .el-form--inline {
  padding-left: 0 !important;
}

// ::v-deep .el-table__empty-block {
//     min-height: 397px !important;
// }

::v-deep .el-radio__label {
  display: none;
}

.table-box-radio .el-table1__header-wrapper .el-checkbox {
  display: none;
}
</style>
