<template>
  <div class="">
    <el-dialog
      v-model="showOpen" title="月结缴费" :close-on-click-modal="true" width="600"
      align-center @close="close"
    >
      <div class="table">
        <el-form-item label="月结时间" prop="payDeptName">
          <el-date-picker
            v-model="olTime" type="daterange" value-format="YYYY-MM-DD"
            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" style="width: 100%;"
          />
        </el-form-item>
        <el-form-item label="缴费单位" prop="memName">
          <el-input
            v-model.trim="queryParams.memName" placeholder="缴费单位" clearable style="width: 100%"
            @keyup.enter="initData"
          />
        </el-form-item>
        <el-row justify="space-between">
          <el-button
            color="#13B5B1" style="--el-color-black:#fff;" :disabled="show" type="warning"
            :icon="DocumentChecked" @click="batchSubmit"
          >生成月结</el-button>
          <span>
            <el-button type="primary" icon="search" @click="initData">查询</el-button>
            <el-button type="" icon="Refresh" @click="reset">重置</el-button>
          </span>
        </el-row>

        <br>
        <br>
        <el-table
          v-loading="loading" :data="list" border style="width: 100%" :row-class-name="tableRowClassName"
          @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="name" min-width="100"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
      <!-- 表格数据 -->
      <examView ref="examViewRef" @approval="initData" />

      <!--      <el-dialog-->
      <!--        v-model="showMon" title="完善信息" :close-on-click-modal="true" width="600"-->
      <!--        align-center @close="closeMn"-->
      <!--      >-->
      <!--        <div>-->
      <!--          <el-form-item label="结算时间" prop="time">-->
      <!--            <el-date-picker-->
      <!--              v-model="mon.time" type="daterange" value-format="YYYY-MM-DD"-->
      <!--              range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" style="width: 100%;"-->
      <!--            />-->
      <!--          </el-form-item>-->
      <!--          <div>-->
      <!--            <br>-->
      <!--            <div style="text-align: center">-->
      <!--              <el-button type="primary" @click="submitMon">确定</el-button>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->

      <!--      </el-dialog>-->

    </el-dialog>

  </div>
</template>

<script setup>
import { getCurrentInstance, toRefs, ref } from 'vue'
import { getWaitYueJieInfoListPage, addYueJie, addYueJie3, getWaitYueJieInfoList } from '@/api/member/monthlyFeeBill'
import { DocumentChecked } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance()
const showOpen = ref(false)
const total = ref(0)
const list = ref([])
const batch = ref([])
const batchList = ref([])
const show = ref(true)
const loading = ref(false)
const olTime = ref([])
const emit = defineEmits(['backInfo'])
const queryParams = ref({})
function open(row) {
  olTime.value = []
  queryParams.value.memName = null
  showOpen.value = true
  initData()
}

async function batchSubmit() {
  // showMon.value = true
  if (!olTime.value || olTime.value?.length <= 1) {
    return proxy.$message.warning('请选择开始日期和结束日期')
  }
  const res = await addYueJie3({
    memIds: batch.value,
    timeBegin: olTime.value[0],
    timeEnd: olTime.value[1]
  })
  if (res.code == 200) {
    proxy.$message.success('操作成功！')
    showOpen.value = false
    emit('backInfo')
  }
}


// 获取赛会列表
async function initData() {
  loading.value = true
  if (olTime.value.length > 0) {
    queryParams.value.startTime = olTime.value[0]
    queryParams.value.endTime = olTime.value[1]
  } else {
    queryParams.value.startTime = null
    queryParams.value.endTime = null
  }
  const res = await getWaitYueJieInfoList(queryParams.value)
  list.value = res.data.map(item => {
    const key = Object.keys(item)[0]
    const value = item[key]
    return { id: key, name: value }
  }) || []
  total.value = res.total
  loading.value = false
}

// 多选
function handleSelectionChange(e) {
  batch.value = e.map(item => item.id)
  batchList.value = e
  show.value = !batch.value.length
}

// // 背景色
const tableRowClassName = ({
  row,
  rowIndex
}) => {
  if (row.auditStatus == 1) {
    return 'success-row'
  }
}


function reset() {
  queryParams.value = {}
  olTime.value = []
  initData()
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.router {
  margin-right: 20px;
}


</style>