<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">-->
      <!--            &lt;!&ndash;            <el-col :span="4">&ndash;&gt;-->
      <!--            &lt;!&ndash;              <el-form-item label="所属单位">&ndash;&gt;-->
      <!--            &lt;!&ndash;                <el-input v-model.trim="queryParams.name" placeholder="" style="width: 214px;" @keyup.enter="selectFN" />&ndash;&gt;-->
      <!--            &lt;!&ndash;              </el-form-item>&ndash;&gt;-->
      <!--            &lt;!&ndash;            </el-col>&ndash;&gt;-->
      
      <!--            &lt;!&ndash;            <el-col :span="4" style="margin-left: auto">&ndash;&gt;-->
      <!--            &lt;!&ndash;              <div class="flex-r-btns">&ndash;&gt;-->
      <!--            &lt;!&ndash;                <el-button size="small" type="primary" @click="selectFN">查询</el-button>&ndash;&gt;-->
      <!--            &lt;!&ndash;                <el-button size="small" @click="rest">重置</el-button>&ndash;&gt;-->
      <!--            &lt;!&ndash;              </div>&ndash;&gt;-->
      <!--            &lt;!&ndash;            </el-col>&ndash;&gt;-->
      <!--          </el-row>-->
      <!--        </el-form>-->
      
      <!--      </div>-->
      <!--      <br>-->
      <div style="text-align: right">
        <el-button type="warning" :icon="Download" @click="handeDowen">导出</el-button>
      </div>
      <div>
        <el-table v-loading="loading" :data="list" max-height="600" border @selection-change="handleSelectionChange">
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column label="缴费编号" align="center" prop="code" min-width="120" />
          <el-table-column label="所属一级协会" align="center" prop="firstDeptName" min-width="140" />
          <el-table-column label="所属单位(单位会员)" align="center" prop="memberName" min-width="180" />
          <el-table-column label="单价" align="center" prop="unitPrice" min-width="100" />
          <el-table-column label="人数合计" align="center" prop="personCount" min-width="100" />
          <el-table-column label="缴费年限" align="center" prop="yearCount" min-width="100" />
          <el-table-column label="总价" align="center" prop="allPrice" min-width="100" />
          <el-table-column label="操作" align="center" min-width="100">
            <template #default="scope">
              <el-button type="primary" @click="handelVie(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="selectFN"
        />
      </div>
      <br>
      <viewView ref="viewViewRef" />
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive } from '@vue/runtime-core'
import { toRefs, getCurrentInstance, ref } from 'vue'
import { detail } from '@/api/member/feeBill'
import { getDetailDaoguanList } from '@/api/member/audit.js'
import viewView from '@/views/member/components/viewView.vue'
import { Download } from '@element-plus/icons-vue'

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 } = 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
  queryParams.value.recordId = row.recordId
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  show.value = true
  initData()
  selectFN()
}

// 查询
async function initData() {
  const res = await detail(queryParams.value.payId)
  form.value = res.data
}

// 查询
async function selectFN() {
  loading.value = true
  const res = await getDetailDaoguanList(queryParams.value)
  list.value = res.rows
  total.value = res.total
  loading.value = false
}

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

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

// 查看
function handelVie(row) {
  proxy.$refs['viewViewRef'].open(row, queryParams.value.recordId, true)
}

function handeDowen() {
  proxy.download(
    `/person/paymentRange/exportDetailDaoguanList`, { ...queryParams.value }, '缴费单.xlsx'
  )
}

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>