<template>
  <div class="bbsl-common-page">
    <div class="top-content">
      <div class="top-left">
        <div class="exam-name">
          训练数据汇总
        </div>
        <div class="top-list">
          <div class="top-list-item ">
            <div class="item-name">单位数量</div>
            <div class="item-value">
              {{ trainObject.orgCount || '0' }} <span>个</span>
            </div>
          </div>
          <div class="top-list-item ">
            <div class="item-name">人员数量</div>
            <div class="item-value">
              {{ trainObject.userCount || '0' }}<span>人</span>
            </div>
          </div>
          <div class="top-list-item ">
            <div class="item-name">教练员数量</div>
            <div class="item-value">
              {{ trainObject.jlyCount || '0' }}<span>人</span>
            </div>
          </div>
          <div class="top-list-item ">
            <div class="item-name">专业数量</div>
            <div class="item-value">
              {{ trainObject.sysCount || '0' }}<span>个</span>
            </div>
          </div>
          <div class="top-list-item ">
            <div class="item-name">课目数量</div>
            <div class="item-value">
              {{ trainObject.subjectCount || '0' }} <span>个</span>
            </div>
          </div>
        </div>
      </div>
      <div class="top-right">
        <div class="exam-name">
          通知公告
          <span class="exam-more" @click="toNoticeDetails"
            >更多<i class="el-icon-arrow-right"></i
          ></span>
        </div>
        <div class="content">
          <li
            v-for="(item, index) in notices"
            :key="index"
            class="notice"
            @click="addDialog(item)"
          >
            {{ item.title }}
          </li>
        </div>
      </div>
    </div>
    <div class="center-content">
      <div class="exam-name">
        训练保障汇总
      </div>
      <div class="chart-content">
        <div class="chart-content-item">
          <div class="chart-name">
            <div>场地数量</div>
            <div>{{ trainSafeguard.spaceCount }}个</div>
          </div>
          <div class="chart-value">
            <chartOne />
          </div>
        </div>
        <div class="chart-content-item">
          <div class="chart-name">
            <div>消耗指标</div>
            <div>{{ trainSafeguard.indexDateCount }}个</div>
          </div>
          <div class="chart-value">
            <chartTwo />
          </div>
        </div>
        <div class="chart-content-item">
          <div class="chart-name">
            <div>训练器材</div>
            <div>{{ trainSafeguard.trainEquipmentCount }}个</div>
          </div>
          <div class="chart-value">
            <chartThree />
          </div>
        </div>
        <div class="chart-content-item">
          <div class="chart-name">
            <div>装备基础</div>
            <div>{{ trainSafeguard.equipmentCount }}个</div>
          </div>
          <div class="chart-value">
            <chartFour />
          </div>
        </div>
      </div>
    </div>
    <div class="center-content">
      <div class="exam-name">
        训练保障汇总
      </div>
      <div class="chart-content">
        <div class="chart-content-item">
          <div class="chart-name">
            <div>训练计划完成情况</div>
          </div>
          <div class="chart-value">
            <chartFive />
          </div>
        </div>
        <div class="chart-content-item">
          <div class="chart-name">
            <div>各单位年度训练计划完成情况</div>
          </div>
          <div class="chart-value">
            <chartSix />
          </div>
        </div>
      </div>
    </div>
    <div class="center-content">
      <div class="exam-name">
        进行中的训练计划
      </div>
      <div class="tab">
        <div
          class="tab-item"
          v-for="(item, i) in getDictionaryByCode('jhlx')"
          :key="i"
          @click="changeTab(item.value)"
          :class="{active: queryParam.querys[0].value == item.value}"
        >
          {{ item.name }}
        </div>
      </div>
      <el-table
        :default-sort="getSorterDirection(queryParam, true)"
        @sort-change="sortChange"
        :data="tableData"
      >
        <el-table-column label="年度" width="100" prop="year"></el-table-column>
        <el-table-column
          label="训练课目"
          prop="subjectName"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="训练场地"
          prop="spaceName"
        >
        </el-table-column>
        <el-table-column
          label="训练日期"
          show-overflow-tooltip
          prop="subjectName"
        >
          <template v-slot="{row}">
            {{ row.startTime + '-' + row.endTime }}
          </template>
        </el-table-column>
        <el-table-column
          width="180"
          label="训练时长(总时长-剩余时长)"
          show-overflow-tooltip
          prop="hour"
          :formatter="
            ({hour, remainingDuration}) => hour - remainingDuration || '-'
          "
        ></el-table-column>
        <el-table-column
          label="剩余时长"
          width="150"
          show-overflow-tooltip
          prop="hour"
          :formatter="({remainingDuration}) => remainingDuration || '-'"
        ></el-table-column>
        <el-table-column
          label="教练员"
          show-overflow-tooltip
          prop="coachName"
        ></el-table-column>
        <el-table-column
          :formatter="
            ({planStatus}) => dictionaryEscape('planStatus', planStatus)
          "
          label="计划状态"
          prop="planStatus"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          :formatter="({createTime}) => createTime || '-'"
          label="创建时间"
          prop="createTime"
          show-overflow-tooltip
          sortable="custom"
        />
      </el-table>
      <el-pagination
        ref="paginationPanel"
        :current-page="queryParam.pageBean.page"
        :page-size="queryParam.pageBean.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :total="total"
        align="right"
        background
        layout="prev, pager, next,total, sizes, jumper"
        @size-change="handleSizeChanges"
        @current-change="handleCurrentChanges"
      ></el-pagination>
    </div>
    <el-dialog
      :before-close="handleClose"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      title="公告详情"
      width="50%"
    >
      <div class="content">
        <span v-html="content"></span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import chartOne from './components/chartOne.vue'
import chartTwo from './components/chartTwo.vue'
import chartThree from './components/chartThree.vue'
import chartFour from './components/chartFour.vue'
import chartFive from './components/chartFive.vue'
import chartSix from './components/chartSix.vue'
import * as api from '@/api/dataVisualizationAnalysis'
import * as examPlan from '@/api/examDataMenu/examManagerData/examPlan.js'
import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'
import {TableMixin} from '@/mixins/tableMixin'
import kzzxMenu from '@/api/examination/kzzxMenu.js'
import {getSorterDirection, refineRequestBody} from '@/utils/requestWrappers'

export default {
  mixins: [TableMixin],
  name: 'dataVisualizationAnalysis',
  components: {
    chartOne,
    chartTwo,
    chartThree,
    chartFour,
    chartFive,
    chartSix
  },
  data() {
    return {
      trainObject: {},
      trainSafeguard: {},
      tableData: [],
      notices: [],
      // 查询对象
      queryParam: {
        pageBean: {pageSize: 10, page: 1, total: 0},
        querys: [
          {operation: 'EQUAL', property: 'planType', value: '1'},
          {operation: 'EQUAL', property: 'planStatus', value: '1'}
        ],
        sorter: [{direction: 'DESC', property: 'createTime'}]
      },

      total: 0,
      content: '',
      dialogVisible: false
    }
  },
  created() {
    this.getTrainObject()
    this.getTrainSafeguard()
    this.loadData()
    this.getNotice()
  },
  methods: {
    getDictionaryByCode,
    getSorterDirection,
    dictionaryEscape,
    // 通告详情
    addDialog(val) {
      this.content = val.content
      this.dialogVisible = true
    },
    // 关闭弹窗
    handleClose(done) {
      this.dialogVisible = false
    },
    //通知公告
    getNotice() {
      kzzxMenu.notice(
        {
          pageBean: {
            pageSize: 5,
            page: 1
          },
          sorter: [
            {
              direction: 'DESC',
              property: 'createTime'
            }
          ]
        },
        res => {
          if (res.rows) {
            this.notices = res.rows
          }
        }
      )
    },
    // 更多
    toNoticeDetails() {
      this.$router.push({
        name: 'noticeDetails'
      })
    },
    handleSizeChanges(val) {
      this.queryParam.pageBean.page = 1
      this.queryParam.pageBean.pageSize = val
      this.loadData()
    },
    handleCurrentChanges(val) {
      this.queryParam.pageBean.page = val

      this.loadData()
    },
    async loadData() {
      let res = await examPlan.tableData(refineRequestBody(this.queryParam))
      this.tableData = res.rows
      this.total = res.total
    },
    changeTab(val) {
      this.queryParam.querys[0].value = val
      this.loadData()
    },

    //可视化分析-训练对象汇总
    async getTrainObject() {
      try {
        let res = await api.trainObject()
        this.trainObject = res
      } finally {
      }
    },
    // 可视化分析-训练保障汇总
    async getTrainSafeguard() {
      try {
        let res = await api.trainSafeguard()
        this.trainSafeguard = res
      } finally {
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.notice {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 410px;
  cursor: pointer;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 5px;
  .tab-item {
    width: 50px;
    height: 30px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .active {
    border-color: #3296fa;
    color: #3296fa;
  }
}
.bbsl-common-page {
  background-color: #ebeef5;
  overflow: auto;
  .exam-name {
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
    &::before {
      content: '';
      display: block;
      width: 2px;
      height: 15px;
      margin-right: 4px;
      background: #3296fa;
    }
    .exam-more {
      cursor: pointer;
      position: absolute;
      right: 10px;
      font-size: 15px;
    }
  }
  .top-content {
    display: flex;
    // align-items: center;
    justify-content: space-between;
    .top-left {
      flex: 4;
      background: #fff;
      border-radius: 5px;
      padding: 16px;
    }
    .top-right {
      flex: 1.5;
      margin-left: 10px;
      background: #fff;
      border-radius: 5px;
      padding: 16px;
    }
    .top-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .top-list-item {
        background: #f8f8f8;
        border-radius: 5px;
        flex: 1;
        height: 90px;
        margin-right: 10px;
        padding: 10px 16px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item-name {
          font-size: 16px;
        }
        .item-value {
          font-size: 18px;
        }
        &:last-child {
          margin: 0;
        }
      }
    }
  }
  .center-content {
    background: #fff;
    border-radius: 5px;
    padding: 16px;
    margin: 10px 0;
    .chart-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .chart-content-item {
        flex: 1;

        border: 1px solid rgba(0, 0, 0, 0.1);
        margin-right: 10px;
        padding: 16px;
        &:last-child {
          margin: 0;
        }
        .chart-name {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 5px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
          div {
            font-size: 15px;
          }
        }
        .chart-value {
          height: 260px;
        }
      }
    }
  }
}
</style>
