<template>
  <el-dialog
    v-model="show" title="合并下发缴费通知单" :close-on-click-modal="true" draggable
    width="80%"
    @close="close"
  >
    <el-form ref="queryRef" size="small" :model="queryParams" :inline="true" label-position="top">
      <el-row style="width: 100%;">
        <el-col :span="4">
          <el-form-item label="省协会" prop="shenId">
            <el-select ref="select" v-model="queryParams.shenId" style="width: 100%;" @change="getList">
              <!-- <el-option label="全部" value="" /> -->
              <el-option v-for="item in list " :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        
      </el-row>
    </el-form>
    <el-row justify="space-between">
      <div>
        <el-button :disabled="showBatch" type="primary" @click="batchInform">合并下发缴费通知单 </el-button>
      </div>
      <div>
        <el-button type="primary" icon="Search" @click="getList">查询</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </div>
    </el-row>
    <br>
    <el-table :data="infoList" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        min-width="140" label="缴费名称" align="center"
        prop="content.certName" :show-overflow-tooltip="true"
      />
      <el-table-column
        min-width="140" label="缴费单位" align="center"
        prop="content.memberName" :show-overflow-tooltip="true"
      />
      <el-table-column
        width="110" label="团体会员合计" align="center"
        prop="content.allCount"
      />
      <el-table-column width="90" label="新会员合计" align="center" prop="content.newCount" />
      <el-table-column width="80" label="年限合计" align="center" prop="content.renewYear" />
      <el-table-column width="80" label="费用合计" align="center" prop="content.allFee" />
      
      <el-table-column label="提交日期" align="center" prop="content.commitTime" width="100">
        <template #default="scope">
          <span>{{ parseTime(scope.row.content.commitTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="90" prop="auditStatus">
        <template #default="scope">
          <div v-if="scope.row.auditStatus == 0">审核中</div>
          <div v-if="scope.row.auditStatus == 1" class="text-success">审核通过</div>
          <div v-if="scope.row.auditStatus == 2" class="text-danger">审核拒绝</div>
          <div v-if="scope.row.auditStatus == 3" class="text-warning">审核撤回</div>
        </template>
      </el-table-column>
      <el-table-column label="缴费通知单" width="110" align="center" prop="years">
        <template #default="scope">
          <div v-if="scope.row.content.sendJiaoFeiDanFlag == 0" class="text-success">已下发</div>
          <div v-if="scope.row.content.sendJiaoFeiDanFlag == 1" class="text-warning">未下发</div>
          <div v-if="!scope.row.content.sendJiaoFeiDanFlag">/</div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { ref, toRefs } from 'vue'
import { verifyList, sendPayNoticeForShen } from '@/api/groupMember/authentication.js'
import { deptTreeSelect } from '@/api/system/user'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['approval'])
const list = ref([])
const batch = ref([])
const total = ref(0)
const showBatch = ref(true)
const data = reactive({
  show: false,
  queryParams: {
    sendJiaoFeiDanFlag: 1,
    status: 1,
    pageNum: 1,
    pageSize: 10,
    noEmpty: 1
  }
})
const { show, queryParams } = toRefs(data)
const infoList = ref([])

function open() {
  getList()
  getTree()
  show.value = true
}

function close() {
  show.value = false
  queryParams.value = {
    sendJiaoFeiDanFlag: 1,
    status: 1,
    pageNum: 1,
    pageSize: 10,
    noEmpty: 1
  }
  console.log(11111)
  
  emit('approval')
}

function handleSelectionChange(e) {
  console.log(e)
  batch.value = JSON.parse(JSON.stringify(e))
  showBatch.value = !batch.value.length
}

async function getList() {
  const res = await verifyList(queryParams.value)
  infoList.value = res.rows
  total.value = res.total
  for (const item of infoList.value) {
    item.content = JSON.parse(item.content)
  }
  console.log(res)
}

async function getTree(params) {
  const res = await deptTreeSelect({ selfDeptId: '-1', fromTree: 1
  })
  list.value = res.data?.[0].children
  console.log(list.value)
}

function resetQuery() {
  queryParams.value = {
    status: 1,
    sendJiaoFeiDanFlag: 1,
    pageNum: 1,
    pageSize: 10,
    noEmpty: 1
  }
  getList()
}

async function batchInform() {
  const arr = []
  const batchList = JSON.parse(JSON.stringify(batch.value))
  batchList.forEach(item => {
    arr.push(item.documentCode)
  })
  const res = await sendPayNoticeForShen(arr)
  if (res.code == 200) {
    getList()
    proxy.$modal.msgSuccess('操作成功')
  }
}
defineExpose({
  open,
  close
})

</script>

<style scoped>

</style>