<template>
  <div>
    <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="preciseName">
                <el-input
                  v-model.trim="queryParams.preciseName"
                  placeholder="姓名"
                  clearable
                  style="width: 100%"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>

            <el-col v-if="deptType != 6" :span="4">
              <el-form-item label="所属协会" prop="certStage">
                <el-cascader
                  v-model="queryParams.sonDeptId"
                  :options="treeList"
                  :props="props2"
                  style="width: 100%"
                  placeholder="所属协会"
                  @change="searchFN"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="证件类型" prop="idcType">
                <el-select v-model="queryParams.idcType" style="width: 100%" @change="searchFN">
                  <el-option v-for="item in idcTypeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="证件号码" prop="idcCode">
                <el-input
                  v-model.trim="queryParams.idcCode"
                  placeholder="证件号码"
                  clearable
                  style="width: 100%"
                  @keyup.enter="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>

      </div>
      <!-- 表格数据 -->
      <div class="table">
        <el-table
          v-loading="showLoading" border :data="list" style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <!--          <el-table-column :selectable="selectEnable" type="selection" width="40" align="center" />-->
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column
            v-if="deptType!=1"
            label="证件照"
            align="center"
            width="100"
          >
            <template #default="props">
              <div
                style="display: flex; justify-content: center;"
              >
                <el-image v-if="props.row.photo" style="width: 52px; height: 65px;" :src="fillImgUrl(props.row.photo)">
                  <template #error>
                    <div class="image-slot">
                      <img style="width: 52px;height: 65px" src="@/assets/admin/tx.jpg">
                    </div>
                  </template>
                  <template #placeholder>
                    <div class="image-slot"> <img style="width: 52px;height: 65px" src="@/assets/admin/tx.jpg"></div>
                  </template>
                </el-image>
                <img v-else style="width: 52px; height: 65px;" src="@/assets/admin/tx.jpg" alt="">
              </div>
            </template>
          </el-table-column>
          <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">
              <div v-if="props.row.sex == 1">女</div>
              <div v-else>男</div>
            </template>
          </el-table-column>
          <el-table-column
            label="证件类型"
            align="center"
            prop="sex"
            width="120"
          >
            <template #default="props">
              <div>{{ idcFilter(props.row.idcType) }}</div>
            </template>
          </el-table-column>

          <el-table-column
            label="证件号码"
            align="center"
            prop="idcCode"
            min-width="170"
          />

          <el-table-column
            label="到期时间"
            align="center"
            prop="validityDate"
            min-width="100"
          >
            <template #default="scope">
              <span>{{ scope.row.idcType==3?'--': parseTime(scope.row.validityDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>

          <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="reason"
            min-width="160"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="操作"
            align="center"
            fixed="right" header-align="center"
            width="220"
          >
            <template #default="scope">
              <el-button type="primary" @click="handleInfo(scope.row)">查看</el-button>
              <el-button style="width: auto" type="success" @click="unBlacklist(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, computed } from 'vue'
import { selectPageList, clearOwner, downStuCertSingle, changeBlack } from '@/api/person/info'
import useUserStore from '@/store/modules/user'
import { deptTreeSelect } from '@/api/system/user'
import { fillImgUrl } from '@/utils/ruoyi'
import { idcTypeList, idcFilter } from '@/utils/ruoyi'

const deptType = computed(() => useUserStore().deptType)
const props2 = {
  checkStrictly: true,
  children: 'children',
  value: 'id',
  emitPath: false
}
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 data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    showMyPersonFlag: deptType.value == 6 ? 1 : null,
    multiDeptFlag: 1,
    perType: 1,
    certStage: '',
    isBlack: '1'
    // personType: 2
  }
})
const { queryParams } = toRefs(data)

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

// 所属协会
async function getTree() {
  const res = await deptTreeSelect({
    selfDeptId: deptType.value != 1 ? 1 : -1
  })
  treeList.value = res.data
}

// 获取赛会列表
async function initData() {
  queryParams.value.payDateRange = payDateRange.value?.toString()
  queryParams.value.regDateRange = regDateRange.value?.toString()
  queryParams.value.validityDateRange = validityDateRange.value?.toString()
  if (deptType.value == 6 || queryParams.value.sonDeptId) {
    queryParams.value.multiDeptFlag = null
  }
  queryParams.value.checkPaymentCommit = 1
  showLoading.value = true
  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
  }
}

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,
    showMyPersonFlag: deptType.value == 6 ? 1 : null,
    multiDeptFlag: 1,
    perType: 1,
    isBlack: '1'
    // personType: 2
  }
  if (deptType.value == 6) queryParams.value.multiDeptFlag = null
  payDateRange.value = []
  regDateRange.value = []
  validityDateRange.value = []
  initData()
}

function blacklist(row) {
  proxy.$modal.confirm('是否确认将会员编号为"' + row.perCode + '"的数据项加入黑名单？').then(function() {
    loading.value = true
    return changeBlack(row.perId, 1)
  }).then(() => {
    loading.value = true
    proxy.$modal.msgSuccess('操作成功')
    initData()
  }).catch(() => {
  }).finally(() => {
    loading.value = false
  })
}

function unBlacklist(row) {
  proxy.$modal.confirm('是否确认将会员编号为"' + row.perCode + '"的数据项解除黑名单？').then(function() {
    loading.value = true
    return changeBlack({ perId: row.perId, type: 0 })
  }).then(() => {
    loading.value = true
    proxy.$modal.msgSuccess('操作成功')
    initData()
  }).catch(() => {
  }).finally(() => {
    loading.value = false
  })
}

async function memberCard(row) {
  const res = await downStuCertSingle(row.perId)
  if (res.code == 200) {
    window.open(fillImgUrl(res.data))
  }
}

</script>

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