<template>
  <div class="">
    <!-- 搜索区域 -->
    <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="5">
            <el-form-item label="缴费名称" prop="paymentName">
              <el-input
                v-model.trim="queryParams.paymentName" placeholder="缴费名称" clearable style="width: 100%"
                @keyup.enter="searchFN"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <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="5">
            <el-form-item label="状态" prop="status">
              <el-select ref="select" v-model="queryParams.auditStatus" style="width: 100%;" @change="searchFN">
                <el-option label="全部" value="" />
                <el-option label="审核中" value="0" />
                <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="5">
            <el-form-item label="缴费编号" prop="flowCode">
              <el-input v-model.trim="queryParams.flowCode" style="width: 100%;" @keyup.enter="initData" />
            </el-form-item>
          </el-col>
          <el-col :span="10" :hidden="showCollect">
            <el-form-item label="提交日期" prop="commitTime">
              <el-date-picker
                v-model="commitTime" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" style="width: 100%;"
                @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>
            <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>
      <el-row justify="space-between">
        <div>
          <el-button
            color="#13B5B1" style="--el-color-black:#fff;" :icon="DocumentChecked" :disabled="show"
            type="warning" @click="auditTime"
          >批量审批</el-button>
        </div>
      </el-row>
    </div>
    <div class="table">
      <el-table
        v-loading="loading" :data="list" border style="width: 100%" :row-class-name="tableRowClassName"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" :selectable="selectable" 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="150"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="缴费名称" align="center" prop="content.name" min-width="260" :show-overflow-tooltip="true" />
        <el-table-column
          label="缴费单位" align="center" prop="content.memberName" min-width="100"
          :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.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="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-warning">
              审核拒绝
            </div>
            <div v-if="props.row.auditStatus == 3" class="text-danger">
              已撤回
            </div>

          </template>
        </el-table-column>
        <el-table-column label="审核进度" align="center" prop="" min-width="120">
          <template #default="props">

            <div v-if="props.row.auditStatus == 1||props.row.auditStatus == 0">
              <schedule :audit-process="props.row.auditProcess" />
            </div>

            <!-- <div v-if="props.row.auditStatus==2">
              <el-progress :percentage="0" />
            </div> -->
            <!-- <div v-if="props.row.auditStatus==3">
              <el-progress :percentage="0" />
            </div> -->
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="260">
          <template #default="scope">
            <el-button type="primary" @click="handleInfo(scope.row)">查看</el-button>
            <el-button
              color="#13B5B1" style="--el-color-black:#fff;" :disabled="!(scope.row.auditStatus == 0)"
              type="primary" @click="handleAudit(scope.row)"
            >
              审核
            </el-button>
            <el-button
              :disabled="!(scope.row.auditStatus == 1 && scope.row.isView == 1)" type="danger"
              @click="handleDelete(scope.row)"
            >撤回
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div v-show="total>0" class="totalCost">
        人数合计：<span>{{ statistical.personCount }} 人</span>
        新会员合计：<span>{{ statistical.newPersonCount }} 人</span>
        续费合计：<span>{{ statistical.oldPersonCount }} 人</span>
        年限合计：<span>{{ statistical.totalYear }} 年</span>
      </div>

      <pagination
        v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
        :total="total" @pagination="initData"
      />
    </div>
    <!-- 表格数据 -->
    <DoDialog ref="DoAudit" @approval="initData" />
    <examView ref="examViewRef" @approval="initData" />
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue'
import { reactive } from '@vue/runtime-core'
import { ref, toRefs, onMounted } from 'vue'
import { verifyList, withDraw } from '@/api/member/audit.js'
import schedule from '@/views/member/components/schedule.vue'
import { DocumentChecked } from '@element-plus/icons-vue'

import DoDialog from '../do.vue'
import examView from '../../components/examView.vue'

// const deptType = computed(() => useUserStore().deptType)
const { proxy } = getCurrentInstance()
const total = ref(0)
const list = ref([])
const batch = ref([])
const show = ref(true)
const loading = ref(false)
const emit = defineEmits(['skip'])
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    auditStatus: '0'
  }
})
const commitTime = ref([])
const { queryParams } = toRefs(data)
const showCollect = ref(true)
const statistical = ref({})

onMounted(() => {
  initData()
  emit('skip', 1)
})

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

// 获取赛会列表
async function initData() {
  statistical.value = {
    personCount: 0,
    newPersonCount: 0,
    oldPersonCount: 0,
    totalYear: 0
  }
  
  loading.value = true

  queryParams.value.commitTimeRange = commitTime.value?.toString()
  const res = await verifyList(queryParams.value)
  list.value = res.rows || []
  list.value.forEach(item => {
    item.content = JSON.parse(item.content)

    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)
  })
  total.value = res.total
  loading.value = false
  console.log(list.value)
}

// 查看
function handleInfo(row) {
  proxy.$refs['examViewRef'].open(row, true)
}

// 禁选
function selectable(row) {
  if (row.auditStatus == 0) {
    return true
  } else {
    return false
  }
}

// 审核
function handleAudit(row) {
  console.log(row)

  proxy.$refs['DoAudit'].open([row.recordId])
}

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


// 批量审核
function auditTime() {
  proxy.$refs['DoAudit'].open(batch.value)
}

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

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

function handleDelete(row) {
  proxy.$modal.confirm('是否确认撤回缴费名称为"' + row.content.name + '"的数据项？').then(function() {
    return withDraw({ recordId: row.recordId, reason: row.reason })
  }).then(() => {
    initData()
    proxy.$modal.msgSuccess('操作成功！')
  }).catch((err) => {
    console.log(err)
  }).finally((a) => {
    console.log(a)
  })
}

</script>

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