<template>
  <el-card>
    <el-form
      ref="queryRef"
      v-model="queryParams"
      size="small"
      label-position="left"
      label-width="140px"
    >
      <el-row style="width: 100%;">
        <el-col :span="6">
          <el-form-item label="单位会员名称" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入单位会员名称"
              clearable
              style="width:90%;"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否参与单位会员审核" prop="memberAudit">
            <el-select
              v-model="queryParams.memberAudit"
              placeholder="请选择"
              @change="handleQuery"
            >
              <el-option label="全部" value="" />
              <el-option label="是" value="1" />
              <el-option label="否" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <br>
    <el-table v-loading="loading" :data="list" border>
      <el-table-column label="序号" type="index" align="center" width="60" />
      <el-table-column label="会员编号" prop="memCode" align="center" width="200" />
      <el-table-column label="单位会员名称" prop="name" align="center" />
      <el-table-column label="所属省份" prop="provinceStr" align="center" />
      <el-table-column label="是否参与单位会员认证审核" align="center">
        <template #default="{row}">
          <el-select v-model="row.memberAudit" style="width: 100px;" @change="handelApply(row)">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="是否参与单位会员缴费审核" align="center">
        <template #default="{row}">
          <el-select v-model="row.memberPayAudit" style="width: 100px;" @change="handelPayAudit(row)">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="是否参与单位会员考点审核" align="center">
        <template #default="{row}">
          <el-select v-model="row.memberEpAudit" style="width: 100px;" @change="handelEpAudit(row)">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>

import { onMounted, ref, getCurrentInstance } from 'vue'
import { selectPageList, editShenAudit, editShenEpAudit, editShenPayAudit } from '@/api/groupMember/index'

const { proxy } = getCurrentInstance()

const list = ref([])

const queryParams = ref({
  pageNum: 1,
  dType: 1,
  fromList: 1,
  status: 2,
  name: '',
  memberAudit: ''
  // isBlack: 0
})
const loading = ref(false)


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

async function getList() {
  loading.value = true
  const res = await selectPageList(queryParams.value)
  loading.value = false
  list.value = res.rows
}

function handleQuery() {
  getList()
}

function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    dType: 1,
    fromList: 1,
    status: 2,
    name: '',
    memberAudit: ''
  }
  getList()
}

async function handelApply(row) {
  await editShenAudit({
    memId: row.memId,
    flag: row.memberAudit
  })
  await proxy.$modal.msgSuccess('操作成功')
  await getList()
}

async function handelPayAudit(row) {
  await editShenPayAudit({
    memId: row.memId,
    flag: row.memberPayAudit
  })
  await proxy.$modal.msgSuccess('操作成功')
  await getList()
}

async function handelEpAudit(row) {
  await editShenEpAudit({
    memId: row.memId,
    flag: row.memberEpAudit
  })
  await proxy.$modal.msgSuccess('操作成功')
  await getList()
}


</script>

<style scoped>

</style>