<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 label="身份证" value="0" />
                  <el-option label="港澳台通行证" value="1" />
                  <el-option label="外国护照" value="3" />
                  <el-option label="其它" value="4" />
                </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-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>{{ cardType[props.row.personIdcType]?.label }}</div>
              <!--              <div v-if="props.row.personIdcType == 1">护照</div>-->
              <!--              <div v-else>身份证</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>{{ 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'
const { proxy } = getCurrentInstance()
const data = reactive({
  show: false,
  list: [],
  queryParams: {
    pageSize: 10,
    pageNum1: 1
  },
  form: {}
 

})
const loading = ref(false)
const cardType = ref([
  { label: '身份证', value: '0' },
  { label: '港澳台通行证 ', value: '1' },
  { label: '中国护照', value: '2' },
  { label: '外国护照', value: '3' },
  { label: '其它', value: '4' }
])

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
}

defineExpose({
  open,
  close
})

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

</script>

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

// :deep(.dialog){
//   border-radius: 20px !important;
//   padding: 20px !important;
// }

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