<template>
  <div>
    <el-dialog
      v-if="show" v-model="show" class="dialog" title="查看详情" :close-on-click-modal="true"
      width="80%"
      draggable
      align-center
      @close="close"
    >
      <h1 class="center">{{ form.finalDocName }}</h1>
      <div class="flex">
        <div v-if="form.payTime">提交日期：<span>{{ form.payTime }}</span></div>
        <div v-if="form.payDeptName">提交单位：<span>{{ form.payDeptName }}</span></div>
      </div>
      <br>
      <div class="vipData">
        <div>人数合计：
          <span>{{ form.allPersonCount }} 人</span>
        </div>
        <div>新会员合计：
          <span>{{ form.newPersonCount }} 人</span>
        </div>
        <div>续费合计人数：
          <span>{{ form.oldPersonCount }} 人</span>
        </div>
        <div>费用合计：
          <span>{{ form.allPrice }} 元</span>
        </div>
      </div>
      <br>
      <div>
        <el-form size="small" label-width="auto" label-position="top">
          <el-row gutter="15">
            <el-col :span="5">
              <el-form-item label="姓名">
                <el-input v-model.trim="queryParams.name" placeholder="" style="width: 214px;" @keyup.enter="selectFN" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="证件类型">
                <el-select v-model="queryParams.idcType" style="width: 214px;" @change="selectFN">
                  <!-- <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-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="证件号码">
                <el-input v-model.trim="queryParams.idcCode" style="width: 214px;" placeholder="请输入" @keyup.enter="selectFN" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="缴费编号">
                <el-input v-model.trim="queryParams.code" style="width: 214px;" placeholder="请输入" @keyup.enter="selectFN" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <div class="flex-r-btns">
                <el-button size="small" type="primary" @click="selectFN">查询</el-button>
                <el-button size="small" @click="rest">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <el-row justify="space-between">
          <div>
            <el-button v-if="form.auditStatus==0" size="small" type="primary" @click="auditFn">审核</el-button>
            <!-- <el-button
              v-if="deptType==2&&stuCertFlag==0" size="small" :disabled="flag" type="primary"
              @click="batchMemberCard"
            >批量下载会员证
            </el-button> -->
          </div>
        </el-row>
      </div>
      <br>
      <div>
        <el-table v-loading="loading" :data="list" max-height="600" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40" align="center" />
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column label="缴费编号" align="center" prop="wfCode" min-width="120" />
          <el-table-column label="姓名" align="center" prop="personName" min-width="100" />
          <el-table-column label="证件类型" align="center" prop="personIdcType" min-width="90">
            <template #default="scope">
              <div v-if="scope.row.personIdcType==0">身份证</div>
              <div v-if="scope.row.personIdcType==2">中国护照</div>
              <div v-if="scope.row.personIdcType==1">港澳台通行证</div>
              <div v-if="scope.row.personIdcType==3">外国护照</div>
              <div v-if="scope.row.personIdcType==4">其它</div>
            </template>
          </el-table-column>
          <el-table-column label="证件号码" align="center" prop="personIdcCode" min-width="170" />
          <el-table-column label="所属单位（团体会员）" align="center" prop="memberInfoName" min-width="140" />
          <el-table-column label="原有效期" align="center" prop="originValidityDate" min-width="100">
            <template #default="scope">
              <span>{{
                scope.row.originValidityDate ? parseTime(scope.row.originValidityDate, '{y}-{m}-{d}') : '/'
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="单价" align="center" prop="unitPrice" min-width="100" />
          <el-table-column label="缴费年限" align="center" prop="payYear" min-width="100" />
          <el-table-column label="总价" align="center" prop="allPrice" min-width="100" />
        </el-table>
        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="selectFN"
        />
      </div>
      <br>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive } from '@vue/runtime-core'
import { toRefs, getCurrentInstance, ref, computed } from 'vue'
import { detail, queryByList } from '@/api/member/feeBill'
import useUserStore from '@/store/modules/user'
import { useRouter } from 'vue-router'

const memId = ref()
const router = useRouter()
const { proxy } = getCurrentInstance()
const emit = defineEmits(['approval'])
const data = reactive({
  show: false,
  form: {},
  list: [],
  queryParams: {
    pageSize: 10,
    pageNum: 1
  },
  arr: [],
  auditList: [],
  getAuditList: []
})
const { show, form, list, queryParams, arr } = toRefs(data)
const total = ref(1)
const flag = ref(true)
const exam = null
const lists = ref()
const loading = ref(false)
function open(row, id) {
  queryParams.value.payId = row.docId
  memId.value = id
  show.value = true
  initData()
  console.log(memId.value)
}

// 查询
async function initData() {
  loading.value = true
  const res = await detail(queryParams.value.payId)
  list.value = res.data.personPaymentList
  arr.value = JSON.parse(JSON.stringify(list.value))
  form.value = res.data
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  selectFN()
  loading.value = false
}

// 查询
async function selectFN() {
  queryParams.value.list = JSON.stringify(arr.value)
  const res = await queryByList(queryParams.value, { pageNum: queryParams.value.pageNum, pageSize: queryParams.value.pageSize })
  list.value = res.data.rows
  total.value = res.data.total
}

// 重置
function rest() {
  list.value = arr.value
  queryParams.value.code = null
  queryParams.value.idcCode = null
  queryParams.value.idcType = null
  queryParams.value.name = null
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  selectFN()
}

// 多选
function handleSelectionChange(e) {
  if (e.length > 0) {
    flag.value = false
    lists.value = JSON.parse(JSON.stringify(e))
  } else {
    flag.value = true
  }
}

function auditFn() {
  const fromData = JSON.parse(JSON.stringify(form.value))
  fromData.content = JSON.stringify(fromData.content)
  proxy.$refs['DoAudit'].open(JSON.stringify([fromData]))
}

function close() {
  emit('approval', exam)
  show.value = false
  queryParams.value = {
    pageNum: 1,
    pageSize: 10
  }
}

defineExpose({
  open,
  close
})

// // 批量下载会员证
// function batchMemberCard() {
//   const arr = []
//   lists.value.forEach(item => {
//     arr.push(item.payId)
//   })
//   const routerData = router.resolve({
//     path: '/download',
//     query: {
//       arr: arr,
//       type: 'Member'
//     }
//   })
//   window.open(routerData.href, '_blank')
// }

</script>

<style lang="scss" scoped>
.center {
  text-align: center;
  margin-top: 0;
}

.flex {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  // div{
  //   margin-left: 40px;
  //   margin-right: 40px;
  // }
}

.x-flex {
  display: flex;
  font-size: 16px;

  div {
    margin-right: 40px;

    span {
      color: #920f20;
      font-size: 20px;
    }
  }
}

.el-button {
  margin-bottom: 18px;
}

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

.col-4 {
  border: 1px solid #ebeef5;
  padding: 10px;
  text-align: center;
  font-size: 16px;
}

.first {
  background-color: #f8f8f9;
}
</style>