<template>
  <el-dialog
    v-model="show" class="dialog" title="查看详情" :close-on-click-modal="true"
    width="80%"
    @close="close"
  >
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="成员信息" name="1">
        <!-- 搜索区域 -->
        <el-form ref="queryRef" size="small" :model="queryParams" :inline="true" label-position="top">
          <el-row style="width: 100%;">
            <el-col :span="4">
              <el-form-item label="姓名" prop="personName">
                <el-input
                  v-model.trim="queryParams.personName"
                  placeholder=""
                  clearable
                  style="width: 214px;"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="证件类型" prop="personIdcType">
                <el-select
                  v-model="queryParams.personIdcType" placeholder="请选择 " style="width: 214px;"
                  @change="searchFN"
                >
                  <el-option
                    v-for="item in idcTypeList" :key="item.value" :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="证件号" prop="personIdcCode">
                <el-input
                  v-model.trim="queryParams.personIdcCode"
                  placeholder=""
                  clearable
                  style="width: 214px;"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            
            <el-col :span="12" style="text-align: right; padding-top: 20px;">
              <!-- <el-form-item label="&nbsp" class="end"> -->
              <el-button type="primary" icon="Search" @click="searchFN()">查询</el-button>
              <el-button icon="Refresh" @click="reset">重置</el-button>
              <el-button icon="" type="warning" @click="exportFn">导出</el-button>
              <!-- </el-form-item> -->
            </el-col>
          </el-row>
        
        </el-form>
        <br>
        <el-table v-loading="loading" :data="list" style="width: 100%" border @sort-change="sortChange">
          <el-table-column label="序号" type="index" width="55" />
          <el-table-column
            label="姓名"
            align="center"
            prop="personName"
            min-width="120"
          />
          <el-table-column
            label="证件类型"
            align="center"
            prop="personIdcType"
            min-width="120"
          >
            <template #default="props">
              <div>{{ idcFilter(props.row.personIdcType) }}</div>
            </template>
          </el-table-column>
          
          <el-table-column
            label="证件号"
            align="center"
            prop="personIdcCode"
            min-width="200"
          >
            <template #default="props">
              <div v-if="props.row.perType==1" />
            </template>
          </el-table-column>
          <!--          <el-table-column-->
          <!--            label="所属单位（单位会员）"-->
          <!--            align="center"-->
          <!--            prop="memberInfoName"-->
          <!--            min-width="160"-->
          <!--            :show-overflow-tooltip="true"-->
          <!--          />-->
          <el-table-column
            label="原有效期"
            align="center"
            prop="originValidityDate"
            min-width="160"
          >
            <template #default="scope">
              <span>{{
                scope.row.personIdcType == 3 ? '--' : parseTime(scope.row.originValidityDate, '{y}-{m}-{d}')
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="续费年限"
            align="center"
            min-width="100"
            prop="payYear"
          />
          <el-table-column
            v-if="form.status==0"
            label="操作"
            align="center"
            min-width="100"
            prop="payYear"
          >
            <template #default="scope">
              <el-button link type="primary" @click="handleDelete(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="getList"
        />
      </el-collapse-item>
      <!-- <div v-if="form.status!=0">
       
        <stepFirst ref="stepFirstRef" />
      </div> -->
      <el-collapse-item title="审核状态" name="2">
        <el-table border :data="feelList" max-height="300">
          <el-table-column label="序号" type="index" width="55" />
          <el-table-column
            label="步骤"
            align="center"
            min-width="120"
          >
            <template #default="{$index}">
              <div>第 {{ $index + 1 }} 步</div>
            </template>
          </el-table-column>
          <el-table-column
            label="审核协会"
            align="center"
            prop="auditDeptName"
            min-width="160"
            :show-overflow-tooltip="true"
          />
          <!-- <el-table-column
            label="审核人"
            align="center"
            prop="auditBy"
            min-width="140"
          /> -->
          <el-table-column
            label="审核时间"
            align="center"
            prop="auditTime"
            min-width="120"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.auditTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="审核状态"
            align="center"
            prop="auditResult"
            min-width="120"
          >
            <template #default="props">
              <div v-if="props.row.auditResult==1" class="text-success">审核通过</div>
              <div v-if="props.row.auditResult==2" class="text-danger"> 审核拒绝</div>
              <div v-if="props.row.auditResult==0"> 审核中</div>
              <div v-if="props.row.auditResult==3" class="text-warning"> 已撤回</div>
            </template>
          </el-table-column>
          <el-table-column
            label="备注"
            align="center"
            min-width="100"
            prop="auditMsg"
          >
            <template #default="props">
              <div> {{ props.row.auditMsg ? props.row.auditMsg : '/' }}</div>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  
  </el-dialog>
</template>

<script setup>
import { reactive } from '@vue/runtime-core'
import { toRefs, ref } from 'vue'
import { addSelectPageList, delPayment, fillAuditLog } from '@/api/member/memberPay.js'
import { getCurrentInstance } from '@vue/runtime-core'
import { idcTypeList, idcFilter } from '@/utils/ruoyi'

const { proxy } = getCurrentInstance()
const data = reactive({
  show: false,
  list: [],
  queryParams: {
    pageSize: 10,
    pageNum1: 1
  },
  form: {}
})
const loading = ref(false)

const feelList = ref([])
const activeNames = ref(['1'])
const total = ref(0)
const { show, list, queryParams, form } = toRefs(data)

function open(params) {
  queryParams.value.rangeId = params.rangId
  console.log(queryParams.value)
  form.value = params
  show.value = true
  getList()
  getFillList()
}

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

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

async function getFillList() {
  const res = await fillAuditLog(form.value.rangId)
  feelList.value = res.data
  console.log(res)
}

function reset() {
  queryParams.value.personIdcCode = ''
  queryParams.value.personIdcType = ''
  queryParams.value.personName = ''
  getList()
}

function close() {
  show.value = false
  queryParams.value.pageSize = 10
  queryParams.value.pageNum1 = 1
}


/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除个人会员信息编号为"' + row.personName + '"的数据项？').then(function() {
    return delPayment([row.payId])
  }).then(() => {
    proxy.$modal.msgSuccess('删除成功')
    getList()
  }).catch(() => {
  }).finally(() => {
  })
}

function exportFn() {
  proxy.download('/person/payment/export/selectPageList', {
    ...queryParams.value
  }, `会员信息_${new Date().getTime()}.xlsx`)
}

defineExpose({
  open,
  close
})

</script>

<style scoped lang="scss">
.shen {
  display: flex;
  margin-bottom: 10px;
}

.shen-right {
  width: 70%;
}

.end {
  margin-left: auto;
}
</style>