<template>
  <div class="">
    <el-dialog
      v-model="showOpen" title="月结缴费" :close-on-click-modal="true" width="80%"
      align-center @close="close"
    >
      <!-- 搜索区域 -->
      <div class="from-Card">
        <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="payDeptName">
                <el-input
                  v-model.trim="queryParams.payDeptName" placeholder="缴费单位" clearable style="width: 100%"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结算日期" prop="newTime">
                <el-date-picker
                  v-model="newTime"
                  :disabled-date="disablesDate"
                  type="daterange"
                  value-format="YYYY-MM-DD"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width: 100%;"
                  :clearable="false"
                  @change="searchFN"
                />
              </el-form-item>
            </el-col>
            <div class="po-r-btns">
              <el-button size="small" type="primary" icon="Search" @click="searchFN">查询</el-button>
              <el-button size="small" icon="Refresh" @click="resetQuery">重置</el-button>
            </div>
          </el-row>

        </el-form>
        <el-row justify="space-between">
          <div>
            <el-button
              color="#13B5B1" style="--el-color-black:#fff;" :disabled="show" type="warning"
              :icon="DocumentChecked" @click="batchSubmit"
            >批量提交</el-button>
          </div>

        </el-row>
      </div>

      <div class="table">
        <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="content.wfCode" min-width="100"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="缴费名称" align="center" prop="content.name" min-width="140" :show-overflow-tooltip="true" />
          <el-table-column
            label="缴费单位" align="center" prop="content.memberName" min-width="300"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            label="人数合计" align="center" prop="content.personCount" min-width="90"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            label="新会员" align="center" prop="content.newPersonCount" min-width="80"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="续费" align="center" prop="content.oldPersonCount" min-width="80"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="年限" align="center" prop="content.totalYear" min-width="80"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="费用合计" align="center" prop="content.allFee" min-width="80" :show-overflow-tooltip="true" />
          <el-table-column label="提交日期" align="center" prop="content.commitTime" min-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" prop="content.commitTime" min-width="100">
            <template #default="scope">
              <span>{{ parseTime(scope.row.overDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="审核状态" align="center" prop="auditStatus" min-width="90">
            <template #default="props">
              <div v-if="props.row.auditStatus == 0">
                审核中
              </div>
              <div v-if="props.row.auditStatus == 1" class="text-success">
                审核通过
              </div>
              <div v-if="props.row.auditStatus == 2" class="text-danger">
                审核拒绝
              </div>
              <div v-if="props.row.auditStatus == 3" class="text-warning">
                已撤回
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div v-show="!show" class="totalCost">
          人数合计：<span>{{ statistical.personCount }} 人</span>
          年限合计：<span>{{ statistical.totalYear }} 年</span>
          费用合计：<span>{{ statistical.totalCost?.toFixed(2) }} 元</span>
        </div>


        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="initData"
        />
      </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 { reactive } from '@vue/runtime-core'
import { getWaitYueJieInfoListPage, addYueJie, addYueJie2 } from '@/api/member/monthlyFeeBill'
import { DocumentChecked } from '@element-plus/icons-vue'
const showMon = ref(false)
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 statistical = ref({})
const loading = ref(false)
const mon = ref({})
const olTime = ref([])
const newTime = ref([])
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10
    // auditStatus: '1',
    // yjFlag: '0'
  }
})
const { queryParams } = toRefs(data)

function searchFN() {
  queryParams.value.pageNum = 1
  initData()
}

function open(row) {
  newTime.value = olTime.value = row
  showOpen.value = true
  queryParams.value.beginTime = row[0]
  queryParams.value.endTime = row[1]
  initData()
}

async function batchSubmit() {
  // showMon.value = true
  const res = await addYueJie2({
    rIds: batch.value,
    beginTime: olTime.value[0],
    endTime: olTime.value[1]
  })
  if (res.code == 200) {
    proxy.$message.success('操作成功！')
    searchFN()
  }
}

async function submitMon() {
  if (!mon.value.time || mon.value.time?.length <= 1) {
    return proxy.$message.warning('请选择结算日期')
  }
  const res = await addYueJie({
    rIds: batch.value,
    beginTime: mon.value.time[0],
    endTime: mon.value.time[1]
  })
  if (res.code == 200) {
    proxy.$message.success('操作成功')
    closeMn()
    searchFN()
  }
}

function disablesDate(time) {
  if (newTime.value && newTime.value.length > 0) {
    return time.getTime() > new Date(olTime.value[1].replace(/\-/g, '/')).getTime() ||
      time.getTime() < new Date(olTime.value[0].replace(/\-/g, '/')).getTime()
  }
}

function closeMn() {
  mon.value = {}
  showMon.value = false
}

// 获取赛会列表
async function initData() {
  loading.value = true
  if (newTime.value && newTime.value.length > 0) {
    queryParams.value.beginTime = newTime.value[0]
    queryParams.value.endTime = newTime.value[1]
  } else {
    queryParams.value.beginTime = olTime.value[0]
    queryParams.value.endTime = olTime.value[1]
  }

  const res = await getWaitYueJieInfoListPage(queryParams.value)
  list.value = res.rows || []
  list.value.forEach(item => {
    item.content = JSON.parse(item.content)
  })
  total.value = res.total
  loading.value = false
}

// 多选
function handleSelectionChange(e) {
  batch.value = e.map(item => item.recordId)
  batchList.value = e
  statistical.value = {
    totalCost: 0,
    personCount: 0,
    newPersonCount: 0,
    oldPersonCount: 0,
    totalYear: 0
  }
  batchList.value.forEach(item => {
    statistical.value.totalCost += (item.content.allFee * 1)
    statistical.value.personCount += (item.content.personCount * 1)
    statistical.value.newPersonCount += (item.content.newPersonCount * 1)
    statistical.value.oldPersonCount += (item.content.oldPersonCount * 1)
    statistical.value.totalYear += (item.content.totalYear * 1)
  })
  show.value = !batch.value.length
}

// 重置
function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10
  }
  newTime.value = olTime.value
  initData()
}

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

defineExpose({
  open
})
</script>

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


</style>