<template>
  <div class="box">
    <el-dialog
      v-if="showBill" v-model="showBill" append-to-body
      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>
        <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 colspan="2" class="bg">账号</td>
          <td colspan="2">{{ form.bankAccount }}</td>
          <td colspan="2" class="bg">账号</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>金额</td>
          <td colspan="3">人民币</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 class="bg" colspan="2">单位</td>
          <td class="bg">年月起</td>
          <td class="bg" colspan="2">年月止</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.certList" :key="item.id">
          <td>{{ index+1 }}</td>
          <td colspan="2">{{ item.memberName }}</td>
          <td>{{ item.validityTimeStr }}</td>
          <td class="ye" colspan="2">{{ item.validityTimeEndStr }}</td>
          <td>{{ item.renewYear }}</td>
          <td>{{ item.unitPrice }}</td>
          <td>{{ item.allFee }}</td>
          <!-- <td><el-button link type="primary" @click="hadingView()">查看</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>
    <!-- 查看 -->
    <viewInfo ref="viewRef" />
  </div>
</template>

<script setup >
import { ref, getCurrentInstance } from 'vue'
import { detail } from '@/api/groupMember/settlement'
import viewInfo from '@/views/groupMember/settlement/view.vue'
import { useRouter } from 'vue-router' 
const { proxy } = getCurrentInstance()
const router = useRouter()
const showBill = ref(false)
const form = ref([])
const docId = ref()


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

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

// 缴费通知单
function downLoadFN() {
  // proxy.download(
  //   `/member/certifiedDoc/downJiaoFei/${[docId.value]}`, {}
  // )
  const routerData = router.resolve({
    path: '/download',
    query: {
      arr: [docId.value],
      type: 'batchGroupMemberFeeBill'
    }
  })
  window.open(routerData.href, '_blank')
}

defineExpose({
  open
})
</script>

<style scope>
td{
  text-align: center;
  padding: 10px;
}
.B{
  font-weight: 600;
}
.bg{
  background-color:#f8f8f9 ;
}
</style>