<template>
  <div class="app-container">
    <div>
      <!-- 搜索区域 -->
      <div class="from-Card">
        <el-form ref="queryRef" :inline="true" :model="queryParams" label-position="top" size="small">
          <el-row style="width: 100%;">
            <el-col :span="4">
              <el-form-item label="缴费编号" prop="wfCode">
                <el-input
                  v-model.trim="queryParams.wfCode"
                  clearable
                  placeholder="缴费编号"
                  style="width: 100%;"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            
            <el-col :span="4">
              <el-form-item label="缴费名称" prop="memName">
                <el-input
                  v-model.trim="queryParams.memName"
                  clearable
                  placeholder="缴费名称"
                  style="width: 100%;"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            
            <el-col :span="4">
              <el-form-item label="状态" prop="auditStatus">
                <el-select v-model="queryParams.auditStatus" style="width: 100%;" @change="searchFN">
                  <el-option label="全部" value="" />
                  <el-option label="待提交" value="0" />
                  <el-option label="审核中" value="1" />
                  <el-option label="审核通过" value="2" />
                  <el-option label="审核拒绝" value="3" />
                  <el-option label="已取消" value="4" />
                  <el-option label="待支付" value="9" />
                </el-select>
              </el-form-item>
            </el-col>
            
            <el-col :span="8" style="display: flex;">
              <el-form-item label="提交时间" prop="commitTime" style="width: 100%;">
                <el-date-picker
                  v-model="commitTime[0]" placeholder="开始时间" style="width: 100%;"
                  type="date" value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
              <el-form-item label="提交时间" prop="commitTime" style="width: 100%;">
                <el-date-picker
                  v-model="commitTime[1]" :default-time="defaultTime" placeholder="结束时间"
                  style="width: 100%;" type="date"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
            </el-col>
            <div class="po-r-btns">
              <el-button icon="Search" size="small" type="primary" @click="searchFN()">查询</el-button>
              <el-button icon="Refresh" size="small" @click="reset">重置</el-button>
            </div>
          
          </el-row>
        
        </el-form>
        <el-row justify="space-between">
          <div>
            <el-button icon="Plus" type="primary" @click="handleAdd">新建缴费</el-button>
          </div>
        </el-row>
      </div>
      <!-- 表格数据 -->
      <div class="table">
        <el-table
          v-loading="loading" :data="list" :row-class-name="tableRowClassName" border style="width: 100%;"
        >
          <el-table-column label="序号" type="index" width="55" />
          <el-table-column
            align="center"
            label="缴费编号"
            min-width="140"
            prop="wfCode"
            show-overflow-tooltip
          />
          
          <el-table-column
            align="center"
            label="缴费名称"
            min-width="260"
            prop="memName"
            show-overflow-tooltip
          />
          
          <el-table-column
            align="center"
            label="人数合计"
            min-width="90"
          >
            <template #default="{row}">
              {{ row.allCount ?? '/' }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="新会员合计"
            min-width="90"
            prop="newPersonCount"
          >
            <template #default="{row}">
              {{ row.newCount ?? '/' }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="年限合计"
            min-width="90"
            prop="totalYear"
          >
            <template #default="{row}">
              {{ row.yearCount ?? '/' }}
            </template>
          </el-table-column>
          
          <el-table-column
            align="center"
            label="状态"
            min-width="100"
            prop="status"
          >
            <template #default="{row}">
              <div
                :class="{
                  'text-success':row.auditStatus==='2',
                  'text-danger':row.auditStatus==='3'||row.auditStatus==='4',
                  'text-warning':row.auditStatus==='9',
                }"
              >{{ auditStatusTag(row.auditStatus) }}</div>
            </template>
          </el-table-column>
          
          <el-table-column
            align="center"
            label="提交时间"
            min-width="100"
            prop="commitTime"
          >
            <template #default="{row}">
              <span>{{ parseTime(row.commitTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="260"
          >
            <template #default="{row}">
              <el-button type="primary" @click="handleInfo(row)">查看</el-button>
              <el-button v-if="row.auditStatus==='0'" :disabled="row.auditStatus!=0&&row.auditStatus!=9" type="success" @click="commitFN(row)">提交审核
              </el-button>
              <el-button v-else :disabled="row.auditStatus!=='9'" type="success" @click="handlePay(row)">支付
              </el-button>
              <el-dropdown class="poptdmore">
                <el-button
                  plain type="primary"
                >更多
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <el-button
                        :disabled="row.auditStatus!=0"
                        type="warning" @click="handleUpdate(row)"
                      >编辑
                      </el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button
                        :disabled="row.auditStatus==1||row.auditStatus==2||row.auditStatus==9"
                        type="danger" @click="handleDelete(row)"
                      >删除
                      </el-button>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        
        <pagination
          v-show="total > 0"
          v-model:limit="queryParams.pageSize"
          v-model:page="queryParams.pageNum"
          :total="total"
          @pagination="initData"
        />
      </div>
    
    </div>
    <examView ref="examViewRef" :row-data="rowData" />
    <payView ref="payViewRef" />
    <mingPay ref="mingPayRef" />
    <payDetail ref="payDetailRef" @handel-go-pay="handelGoPay" />
    <payOk ref="payOkRef" />
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref, toRefs, onMounted, getCurrentInstance, reactive } from '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'

import examView from './components/examView.vue'
import { dateEnd } from '@/utils/ruoyi'
import { createMemberPayRange, getNewCountByRangeId, listApi, paymentRangeNewDel } from '@/api/member/newMember.js'
import { payForOrder } from '/@/api/system/userInfo'
import { goPay } from '@/api/member/newMember'
const { proxy } = getCurrentInstance()
const defaultTime = ref(new Date(0, 0, 0, 23, 59, 59))
const total = ref(0)
const list = ref([])
const loading = ref(false)
const router = useRouter()
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    noAuditProcess: '1'
  },
  form: {}
})
const commitTime = ref([null, null])
const rowData = ref()
const { queryParams } = toRefs(data)
const countData = ref({})
const nowRangeId = ref()

const auditStatusTag = (row) => {
  const map = {
    0: '待提交',
    1: '审核中',
    2: '审核通过',
    3: '审核拒绝',
    4: '已取消',
    9: '待支付'
  }
  return map[row] || ''
}


onMounted(() => {
  initData()
})

// // 背景色
const tableRowClassName = (row, rowIndex) => {
  if (row.status === '2') {
    return 'success-row'
  }
}

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

async function handleAdd() {
  const res = await createMemberPayRange()
  if (res.data) {
    await router.push({
      path: '/member/memberPay/addMemberPay',
      query: {
        rangId: res.data
      }
    })
  }
}

// 获取赛会列表
async function initData() {
  if ((commitTime.value[0] == null && commitTime.value[1] != null) || (commitTime.value[1] == null && commitTime.value[0] != null)) return proxy.$modal.msgError('请完善提交日期范围')
  if (commitTime.value[1]) commitTime.value[1] = dateEnd(commitTime.value[1])
  queryParams.value.commitTimeRange = commitTime.value[0] != null ? commitTime.value.toString() : null
  loading.value = true
  const res = await listApi(queryParams.value)
  loading.value = false
  list.value = res.rows
  total.value = res.total
}

// 编辑
function handleUpdate(row) {
  router.push({
    path: '/member/memberPay/addMemberPay',
    query: {
      rangId: row.rangId
    }
  })
}

// 重置
function reset() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10
  }
  commitTime.value = [null, null]
  initData()
}

// 查看
function handleInfo(row) {
  rowData.value = row
  proxy.$refs['examViewRef'].open(row)
}

// 提交审核
async function commitFN(row) {
  nowRangeId.value = row.rangId
  const res = await getNewCountByRangeId(row.rangId)
  countData.value = res.data
  if (res.data.all > 0) {
    proxy.$refs['payDetailRef'].open({
      ...countData.value,
      id: row.rangId
    }, 1)
  } else {
    proxy.$modal.confirm('此缴费单尚未关联学员，请先添加缴费学员。')
  }
}

// 去支付
async function handlePay(row) {
  await proxy.$modal.confirm('是否确认去支付')
  proxy.$refs['payDetailRef'].open({
    all: row.allCount,
    new: row.newCount,
    old: row.oldCount,
    price: row.price,
    id: row.orderId
  }, 2)
}

async function handelGoPay(row, type) {
  const url = window.location.href
  let res
  if (type === 2) {
    res = await payForOrder({
      id: row.id,
      url,
      type: row.type,
      contactPerson: row.contactPerson,
      contactTel: row.contactTel
    })
  } else {
    res = await goPay({
      id: row.id,
      url,
      payType: row.type,
      contactPerson: row.contactPerson,
      contactTel: row.contactTel
    })
  }

  
  if (res.data.payFlag === '2') {
    proxy.$refs['payViewRef'].open(res.data.orderId)
  } else {
    if (res.data.payResult.encryptedData) {
      proxy.$modal.loading()
      proxy.$refs['mingPayRef'].handleSubmit(res.data.payResult.encryptedData)
    }
  }
  
  
  // proxy.$refs['payOkRef'].open(form.value.rangeId)
}


/** 删除按钮操作 */
async function handleDelete(row) {
  await proxy.$modal.confirm('是否确认删除缴费编号为"' + row.wfCode + '"的数据项？')
  loading.value = true
  await paymentRangeNewDel(row.rangId)
  loading.value = true
  await initData()
  await proxy.$modal.msgSuccess('删除成功')
}

</script>

<style lang="scss" scoped>

</style>