<template>
  <div class="usermanage">
    <!-- 组织机构信息 -->
    <div class="right">
      <div class="echar" ref="echarBox"></div>
      <div class="bottom">
        <div class="bottomright">
          <div style="height: calc(100vh - 572px);">
            <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
                         :isSelect="true" :isSort="true">
              <template #actions="{ row }">
                <span class="operesee" @click="showInfo(row)">
                  <el-icon>
                    <Compass />
                  </el-icon>演练详情</span>
              </template>
            </MOSTY.Table>
          </div>
        </div>
      </div>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize" />
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts"
import * as MOSTY from "@/components/MyComponents/index"
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js"
import { reactive, ref, watch, onMounted, defineEmits } from "vue"

const emit = defineEmits("changePage")
const props = defineProps({
  id: {
    type: String
  },
  showPage: {
    type: Boolean
  },
  time: {
    type: String
  }
})
const echarBox = ref(null)
const tableloading = ref(false)
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10,
  total: 0,
  planid: ""
})
const data = reactive({
  tableData: [],
  tableColumn: [
    {
      title: "时间",
      prop: "playdate"
    },
    {
      title: "预计参演人数",
      prop: "playpsnnum"
    },
    {
      title: "实际参演人数",
      prop: "personCount"
    },
    {
      title: "培训效果",
      prop: "pxxg"
    },
    {
      title: "培训效果",
      prop: "actions",
      slot: true
    },
  ]
})
watch(
  () => props.showPage,
  () => {
    listQuery.value.pageCurrent = 1
    getTableData()
    // 渲染echarts
    getEchartsData()
  }
)
watch(
  () => props.time,
  (newVal) => {
    // console.log(echarts)
    echarts.dispose(echarBox.value)
    if (newVal) {
      listQuery.value.planid = props.id
      getTableData()
      // 渲染echarts
      getEchartsData()
    }
  }
)
// 渲染列表数据
const getEchartsData = () => {
  let options = {}
  let time = []
  let data1 = []
  let data2 = []
  getApi(listQuery.value, `/mosty-jcgl/yjyl/countMouth?id=` + listQuery.value.planid).then((res) => {
    if (res) {
      for (let i = 0; i < res.length; i++) {
        time.push(res[i].month)
        data1.push(res[i].yjcount)
        data2.push(res[i].count)
      }
      options = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["预计参与", "实际参与"]
        },
        toolbox: {
          show: true,
          feature: {}
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: time
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "预计参与",
            type: "line",
            data: data1
          },
          {
            name: "实际参与",
            type: "line",
            data: data2
          }
        ]
      }
      echarts.init(echarBox.value).setOption(options)
    }
  })
}
// 查询列表数据
const getTableData = () => {
  tableloading.value = true
  getApi(listQuery.value, `/mosty-jcgl/yjyl/listYjylByPlanid`).then((res) => {
    if (res.records) {
      data.tableData = res.records.map(item => {
        let pxxg = (item.playpsnnum && item.playpsnnum != 0 && item.personCount && item.playpsnnum != 0)
          ? (item.personCount / item.playpsnnum * 100).toFixed(2) + "%" : "0%"
        return {
          ...item, pxxg: pxxg
        }
      })
      listQuery.value.total = res.total
    } else {
      data.tableData = []
    }
  }).finally(() => {
    setTimeout(() => tableloading.value = false, 200)
  })
}
// 修改页码
const changeNo = (val) => {
  listQuery.value.pageCurrent = val
  getTableData()
}
// 修改每页显示的条数
const changeSize = (val) => {
  listQuery.value.pageSize = val
  getTableData()
}
// 查看详情
const showInfo = (item) => {
  let obj = {
    title: "演练详情",
    saveBtnShow: false,
    type: "show",
    id: item.id ? item.id : null
  }
  emit("changePage", obj)
}
</script>

<style lang="scss" scoped>
.usermanage {
  display: flex;

  .echar {
    height: 300px;
    width: 100%;
    border: 1px solid #ECECEC;
    margin-bottom: 20px;
  }

  .right {
    height: calc(100%);
    width: calc(100% - 30px);
    padding: 0 10px;
    box-sizing: border-box;

    .head {
      display: flex;
      justify-content: space-between;

      .title {
        display: flex;
        margin-top: 10px;
        color: black;
        font-size: 20px;
      }
    }

    .fenye {
      top: 95%;
      margin-top: 10px;
    }
  }
}
</style>
