<template>
  <div class="app-container">
    <el-card>
      <el-form
        ref="queryRef" size="small" :model="queryParams" :inline="true" label-width="auto"
        label-position="top"
      >
        <el-row style="width: 100%;">
          <el-col :span="4">
            <el-form-item label="一级单位" prop="deptName">
              <el-input v-model="queryParams.deptName" type="text" style="width: 100%" @change="searchFN" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="业务类型" prop="tab">
              <el-select v-model.trim="queryParams.tab" style="width: 100%;">
                <el-option label="全部" value="" />
                <el-option label="教练员" value="one" />
                <el-option label="晋段考试官" value="two" />
                <el-option label="晋级考试官" value="three" />
                <el-option label="裁判员" value="four" />
                <el-option label="讲师" value="five" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8" style="display: flex">
            <el-form-item style="width: 100%;" label="业务时间" prop="validityDateRange">
              <el-date-picker
                v-model="validityDateRange[0]"
                type="date"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="开始时间"
                style="width: 100%;"
              />
            </el-form-item>
            <el-form-item style="width: 100%;" label="业务时间" prop="validityDateRange">
              <el-date-picker
                v-model="validityDateRange[1]"
                type="date"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="结束时间" style="width: 100%;"
                :default-time="defaultTime"
              />
            </el-form-item>
          </el-col>
          <div class="po-r-btns">
            <el-button size="small" type="primary" icon="Search" @click="searchFN">查询</el-button>
            <el-button size="small" icon="Refresh" @click="resetQuery">重置</el-button>
            <el-button size="small" type="warning" icon="Download" @click="exportData">导出</el-button>
          </div>
        </el-row>
      </el-form>


      <el-table v-loading="showLoading" border :data="list" style="width: 100%">
        <el-table-column key="序号" label="序号" type="index" width="55" align="center" />
        <el-table-column
          key="一级单位" label="一级单位" align="center" min-width="140px" prop="memName"
          show-overflow-tooltip
        >
          <template #default="{row}">
            <el-button type="primary" style="width: auto" :disabled="!row.memId" link @click="handelView(row)">{{ row.memName }}</el-button>
          </template>
        </el-table-column>

        <el-table-column key="培训场次" label="培训场次" align="center" prop="count" min-width="80px">
          <template #default="{row}">
            {{ row.count||0 }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="queryParams.tab==''||queryParams.tab=='one'"
          key="教练员"
          label="教练员" align="center"
        >
          <el-table-column
            key="dzcjjly"
            label="初级" align="center" prop="dzcjjly"
          >
            <template #default="{row}">
              {{ row.dzcjjly || 0 }}
            </template>
          </el-table-column>
          <el-table-column
            key="dzgjjly"
            label="中级" align="center" prop="dzzjjly"
          >
            <template #default="{row}">
              {{ row.dzzjjly ||0 }}
            </template>
          </el-table-column>
          <el-table-column
            key="info.大众高级教练员"
            label="高级" align="center" prop="dzgjjly"
          >
            <template #default="{row}">
              {{ row.dzgjjly||0 }}
            </template>
          </el-table-column>
          <el-table-column
            key="dzgjjjly"
            label="国家级" align="center" prop="dzgjjjly"
          >
            <template #default="{row}">
              {{ row.dzgjjjly||0 }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          v-if="queryParams.tab==''||queryParams.tab=='two'"
          key="info.晋段考试官"
          label="晋段考试官" align="center" prop="info.晋段考试官"
        >
          <el-table-column
            key="jdcjksg"
            label="初级" align="center" prop="jdcjksg"
          >
            <template #default="{row}">
              {{ row.jdcjksg||0 }}
            </template>
          </el-table-column>
          <el-table-column
            key="jdzjksg"
            label="中级" align="center" prop="jdzjksg"
          >
            <template #default="{row}">
              {{ row.jdzjksg||0 }}
            </template>
          </el-table-column>
          <el-table-column
            key="jdgjksg"
            label="高级" align="center" prop="jdgjksg"
          >
            <template #default="{row}">
              {{ row.jdgjksg||0 }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          v-if="queryParams.tab==''||queryParams.tab=='three'"
          key="info.晋级考试官"
          label="晋级考试官" align="center" min-width="80"
        >
          <template #default="{row}">
            {{ row.jjksg||0 }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="queryParams.tab==''||queryParams.tab=='four'"
          key="info.裁判员"
          label="裁判员" align="center" prop="info.裁判员"
        >
          <el-table-column
            key="dzsjcpy"
            label="三级" align="center" prop="dzsjcpy"
          >
            <template #default="{row}">
              {{ row.dzsjcpy||0 }}
            </template>
          </el-table-column>
          <el-table-column
            key="dzejcpy"
            label="二级" align="center" prop="dzejcpy"
          >
            <template #default="{row}">
              {{ row.dzejcpy||0 }}
            </template>
          </el-table-column>
          <el-table-column
            key="dzyjcpy"
            label="一级" align="center" prop="dzyjcpy"
          >
            <template #default="{row}">
              {{ row.dzyjcpy||0 }}
            </template>
          </el-table-column>
          <el-table-column
            key="gjjcpy"
            label="国家级" align="center" prop="gjjcpy"
          >
            <template #default="{row}">
              {{ row.gjjcpy||0 }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          v-if="queryParams.tab==''||queryParams.tab=='five'"
          label="讲师" align="center" prop="pxjs" min-width="80"
        />
        <!--        <el-table-column label="操作" align="center" fixed="right">-->
        <!--          <template #default="{row}">-->
        <!--            <div>-->
        <!--              <el-button type="primary" :disabled="!row.memId" link @click="handelView(row)">详情</el-button>-->
        <!--            </div>-->

        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
    </el-card>
    <View ref="viewRef" />
  </div>
</template>

<script setup>
import { reactive } from '@vue/runtime-core'
import { ref, toRefs, getCurrentInstance } from 'vue'
import { getStatisticsInfo } from '@/api/analysis/storehouse'
import View from './components/view.vue'

const defaultTime = ref(new Date(0, 0, 0, 23, 59, 59))
const { proxy } = getCurrentInstance()
const showLoading = ref(false)
const list = ref([])
const data = reactive({
  queryParams: {
    pageNum: 1,
    tab: ''
  }
})
const { queryParams } = toRefs(data)
const validityDateRange = ref([null, null])

// 获取赛会列表
async function initData() {
  if ((validityDateRange.value[0] == null && validityDateRange.value[1] != null) || (validityDateRange.value[1] == null && validityDateRange.value[0] != null)) return proxy.$modal.msgError('请完善业务时间范围')

  showLoading.value = true
  if (validityDateRange.value[0] != null && validityDateRange.value[1] != null) {
    queryParams.value.timeRange = validityDateRange.value?.toString()
  } else {
    queryParams.value.timeRange = null
  }

  const val = {
    memName: '合计',
    dzcjjly: 0,
    dzejcpy: 0,
    dzgjjjly: 0,
    dzgjjly: 0,
    dzsjcpy: 0,
    dzyjcpy: 0,
    dzzjjly: 0,
    gjjcpy: 0,
    jdcjksg: 0,
    jdgjksg: 0,
    jdzjksg: 0,
    jjksg: 0,
    pxjs: 0,
    count: 0
  }
  const res = await getStatisticsInfo(queryParams.value)
  list.value = res.data
  list.value.forEach(v => {
    val.dzcjjly += v.dzcjjly
    val.dzejcpy += v.dzejcpy
    val.dzgjjjly += v.dzgjjjly
    val.dzgjjly += v.dzgjjly
    val.dzsjcpy += v.dzsjcpy
    val.dzyjcpy += v.dzyjcpy
    val.dzzjjly += v.dzzjjly
    val.gjjcpy += v.gjjcpy
    val.jdcjksg += v.jdcjksg
    val.jdgjksg += v.jdgjksg
    val.jdzjksg += v.jdzjksg
    val.jjksg += v.jjksg
    val.pxjs += v.pxjs
    val.count += v.count
  })
  list.value.push(val)
  showLoading.value = false
}

// 查询
function searchFN() {
  queryParams.value.pageNum = 1
  initData()
}

// 重置
function resetQuery() {
  queryParams.value = {
    tab: ''
  }
  validityDateRange.value = [null, null]
  initData()
}

function exportData() {
  proxy.download('/member/info/exportStatisticsInfo', {
    ...queryParams.value
  }, `人员统计${new Date().getTime()}.xlsx`)
}

function handelView(row) {
  proxy.$refs['viewRef'].open(row)
}

initData()
</script>

<style lang="scss" scoped>
.router {
  margin-right: 20px;
}

</style>