<template>
  <div v-if="show">
    <el-dialog
      v-model="show" title="会员缴费" :close-on-click-modal="true" width="80%"
      draggable
      @close="close"
    >
      <div class="">
        <!-- 搜索区域 -->
        <el-form
          ref="queryRef" size="small" :model="queryParams" :inline="true" label-position="top"
          label-width="auto"
        >
          <el-row style="width: 100%;">
            <el-col :span="4">
              <el-form-item label="单位会员名称" prop="name">
                <el-input
                  v-model.trim="queryParams.name"
                  placeholder="单位会员名称"
                  clearable
                  style="width: 100%"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="单位类型" prop="deptType">
                <el-select
                  v-model="queryParams.deptType" style="width: 100%" placeholder="请输入单位类型"
                  @change="searchFN"
                >
                  <el-option label="全部" value="" />
                  <el-option label="职业性单位会员" value="6" />
                  <!--                  <el-option label="三级协会" value="5" />-->
                  <el-option label="二级协会" value="4" />
                  <el-option label="一级协会" value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="display: flex">
              <el-form-item style="width: 100%;" label="到期时间" prop="verityTimeRange">
                <el-date-picker
                  v-model="regDateRange[0]" type="date" value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="开始时间" style="width: 100%;"
                />
              </el-form-item>
              <el-form-item style="width: 100%;" label="到期时间" prop="verityTimeRange">
                <el-date-picker
                  v-model="regDateRange[1]" type="date" value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="结束时间" style="width: 100%;"
                  :default-time="defaultTime"
                />
              </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 "-->
            <!--                  range-separator="至"-->
            <!--                  start-placeholder="开始时间"-->
            <!--                  end-placeholder="结束时间"-->
            <!--                  style="width: 100%"-->
            <!--                  @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="reset">重置</el-button>
            </div>
          </el-row>
        </el-form>
        <el-row justify="space-between">
          <div>
            <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 type="selection" width="55" :selectable="selectable" />
          <el-table-column 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="type"
            min-width="80"
          >
            <template #default="props">
              <div v-if="props.row.deptType == 2">一级协会</div>
              <div v-if="props.row.deptType == 3">直属协会</div>
              <div v-if="props.row.deptType == 4">二级协会</div>
              <!--              <div v-if="props.row.deptType == 5">三级协会</div>-->
              <div v-if="props.row.deptType == 6">职业性单位会员</div>
            </template>
          </el-table-column>
          <el-table-column
            label="会员状态"
            align="center"
            prop="statusStr"
            min-width="100"
            :show-overflow-tooltip="true"
          >
            <template #default="{row}">
              <span>{{ row.validityDate==null?'新会员':'续费会员' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="缴费状态"
            align="center"
            prop="canCommitReason"
            min-width="100"
            show-overflow-tooltip
          >
            <template #default="{row}">
              <span v-if="row.canCommit" class="text-success">正常</span>
              <span v-else class="text-danger">{{ row.canCommitReason||'认证信息不全' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="存续年限/年"
            align="center"
            prop="years"
            min-width="100"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="到期时间"
            align="center"
            prop="statusStr"
            min-width="100"
            :show-overflow-tooltip="true"
          >
            <template #default="{row}">
              <span>{{ parseTime(row.validityDate, '{y}-{m}-{d}') }}</span>
            </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 { useRoute } from 'vue-router'
import { reactive } from '@vue/runtime-core'
import { ref, toRefs, onMounted, getCurrentInstance } from 'vue'
import { getMySonList, certifiedRange } from '@/api/groupMember/memberPay.js'
import { dateEnd } from '/@/utils/ruoyi'

const { proxy } = getCurrentInstance()
const total = ref(0)
const list = ref([])
const route = useRoute()
const show = ref(false)
const flag = ref(true)
const groupList = ref([])
const regDateRange = ref([null, null])
const loading = ref(false)
const rangeId = ref()
const data = reactive({
  queryParams: {
    queryParams: 1,
    showMyPersonFlag: 1,
    checkPaymentCommit: 1,
    pageNum: 1,
    pageSize: 10,
    isBlack: 0
  }
})
const defaultTime = ref(new Date(0, 0, 0, 23, 59, 59))
const { queryParams } = toRefs(data)
const emit = defineEmits(['backFN'])
onMounted(() => {
  route
})

function open(row) {
  show.value = true
  rangeId.value = row
  initData()
}

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

function close() {
  show.value = false
  queryParams.value = {
    pageNum: 1,
    pageSize: 20
  }
  regDateRange.value = []
  total.value = 0
  emit('backFN', rangeId.value)
}

function backFN() {
  emit('backFN', rangeId.value)
}

// 多选
function handleSelectionChange(e) {
  flag.value = !e.length
  groupList.value = JSON.parse(JSON.stringify(e))
}

// 禁选
function selectable(row, index) {
  if (row.canCommit) {
    return true
  } else {
    return false
  }
}

// 背景颜色
function tableRowClassName({ row }) {
  if (!row.canCommit) {
    return 'disabled-row'
  }
}


// 获取赛会列表
async function initData() {
  if ((regDateRange.value[0] == null && regDateRange.value[1] != null) || (regDateRange.value[1] == null && regDateRange.value[0] != null)) return proxy.$modal.msgError('请完善到期时间范围')
  if (regDateRange.value[1]) regDateRange.value[1] = dateEnd(regDateRange.value[1])
  queryParams.value.expiredTimeRange = regDateRange.value[0] != null ? regDateRange.value.toString() : null
  
  queryParams.value.paymentRangeId = rangeId.value
  loading.value = true
  const res = await getMySonList(queryParams.value)
  list.value = res.data.rows
  total.value = res.data.total
  loading.value = false
}

// 批量导入
async function handleImport() {
  const arr = []
  groupList.value.forEach(item => {
    arr.push(item.memId)
  })
  if (arr.length <= 0) return false
  const res = await certifiedRange({ rangeId: rangeId.value, memIds: arr.join(',') })
  if (res.code == 200) {
    if (res.data) rangeId.value = res.data
    close()
    // backFN()
    proxy.$modal.msgSuccess('操作成功！')
    show.value = false
  } else {
    proxy.$modal.msgError('操作失败！')
  }
}

// 重置
function reset() {
  queryParams.value = {
    queryParams: 1,
    showMyPersonFlag: 1,
    checkPaymentCommit: 1,
    pageNum: 1,
    pageSize: 10,
    isBlack: 0
  }
  regDateRange.value = [null, null]
  initData()
}

defineExpose({
  open, close, backFN
})


</script>

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

:deep(.el-button--info) {
  background-color: #920f20;
  border: 1px solid #920f20
}

// :deep(.el-checkbox__inner){
//   // background-color: #eee  !important;
// }
</style>