<template>
  <div>
    <!-- 搜索区域 -->
    <div class="from-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="validityDate">
              <el-input v-model="queryParams.name" 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-select>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="8">-->
          <!--            <el-form-item label="业务时间" prop="validityDate">-->
          <!--              <el-date-picker-->
          <!--                v-model="validityDateRange"-->
          <!--                type="daterange"-->
          <!--                value-format="YYYY-MM-DD"-->
          <!--                range-separator="至"-->
          <!--                start-placeholder="开始时间"-->
          <!--                end-placeholder="结束时间"-->
          <!--                style="width: 100%"-->
          <!--                @change="searchFN"-->
          <!--              />-->
          <!--            </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>
    
    </div>
    <!-- 表格数据 -->
    <div class="table">
      <el-table
        v-loading="showLoading" border :data="list" style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column
          label="一级单位名称"
          align="center"
          width="300"
          :show-overflow-tooltip="true"
          prop="shenName"
        />
        <el-table-column
          v-if="queryParams.tab=='one'||queryParams.tab==''"
          label="单位会员"
          align="center"
          prop="perCode"
          min-width="200"
          :show-overflow-tooltip="true"
        >
          <el-table-column
            label="申请数量"
            align="center"
            prop="memberCount"
            min-width="95"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="办理年限"
            align="center"
            prop="memberYearCount"
            min-width="95"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="金额"
            align="center"
            prop="memberTotalFee"
            min-width="100"
            :show-overflow-tooltip="true"
          />
        </el-table-column>
        <el-table-column
          v-if="queryParams.tab=='two'||queryParams.tab==''"
          label="个人会员"
          align="center"
          prop="name"
          min-width="200"
          :show-overflow-tooltip="true"
        >
          <el-table-column
            label="申请数量"
            align="center"
            prop="personCount"
            min-width="95"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="办理年限"
            align="center"
            prop="personYearCount"
            min-width="95"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="金额"
            align="center"
            prop="personTotalFee"
            min-width="100"
            :show-overflow-tooltip="true"
          />
        </el-table-column>
        <el-table-column
          v-if="queryParams.tab=='three'||queryParams.tab==''"
          label="级位"
          align="center"
          prop="sex"
          min-width="200"
        >
          <el-table-column
            label="考试数量"
            align="center"
            prop="jiDocCount"
            min-width="95"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="级位数量"
            align="center"
            prop="jiCount"
            min-width="95"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="金额"
            align="center"
            prop="jiTotalFee"
            min-width="100"
            :show-overflow-tooltip="true"
          />
        </el-table-column>
        <el-table-column
          v-if="queryParams.tab=='four'||queryParams.tab==''"
          label="段位"
          align="center"
          prop="sex"
          min-width="200"
        >
          <el-table-column
            label="考试数量"
            align="center"
            prop="duanDocCount"
            min-width="95"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="段位数量"
            align="center"
            prop="duanCount"
            min-width="95"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="金额"
            align="center"
            prop="duanTotalFee"
            min-width="100"
            :show-overflow-tooltip="true"
          />
        </el-table-column>
        
        <el-table-column
          v-if="queryParams.tab==''"
          min-width="120"
          label="总计"
          align="center"
          prop="allFee"
        />
      </el-table>
      
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="initData"
      />
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted } from 'vue'
import { reactive } from '@vue/runtime-core'
import { ref, toRefs } from 'vue'
import { dateEnd } from '@/utils/ruoyi'
import { getMemberStatistics } from '@/api/analysis/business'

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

onMounted(() => {
  initData()
})

// 获取赛会列表
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.startTime = validityDateRange.value[0]
    queryParams.value.endTime = validityDateRange.value[1]
  } else {
    queryParams.value.startTime = null
    queryParams.value.endTime = null
  }
  if (queryParams.value.endTime) queryParams.value.endTime = dateEnd(queryParams.value.endTime)
  const form = {
    shenName: '总计',
    duanCount: 0,
    duanDocCount: 0,
    duanTotalFee: 0,
    jiCount: 0,
    jiDocCount: 0,
    jiTotalFee: 0,
    memberCount: 0,
    memberTotalFee: 0,
    memberYearCount: 0,
    personCount: 0,
    personTotalFee: 0,
    personYearCount: 0,
    allFee: 0
  }
  const res = await getMemberStatistics(queryParams.value)
  if (res.code == 200) {
    list.value = res.data
    total.value = res.total
    list.value.forEach(item => {
      form.duanCount += item.duanCount * 1
      form.duanDocCount += item.duanDocCount * 1
      form.duanTotalFee += item.duanTotalFee * 1
      form.jiCount += item.jiCount * 1
      form.jiDocCount += item.jiDocCount * 1
      form.jiTotalFee += item.jiTotalFee * 1
      form.memberCount += item.memberCount * 1
      form.memberTotalFee += item.memberTotalFee * 1
      form.memberYearCount += item.memberYearCount * 1
      form.personCount += item.personCount * 1
      form.personTotalFee += item.personTotalFee * 1
      form.personYearCount += item.personYearCount * 1
      form.allFee += item.allFee * 1
    })
    list.value.push(form)
  }
  showLoading.value = false
}

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

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

function exportData() {
  proxy.download('/common/home/exportMemberStatistics', {
    ...queryParams.value
  }, `业务统计${new Date().getTime()}.xlsx`)
}
</script>

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

</style>