<template>
  <div class="app-container">
    <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="5">
              <el-form-item label="裁判姓名" prop="name">
                <el-input
                  v-model="queryParams.name"
                  placeholder="裁判姓名"
                  clearable
                  style="width: 100%"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="5">
              <el-form-item label="状态" prop="valiStatus">
                <el-select v-model="queryParams.valiStatus" style="width: 100%" clearable @change="searchFN">
                  <el-option label="正常" value="0" />
                  <el-option label="到期" value="1" />
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="5">
              <el-form-item label="证件号码" prop="idcCode">
                <el-input
                  v-model="queryParams.idcCode"
                  placeholder="证件号码"
                  clearable
                  style="width: 100%"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="裁判类型" prop="roleType">
                <el-select v-model="queryParams.roleType" clearable style="width: 100%" @change="searchFN">
                  <el-option label="三级" value="1" />
                  <el-option label="二级" value="2" />
                  <el-option label="一级" value="3" />
                  <el-option label="国家级" value="4" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10" :hidden="showCollect">
              <el-form-item label="到期时间" prop="validityDate">
                <el-date-picker
                  v-model="validityDateRange"
                  type="datetimerange"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width: 100%"
                  clearable
                  @change="searchFN"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10" :hidden="showCollect">
              <el-form-item label="注册时间" prop="name">
                <el-date-picker
                  v-model="regDateRange"
                  type="datetimerange"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width: 100%"
                  clearable
                  @change="searchFN"
                />
              </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
                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>
        <el-row justify="space-between">
          <div>
            <!--            <router-link v-if="deptType==1" class="router" to="/coach/addStaff?perType=4"><el-button size="small" type="primary">添加裁判 </el-button></router-link>-->
            <router-link v-if="deptType==1" class="router" to=""><el-button type="primary" :icon="Plus" @click="handleAdd">添加裁判</el-button></router-link>
            <router-link v-if="deptType==1" class="router" to=""><el-button color="#13B5B1" style="--el-color-black:#fff;" :icon="Upload" @click="downloadFN">批量添加</el-button></router-link>
            <el-button type="warning" :icon="Download" @click="exportFile">导出</el-button>
          </div>
        </el-row>
      </div>

      <!-- 表格数据 -->
      <div class="table">
        <el-table
          v-loading="showLoading" border :data="list" style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="40" center /> -->
          <el-table-column label="序号" type="index" width="55" align="center" />
          <el-table-column
            label="会员编号"
            align="center"
            prop="perCode"
            min-width="110"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="姓名"
            align="center"
            prop="name"
            min-width="110"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="性别"
            align="center"
            prop="sex"
            width="60"
          >
            <template #default="props">
              {{ ['男','女'][props.row.sex] }}
            </template>
          </el-table-column>
          <el-table-column
            label="证件号"
            align="center"
            prop="idcCode"
            min-width="180"
          />
          <el-table-column
            label="裁判证号"
            align="center"
            prop="personRoleInfo.card"
            min-width="180"
          />
          <el-table-column
            label="裁判类型"
            align="center"
            prop="personRoleInfo.type"
            min-width="170"
          >
            <template #default="scope">
              {{ ['','三级','二级','一级','国家级'][_.max(scope.row.personRoleInfo.type)] }}
            </template>
          </el-table-column>
          <el-table-column
            label="裁判级别"
            align="center"
            prop="personRoleInfo.rank"
            min-width="100"
          >
            <template #default="scope">
              {{ szToHz(_.min(scope.row.personRoleInfo.rank)) }}级
            </template>
          </el-table-column>
          <el-table-column
            label="通过日期"
            align="center"
            prop=""
            min-width="100"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row?.personRoleInfo?.passTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="增加日期"
            align="center"
            prop=""
            min-width="100"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row?.personRoleInfo?.addTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="有效日期"
            align="center"
            prop=""
            min-width="100"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row?.personRoleInfo?.validTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属省份" align="center" prop="provinceName" min-width="100" />
          <!-- <el-table-column
            label="状态"
            align="center"
            prop="statusStr"
            min-width="130"
          >
            <template #default="props">
              <div v-if="props.row.certStage==0">
                -
              </div>
              <div v-if="props.row.certStage==1" class="text-info">
                已录入缴费列表
              </div>
              <div v-if="props.row.certStage==2" class="text-navy">
                已提交缴费审核
              </div>
              <div v-if="props.row.certStage==3" class="text-success">
                正常
              </div>
              <div v-if="props.row.certStage==4" class="text-danger">
                过期
              </div>
            </template>
          </el-table-column> -->

          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="260"
          >
            <template #default="scope">
              <el-button type="primary" @click="handleInfo(scope.row)">查看</el-button>
              <el-button v-if="deptType=='1'" color="#13B5B1" style="--el-color-black:#fff;" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button
                :disabled="!(scope.row.certStage==0 && deptType=='1')"
                type="danger" @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="initData"
        />
      </div>
    </div>
    <importMember ref="importMemberRef" @uploaded="initData" />
    <modify-person ref="modifyPersonRef" per-type="4" @submit="initData" />
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { getCurrentInstance, onMounted } from 'vue'
import { reactive } from '@vue/runtime-core'
import { Plus, Download, Upload } from '@element-plus/icons-vue'

import { ref, toRefs, computed } from 'vue'
import { delInfo, selectPageList } from '@/api/person/info'
// import { addPersonPaymentGroup } from '@/api/member/memberPay'
import ImportMember from '@/views/member/components/import.vue'
import ModifyPerson from '../modifyPerson'
import useUserStore from '@/store/modules/user'
import { deptTreeSelect } from '@/api/system/user'
import { szToHz } from '@/utils/ruoyi'
import _ from 'lodash'


const showCollect = ref(true)
const deptType = computed(() => useUserStore().deptType)
const { proxy } = getCurrentInstance()
const showLoading = ref(false)
const total = ref(0)
const list = ref([])
const loading = ref(false)
const router = useRouter()
const regDateRange = ref([])
const validityDateRange = ref([])
const payDateRange = ref([])
const lists = ref([])
const treeList = ref([])
const flag = ref(true)
// const rangeId = ref()
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    perType: 4
  }
})
const { queryParams } = toRefs(data)

onMounted(() => {
  initData()
  if (deptType.value != 6) getTree()
})

// 所属协会
async function getTree() {
  const res = await deptTreeSelect()
  treeList.value = res.data
}

// 获取赛会列表
async function initData() {
  queryParams.value.noMemberPerson = 1
  queryParams.value.payDateRange = null
  queryParams.value.regDateRange = null
  queryParams.value.validityDateRange = null

  if (payDateRange.value.length > 0) queryParams.value.payDateRange = payDateRange.value.toString()
  if (regDateRange.value.length > 0) queryParams.value.regDateRange = regDateRange.value.toString()
  if (validityDateRange.value.length > 0) queryParams.value.validityDateRange = validityDateRange.value.toString()

  showLoading.value = true
  queryParams.value.checkPaymentCommit = 1
  const res = await selectPageList(queryParams.value)
  if (res.code == 200) {
    for (const item of res.rows) {
      item.personRoleInfo = JSON.parse(item.personRoleInfo)
    }
    list.value = res.rows
    total.value = res.total
    showLoading.value = false
  }
}

// 多选
function handleSelectionChange(e) {
  if (e.length > 0) {
    lists.value = JSON.parse(JSON.stringify(e))
    flag.value = false
  } else {
    flag.value = true
  }
}

// // 批量导入
// async function handleImport() {
//   // canPayFlag=0 不能添加
//   let flag = true
//   const arr = []
//   lists.value.forEach(item => {
//     arr.push(item.perId)
//     if (item.canPayFlag == 0) {
//       flag = false
//     }
//   })
//   if (!flag) return proxy.$modal.msgError('你所选的会员已提价缴费单，请不要重复提交')
//   if (arr.length <= 0) return false
//   const res = await addPersonPaymentGroup({ rangeId: -1, personIdArray: arr.join(',') })
//   if (res.code == 200) {
//     if (res.data.rangeId) {
//       rangeId.value = res.data.rangeId
//       router.push({
//         path: '/member/memberPay/addMemberPay',
//         query: {
//           rangId: rangeId.value
//         }
//       })
//     }
//     proxy.$modal.msgSuccess('操作成功！')
//   } else {
//     proxy.$modal.msgError('操作失败！')
//   }
// }

// 编辑
function handleUpdate(row) {
  proxy.$refs['modifyPersonRef'].open(row.perId)
}

function handleInfo(row) {
  router.push({
    path: '/member/list/memberDetails',
    query: {
      perId: row.perId
    }
  })
}

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

// 重置
function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    perType: 4
  }
  payDateRange.value = []
  regDateRange.value = []
  validityDateRange.value = []
  initData()
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _perIds = row.perId
  proxy.$modal.confirm('是否确认删除个人会员信息编号为"' + _perIds + '"的数据项？').then(function() {
    loading.value = true
    return delInfo(_perIds)
  }).then(() => {
    loading.value = true
    proxy.$modal.msgSuccess('删除成功')
    initData()
  }).catch(() => {
  }).finally(() => {
    loading.value = false
  })
}

// 批量导入
function downloadFN() {
  proxy.$refs['importMemberRef'].open(4)
}

function handleAdd() {
  proxy.$refs['modifyPersonRef'].open()
}

// 导出
function exportFile() {
  proxy.download(
    `/person/info/exportPerson/`, { ...queryParams.value, type: 2 }, '裁判信息.xlsx'
  )
}

</script>

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

</style>