<template>
  <div class="">
    <div class="from-Card">
      <el-form
        ref="queryRef" size="small" :model="queryParams" :inline="true" label-width="100px"
        label-position="top"
      >
        <el-row justify="" style="width: 100%; ">
          <el-col :span="4">
            <el-form-item label="缴费编号" prop="wfCode">
              <el-input v-model.trim="queryParams.wfCode" style="width: 100%;" @keyup.enter="searchFN" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="缴费单位" prop="memName">
              <el-input v-model.trim="queryParams.memName" style="width: 100%;" @keyup.enter="searchFN" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="审核状态" prop="auditStatus">
              <el-select v-model.trim="queryParams.auditStatus" style="width: 100%;" placeholder="" @change="searchFN">
                <el-option label="全部" value="" />
                <el-option label="审核中" value="1" />
                <el-option label="审核通过" value="2" />
                <el-option label="审核拒绝" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          
          <el-col :span="8" style="display: flex;">
            <el-form-item style="width: 100%;" label="提交日期" prop="isBlack">
              <el-date-picker
                v-model.trim="commitTime[0]"
                style="width: 100%;"
                type="date"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="开始时间"
              />
            </el-form-item>
            <el-form-item style="width: 100%;" label="提交日期" prop="isBlack">
              <el-date-picker
                v-model.trim="commitTime[1]"
                style="width: 100%;"
                type="date"
                value-format="YYYY-MM-DD  HH:mm:ss"
                placeholder="结束时间"
                :default-time="defaultTime"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="!showCollect" :span="8" style="display: flex;">
            <el-form-item style="width: 100%;" label="审核日期" prop="overDateRange">
              <el-date-picker
                v-model.trim="overDateRange[0]"
                style="width: 100%;" type="date"
                value-format="YYYY-MM-DD  HH:mm:ss"
                placeholder="开始时间"
              />
            </el-form-item>
            <el-form-item style="width: 100%;" label="审核日期" prop="overDateRange">
              <el-date-picker
                v-model.trim="overDateRange[1]"
                style="width: 100%;" type="date"
                value-format="YYYY-MM-DD  HH:mm:ss"
                placeholder="开始时间"
                :default-time="defaultTime"
              />
            </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>
            <el-button
              v-if="showCollect" size="small" type="primary" link icon="ArrowDown"
              @click="showCollect=!showCollect"
            >展开
            </el-button>
            <el-button
              v-else size="small" type="primary" link icon="ArrowUp"
              @click="showCollect=!showCollect"
            >收起
            </el-button>
          </div>
        
        </el-row>
      
      </el-form>
    
    </div>
    
    <div class="table">
      <el-table
        v-loading="loading" border :data="infoList" style="width: 100%;"
        :row-class-name="tableRowClassName" @selection-change="handleSelectionChange"
      >
        <!--        <el-table-column type="selection" width="55" align="center" :selectable="selectable" />-->
        <el-table-column type="index" label="序号" width="55" align="center" />
        
        <el-table-column label="缴费编号" align="center" prop="wfCode" min-width="120" show-overflow-tooltip />
        <el-table-column
          min-width="120" label="缴费单位" align="center"
          prop="memName" show-overflow-tooltip
        />
        <el-table-column
          min-width="120" label="所属协会" align="center"
          prop="shenMemName" show-overflow-tooltip
        />
        <el-table-column width="80" label="新会员" align="center">
          <template #default="{row}">
            {{ row.isNew == 1 ? '是' : "否" }}
          </template>
        </el-table-column>
        <el-table-column width="100" label="认证年限" align="center">
          <template #default="{row}">
            {{ row.renewYear ? row.renewYear + '年' : '--' }}
          </template>
        </el-table-column>
        <el-table-column min-width="100" label="费用合计" align="center" prop="allPrice" />
        <el-table-column min-width="100" label="政策优惠" align="center" prop="discount">
          <template #default="{row}">
            {{ row.discount ? row.discount : '--' }}
          </template>
        </el-table-column>
        <el-table-column min-width="100" label="付款费用" align="center" prop="finalPrice" />
        <el-table-column label="提交日期" align="center" width="100">
          <template #default="{row}">
            <span>{{ parseTime(row.commitTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核日期" align="center" width="100">
          <template #default="{row}">
            <span>{{ parseTime(row.auditTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="协会信息" align="center" width="100" prop="auditStatus">
          <template #default="{row}">
            <span v-if="row.checkPass==0" class="text-danger">异常</span>
            <span v-else class="text-success">正常</span>
          </template>
        </el-table-column>
        
        <el-table-column label="审核状态" align="center" width="90" prop="auditStatus">
          <template #default="{row}">
            <div v-if="row.auditStatus == 1">审核中</div>
            <div v-if="row.auditStatus == 2" class="text-success">审核通过</div>
            <div v-if="row.auditStatus == 3" class="text-danger">审核拒绝</div>
          </template>
        </el-table-column>
      </el-table>
      
      <!--      <div v-show="total>0" class="totalCost">-->
      <!--        费用合计：<span>{{ statistical.totalCost?.toFixed(2) }} 元</span>-->
      <!--        单位会员合计：<span>{{ statistical.allCount }} 人</span>-->
      <!--        新会员合计：<span>{{ statistical.newCount }} 人</span>-->
      <!--        年限合计：<span>{{ statistical.renewYear }} 年</span>-->
      <!--      </div>-->
      
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script setup name="auditZtx">
import { listAPI, ztxAudit } from '@/api/groupMember/audit'
import { dateEnd } from '@/utils/ruoyi'
import { ref, getCurrentInstance, reactive, toRefs, onMounted, nextTick } from 'vue'
import { info } from '@/api/groupMember/authentication.js'

const defaultTime = ref(new Date(0, 0, 0, 23, 59, 59))

const overDateRange = ref([null, null])
const statistical = ref({})
const { proxy } = getCurrentInstance()
const infoList = ref([])
const loading = ref(false)
const show = ref(false)
const idsList = ref([])
const multiple = ref(true)
const showCollect = ref(true)
const total = ref(0)
const commitTime = ref([null, null])
const url = ref(null)
const data = reactive({
  form: {
    flag: '1'
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    auditStatus: '1'
  }
})
const { queryParams, form } = toRefs(data)

onMounted(() => {
  getList()
})

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


async function getList() {
  if (commitTime.value[0] == null && commitTime.value[1] != null) return proxy.$modal.msgError('请完善提交时间范围')
  if (commitTime.value[1] == null && commitTime.value[0] != null) return proxy.$modal.msgError('请完善提交时间范围')
  if (overDateRange.value[0] == null && overDateRange.value[1] != null) return proxy.$modal.msgError('请完善审核时间范围')
  if (overDateRange.value[1] == null && overDateRange.value[0] != null) return proxy.$modal.msgError('请完善审核时间范围')
  if (commitTime.value[1]) commitTime.value[1] = dateEnd(commitTime.value[1])
  if (overDateRange.value[1]) overDateRange.value[1] = dateEnd(overDateRange.value[1])
  queryParams.value.commitTimeRange = commitTime.value.length == 2 && commitTime.value[0] != null ? commitTime.value.toString() : null
  queryParams.value.auditTimeRange = overDateRange.value.length == 2 && overDateRange.value[0] != null ? overDateRange.value.toString() : null
  loading.value = true
  const res = await listAPI(queryParams.value)
  infoList.value = res.rows
  statistical.value.renewYear = 0
  statistical.value.totalCost = 0
  statistical.value.newCount = 0
  statistical.value.allCount = 0
  for (const val of infoList.value) {
    statistical.value.renewYear += val.renewYear
    statistical.value.totalCost += val.finalPrice * 1
    if (val.isNew == 1) {
      statistical.value.newCount += 1
    }
    statistical.value.allCount += 1
  }
  total.value = res.total
  loading.value = false
}

/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    auditStatus: ''
  }
  commitTime.value = [null, null]
  overDateRange.value = [null, null]
  getList()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  idsList.value = selection.map(item => item.id)
  multiple.value = !selection.length
}


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

</script>

<style lang="scss" scoped>

</style>