<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <div class="top_box">
        <div class="title">
          培训实施基本信息：{{ dialogForm.planName }}
        </div>
        <div>
          <el-button type="primary" @click="export2Excel" v-loading="loadingShow">签到表导出</el-button>
          <router-link to="/safety/pxjygl/pxrysb">
            <el-button type="primary" @click="CloseEvent">
              <el-icon>
                <ArrowLeft />
              </el-icon>
              <span>返回</span>
            </el-button> </router-link>
        </div>

      </div>

      <div>
        <el-form :model="dialogForm" label-width="120px">
          <el-form-item label="主办部门名称：">
            {{ dialogForm.planHostsDeptName }}
          </el-form-item>
          <el-form-item label="培训渠道：">
            <dict-tag :options="D_TB_PXQD" :value="dialogForm.planChannel" :tag="false" />
          </el-form-item>
          <el-form-item label="培训开始日期：">
            {{ dialogForm.startDate }}
          </el-form-item>
          <el-form-item label="培训结束日期：">
            {{ dialogForm.finshDate }}
          </el-form-item>
          <el-form-item label="报道截至时间：">
            {{ dialogForm.signFinshDate }}
          </el-form-item>
          <el-form-item label="负责人：">
            {{ dialogForm.planChargePersonName }}
          </el-form-item>
          <el-form-item label="联系人：">
            {{ dialogForm.contactorName }}
          </el-form-item>
          <el-form-item label="联系人电话：">
            {{ dialogForm.contactorPhone }}
          </el-form-item>
          <el-form-item label="培训总人数：">
            {{ dialogForm.implementationTraineeNumber }}
          </el-form-item>
          <el-form-item label="培训预算：">
            {{ dialogForm.realBudget }}
          </el-form-item>
          <el-form-item label="培训课时：">
            {{ dialogForm.realClassHour }}
          </el-form-item>
          <el-form-item label="培训教师：">
            {{ dialogForm.teachers }}
          </el-form-item>
          <el-form-item label="考核方式：">
            <dict-tag :options="D_TB_PXKHFS" :value="dialogForm.examinationType" :tag="false" />
          </el-form-item>

          <el-form-item label="业务类型：">
            <dict-tag :options="D_TB_YWLX" :value="dialogForm.specialityType" :tag="true" />
          </el-form-item>
          <el-form-item label="培训类型：">
            <dict-tag :options="GZ_TRAINOT" :value="dialogForm.otherType" :tag="false" />
          </el-form-item>
          <el-form-item label="培训地点：" class="man_box">
            {{ dialogForm.place }}
          </el-form-item>
          <el-form-item label="培训内容：" class="man_box">
            {{ dialogForm.realContent }}
          </el-form-item>
          <el-form-item label="备注：" class="man_box">
            {{ dialogForm.bz }}
          </el-form-item>
        </el-form>
      </div>
      <div class="table_box">
        <div class="tab_top">
          <div class="tabtl_title">分配上报情况</div>
          <span>分配总数：{{ froms.fpCount }}</span>
          <span>上报总数：{{ froms.sbCount }}</span>
          <span>实际总数：{{ froms.sjCount }}</span>
          <div class="btn_box">
            <button :class="value == '02' ? 'bgcolor' : ''" @click="changetable('02')">表格</button>
            <button :class="value == '01' ? 'bgcolor' : ''" @click="changetable('01')">图表</button>

          </div>
        </div>
        <div class="table_cent">
          <div id="table_Selector">
            <el-table v-if="value == '02'" ref="multipleTableRef" stripe :data="tableData" style="width: 100%"
              @selection-change="handleSelectionChange" border>
              <el-table-column label="单位" property="orgname"></el-table-column>
              <el-table-column label="分配人数" property="fp" width="150"></el-table-column>
              <el-table-column label="上报人数" property="sb" width="150"></el-table-column>
              <el-table-column label="实际签到人数" property="sj" width="150"></el-table-column>
              <el-table-column label="上报状态" property="an" width="150">
                <template #default="{ row }">
                  <span class="operate" v-if="row.sb > 0">已上报</span>
                  <span class="operate" v-else>未上报</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="{ row }">
                  <span class="operesee" v-if="row.sb > 0" @click="registration(row)">
                    <el-icon>
                      <Compass />
                    </el-icon>查看</span>
                  <span class="operedown" v-else @click="regissb(row)">
                    <el-icon>
                      <Position />
                    </el-icon>上报</span>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="lin_box" v-if="value == '01'">
            <!-- 柱状图-->
            <Line ids="pxsblinetwo" :loadingshow="lineshow" :key="keys" :xData="xData" :yData="yData">
            </Line>
          </div>
        </div>
      </div>

    </div>
    <!-- 详情 -->
    <el-dialog v-model="dialogVisible" title="详情" :before-close="closfxsp" width="50%">
      <div class="tab_top">
        <div class="tabtl_title">分配上报情况</div>
        <span>上报总数：{{ fpsbtable.length ? fpsbtable.length : 0 }}人</span>
        <div></div>
      </div>
      <el-table ref="multipleTableRef" stripe :data="fpsbtable" style="width: 100%"
        @selection-change="handleSelectionChange" border>
        <el-table-column label="单位" property="orgName"></el-table-column>
        <el-table-column label="部门" property="depname"></el-table-column>
        <el-table-column label="姓名" property="name"></el-table-column>
        <el-table-column label="类别">计划内</el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closfxsp"> <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span></el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 上报 -->
    <!-- <Addpxrysb :addDiaShow="addDiaShowjhw" :title="title" :xqId="xqId" :type="types" @changeAddVi="changeAddVijhw" /> -->
    <el-dialog v-model="addDiaShowjhw" title="培训人员上报" :before-close="closepxry" width="50%">
      <div class="tab_tops">
        <span>参训单位：{{ orgName }}</span>
      </div>
      <div>
        <div class="addbtn">
          <el-button type="primary" @click="ChooesDdld('03')">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>添加</span>
          </el-button>
        </div>
        <div>
          <el-table ref="multipleTableRef" :data="ruleForm.ryList" stripe style="width: 100%"
            @selection-change="handleSelectionChange" border>
            <el-table-column label="学员名称" property="name"></el-table-column>
            <el-table-column label="所属部门名称" property="deptName"></el-table-column>
            <el-table-column label="操作" width="250">
              <template #default="scope">
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="deldetexy(scope.row)">
                  <template #reference>
                    <span class="operdel" size="small"><el-icon>
                        <Delete />
                      </el-icon> 删除</span>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="saveFrom()">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button @click="closepxry"> <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span></el-button>

        </span>
      </template>
    </el-dialog>
    <!-- 选择负责人 :deptId="listQuery.orgCode" -->
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" :leaderid="leaderid"
      :deptId="deptcode" @choosedUsers="getSonValue"></ChooseUser>
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, watch, defineEmits, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import Addpxrysb from "./addpxrysb.vue";
import { useRouter, useRoute } from "vue-router";
import { getApi, deleteApi, postApi } from "@/api/tobAcco_api.js";
import Line from './eachers/lineTwo.vue';
import { exportXlsx } from "@/excel/Export2Excel.js";
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 router = useRouter();
const addDiaShowjhw = ref(false);
const chooseUserVisible = ref(false);//选择负责人弹窗
const memberList = ref([]); //成员选择的id回显
const zzlx = ref(null);
const leaderid = ref("");
const deptcode = ref(null);
const orgName = ref("");
const loadingShow = ref(false);
const bigHeight = ref(); //整个高度
const emits = defineEmits(["close"]);
const singleShow = ref(true); //单选多选
const value = ref('02')
const fptotal = ref('0')
const title = ref('培训人员上报');
const xqId = ref(null)
const keys = ref(1)
const dialogVisible = ref(false);
const lineshow = ref(false);
const xData = ref([])
const fpsbtable = ref([])
const yData = ref([
  {
    name: '分配人数',
    type: 'bar',
    data: [0],
    markPoint: {
      data: [
        { type: 'max', name: 'Max' },
        { type: 'min', name: 'Min' }
      ]
    },
    markLine: {
      data: [{ type: 'average', name: 'Avg' }]
    }
  },
  {
    name: '上报人数',
    type: 'bar',
    data: [0],
    markLine: {
      data: [{ type: 'average', name: 'Avg' }]
    }
  },
  {
    name: '签到人数',
    type: 'bar',
    data: [0],

    markLine: {
      data: [{ type: 'average', name: 'Avg' }]
    }
  }
])
const froms = ref({
  fpCount: 0,
  sbCount: 0,
  sjCount: 0
})
const tableData = ref([

]);
//表单数据
const ruleForm = ref({
  ryList: []
});
// 树的展开与折叠
const dialogForm = ref({})

const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};


//详情
function registration(val) {
  fpsbtable.value = []
  dialogVisible.value = true;
  getysbry(val.orgcode, dialogForm.value.id)
}
//查询单位已上报人员
function getysbry(orgcode, training) {
  getApi({ orgcode, training }, '/mosty-jcgl/training/other/getRyList').then(res => {
    fpsbtable.value = res
  })
}
onMounted(() => {
  bigHeightFn();
  getjhnxq();
  getsbryqk()
});
//切换
const changetable = (val) => {
  value.value = val;
  if (val == '01') {
    getsbryqk()
    keys.value++
  } else {
    lineshow.value = false
  }
};

//上报
function regissb(row) {
  ruleForm.value.ryList = null;
  ruleForm.value.id = row.id;
  deptcode.value = row.orgcode;
  orgName.value = row.orgname
  addDiaShowjhw.value = true
}
//获取计划内详情数据
function getjhnxq() {
  getApi({ id: route.query.id }, '/mosty-jcgl/training/pxssInfoJhn').then((res) => {
    dialogForm.value = res
    dialogForm.value.specialityType = dialogForm.value.specialityType.split(",");
  })
}
//查询人员上报情况列表-导出
function getsbryqk() {
  getApi({ id: route.query.id }, '/mosty-jcgl/training/other/getSbList').then(res => {
    froms.value.fpCount = res.fpCount;
    froms.value.sbCount = res.sbCount;
    froms.value.sjCount = res.sjCount;
    tableData.value = res.list;
    xData.value = res.list.map(item => {
      return item.orgname
    });
    yData.value[0].data = res.list.map(item => {
      return item.fp
    });
    yData.value[1].data = res.list.map(item => {
      return item.sb
    });
    yData.value[2].data = res.list.map(item => {
      return item.sj
    });
    if (value.value == '01') {
      lineshow.value = true;
    }

  })
}
//选择人员或部门
function ChooesDdld(value) {
  zzlx.value = value;
  leaderid.value = "";
  //人员多选
  singleShow.value = false;
  chooseUserVisible.value = true;
  if (ruleForm.value.ryList) {
    memberList.value = ruleForm.value.ryList.map((item) => {
      return item.userId;
    });
  }
}
function closepxry() {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      addDiaShowjhw.value = false
      ruleForm.ryList.value = null
    })
    .catch(() => {
      // catch error
    })

}
function closfxsp() {
  dialogVisible.value = false
}
//获取部门、人员
const getSonValue = (value) => {
  ruleForm.value.ryList = value;
  ruleForm.value.ryList = ruleForm.value.ryList.map(item => {
    return { name: item.userName, phone: item.telePhone, userPk: item.id, deptName: item.deptName, deptCode: item.deptId }
  })
  memberList.value = value.map((item) => {
    return item.id;
  });
}
//删除人员
function deldetexy(val) {
  ruleForm.value.ryList = ruleForm.value.ryList.filter((item) => {
    return item.userPk != val.userPk
  })
  memberList.value = ruleForm.value.ryList.map((item) => {
    return item.userPk;
  });
}
//保存上报人员
function saveFrom() {
  if (ruleForm.value.ryList.length == 0) {
    ElMessage.Warning('请选择上报人员');
  } else {
    getsbfrom()
  }


}
//上报
function getsbfrom() {
  postApi(ruleForm.value, '/mosty-jcgl/training/other/addSbry').then(res => {
    ElMessage.success('上报成功');
    addDiaShowjhw.value = false;
    getjhnxq();
    getsbryqk()
  })
}
//导出签到表
function export2Excel() {
  loadingShow.value = true
  let title = {
    orgname: "单位",
    fp: "分配人数",
    sb: "上报人数",
    sj: "实际签到人数",
    an: "上报状态"
  };

  getApi({ id: route.query.id }, "/mosty-jcgl/training/other/getSbList").then((res) => {
    if (res) {
      let data = res.list;
      if (data) {
        for (let i = 0; i < data.length; i++) {
          data[i].an = data[i].sb > 0 ? "已上报" : '未上报';
        }
        let tablename = "签到情况.xlsx";
        exportXlsx(title, data, '签到情况', tablename);
      }
    }
  }).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/Trainingreport') {
      arr.splice(i, 1);
    }
  }
  router.push("/safety/pxjygl/pxrysb");
}

//关闭弹窗
function changeAddVijhw(val) {
  addDiaShowjhw.value = false;
}
</script>

<style lang="scss" scoped>
.bigBox {
  height: 100%;
}

.top_box {
  height: 60px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #969494;

  .el-button {
    margin: auto 10px;
  }
}

.lin_box {
  height: 420px;
}

.bgcolor {
  background-color: rgb(45, 233, 170);
  border-color: #319e43;
}

.title {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: #0f3916;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-form {
  flex-wrap: wrap;
  padding: 10px 20px;
}

::v-deep .el-form-item__label {
  color: #7b7979 !important;
}

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

.el-form-item {
  width: 250px;
  font-size: 17px !important;
}

.man_box {
  width: 1600px !important;
}

.el-form-item--default {
  font-size: 17px;
}

.table_box {
  margin-top: 10px;
}

.table_Selector {
  height: 50vh;
  overflow-y: scroll;
}

.btn_box {
  button {
    margin-right: 10px;
  }
}

.tab_top {
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  color: #000;
  padding: 15px 20px;
  height: 50px;

  .tabtl_title {
    font-size: 17px;
    font-weight: 600;
  }
}

.tab_tops {
  width: 100%;
  text-align: center;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  color: #000;
  padding: 15px 20px;
  height: 50px;
}

.table_cent {
  height: calc(100vh - 49vh);
  overflow-y: scroll;
  margin-top: 10px;
}

::v-deep .el-form-item--default .el-form-item__content {
  line-height: 22px !important;
  color: #000 !important;
}
</style>