<template>
  <div>
    <div class="config">
      <div class="top_box">
        <div class="top_left">
          <div class="top_left_title">
            <span>培训实施基本信息:{{ ruleForm.planName }}</span>
            <div class="top_right">
              <div class="foot-back">
                <el-button @click="seeqdql" style='margin-right:20px;'>查看签到&nbsp;/&nbsp;签离二维码</el-button>
                <router-link to="/safety/pxjygl/pxss">
                  <el-button type="primary" @click="CloseEvent">
                    <el-icon>
                      <ArrowLeft />
                    </el-icon>
                    <span>返回</span>
                  </el-button> </router-link>
              </div>
            </div>
          </div>
          <el-form :model="ruleForm" :rules="rules" label-width="135px">
            <div class="item_flex">
              <el-form-item label="主办部门名称：">
                <span>{{ ruleForm.planHostsDeptName }}</span>
              </el-form-item>
              <el-form-item label="负责人：">
                <span>{{ ruleForm.planChargePersonName }}</span>
              </el-form-item>
              <el-form-item label="培训开始日期：">
                <span>{{ ruleForm.startDate }}</span>
              </el-form-item>
              <el-form-item label="培训结束日期：">
                <span>{{ ruleForm.finshDate }}</span>
              </el-form-item>
              <el-form-item label="报道截止时间：">
                <span>{{ ruleForm.signFinshDate }}</span>
              </el-form-item>
            </div>
            <div class="item_flex">

              <el-form-item label="联系人：">
                <span>{{ ruleForm.contactorName }}</span>
              </el-form-item>
              <el-form-item label="联系人电话：">
                <span>{{ ruleForm.contactorPhone }}</span>
              </el-form-item>
              <el-form-item label="培训总人数：">
                <span>{{ ruleForm.implementationTraineeNumber }}</span>
              </el-form-item>
              <el-form-item label="培训预算（元）：">
                <span>{{ ruleForm.realBudget }}</span>
              </el-form-item>
              <el-form-item label="培训课时：">
                <span>{{ ruleForm.realClassHour }}</span>
              </el-form-item>
            </div>
            <div class="item_flex">
              <el-form-item label="培训教师：">
                <span>{{ ruleForm.teachers }}</span>
              </el-form-item>
              <el-form-item label="业务类型：">
                <dict-tag :options="D_TB_YWLX" :value="ruleForm.specialityType" :tag="false" />
              </el-form-item>
              <el-form-item label="培训类型：">
                <dict-tag :options="GZ_TRAINOT" :value="ruleForm.otherType" :tag="false" />
              </el-form-item>
              <el-form-item label="考核方式：" v-if="pxsstype == '1'">
                <dict-tag :options="D_TB_PXKHFS" :value="ruleForm.examinationType" :tag="false" />
              </el-form-item>
              <el-form-item label="培训渠道：" v-if="pxsstype == '1'">
                <dict-tag :options="D_TB_PXQD" :value="ruleForm.planChannel" :tag="false" />
              </el-form-item>
            </div>
            <div class="item_flex">

            </div>
            <el-form-item label="培训地点:" v-if="pxsstype == '2'" style="width: 1200px !important;">
              <span>{{ ruleForm.place }}</span>
            </el-form-item>
            <el-form-item label="培训地点:" v-if="pxsstype == '1'" style="width: 1200px !important;">
              <span>{{ ruleForm.place }}</span>
            </el-form-item>
            <el-form-item label="培训内容：" style="width: 1200px !important;">
              <span>{{ ruleForm.realContent }}</span>
            </el-form-item>
            <el-form-item label="备注：" style="width: 1200px !important;">
              <span>{{ ruleForm.bz }}</span>
            </el-form-item>
          </el-form>
          <div class="foot_btn" style="border-top: 1px solid #ccc;">
            <div v-for="item in btnlist" :key="item" @click="openlog(item)"> {{ item.name }}</div>
          </div>
        </div>

      </div>
      <div class="btom-box">
        <div class="btom_left">
          <div class="top_left_title">
            <span>签到情况—图表</span>
          </div>
          <div class="barbox">
            <BinManyBar ids="pxssqdqk" :binTitle="'考勤情况'" :barTitle="gwBartitle" :series="kqqkList" :key="qdkey" :loadingshow="binshow" />
          </div>
        </div>
        <div class="btom_right">
          <div class="top_left_title2">
            <span class="lefts">签到情况—表格</span>
            <span class="rights">
              <span>应到：{{ qdqkyd }}人</span>
              <span>实到：{{ qdqksd }}人</span>
              <div class="onexce" @click="dcqdExcel" v-loading="loadingShow">导出</div>
            </span>
          </div>
          <div class="table_qdqk">
            <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="类别">
                <template #default="{ row }">
                  <span class="operate" v-if="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-column label="操作">
                <template #default="scope">
                  <el-popconfirm v-if="scope.row.signState == 'W'" confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要签到?" @confirm="changesign(scope.row, 'train_in')">
                    <template #reference>
                      <span class="operate" style="color: yellowgreen">签到</span>
                    </template>
                  </el-popconfirm>
                  <el-popconfirm v-else-if="scope.row.signState == 'D'" confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要签离?" @confirm="changesign(scope.row, 'train_out')">
                    <template #reference>
                      <span class="operate" style="color: yellowgreen">签离</span>
                    </template>
                  </el-popconfirm>
                  <span class="operate" v-else>-</span>
                </template>
              </el-table-column>
            </el-table>

          </div>
          <div class="fenye">
            <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>
    </div>
    <Dialog v-model="showdialog" @closezzjg="showdialog = false" :title="title" :type="types" :id="id" :pxsstype="pxsstype" :fileobj="fileobj" />
    <Ewmdialoag v-model="showerw" @closezzjg="showerw = false" :pxinfo="ruleForm" />
  </div>
</template>

<script setup>
// 引入
import { ref, onMounted, defineProps, defineEmits, getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";
import Dialog from "./dialoag.vue";
import Ewmdialoag from "./ewmdialoag.vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import { Html2canvasImg } from '@/utils/html2pdf.js';
import BinManyBar from '@/views/newsystem/components/charts/binManyBar.vue'
import { getApi, postApi, putApi } from "@/api/tobAcco_api.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
const router = useRouter();
const route = useRoute()
const store = useStore();
const { proxy } = getCurrentInstance();
const { D_TB_PXQD, D_TB_YWLX, D_TB_PXJHLX, D_TB_PXKHFS, GZ_TRAINOT } = proxy.$dict("D_TB_PXQD", "D_TB_YWLX", "D_TB_PXJHLX", "D_TB_PXKHFS", "GZ_TRAINOT");
const types = ref('');
const pxsstype = ref(null)
const id = ref(null);
const loadingShow = ref(false);
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10,
  id: null
});
const tableloading = ref(false)
const showdialog = ref(false)
const showerw = ref(false)
const ruleForm = ref({
  traineeList: []
});
const total = ref(0)
const title = ref('')
const binshow = ref(false);
const tableData = ref([])
const emits = defineEmits(["changeAddVi", "changeclose"]);
const lx = ref('')
const props = defineProps({
  addDiaShow: {
    type: Boolean,
    default: false
  },
  title: String,
  xqId: String,
  type: String,
});
const btnlist = ref([
  { name: '考勤情况', type: '02' },
  { name: '评价情况', type: '03' },
  { name: '考试情况', type: '04' },
  { name: '查看附件', type: '05' },
])
//签到情况图表
const gwBartitle = ref([]);
const qdkey = ref(1)
const kqqkList = ref([
  {
    name: '上报人数',
    type: 'bar',
    data: []
  },
  {
    name: '已签到人数',
    type: 'bar',
    data: []
  }
])
const fileobj = ref({});
const qdqkyd = ref(0)
const qdqksd = ref(0)
onMounted(() => {
  id.value = route.query.id || store.state.user.pxssId;
  lx.value = route.query.title || store.state.user.pxssTitle;
  pxsstype.value = route.query.type || store.state.user.pxssType;
  listQuery.value.id = route.query.id || store.state.user.pxssId;
  store.state.user.pxssId = id.value
  store.state.user.pxssTitle = lx.value
  store.state.user.pxssTitle = pxsstype.value
  if (pxsstype.value == '1') { //计划内详情
    getApi({ id: id.value }, '/mosty-jcgl/training/pxssInfoJhn').then((res) => {
      ruleForm.value = res
      if (res.files) {
        fileobj.value.files = res.files.split(',')
      }
      if (res.imgs) {
        if (res.imgs.includes('[')) {
          fileobj.value.imgs = JSON.parse(res.imgs)
        } else {
          fileobj.value.imgs = res.imgs.split(',')
        }
      }
    })
  } else {
    getApi({ id: id.value }, '/mosty-jcgl/training/pxssInfoJhw').then((res) => {
      ruleForm.value = res;
      if (res.files) {
        fileobj.value.files = res.files.split(',')
      }
      if (res.imgs) {
        if (res.imgs.includes('[')) {
          fileobj.value.imgs = JSON.parse(res.imgs)
        } else {
          fileobj.value.imgs = res.imgs.split(',')
        }
      }
    })
  }
  getqdqkData()
  getTableData()
  getqdcount()
});
//查看签到签离二维码
function seeqdql () {
  showerw.value = true
}
//各部门人员签到情况图表
function getqdqkData () {
  getApi({ id: id.value }, '/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 getTableData () {
  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;
    }
  })
}
//签到情况统计
function getqdcount () {
  getApi({ id: route.query.id }, '/mosty-jcgl/training/signStatistics').then((res) => {
    qdqkyd.value = res.countAll;
    qdqksd.value = res.qdCount
  })
}
//点击按钮打开相应的弹窗
function openlog (val) {
  if (val.type != '01') {
    types.value = val.type
    title.value = val.name
    showdialog.value = true
  } else {
    showdialog.value = false
  }
}
//签到、签离(签到状态 01-签到 02-签离)
function changesign (val, lab) {
  var data = {
    trainingId: val.trainingId,
    userid: val.userPk

  }
  if (lab == 'train_in') {
    data.type = '01';
    postApi(data, '/mosty-jcgl/training/pcSignIn').then(res => {
      ElMessage.success('签到成功');
      getTableData();
      getqdqkData();
      getqdcount();

    })
  } else {
    data.type = '02';
    postApi(data, '/mosty-jcgl/training/pcSignIn').then(res => {
      ElMessage.success('签离成功');
      getTableData();
      getqdqkData();
      getqdcount();

    })
  }
}

//导出表格
const dcqdExcel = () => {
  loadingShow.value = true
  let title = {
    depname: "部门",
    name: "姓名",
    types: "类别",
    signState: "签到情况",
  };
  const param = {
    pageCurrent: 1,
    pageSize: 10000,
    id: listQuery.value.id
  }
  getApi(param, "/mosty-jcgl/training/signPage").then((res) => {
    if (res.records) {
      let data = res.records;
      if (data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          data[i].types = data[i].pxsstype == '1' ? '计划内' : '计划外';
          if (data[i].signState == 'W') {
            data[i].signState = '未签到'
          } else if (data[i].signState == 'D') {
            data[i].signState = '已签到'
          } else {
            data[i].signState = '已签离'
          }

        }
        let tablename = "签到情况表.xlsx";
        exportXlsx(title, data, '签到情况表', tablename);
      } else {
        ElMessage.warning('暂无数据');
      }
    }
  }).finally(() => {
    loadingShow.value = false
  })
};
// 关闭×
function CloseEvent () {
  let arr = store.getters.tagsViewList;
  for (let i = 0; i < arr.length; i++) {
    const e = arr[i];
    if (e.path == '/pxjhcoms/pxssxq') {
      arr.splice(i, 1);
    }
  }
  router.push("/safety/pxjygl/pxss");
}

//页码发生变化
const handleCurrentChange = (val) => {
  listQuery.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  getTableData();
};
</script>

<style lang="scss" scoped>
.config {
  height: 85vh;
}

.top_box {
  width: 100%;
  display: flex;
}

.top_left {
  width: 100%;
  padding: 10px;
}

.top_right {
  width: 300px;
  margin-left: 20px;
}

.foot_btn {
  display: flex;

  > div {
    background-color: #e9e6e6;
    border-radius: 5px;
    width: 76px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 10px 20px;
    color: #000;
    cursor: pointer;
  }

  .bgcolor {
    background-color: #ccc;
  }
}

.top_right_title {
  width: 100%;
  text-align: center;
  background-color: #b1aeae;
  height: 41px;
  line-height: 41px;
  font-size: 17px;
  color: #000;
}

.top_left_title {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  color: #000;
  padding: 10px;
  font-size: 16px;
  font-weight: 600;
}

.fpbox {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  color: #000;
  font-size: 16px;
  border-bottom: 1px solid #ccc;
}

.titles {
  font-weight: 600;
}

.el-form {
  padding: 10px !important;
  display: block !important;
}

::v-deep .el-form-item {
  width: 300px !important;
}

::v-deep .el-form-item--default .el-form-item__content {
  color: #080808 !important;
  font-size: 17px;
}

::v-deep .el-form-item--default {
  margin-bottom: 4px !important;
}

::v-deep .el-form-item__label {
  color: #817c7c !important;
}

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

.btom-box {
  display: flex;

  .btom_left {
    width: 50%;
    margin-right: 20px;
  }

  .btom_right {
    width: 48%;
  }
}

.barbox {
  height: 46vh;
  width: 100%;
  padding: 10px 20px;
}

.top_left_title2 {
  border-bottom: 1px solid #ccc;
  color: #000;
  padding: 10px;
  display: flex;
  justify-content: space-between;

  .lefts {
    font-size: 16px;
    font-weight: 600;
  }

  .rights {
    display: flex;
    justify-content: space-between;
    font-size: 16px;

    > span {
      margin: 0 10px;
    }

    .onexce {
      background-color: #ccc;
      border-radius: 5px;
      width: 76px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin: -6px 20px;
      color: #000;
    }
  }
}

// .foot-back {
//     width: 100%;

//     .el-button {
//         float: right;
//         margin-right: 40px;
//         margin-top: 10px;
//     }
// }

.table_qdqk {
  height: 45vh;
  border: 1px solid var(--el-color-primary);
  overflow-y: scroll;
}
</style>