<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"
    >

      <div>
        <el-form size="small" label-width="auto" label-position="top">
          <el-row style="width: 100%;">
            <el-col :span="4">
              <el-form-item label="缴费名称" prop="finalDocName">
                <el-input
                  v-model.trim="queryParams.finalDocName" placeholder="" clearable style="width: 100%;"
                  @keyup.enter="initData"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="缴费单位" prop="payDeptName">
                <el-input
                  v-model.trim="queryParams.payDeptName" placeholder="" clearable style="width: 100%;"
                  @keyup.enter="initData"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="缴费编号" prop="">
                <el-input
                  v-model.trim="queryParams.sonWfCode" placeholder="" clearable style="width: 100%"
                  @keyup.enter="initData"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="结算编号" prop="">
                <el-input
                  v-model.trim="queryParams.wfCode" placeholder="" clearable style="width: 100%"
                  @keyup.enter="initData"
                />
              </el-form-item>
            </el-col>
            <el-col style="margin-left: auto" :span="4">
              <div class="flex-r-btns">
                <el-button size="small" type="primary" @click="selectFN">查询</el-button>
                <el-button size="small" @click="rest">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <el-row justify="space-between">
          <div>
            <el-button v-if="form.auditStatus==0" size="small" type="primary" @click="auditFn">审核</el-button>
            <!-- <el-button
              v-if="deptType==2&&stuCertFlag==0" size="small" :disabled="flag" type="primary"
              @click="batchMemberCard"
            >批量下载会员证
            </el-button> -->
          </div>
        </el-row>
      </div>
      <br>
      <div>
        <el-table
          v-loading="loading" :data="list" :row-class-name="tableRowClassName" border
          style="width: 100%" @selection-change="handleSelectionChange"
        >
          <!--          <el-table-column type="selection" width="40" align="center" />-->
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column label="结算编号" align="center" prop="wfCode" min-width="120" :show-overflow-tooltip="true" />
          <!-- <el-table-column
            label="编号"
            align="center"
            prop="docCode"
            min-width="150"
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              {{ scope.row.record.content.wfCode }}
            </template>
          </el-table-column> -->
          <el-table-column
            label="缴费名称" align="center" prop="finalDocName" min-width="260"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="缴费单位" align="center" prop="payDeptName" min-width="120" :show-overflow-tooltip="true" />
          <el-table-column label="人数合计" align="center" prop="personCount" min-width="80" />
          <el-table-column label="审核状态" align="center" prop="auditStatus" min-width="90">
            <template #default="props">
              <div v-if="props.row?.record?.auditStatus == 0">
                审核中
              </div>
              <div v-if="props.row?.record?.auditStatus == 1" class="text-success">
                审核通过
              </div>
              <div v-if="props.row?.record?.auditStatus == 2" class="text-danger">
                审核拒绝
              </div>
              <div v-if="props.row?.record?.auditStatus == 3" class="text-warning">
                已撤回
              </div>
            </template>
          </el-table-column>
          <el-table-column label="年限合计" align="center" prop="yearCount" min-width="110" />
          <el-table-column label="费用合计" align="center" prop="allPrice" min-width="110" />
          <el-table-column label="缴费单下发日期" align="center" prop="payNoticeSendTime" min-width="120">
            <template #default="scope">
              <span>{{ parseTime(scope.row.payNoticeSendTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="审核日期" align="center" prop="settleTime" min-width="100">
            <template #default="scope">
              <span>{{ parseTime(scope.row.record.overDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" class-name="small-padding" width="100">
            <template #default="scope">
              <el-button style="margin-bottom: 0" type="primary" @click="handleInfo(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>

      <View ref="viewRef" />
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive } from '@vue/runtime-core'
import { toRefs, getCurrentInstance, ref } from 'vue'
import { getList } from '@/api/member/feeBill.js'
import View from '@/views/member/feeBill/feeBillView.vue'
const { proxy } = getCurrentInstance()
const emit = defineEmits(['approval'])
const yjId = ref()
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)
const statistical = ref([])
function open(row) {
  yjId.value = queryParams.value.yjId = row.yjId
  show.value = true
  initData()
}

// 查询
async function initData() {
  loading.value = true
  const res = await getList(queryParams.value)
  list.value = res.rows
  list.value.forEach(item => {
    item.payEvidence = JSON.parse(item.payEvidence)
    try {
      item.record.content = JSON.parse(item.record.content)
    } catch (e) {
      console.log(e)
    }
    statistical.value.totalCost += (item.allPrice * 1)
    statistical.value.yearsTotal += (item.yearCount * 1)
    statistical.value.personCount += (item.personCount * 1)
  })
  loading.value = false
}

// 查询
async function selectFN() {
  queryParams.value.pageNum = 1
  await initData()
}

// 重置
function rest() {
  queryParams.value = {}
  queryParams.value.yjId = yjId.value
  selectFN()
}

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

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
  queryParams.value = {
    pageNum: 1,
    pageSize: 10
  }
}

function handleInfo(row) {
  proxy.$refs['viewRef'].open(row)
}

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

.el-form--label-top .el-form-item{
  margin-right: 10px;
}
.first {
  background-color: #f8f8f9;
}
</style>