<template>
  <div class="app-container">
    <div class="from-Card">
      <el-form
        v-show="showSearch" ref="queryRef" size="small" :model="queryParams" :inline="true"
        label-position="top"
      >
        <el-row style="width: 100%;">
          <el-col :span="4">
            <el-form-item label="会员号" prop="perCode">
              <el-input
                v-model="queryParams.perCode"
                placeholder="请输入会员号"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="queryParams.name"
                placeholder="请输入姓名"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="queryParams.sex" clearable style="width: 100%" @change="handleQuery">
                <el-option label="男" value="0" />
                <el-option label="女" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="证件号" prop="idcCode">
              <el-input
                v-model="queryParams.idcCode"
                placeholder="请输入证件号"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="段位编号" prop="certCode">
              <el-input
                v-model="queryParams.certCode"
                placeholder="请输入段位编号"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4" :hidden="showCollect">
            <el-form-item label="段位" prop="level">
              <el-select v-model="queryParams.level" clearable style="width: 100%" @change="handleQuery">
                <el-option label="一段" value="1" />
                <el-option label="二段" value="2" />
                <el-option label="三段" value="3" />
                <el-option label="四段" value="4" />
                <el-option label="五段" value="5" />
                <el-option label="六段" value="6" />
                <el-option label="七段" value="7" />
                <el-option label="八段" value="8" />
                <el-option label="九段" value="9" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :hidden="showCollect">
            <el-form-item label="获得时间" prop="certTimeRange">
              <el-date-picker
                v-model="queryParams.certTimeRange"
                clearable
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                @change="handleQuery"
              />
            </el-form-item>
          </el-col>

          <div class="po-r-btns">
            <el-button size="small" type="primary" @click="handleQuery">搜索</el-button>
            <el-button size="small" @click="resetQuery">重置</el-button>
            <el-button size="small" type="primary" @click="importDuan_click">批量导入</el-button>
            <el-button
              v-if="showCollect" size="small" type="primary" link icon="ArrowDown"
              @click="showCollect=!showCollect"
            >展开</el-button>
            <el-button
              v-else size="small" type="primary" link icon="ArrowUp"
              @click="showCollect=!showCollect"
            >收起</el-button>
          </div>
        </el-row>
      </el-form>
    </div>

    <div class="table">
      <el-table v-loading="loading" border :data="infoList">
        <el-table-column type="index" width="55" align="center" label="序号" />
        <el-table-column label="会员号" align="center" prop="perCode" min-width="160" />
        <el-table-column label="姓名" align="center" prop="name" min-width="160" />
        <el-table-column label="性别" align="center" prop="sex" width="80">
          <template #default="scope">
            <span>{{ ['男','女'][scope.row.sex] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="证件号" align="center" prop="idcCode" min-width="200" />
        <el-table-column label="段位编号" align="center" prop="certCode" min-width="160" />
        <el-table-column label="段位" align="center" prop="level" width="80">
          <template #default="scope">
            {{ szToHz(scope.row.level) }}段
          </template>
        </el-table-column>
        <el-table-column label="获得时间" align="center" prop="createTime" width="160">
          <template #default="scope">
            {{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}
          </template>
        </el-table-column>
        <el-table-column label="所属团体会员" align="center" prop="memName" :show-overflow-tooltip="true" width="200" />
        <el-table-column label="是否官网显示" align="center" prop="isShow" width="120">
          <template #default="scope">
            <el-switch v-model="scope.row.isShow" active-value="1" inactive-value="0" @change="handleStatusChange(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="getList"
      />
    </div>
    <import-duan ref="importDuanRef" @uploaded="resetQuery" />
  </div>
</template>

<script setup name="Analysis_Rank">
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { onMounted, ref, toRefs, watch } from 'vue'
import { szToHz } from '@/utils/ruoyi'
import useTagsViewStore from '@/store/modules/tagsView'
import { changeShowStatus, getDuanList } from '@/api/analysis'
import _ from 'lodash'
import ImportDuan from '@/views/analysis/components/importDuan'

watch(() => useTagsViewStore().reSearch, (val) => {
  if (val) {
    getList()
  }
})

const { proxy } = getCurrentInstance()

const infoList = ref([])
const loading = ref(true)
const showSearch = ref(true)
const total = ref(0)
const showCollect = ref(true)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: undefined,
    applyTimeRange: undefined,
    examTimeRange: undefined,
    applyName: undefined,
    examiner: undefined,
    status: undefined,
    rankStatus: '0',
    type: '2'
  }
})

const { queryParams } = toRefs(data)

onMounted(() => {
  getList()
})

/** 查询考段信息列表 */
function getList() {
  loading.value = true
  getDuanList(queryParams.value).then(response => {
    _.each(response.rows, (r) => {
      if (!r.isShow) {
        r.isShow = '1'
      }
    })
    infoList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

/** 角色状态修改 */
function handleStatusChange(row) {
  const text = row.isShow === '0' ? '取消' : '要在'
  proxy.$modal.confirm('确认' + text + '官网显示吗?').then(function() {
    return changeShowStatus(row.techId, row.isShow)
  }).then(() => {
    proxy.$modal.msgSuccess(text + '成功')
  }).catch(function() {
    row.isShow = row.isShow === '0' ? '1' : '0'
  })
}

/**
 * 批量导入段位信息
 */
function importDuan_click() {
  proxy.$refs['importDuanRef'].open()
}

</script>