<template>
  <div class="app-container">
    <el-card>
      <el-form
        ref="infoRef" :model="form" :rules="rules" label-width="100px" size="small"
        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="year">
          <el-select v-model="form.year" 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>{{ countData.all ?? 0 }}</span>人</div>
        <div> 新会员合计：<span>{{ countData.new ?? 0 }}</span>人</div>
        <div> 续费会员合计：<span>{{ countData.old ?? 0 }}</span>人</div>
      </div>
      <br>
      <br>
      <div>
        <el-form ref="" :inline="true" :model="queryParams" label-width="auto" size="small">
          <el-form-item label="姓名：" prop="perName">
            <el-input v-model="queryParams.perName" style="width: 200px;" />
          </el-form-item>
          <el-form-item label="证件号码：" prop="perIdcCode">
            <el-input
              v-model="queryParams.perIdcCode" 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 v-loading="loading" :data="list" border style="width: 100%;">
          <el-table-column label="序号" type="index" width="55" />
          <el-table-column
            align="center"
            label="姓名"
            min-width="80"
            prop="perName"
          />
          <el-table-column
            align="center"
            label="证件类型"
            min-width="80"
            prop="personIdcType"
          >
            <template #default="{row}">
              <div>{{ idcFilter(row.perIdcType) }}</div>
            </template>
          </el-table-column>
          
          <el-table-column
            align="center"
            label="证件号"
            min-width="170"
            prop="perIdcCode"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            label="原有效期"
            min-width="100"
            prop="originValidityDate"
          >
            <template #default="{row}">
              {{ row.perIdcType == 3 ? "--" : parseTime(row.perValidTime, '{y}-{m}-{d}') }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="续费年限"
            min-width="200"
          >
            <template #default="{row}">
              <el-select v-model="row.payYear" placeholder="请选择" @change="getYear(row)">
                <el-option :value="1" label="一年" />
                <el-option :value="2" label="两年" />
                <el-option :value="3" label="三年" />
                <el-option :value="4" label="四年" />
                <el-option :value="5" label="五年" />
              </el-select>
            </template>
          </el-table-column>
          
          <el-table-column
            align="center"
            class-name="small-padding"
            fixed="right"
            label="操作"
            width="100"
          >
            <template #default="{row}">
              <el-button type="danger" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <pagination
          v-show="total > 0"
          v-model:limit="queryParams.pageSize"
          v-model:page="queryParams.pageNum"
          :total="total"
          @pagination="getList"
        />
      </div>
      <br>
      <br>
      <el-row justify="center">
        <el-button :disabled="list?.length<=0" type="primary" @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" />-->
    <payDetail ref="payDetailRef" @handel-go-pay="handelGoPay" />
    <payView ref="payViewRef" />
    <mingPay ref="mingPayRef" />
    <payOk ref="payOkRef" @handel-ok="handelOk" />
  </div>
</template>

<script setup>
import { ref, toRefs, reactive, onMounted, getCurrentInstance } from 'vue'
import { deleteByOutId } from '@/api/member/memberPay.js'
import {
  memberInsertPersons,
  listAPI,
  paymentNewDel,
  getNewCountByRangeId,
  editYear,
  goPay,
  callBack2
} from '@/api/member/newMember'
import { useRoute, useRouter } from 'vue-router'
import onLine from './components/onLine.vue'
import { idcFilter } from '@/utils/ruoyi'
import ImportPay from '@/views/member/memberPay/components/importPay.vue'
import payView from '@/views/system/user/profile/components/payView.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 router = useRouter()
const buttonLoading = ref(false)
const { proxy } = getCurrentInstance()
const dialogID = ref(false)
const data = reactive({
  rules: {
    year: { required: true, message: '请选择缴费年限', trigger: 'blur' },
    idcCode: [
      { required: true, message: '请输入证件号', trigger: 'blur' },
      { validator: validateMin, trigger: 'blur' }
    ],
    cityId: { required: true, message: '请选择地区', trigger: 'change' }
  },
  form: {
    rangeId: '',
    idType: '0',
    year: '1'
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    rangeId: -1
  }
})
const loading = ref(false)
const total = ref(0)
const list = ref([])
const { rules, form, queryParams } = toRefs(data)
const idcList = ref([
  { label: '身份证', value: '0' },
  { label: '来往大陆(内地)通行证 ', value: '1' },
  { label: '香港身份证', value: '5' }
])
const countData = ref({})

onMounted(() => {
  if (route.query.rangId) {
    form.value.rangeId = route.query.rangId
    queryParams.value.rangeId = route.query.rangId
    getList()
  }
  
  console.log(window.location.origin)
})

async function getCount() {
  const res = await getNewCountByRangeId(route.query.rangId)
  countData.value = res.data
}

// 身份证校验
// 自定义表单验证
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
}


async function getYear(row) {
  await editYear({
    payId: row.payId,
    year: row.payYear
  })
  await proxy.$modal.msgSuccess('操作成功!')
  await getList()
}

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

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

function selectFN() {
  getList()
}

function reset() {
  queryParams.value.perIdcCode = ''
  queryParams.value.perName = ''
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  getList()
}

/** 添加 */
async function submitForm() {
  await proxy.$refs['infoRef'].validate()
  buttonLoading.value = true
  await memberInsertPersons(form.value)
  await proxy.$modal.msgSuccess('新增成功')
  buttonLoading.value = false
  await getList()
}

// 提交审核
async function commitFN() {
  proxy.$refs['payDetailRef'].open(countData.value)
}

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

async function handelGoPay(row) {
  console.log(row)
  const url = window.location.origin + '/#/member/memberPay'
  const res = await goPay({
    id: form.value.rangeId,
    url,
    payType: row.type,
    contactPerson: row.contactPerson,
    contactTel: row.contactTel
  })
  proxy.$modal.loading()
  // if (res.data.orderId) {
  //   await callBack2(res.data.orderId)
  //   await proxy.$refs['payOkRef'].open(form.value.rangeId)
  // }
  if (res.data.payFlag === '2') {
    proxy.$refs['payViewRef'].open(res.data.orderId, 1)
    proxy.$modal.closeLoading()
  } else {
    if (res.data.payResult.encryptedData) {
      proxy.$refs['mingPayRef'].handleSubmit(res.data.payResult.encryptedData)
    }
  }
  
  
  // proxy.$refs['payOkRef'].open(form.value.rangeId)
}

function handelOk() {
  proxy.$refs['payDetailRef'].close()
  router.go(-1)
}

function backFN() {
  getList()
}


/** 删除按钮操作 */
async function handleDelete(row) {
  await proxy.$modal.confirm('是否确认删除个人会员姓名为"' + row.perName + '"的数据项？')
  await paymentNewDel(row.payId)
  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 lang="scss" scoped>


</style>