<template>
  <el-dialog
    v-model="show" class="dialog" title="查看详情" :close-on-click-modal="true"
    width="80%"
    draggable
  >
    <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="queryParams.personName"
                  placeholder=""
                  clearable
                  style="width: 214px;"
                />
              </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;">
                  <el-option label="身份证" value="0" />
                  <el-option label="护照" value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="证件号" prop="personIdcCode">
                <el-input
                  v-model="queryParams.personIdcCode"
                  placeholder=""
                  clearable
                  style="width: 214px;"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" />
            <el-col :span="4" />
            <el-col :span="4">
              <el-form-item label="&nbsp" class="end">
                <el-button type="primary" icon="Search" @click="getList()">查询</el-button>
                <el-button icon="Refresh" @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form> -->
        <br>
        <el-table :data="list" style="width: 100%" border @sort-change="sortChange">
          <el-table-column label="序号" align="center" type="index" width="55" />

          <el-table-column
            label="团体会员"
            align="center"
            prop="memberName"
            min-width="160"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="提交日期"
            align="center"
            prop="commitTime"
            min-width="100"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.commitTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="原有效期"
            align="center"
            prop="validityTime"
            min-width="100"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.validityTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            align="center"
            prop="status"
            min-width="100"
          >
            <template #default="props">
              <div v-if="props.row.status==0">
                待提交
              </div>
              <div v-if="props.row.status==1">
                审核中
              </div>
              <div v-if="props.row.status==2">
                审核通过
              </div>
              <div v-if="props.row.status==3">
                审核拒绝
              </div>
              <div v-if="props.row.status==4">
                撤回
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="续费年限"
            align="center"
            min-width="100"
            prop="renewYear"
          />
          <el-table-column
            label="单价（元）"
            align="center"
            min-width="100"
            prop="unitPrice"
          />
          <el-table-column
            label="总价（元）"
            align="center"
            min-width="100"
            prop="allPrice"
          />
          <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>

      <el-collapse-item title="审核状态" name="2">
        <el-table border :data="feelList" max-height="300">
          <el-table-column label="序号" align="center" 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 { delPayment } from '@/api/member/memberPay.js'
import { getCurrentInstance } from '@vue/runtime-core'
import { fillAuditLog } from '@/api/groupMember/memberPay.js'

const { proxy } = getCurrentInstance()
const data = reactive({
  show: false,
  list: [],
  queryParams: {
    pageSize: 10,
    pageNum1: 1
  },
  form: {}
})
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
  form.value = params
  list.value = params.certList
  // form.value.certId = params.certList[0].certId

  show.value = true
  getFillList()
}

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

defineExpose({
  open,
  close: () => {
    show.value = false
  }
})

/** 删除按钮操作 */
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>