<template>
  <div>
    <div class="boxs-over">
      <div class="tites" v-if="!changeshoe">
        <span>{{ pxtitle }}计划和实施情况统计</span>
        <el-button type="primary" @click="CloseEvent">
          <el-icon>
            <ArrowLeft />
          </el-icon>
          <span>返回</span>
        </el-button>
      </div>
      <!-- charts -->
      <div class="chartsBox">
        <!-- 饼图 -->
        <div>
          <MOSTY.Assort :title="'全员安全教育覆盖率'">
            <template #btn>
              <el-date-picker style='width:100px' v-model="yearfgl" @change='changeyear("01")' type="year" format="YYYY"
                value-format="YYYY" />
            </template>
          </MOSTY.Assort>
          <ul class='jyul'>
            <li class='jyfg onec'>
              <div class='tit'>单位总人数</div>
              <div class='number'>{{ fglObj.unitNumber }}</div>
            </li>
            <li class='jyfg twoc'>
              <div class='tit'>参加培训人数</div>
              <div class='number'>{{ fglObj.zrs }}</div>
            </li>
            <li class='jyfg four'>
              <div class='tit'>培训覆盖率</div>
              <div class='number'>{{ fglObj.fraction }}%</div>
            </li>
            <li class='jyfg five'>
              <div class='tit'>培训计划数</div>
              <div class='number'>{{ fglObj.plannedNumber }}</div>
            </li>
            <li class='jyfg six'>
              <div class='tit'>已完成培训数</div>
              <div class='number'>{{ fglObj.accomplishPlannedNumber }}</div>
            </li>
            <li class='jyfg seven'>
              <div class='tit'>培训计划完成率</div>
              <div class='number'>{{ fglObj.plannedNumberProportion }}%</div>
            </li>
            <li></li>
            <li></li>
          </ul>
        </div>

        <div>
          <MOSTY.Assort :title="'重点人员培训合格率'">
            <template #btn>
              <el-date-picker style='width:100px' v-model="yearhgl" @change='changeyear("02")' type="year" format="YYYY"
                value-format="YYYY" />
            </template>
          </MOSTY.Assort>
          <div class='lawpiebox'>
            <pie ids="lawPie" :key="barkey" :pieNum="pieData" :pieTitle='pieTitle'></pie>
          </div>
        </div>

      </div>
      <div class='czqktj'>
        <MOSTY.Assort :title="'持证情况统计'">
          <template #btn>
            <el-date-picker style='width:100px' v-model="yearczqk" @change='changeyear("03")' type="year" format="YYYY"
              value-format="YYYY" />
          </template>
        </MOSTY.Assort>
        <div style='height:30vh;'>
          <zztbartj ids="lawPiess" :key="barkey2" :pieNum="pieData2" :pieTitle='pieTitle2'></zztbartj>
        </div>
      </div>
      <div class="chartsBoxs">
        <!-- 饼图 -->
        <div>
          <MOSTY.Assort :title="'在线教育学习情况'">
            <template #btn>
              <el-date-picker style='width:100px' v-model="yearxxqk" type="year" @change='changeyear("04")'
                format="YYYY" value-format="YYYY" />
            </template>
          </MOSTY.Assort>
          <section style="height: 32vh;">
            <MOSTY.Table :table-columns="columnTable" :tableData="xxqktab" :tableloading="xxtableloading"
              :isSelect="false" style="width: 100%;">
              <template #xxrs="{ row }"> <span>{{ row.xxrs ? row.xxrs : 0 }}</span></template>
              <template #xxzs="{ row }"> <span>{{ row.xxzs ? row.xxzs : 0 }}</span></template>
            </MOSTY.Table>
          </section>

        </div>

        <div>
          <MOSTY.Assort :title="'各业务类型培训占比'">
            <template #btn>
              <el-date-picker style='width:100px' v-model="years" @change='changeyear("05")' type="year" format="YYYY"
                value-format="YYYY" />
            </template>
          </MOSTY.Assort>
          <div class='pieboxs'>
            <AnnularPie :data="yewulxlist" :keys="ywlxkey" :itemGap='20' />
          </div>
        </div>
      </div>

      <div class="tabBox">
        <MOSTY.Assort :title="'培训情况'">
          <template #btn>
            <el-date-picker style='width:100px' v-model="yearpxqk" @change='changeyear("06")' type="year" format="YYYY"
              value-format="YYYY" />
          </template>
        </MOSTY.Assort>
        <section style="height: 40vh;">
          <MOSTY.Table :table-columns="columnTable2" :tableData="tableData" :tableloading="tableloading" :key="keys"
            :isSelect="false" style="width: 100%;">
            <template #actions="{ row }">
              <span class="operesee" @click="handlexz(row)"><el-icon>
                  <Compass />
                </el-icon>详情</span>
            </template>
          </MOSTY.Table>
        </section>
      </div>
    </div>

  </div>
</template>

<script setup>
// 引入

import { ref, onMounted, reactive, watch } from 'vue';
import * as MOSTY from "@/components/MyComponents/index";
import { getSysDictByCode } from "@/api/sysDict";
import pie from './pxjhcoms/eachers/zztbar.vue';
import zztbartj from './pxjhcoms/eachers/zztbartj.vue';
import { getApi, deleteApi, putApi } from "@/api/tobAcco_api.js";
import AnnularPie from "@/views/dutyBook/jgryandzz/commponents/total/AnnularPie.vue"
const years = ref(new Date().getFullYear().toString())
const yearfgl = ref(new Date().getFullYear().toString())
const yearxxqk = ref(new Date().getFullYear().toString())
const yearhgl = ref(new Date().getFullYear().toString())
const yearczqk = ref(new Date().getFullYear().toString())
const yearpxqk = ref(new Date().getFullYear().toString())
const orgcode = ref('')
const pxtitle = ref('')
const barkey = ref(1)
const barkey2 = ref(1)
const changeshoe = ref(true)
const xxtableloading = ref(false)
const tableloading = ref(false)
const fglObj = ref({})
const keys = ref(1)
const xxqktab = ref([])
const ywlxkey = ref(1)
const tableData = ref([]);//表格数据
const pieTitle = ref(['主要负责人', '安全分管领导', '专职安全管理员', '三级教育', '特种作业人员'])
const pieTitle2 = ref([])
// 饼图数据
const pieData = ref([
  {
    value: 0,
    itemStyle: {
      color: '#0043F1FF'
    }
  },
  {
    value: 0,
    itemStyle: {
      color: '#16C31EFF'
    }
  },
  {
    value: 0,
    itemStyle: {
      color: '#FF5F00FF'
    }
  },
  {
    value: 0,
    itemStyle: {
      color: '#1F4173FF'
    }
  },
  {
    value: 0,
    itemStyle: {
      color: '#FFBD00FF'
    }
  },

])
const pieData2 = ref([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])
const yewulxlist = ref([
  { value: 0, name: '消防', color: "#006E4AFF" },
  { value: 0, name: '设备', color: "#FFD023FF" },
  { value: 0, name: '生产', color: "#4C7AF3FF" },
  { value: 0, name: '交通', color: "#4FCCFFFF" },
  { value: 0, name: '电器', color: "#0043F1FF" },
  { value: 0, name: '食品', color: "#FF5F00FF" },
  { value: 0, name: '特种作业', color: "#1F4173FF" },
  { value: 0, name: '特种设备', color: "#7E2FDFFF" }
])
const columnTable = ref([
  { title: '课件种类', prop: 'name' },
  { title: '数量', prop: 'kjzs' },
  { title: '学习人数', prop: 'xxrs', slot: true, },
  { title: '年度学习总次数', prop: 'xxzs', slot: true, }
])
const columnTable2 = ref([
  { title: '单位名称', prop: 'orgname' },
  { title: '计划内次数', prop: 'jhcount' },
  {
    title: '实施次数', suntab: [
      { title: '计划内', prop: 'jhnCount' },
      { title: '计划外', prop: 'jhwCount' },
      { title: '平均参与率(计划内)', prop: 'cyl' },
    ]
  },
  {
    title: '合计', suntab: [
      { title: '总培训次数', prop: 'countAll' },
      { title: '总学时', prop: 'hour' },
      { title: '总人次', prop: 'countUser' },
    ]
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
onMounted(() => {
  getbarData();
  gethglData();
  getlinData();
  gettablist();
  getzxjyxx();
  getczqk();
})

function changeyear(val) {
  switch (val) {
    case "01":
      return getbarData();//全员安全教育覆盖率
      break;
    case "02":
      return gethglData();//重点人员培训合格率
      break;
    case "03":
      return getczqk();//持证情况统计
      break;
    case "04":
      return getzxjyxx();//在线教育学习情况
      break;
    case "05":
      return getlinData();//各业务类型培训占比
      break;
    case "06":
      return gettablist();//培训情况
      break;
  }
}
//	培训统计界面--持证情况统计
function getczqk() {
  let data = {
    orgcode: orgcode.value,
    year: yearczqk.value
  }
  getApi(data, '/mosty-jcgl/training/getCzqktj').then(async (res) => {
    const params = {
      dictCode: 'D_TB_ZSLB'
    };
    const zsres = await getSysDictByCode(params);
    const zslx = zsres?.itemList
    zslx.forEach((item1) => {
      let found = false; res.forEach((item2) => {
        if (item1.dm === item2.zstype) {
          item1.count = item2.count; found = true;
        }
      });
      if (!found) { item1.count = 0; }
    });
    pieTitle2.value = zslx.map(item => {
      return item.zdmc
    })
    pieData2.value = zslx.map(item => {
      return item.count
    })
    barkey2.value++
  })

}
//培训统计界面--全员安全教育覆盖率
function getbarData() {
  let data = {
    orgcode: orgcode.value,
    year: yearfgl.value
  }
  getApi(data, '/mosty-jcgl/training/getbndpxqk').then((res) => {
    fglObj.value = res;
    fglObj.value.fraction = res.fraction == 0 ? 0 : (res.fraction * 100).toFixed(2)
    fglObj.value.plannedNumberProportion = res.plannedNumberProportion == 0 ? 0 : (res.plannedNumberProportion * 100).toFixed(2)
  })
}
//培训统计界面--重点人员培训合格率
function gethglData() {
  let data = {
    orgcode: orgcode.value,
    year: yearhgl.value
  }
  pieTitle.value = []
  getApi(data, '/mosty-jcgl/training/getZdpxry').then((res) => {
    res.forEach(item => {
      pieTitle.value.push(item.name)
      item.hel = Number(item.hel.substring(0, item.hel.indexOf('%')))
    })
    pieData.value = [{ value: res[0].hel, itemStyle: { color: '#0043F1FF' } },
    { value: res[1].hel, itemStyle: { color: '#16C31EFF' } },
    { value: res[2].hel, itemStyle: { color: '#FF5F00FF' } },
    { value: res[3].hel, itemStyle: { color: '#1F4173FF' } },
    { value: res[4].hel, itemStyle: { color: '#FFBD00FF' } },]
    barkey.value++
  })
}

//培训统计界面--各业务类型培训占比
function getlinData() {
  let data = {
    orgcode: orgcode.value,
    year: years.value
  }
  getApi(data, '/mosty-jcgl/training/getbndpxnrqk').then((res) => {
    yewulxlist.value = [
      { value: res.xf, name: '消防', color: "#006E4AFF" },
      { value: res.sb, name: '设备', color: "#FFD023FF" },
      { value: res.sc, name: '生产', color: "#4C7AF3FF" },
      { value: res.jt, name: '交通', color: "#4FCCFFFF" },
      { value: res.dq, name: '电器', color: "#0043F1FF" },
      { value: res.sp, name: '食品', color: "#FF5F00FF" },
      { value: res.tzsb, name: '特种作业', color: "#1F4173FF" },
      { value: res.tzsb, name: '特种设备', color: "#7E2FDFFF" }
    ]
    ywlxkey.value++
  })
}
//	培训统计界面--在线教育学习情况

function getzxjyxx(params) {
  let data = {
    orgcode: orgcode.value,
    year: yearxxqk.value
  }
  xxtableloading.value = true
  getApi(data, '/mosty-jcgl/videoStudyUser/getZdpxry').then((res) => {
    xxqktab.value = res
    xxtableloading.value = false

  }).catch(err => {
    xxqktab.value = []
    xxtableloading.value = false
  }).finally(() => {
    xxtableloading.value = false
  })
}
//培训统计-计划和实施情况统计-列表
function gettablist() {
  let data = {
    orgcode: orgcode.value,
    year: yearpxqk.value
  }
  tableloading.value = true
  getApi(data, '/mosty-jcgl/training/getEchartsThree').then((res) => {
    tableData.value = res
    tableData.value.forEach((item) => {
      if (item.jhcount != 0) {
        item.cyl = ((item.jhnCount / item.jhcount) * 100).toFixed(2) + '%'
      } else {
        item.cyl = 0 + '%'
      }

    })
    tableloading.value = false
  }).catch(err => {
    tableloading.value = false
    tableData.value = []
  })
}
//点击详情
function handlexz(row) {
  changeshoe.value = false
  if (columnTable2.value.at(-1).prop == 'actions') {
    columnTable2.value.pop()
    keys.value++
  }
  orgcode.value = row.orgcode
  pxtitle.value = row.orgname
  getbarData();
  gethglData();
  getlinData();
  gettablist();
  getzxjyxx();
  getczqk();
}
//刷新
function CloseEvent() {
  changeshoe.value = true
  if (columnTable2.value.at(-1).prop != 'actions') {
    columnTable2.value.push({
      title: "操作",
      prop: "actions",
      slot: true
    })
    keys.value++
  }
  orgcode.value = ''
  pxtitle.value = ''
  getbarData();
  gethglData();
  getlinData();
  gettablist();
  getzxjyxx();
  getczqk();
}


</script>

<style lang="scss" scoped>
.boxs-over {
  height: 84vh;
  overflow: auto;
}

.tites {
  color: #000;
  padding: 7px 20px;
  height: 41px;
  line-height: 30px;
  font-size: 16px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  background: #fff;
}


.btnBox {
  display: flex;
  width: 300px;
  justify-content: space-between;
}

.chartsBox {
  height: 32vh;
  display: flex;
  justify-content: space-between;

  >div {
    background: #fff;
    padding: 10px;
    width: 49.5%;
  }
}

.lawpiebox {
  height: 25vh;
}

.jyul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  >li {
    width: 22%;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
  }
}

.onec {
  background: linear-gradient(270deg, #003AD2 0%, #0097EC 100%);
}

.twoc {
  background: linear-gradient(272deg, #006E4A 0%, #1FD071 100%);
}

.thrc {
  background: linear-gradient(270deg, #5900C9 0%, #9852F0 100%);
}

.four {
  background: linear-gradient(90deg, #3D51F3 0%, #A4DFFF 100%);
}

.five {
  background: linear-gradient(90deg, #38A800 0%, #EDDE7C 100%);
}

.six {
  background: linear-gradient(90deg, #FF3206 0%, #FDFF7C 100%);
}

.seven {
  background: linear-gradient(269deg, #0F84FA 0%, #48E4FC 100%);
}

.tit {
  font-weight: 700;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 20px;
}

.number {
  font-weight: 400;
  font-size: 36px;
  color: #FFFFFF;
  line-height: 59px;
}

.czqktj {
  background: #fff;
  margin: 10px 0;
  padding: 10px;
}

.chartsBoxs {
  height: 40vh;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;

  >div {
    background: #fff;
    padding: 10px;
    width: 49.5%;
  }
}

.pieboxs {
  height: 33vh;
  width: 80%;
}

.fenye {
  height: 30px;
}

.tabBox {
  background: #fff;
  padding: 10px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>