<template>
  <div class="bbsl-common-page">
    <div class="bbsl-table-search">
      <el-form ref="searchForm" v-model="queryParam.querys" :inline="true">
        <el-form-item label="年度：">
          <el-date-picker
            v-model="queryParam.querys[2].value"
            placeholder="请选择年度"
            style="width: 100%;"
            type="year"
            value-format="yyyy"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="阶段：" v-if="queryParam.querys[0].value == '2'">
          <el-select
            v-model="queryParam.querys[3].value"
            placeholder="请选择阶段"
            style="width: 100%;"
          >
            <el-option
              v-for="(item, i) in getDictionaryByCode('jdmc')"
              :key="i"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="月："
          v-if="
            queryParam.querys[0].value == '3' ||
              queryParam.querys[0].value == '4'
          "
        >
          <el-date-picker
            v-model="queryParam.querys[4].value"
            placeholder="请选择月"
            style="width: 100%;"
            type="month"
            value-format="M"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="周：" v-if="queryParam.querys[0].value == '4'">
          <el-select
            v-model="queryParam.querys[5].value"
            placeholder="请选择周"
            style="width: 100%;"
          >
            <el-option
              v-for="(item, i) in getDictionaryByCode('weektype')"
              :key="i"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="loadData(1)"
            >搜索
          </el-button>
          <el-button icon="el-icon-refresh" @click="resetSearch">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="page-content">
      <div ref="contentPanel" class="bbsl-table-content">
        <div>
          <el-tabs v-model="queryParam.querys[0].value" @tab-click="changeTab">
            <el-tab-pane
              :label="item.name"
              :name="item.value"
              :key="i"
              v-for="(item, i) in getDictionaryByCode('jhlx')"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <el-table
          border
          :default-sort="getSorterDirection(queryParam, true)"
          style="margin: 10px 0 20px 0;"
          @sort-change="sortChange"
          :data="tableData"
          :cell-style="{'text-align': 'center'}"
          :header-cell-style="{'text-align': 'center'}"
          :max-height="tableMaxHeight"
          :style="{width: '100%'}"
          size="mini"
        >
          <el-table-column
            :index="
              index =>
                index +
                1 +
                (queryParam.pageBean.page - 1) * queryParam.pageBean.pageSize
            "
            fixed
            label="序号"
            type="index"
            width="55"
          />

          <el-table-column
            label="年度"
            width="100"
            prop="year"
          ></el-table-column>
          <el-table-column
            v-if="queryParam.querys[0].value == '2'"
            label="季度"
            width="100"
            prop="quarter"
            :formatter="({quarter}) => dictionaryEscape('jdmc', quarter)"
          ></el-table-column>
          <el-table-column
            v-if="
              queryParam.querys[0].value == '3' ||
                queryParam.querys[0].value == '4'
            "
            label="月"
            width="100"
            prop="month"
            :formatter="({month}) => month || '-'"
          ></el-table-column>
          <el-table-column
            v-if="queryParam.querys[0].value == '4'"
            label="周"
            width="100"
            prop="week"
            :formatter="({week}) => week || '-'"
          ></el-table-column>
          <el-table-column
            label="训练课目"
            prop="subjectName"
            :formatter="({subjectName}) => subjectName || '-'"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            width="150"
            label="训练场地"
            prop="spaceName"
          >
          </el-table-column>
          <el-table-column
            label="训练日期"
            width="160"
            show-overflow-tooltip
            prop="subjectName"
          >
            <template v-slot="{row}">
              {{ row.startTime + '-' + row.endTime }}
            </template>
          </el-table-column>
          <el-table-column
            label="训练时长(总时长-剩余时长)"
            width="180"
            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="教练员"
            width="160"
            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="创建时间"
            width="160"
            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>
    </div>
  </div>
</template>

<script>
import {TableMixin} from '@/mixins/tableMixin'
import {refineRequestBody, getSorterDirection} from '@/utils/requestWrappers'
import * as examPlan from '@/api/examDataMenu/examManagerData/examPlan.js'
import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'
import moment from 'moment'

export default {
  mixins: [TableMixin],
  data() {
    return {
      // 查询对象
      queryParam: {
        pageBean: {pageSize: 10, page: 1, total: 0},
        querys: [
          {operation: 'EQUAL', property: 'planType', value: '1'},
          {operation: 'EQUAL', property: 'planStatus', value: '1'},
          {
            operation: 'EQUAL',
            property: 'year',
            value: moment().format('YYYY')
          },
          {operation: 'EQUAL', property: 'quarter', value: ''},
          {operation: 'EQUAL', property: 'month', value: ''},
          {operation: 'EQUAL', property: 'week', value: ''}
        ],
        sorter: [{direction: 'DESC', property: 'createTime'}]
      },
      total: 0
    }
  },
  methods: {
    getDictionaryByCode,
    dictionaryEscape,
    // 重置搜索
    resetSearch() {
      this.queryParam = this.$options.data().queryParam
      this.loadData()
    },

    changeTab() {
      this.queryParam.pageBean.page = 1
      this.queryParam.querys[3].value = ''
      this.queryParam.querys[4].value = ''
      this.queryParam.querys[5].value = ''
      this.loadData()
    },
    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 query = JSON.parse(JSON.stringify(this.queryParam))
      if (query.querys[4].value)
        query.querys[4].value = query.querys[4].value * 1
      let res = await examPlan.myTrainPlan(refineRequestBody(query))
      this.tableData = res.rows
      this.total = res.total
    },
    getSorterDirection
  }
}
</script>

<style lang="scss" scoped>
.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 {
  display: flex;
  flex-direction: column;
  row-gap: 10px;

  .page-content {
    display: flex;
    height: calc(100% - 70px);
    column-gap: 10px;

    .tree-container {
      height: 100%;
      min-width: 300px;
      background: #fff;
      border-radius: 20px;
      padding: 20px 20px;
      box-shadow: 0px 0px 12px 0 rgba($color: #000000, $alpha: 0.1);
      box-sizing: border-box;
    }

    .bbsl-table-content {
      height: 100%;
      flex: 1;
      margin-top: 0;
      box-sizing: border-box;
    }
  }
}
.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;
    }
  }
}
.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;
  }
}
</style>
