<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>
        </tr>
        <tr v-for="(item,index) in form.personPaymentByMemberList" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td colspan="2">{{ item.jfName }}</td>
          <td colspan="2">{{ item.memberName }}</td>
          <td>{{ item.personCount }}</td>
          <td>{{ item.yearCount }}</td>
          <td>{{ item.unitPrice }}</td>
          <td>{{ item.allPrice }}</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.createTimeStr, '{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 { detail } from '@/api/member/monthlyFeeBill'

const { proxy } = getCurrentInstance()

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

function open(row) {
  showBill.value = true
  yjId.value = row.yjId
  getList()
}

async function getList() {
  const res = await detail({ yjId: yjId.value })
  form.value = res.data
}

// 缴费单
async function DownloadFN() {
  const routerData = router.resolve({
    path: '/download',
    query: {
      arr: [yjId.value],
      type: 'batchMemberYJFeeBill'
    }
  })
  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>