<template>
  <div>
    <el-dialog
      v-if="showBill" v-model="showBill" append-to-body
      title=""
      width="1000px"
    >
      <h1 class="B" style="text-align: center; margin-top: 0;"> 
        个人会员缴费通知单</h1>
      <el-row justify="space-between">
        <el-form-item label="编号:"><span class="B">{{ form.wfCode }}</span> </el-form-item>
        <!-- <el-form-item label="缴费日期:">{{ parseTime(form.settleTime, '{y}-{m}-{d}') }}</el-form-item> -->
        <div>
          <el-button link type="primary" @click="DownloadFN">下载</el-button>
        </div>
      </el-row>
      <!-- <br> -->
      <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td class=" bg " colspan="3">缴费单位</td>
          <td colspan="2">{{ form.payDeptName }}</td>
          <td class=" bg" colspan="3">资金用途</td>
          <td colspan="2">{{ form.feeUseWhy }}</td>
        </tr>
        <tr>
          <td style="width: 10%;" class="bg" rowspan="3">缴 <br> 款<br>人</td>
          <td style="width: 20%;" colspan="2" class="bg">开户行</td>
          <td style="width: 20%;" colspan="2">{{ form.bankName }}</td>
          <td style="width: 10%;" class="bg" rowspan="3">收<br>款<br>人</td>
          <td style="width: 20%;" colspan="2" class="bg">开户行</td>
          <td style="width: 20%;" colspan="2">{{ form.accountBank }}</td>
        </tr>
        <tr>
          <td class="bg" colspan="2">账号</td>
          <td colspan="2">{{ form.bankAccount }}</td>
          <td class="bg" colspan="2">账号</td>
          <td colspan="2">{{ form.accountNum }}</td>
        </tr>
        <tr>
          <td colspan="2" class="bg">名称</td>
          <td colspan="2">{{ form.bankAccountName }}</td>
          <td colspan="2" class="bg">名称</td>
          <td colspan="2">{{ form.accountName }}</td>
        </tr>
      
        <tr>
          <td class="bg">金额</td>
          <td colspan="3" class="bg">人民币</td>
          <td colspan="3">{{ form.chinesePrice }}</td>
          <td colspan="3">{{ form.allPrice }}</td>
        </tr>
        <tr>
          <td class="bg" colspan="10">缴费明细</td>
        </tr>
        <tr>
          <td class="bg">序号</td>
          <td colspan="2" class="bg"> 团体会员</td>
          <td class="bg">所属一级协会</td>
          <td colspan="2" class="bg">缴费人员</td>
          <td class="bg">缴费年限</td>
          <td class="bg">单价（元）</td>
          <td class="bg">费用总计（元）</td>
          <td class="bg">操作</td>
        </tr>
        <tr v-for="(item,index) in form.personPaymentByMemberList" :key="item.id">
          <td>{{ index+1 }}</td>
          <td colspan="2">{{ item.memberName }}</td>
          <td colspan="2">{{ item.firstDeptName }}</td>
          <td>{{ item.personCount }}</td>
          <td>{{ item.yearCount }}</td>
          <td>{{ item.unitPrice }}</td>
          <td>{{ item.allPrice }}</td>
          <td><el-button link type="primary" @click="hadingView(item)">查看</el-button></td>
        </tr>
      </table>
      <br>
      <el-row justify="space-between">
        <el-form-item label="经办人:"><span class="B">{{ form.createBy }}</span> </el-form-item>
        <el-form-item label="经办时间:"> <span class="B">{{ parseTime(form.createTime, '{y}-{m}-{d}') }}</span> </el-form-item>
      </el-row>

    </el-dialog>
    <feeBillView ref="feeBillViewRef" />
    <examime ref="examimeRef" />
  </div>
  
</template>

<script setup >
import { ref, getCurrentInstance } from 'vue'
import feeBillView from '@/views/member/feeBill/feeBillView.vue'
import examime from '@/views/member/feeBill/examine.vue'
import { useRouter } from 'vue-router'
import { feelDetail } from '@/api/member/feeBill.js'
const { proxy } = getCurrentInstance()

const showBill = ref(false)
const form = ref([])
const docId = ref()
const router = useRouter()

function open(num) {
  showBill.value = true
  docId.value = num
  getList()
}

async function getList() {
  const res = await feelDetail({ docId: docId.value })
  form.value = res.data
  console.log(res)
}

// 缴费单
async function DownloadFN() {
  // proxy.download(
  //   `/person/paymentDoc/downJiaoFei/${[docId.value]}`, {}, ``
  // )
  const routerData = router.resolve({
    path: '/download',
    query: {
      arr: [docId.value],
      type: 'batchMemberFeeBill'
    }
  })

  window.open(routerData.href, '_blank')
}

function hadingView(row) {
  // proxy.$refs['feeBillViewRef'].open(form.value, row.memId)
  proxy.$refs['examimeRef'].open(form.value, row.memId)
}

defineExpose({
  open
})
</script>

<style scope>
td{
  text-align: center;
  padding: 10px;
}

.you{
  width: 140px;
}
.box{
  width: 1000px;
  margin:  0 auto;
}
.ye{
  width: 100px;
}


.B{
  font-weight: 600;
}

.bg{
  background-color: #f5f7f9;
}
</style>