<template>
  <div>
    <el-dialog
      v-model="show" class="dialog" title="查看详情" :close-on-click-modal="true" width="80%"
      draggable
      @close="close"
    >
      <h1 class="center">{{ form.finalDocName }}</h1>
      <div class="flex">
        <div v-if="form.payTime">提交日期：<span>{{ form.payTime }}</span> </div>
        <div>提交单位：<span>{{ form.payDeptName }}</span> </div>
      </div>
      <br>
      <el-row class="vipData">
        <div>团体会员合计：
          <span>{{ form.deptCount }}个</span></div>
        <div>年限合计：
          <span>{{ form.yearCount }}年</span>
        </div>
        <div>费用合计：
          <span>{{ form.allPrice }}元</span>
        </div>
      </el-row>
      <br>
      <div>
        <el-table :data="list" max-height="300" border>
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="缴费单名称" align="center" prop="certName" min-width="150" />
          <el-table-column label="缴费单位" align="center" min-width="120" prop="memberName" />
          <el-table-column label="提交时间" align="center" prop="commitTime">
            <template #default="scope">
              <span>{{ parseTime(scope.row.commitTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        
          <el-table-column label="原有效期" align="center" prop="validityTime">
            <template #default="scope">
              <span>{{ parseTime(scope.row.validityTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="单价" align="center" prop="unitPrice">
            <template #default="scope">
              <div>
                {{ (scope.row.unitPrice*1).toFixed(2) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="缴费年限" align="center" prop="renewYear" />
          <el-table-column label="总价" align="center" prop="unitPrice">
            <template #default="scope">
              <div>
                {{ (scope.row.allFee*1).toFixed(2) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="缴费编号" align="center" prop="wfCode" />
        </el-table>
      </div>
      <br>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive } from '@vue/runtime-core'
import { toRefs, getCurrentInstance } from 'vue'
// import { queryByList } from '@/api/member/feeBill'
import { certifiedDoc } from '@/api/groupMember/settlement.js'
const { proxy } = getCurrentInstance()
const emit = defineEmits(['approval'])
const data = reactive({
  show: false,
  form: {},
  list: [],
  queryParams: {},
  arr: [],
  auditList: [],
  getAuditList: []
})
const { show, form, list, queryParams } = toRefs(data)

const exam = null
function open(row) {
  queryParams.value.payId = row
  show.value = true
  initData()
}

// 查询
async function initData() {
  const res = await certifiedDoc(queryParams.value.payId)
  list.value = res.data.certList
  // arr.value = JSON.parse(JSON.stringify(list.value))
  form.value = res.data
  console.log(list.value)
}

// // 查询
// async function selectFN() {
//   const arr1 = JSON.parse(JSON.stringify(list.value))
//   queryParams.value.list = JSON.stringify(arr1)
//   const res = await queryByList(queryParams.value)
//   list.value = res.data
// }


// // 重置
// function rest() {
//   list.value = arr.value
//   queryParams.value = {}
// }

// 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
}

defineExpose({
  open,
  close: () => {
    show.value = true
  }
})

</script>

<style lang="scss" scoped>
.center{
  text-align: center;
  margin-top: 0;
}
.flex{
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}

.x-flex{
  display: flex;
  font-size: 16px;
  .b-box{
    display: flex;
    border:1px solid #f8f8f9;
    div{
      padding: 10px;
      // justify-content: center;
      width: 200px;
    }
  }
  
}
.el-button {
  margin-bottom: 18px;
}

.col{
  display: flex;
  border: 1px solid #f8f8f9;
  div{
    // text-align: center;jus
    justify-content: center;
    width: 50%;
    padding: 10px;
    text-align: center;
  }
  div:first-child{
    background-color:#f8f8f9 ;
  }
}
</style>