<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 justify="">
            <el-col :span="4">
              <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="4">
              <el-form-item label="状态" prop="certStage">
                <el-select v-model="queryParams.certStage" style="width: 100%">
                  <!-- <el-option label="全部" value="" /> -->
                  <el-option label="正常" value="3" />
                  <el-option label="到期" value="4" />
                  <el-option label="草稿" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="证件类型" prop="type">
                <el-select v-model="queryParams.releaseStatus" style="width: 100%">
                  <!-- <el-option label="全部" value="" /> -->
                  <el-option label="身份证" value="0" />
                  <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="4">
              <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="4">
              <el-form-item label="注册团体会员名称" prop="groupMemberName">
                <el-input
                  v-model="queryParams.groupMemberName"
                  placeholder="注册团体会员名称"
                  clearable
                  style="width: 100%"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="级位" prop="levelJi">
                <el-select v-model="queryParams.levelJi" style="width: 100%">
                  <!-- <el-option label="全部" value="" /> -->
                  <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-option label="十级" value="10" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="段位" prop="levelDuan">
                <el-select v-model="queryParams.levelDuan" style="width: 100%">
                  <!-- <el-option label="全部" value="" /> -->
                  <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="8" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <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%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <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%"
                />
              </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>
            </div>

          </el-row>

          <!-- <el-form-item label="缴费时间:" prop="payDateRange">
          <el-date-picker
            v-model="payDateRange"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item> -->

        </el-form>
        <el-row justify="space-between">
          <div>
            <router-link class="router" to="/member/list/addMember?perType=1"><el-button :icon="Plus" type="primary">添加会员 </el-button></router-link>
            <router-link class="router" to="/member/mobillize"><el-button :icon="Refresh" type="primary">会员调动</el-button></router-link>
            <router-link class="router" to=""><el-button type="primary" :icon="Upload">批量导入</el-button></router-link>
            <router-link class="router" to=""><el-button :disabled="flag" :icon="Wallet" type="primary" @click="handleImport">会员缴费</el-button></router-link>
          </div>
        </el-row>
      </div>

      <!-- 表格数据 -->
      <div class="table">
        <el-table v-loading="showLoading" :data="list" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column :selectable="selectEnable" type="index" label="序号" width="55" align="center" />
          <el-table-column
            label="会员名称"
            align="center"
            prop="name"
            min-width="110"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="性别"
            align="center"
            prop="sex"
            min-width="50"
          >
            <template #default="props">
              <div v-if="props.row.sex == 1">女</div>
              <div v-else>男</div>
            </template>
          </el-table-column>

          <el-table-column
            label="会员类型"
            align="center"
            prop="perType"
            min-width="80"
          >
            <template #default="props">
              <div v-if="props.row.perType==1"> 个人</div>
              <div v-if="props.row.perType==2"> 教练</div>
              <div v-if="props.row.perType==3"> 考官</div>
              <div v-if="props.row.perType==4"> 裁判</div>
              <div v-if="props.row.perType==5">临时</div>
            </template>
          </el-table-column>
          <el-table-column label="出生日期" align="center" prop="birth" width="100">
            <template #default="scope">
              <span>{{ parseTime(scope.row.birth, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="证件类型"
            align="center"
            prop="matchTimeStr"
            min-width="80"
          >
            <template #default="props">
              <div v-if="props.row.idcType==0"> 身份证</div>
              <div v-if="props.row.idcType==1"> 港澳台通行证</div>
              <div v-if="props.row.idcType==2"> 中国护照</div>
              <div v-if="props.row.idcType==3"> 外国护照</div>
              <div v-if="props.row.idcType==4"> 其它</div>
            </template>
          </el-table-column>
          <el-table-column
            label="证件号码"
            align="center"
            prop="idcCode"
            min-width="170"
          />
          <el-table-column
            label="一级单位"
            align="center"
            prop=""
            min-width="140"
            :show-overflow-tooltip="true"
          >
            <template #default="props">
              <div v-if="props.row?.ancestorNameList">
                <div v-if="props.row?.ancestorNameList[0]">{{ props.row?.ancestorNameList[0] }}</div>
                <div v-else>/</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="二级单位"
            align="center"
            prop="costCounts"
            min-width="140"
            :show-overflow-tooltip="true"
          >
            <template #default="props">
              <div v-if="props.row?.ancestorNameList">
                <div v-if="props.row?.ancestorNameList[1]">{{ props.row?.ancestorNameList[1] }}</div>
                <div v-else>/</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="三级单位"
            align="center"
            prop="balance"
            min-width="140"
            :show-overflow-tooltip="true"
          >
            <template #default="props">
              <div v-if="props.row?.ancestorNameList">
                <div v-if="props.row?.ancestorNameList[2]">{{ props.row?.ancestorNameList[2] }}</div>
                <div v-else>/</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="注册团体会员"
            align="center"
            prop="memName"
            min-width="110"
            :show-overflow-tooltip="true"
          />
          <!-- <el-table-column
          label="缴费时间"
          align="center"
          prop="statusStr"
          min-width="120"
        >
          <template #default="scope">
            <span>{{ parseTime(scope.row.payDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column> -->
          <el-table-column
            label="到期时间"
            align="center"
            prop="statusStr"
            min-width="100"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.validityDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="注册时间"
            align="center"
            prop="createTime"
            min-width="100"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <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-navy">
                已录入缴费列表
              </div>
              <div v-if="props.row.certStage==2" class="text-info">
                已提交缴费审核
              </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="180"
          >
            <template #default="scope">
              <el-button type="primary" @click="handleInfo(scope.row)">查看</el-button>
              <el-button type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button
                v-if="scope.row.certStage==0" :disabled="scope.row.certStage!=0" 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>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { getCurrentInstance, onMounted } from 'vue'
import { reactive } from '@vue/runtime-core'
import { ref, toRefs } from 'vue'
import { delInfo, selectPageList } from '@/api/person/info'
import { addPersonPaymentGroup } from '@/api/member/memberPay'
import { Plus, Refresh, Upload, Wallet } from '@element-plus/icons-vue'

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 flag = ref(true)
const rangeId = ref()
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    showMyPersonFlag: 1
  }
})

const { queryParams } = toRefs(data)

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

// 获取赛会列表
async function initData() {
  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) {
    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) {
  router.push({
    path: '/member/list/addMember',
    query: {
      perId: row.perId,
      perType: row.perType
    }
  })
}

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

// 查询
function searchFN() {
  initData()
}

// 重置
function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    showMyPersonFlag: 1
  }
  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
  })
}
</script>

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


</style>