<template>
  <div v-if="show">
    <el-dialog
      v-model="show" title="会员变更" :close-on-click-modal="true" width="80%"
      @close="close"
    >
      <div>
        <el-form
          ref="queryRef" label-position="top" size="small" :model="queryParams" :inline="true"
          label-width="auto"
        >
          <el-row style="width: 100%;">
            <el-col :span="4">
              <el-form-item label="姓名" prop="preciseName">
                <el-input
                  v-model="queryParams.preciseName"
                  clearable
                  style="width: 240px"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="证件类型" prop="idcType">
                <el-select v-model="queryParams.idcType" placeholder="" style="width: 100%;" @change="searchFN">
                  <el-option
                    v-for="item in cardType" :key="item.id"
                    :label="item.label" :hidden="item.value==2" :value="item.value"
                  />
                </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: 240px"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col> 

          </el-row>
        </el-form>
        <el-row justify="space-between">
          <div>
            <el-button size="small" type="primary" icon="Search" @click="searchFN()">查询</el-button>
            <el-button size="small" icon="Refresh" @click="reset">重置</el-button>
            <el-button size="small" :disabled="flag" type="primary" @click="handleImport">批量添加 </el-button>
          </div>
        </el-row>
        <br>

        <!-- 表格数据 -->
        <el-table
          v-loading="loading" border :data="list" style="width: 100%"
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
        >
          <el-table-column :selectable="selectable" type="selection" width="55" align="center" />
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column
            label="会员编号"
            align="center"
            prop="perCode"
            min-width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="姓名"
            align="center"
            prop="name"
            min-width="90"
          />
          <el-table-column
            label="性别"
            align="center"
            prop="mergeCode"
            min-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="examCode"
            min-width="120"
          >
            <template #default="props">
              <div>{{ cardType[props.row.idcType]?.label }}</div>
            </template>
          </el-table-column>

          <el-table-column
            label="证件号"
            align="center"
            prop="idcCode"
            min-width="170"
          />
          <el-table-column
            label="会员状态"
            align="center"
            prop="examCode"
            min-width="120"
          >
            <template #default="props">
              <div v-if="props.row.certStage==0">
                新会员
              </div>
              <div v-if="props.row.certStage==1">
                待提交
              </div>
              <div v-if="props.row.certStage==2">
                缴费中
              </div>
              <div v-if="props.row.certStage==3">
                正常
              </div>
              <div v-if="props.row.certStage==4">
                过期
              </div>

            </template>
          </el-table-column>

          <el-table-column
            label="有效期"
            align="center"
            prop="createTime"
            min-width="100"
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.validityDate, '{y}-{m}-{d}') }}</span>
            </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="100"-->
          <!--            :show-overflow-tooltip="true"-->
          <!--          >-->
          <!--            <template #default="scope">-->
          <!--              <el-button type="primary" @click="handleAdd(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>
    </el-dialog>
  </div>

</template>

<script setup>
import { reactive } from '@vue/runtime-core'
import { ref, toRefs, getCurrentInstance } from 'vue'
import { addLevelModToRange } from '@/api/member/dataAlteration/level.js'
import { selectPageList } from '@/api/person/info'
import { addInfoModeToRange } from '@/api/member/dataAlteration/memberInfo.js'

const { proxy } = getCurrentInstance()
const total = ref(0)
const list = ref([])
const show = ref(false)
const flag = ref(true)
const regDateRange = ref([])
const loading = ref(false)
const perId = ref()
const rangeId = ref()
const batchList = ref([])
const data = reactive({
  queryParams: {}
})
const cardType = ref([
  { label: '身份证', value: '0' },
  { label: '港澳台通行证 ', value: '1' },
  { label: '中国护照', value: '2' },
  { label: '外国护照', value: '3' },
  { label: '其它', value: '4' }
])
const { queryParams } = toRefs(data)
const emit = defineEmits(['backFN'])
// 背景颜色
function tableRowClassName({ row }) {
  if (row.canPayFlag == 0) {
    return 'disabled-row'
  }
}

function open(row) {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    multiDeptFlag: 1,
    perType: 1
  }
  show.value = true
  rangeId.value = row
  perId.value = row.perId
  initData()
}

function close() {
  show.value = false
  emit('backFN', rangeId.value)
}

// 多选
function handleSelectionChange(e) {
  flag.value = !e.length
  batchList.value = e.map(item => item.perId)
}

// 禁选
function selectable(row, index) {
  if (row.canPayFlag != 0) {
    return true
  }
}

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


// 获取赛会列表
async function initData() {
  loading.value = true
  if (regDateRange.value) {
    queryParams.value.validityDateRange = regDateRange.value.toString()
  } else {
    queryParams.value.validityDateRange = null
  }
  queryParams.value.paymentRangeId = rangeId.value
  const res = await selectPageList(queryParams.value)
  list.value = res.rows
  total.value = res.total
  loading.value = false
}

// 重置
function reset() {
  proxy.$refs['queryRef'].resetFields()
  regDateRange.value = []
  initData()
}

// 添加
async function handleAdd(row) {
  const res = await addLevelModToRange({
    rangeId: rangeId.value,
    perId: perId.value,
    examId: row.examId
  })
  if (res.code == 200) {
    rangeId.value = res.data.rangeId
    console.log(res.data.rangeId)
    proxy.$modal.msgSuccess('操作成功！')
    close()
  }
  console.log(row)
}

// 批量添加
async function handleImport() {
  const res = await addInfoModeToRange({
    perIds: batchList.value,
    rangeIdStr: rangeId.value || '-1'
  })
  if (res.code == 200) {
    proxy.$modal.msgSuccess('操作成功！')
    rangeId.value = res.data
    close()
  }
  console.log(res)
}
defineExpose({
  open
})


</script>

<style lang="scss" scoped>
.router {
  margin-right: 20px;
}
:deep(.el-button--info){
  background-color: #920f20;
  border:1px solid #920f20
}

</style>