<template>
  <div class="app-container">
    <el-card>
      <el-form
        ref="infoRef" size="small" label-width="100px" :model="form" :rules="rules"
        style="width: 1000px;"
      >
        <el-form-item label="缴费名称：" prop="paymentName">
          <el-input v-model="form.paymentName" readonly style="width: 500px;" />
        </el-form-item>
        <el-form-item label="证件号码：" prop="idcCode">
          <el-select v-model="form.idType" placeholder="请选择" style="width: 200px;">
            <el-option v-for="item in idcList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-input v-model="form.idcCode" placeholder="请输入" style="width: 300px;" @change="IDChange" />
          <el-button class="btn" icon="Plus" type="primary" @click="submitForm"> 添加</el-button>
          <el-button type="primary" @click="onLineFN"> 在线选择</el-button>
          <el-button type="warning" @click="dialogFold"> 批量导入</el-button>
        </el-form-item>
        <el-form-item label="缴费年限：" prop="payYear">
          <el-select v-model="form.payYear" placeholder="请选择" style="width:500px;">
            <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-select>
        </el-form-item>
      </el-form>
      <br>
      <div class="vipData">
        <div> 人数合计：<span>{{ formData.personCount ? formData.personCount : 0 }}</span>人</div>
        <div> 新会员合计：<span>{{ formData.newPersonCount ? formData.newPersonCount : 0 }}</span>人</div>
        <div> 续费会员合计：<span>{{ formData.oldPersonCount ? formData.oldPersonCount : 0 }}</span>人</div>
        <!-- <el-col :span="4">
          <div class="nav-box"> 合计年限<span>{{ formData.oldPersonCount? formData.oldPersonCount:0 }}</span>人 </div>
        </el-col> -->
      </div>
      <br>
      <br>
      <div>
        <el-form ref="" :model="queryParams" size="small" :inline="true" label-width="auto">
          <el-form-item label="姓名：" prop="">
            <el-input v-model="queryParams.personName" style="width: 200px;" />
          </el-form-item>
          <el-form-item label="证件号码：">
            <el-input
              v-model="queryParams.personIdcCode" placeholder="请输入" style="width: 200px;"
              @change="IDChange"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="selectFN"> 查询</el-button>
            <el-button @click="reset"> 重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        
        <el-button :disabled="ids?.length<=0" type="danger" @click="OneClickDelete"> 一键清空</el-button>
        <br>
        <br>
        <el-table border :data="list" style="width: 100%;">
          <el-table-column label="序号" type="index" width="55" />
          <el-table-column
            label="姓名"
            align="center"
            prop="personName"
            min-width="80"
          />
          <el-table-column
            label="证件类型"
            align="center"
            prop="personIdcType"
            min-width="80"
          >
            <template #default="{row}">
              <div>{{ idcFilter(row.personIdcType) }}</div>
            </template>
          </el-table-column>
          
          <el-table-column
            label="证件号"
            align="center"
            prop="personIdcCode"
            min-width="170"
          >
            <template #default="{row}">
              <div v-if="row.perType==1" />
            </template>
          </el-table-column>
          <!--          <el-table-column-->
          <!--            label="所属单位（单位会员）"-->
          <!--            align="center"-->
          <!--            prop="memberInfoName"-->
          <!--            min-width="140"-->
          <!--            :show-overflow-tooltip="true"-->
          <!--          />-->
          <el-table-column
            label="原有效期"
            align="center"
            prop="originValidityDate"
            min-width="100"
            :show-overflow-tooltip="true"
          >
            <template #default="{row}">
              <div>{{
                row?.personIdcType == 3 ? "--" : parseTime(row.originValidityDate, '{y}-{m}-{d}')
              }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="续费年限"
            min-width="200"
            align="center"
          >
            <template #default="{row}">
              <el-select v-model="row.payYear" placeholder="请选择" @change="getYear(row)">
                <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-select>
            </template>
          </el-table-column>
          
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            class-name="small-padding"
            width="100"
          >
            <template #default="{row}">
              <!--            <el-button type="primary" @click="handleInfo(row)">查看</el-button>-->
              <el-button type="danger" @click="handleDelete(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="getList"
        />
      </div>
      <br>
      <br>
      <el-row justify="center">
        <el-button type="primary" :disabled="list?.length<=0" @click="commitFN"> 保存并缴费</el-button>
      </el-row>
    </el-card>
    
    <onLine ref="onLineRef" @back-f-n="backFN" />
    <ImportPay ref="ImportPayRef" @uploaded="uploadedFN" />
    
    <confirmOrder ref="confirmOrderRef" @handel-payment="handelPayment" />
    <mingPay ref="mingPayRef" />
    <payDetail ref="payDetailRef" @handel-go-pay="handelGoPay" />
    <payOk ref="payOkRef" />
  </div>
</template>

<script setup>
import { ref, toRefs, reactive, onMounted, getCurrentInstance } from 'vue'
import {
  addPersonPayment,
  addSelectPageList,
  editYear,
  delPayment,
  deleteByOutId
} from '@/api/member/memberPay.js'
import { useRoute } from 'vue-router'
import onLine from './components/onLine.vue'
import { idcFilter } from '@/utils/ruoyi'
import ImportPay from '@/views/member/memberPay/components/importPay.vue'
import confirmOrder from '@/components/memberComponents/confirmOrder.vue'
import mingPay from '@/components/memberComponents/MingPay.vue'
import payDetail from '/@/components/memberComponents/payDetail.vue'
import payOk from '/@/components/memberComponents/payOk.vue'

const route = useRoute()
const buttonLoading = ref(false)
const { proxy } = getCurrentInstance()
const dialogID = ref(false)

const data = reactive({
  rules: {
    payYear: { required: true, message: '请选择缴费年限', trigger: 'blur' },
    idcCode: [
      { required: true, message: '请输入证件号', trigger: 'blur' },
      { validator: validateMin, trigger: 'blur' }
    ],
    cityId: { required: true, message: '请选择地区', trigger: 'change' }
  },
  form: {
    rangeId: -1,
    idType: '0',
    payYear: '1'
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    rangeId: -1
  },
  formData: {}
})
const total = ref(0)
const list = ref([])
const ids = ref([])
const { rules, form, queryParams, formData } = toRefs(data)
const idcList = ref([
  { label: '身份证', value: '0' },
  { label: '来往大陆(内地)通行证 ', value: '1' },
  { label: '香港身份证', value: '5' }
])

onMounted(() => {
  if (route.query.rangId) {
    form.value.rangeId = route.query.rangId
    queryParams.value.rangeId = route.query.rangId
    getList()
  }
})

// 身份证校验
// 自定义表单验证
function validateMin(rule, value, callback) {
  const i = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
  if (!form.value.idType) callback(new Error('请选择证件类型！'))
  if (form.value.idType == 0) {
    if (!i.test(form.value.idcCode)) {
      callback(new Error('请输入正确的证件号！'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

function onLineFN() {
  proxy.$refs['onLineRef'].open(queryParams.value.rangeId)
}

// 身份证校验
function IDChange(e) {
  dialogID.value = true
}

// 窗口关闭
function backFN(rangeId) {
  if (!rangeId) return
  form.value.rangeId = rangeId
  queryParams.value.rangeId = rangeId
  getList()
}

async function getYear(row) {
  const res = await editYear(row.payId, row.payYear)
  if (res.code === 200) {
    proxy.$modal.msgSuccess('操作成功!')
  } else {
    proxy.$modal.msgSuccess('操作失败!')
  }
  await getList()
}

function uploadedFN(row) {
  queryParams.value.rangeId = row
  form.value.rangeId = row
  getList()
}

async function getList() {
  const res = await addSelectPageList(queryParams.value)
  list.value = res.pageData.rows
  total.value = res.pageData.total
  formData.value = res
  ids.value = list.value.map((item) => item.payId)
}

function selectFN() {
  getList()
}

function reset() {
  queryParams.value.personIdcCode = ''
  queryParams.value.personIdcType = ''
  queryParams.value.personName = ''
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  getList()
}

/** 添加 */
async function submitForm() {
  await proxy.$refs['infoRef'].validate()
  buttonLoading.value = true
  let res = null
  form.value.idcKey = form.value.idType + form.value.idcCode
  res = await addPersonPayment(form.value)
  if (res.code == 200) {
    if (res.data?.range?.paymentName) form.value.paymentName = res.data.range.paymentName
    if (res.data?.range?.rangId) {
      queryParams.value.rangeId = res.data.range.rangId
      form.value.rangeId = res.data.range.rangId
    }
  }
  await proxy.$modal.msgSuccess('新增成功')
  buttonLoading.value = false
  await getList()
}

// 提交审核
async function commitFN() {
  if (form.value.rangeId == -1) return
  proxy.$refs['confirmOrderRef'].open(form.value.rangeId)
  
  // const res = await commit(form.value.rangeId)
  // if (res.code == 200) {
  //   proxy.$modal.msgSuccess('提交成功!')
  //   await router.push('/member/memberPay')
  // } else {
  //   proxy.$modal.msgError('提交失败!')
  // }
}

// 去付款
function handelPayment() {
  proxy.$refs['payDetailRef'].open(form.value.rangeId)
}

function handelGoPay() {
  proxy.$refs['payOkRef'].open(form.value.rangeId)
}

/** 删除按钮操作 */
async function handleDelete(row) {
  await proxy.$modal.confirm('是否确认删除个人会员姓名为"' + row.personName + '"的数据项？')
  await delPayment([row.payId])
  if (list.value.length == 1 && queryParams.value.pageNum == 1) {
    form.value.rangeId = -1
    queryParams.value.rangeId = -1
    form.value.paymentName = ''
  } else if (list.value.length == 1 && queryParams.value.pageNum > 1) {
    queryParams.value.pageNum--
  }
  await getList()
  await proxy.$modal.msgSuccess('删除成功')
}


async function OneClickDelete() {
  await proxy.$modal.confirm('是否确认删除列表所有人员？')
  await deleteByOutId(queryParams.value.rangeId)
  await proxy.$modal.msgSuccess('删除成功')
  await getList()
}

function dialogFold() {
  proxy.$refs['ImportPayRef'].open(form.value.rangeId)
}
</script>

<style scoped lang="scss">


</style>