<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <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="searchFN" />
            </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
            :icon="DocumentChecked" color="#13B5B1" style="--el-color-black:#fff;" :disabled="show" type="warning"
            @click="batchAudit"
          >批量审核</el-button> -->
          <el-button :icon="CopyDocument" :disabled="show" type="primary" @click="mergeFeel">合并  </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="selectEnable" 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-danger">
              审核拒绝
            </div>
            <div v-if="props.row.auditStatus==3" class="text-warning">
              已撤回
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="审核进度"
          align="center"
          prop=""
          min-width="120"
        >
          <template #default="props">
            <schedule v-if="props.row.auditStatus == 1||props.row.auditStatus == 0" :audit-process="props.row.auditProcess" />
            <!-- <div v-if="props.row.auditStatus==0||props.row.auditStatus==1||props.row.auditStatus==3">
              <schedule :audit-process="props.row.auditProcess" />
            </div>

            <div v-if="props.row.auditStatus==2">
              <el-progress :percentage="0" />
            </div> -->
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          class-name="small-padding"
          width="120"
        >
          <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="" @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="examViewEmit" />
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue'
import { reactive } from '@vue/runtime-core'
import { ref, toRefs, onMounted } from 'vue'
import { verifyList, mergeApi } from '@/api/member/audit.js'
import schedule from '@/views/member/components/schedule.vue'
import { useRouter } from 'vue-router'

import { CopyDocument } from '@element-plus/icons-vue'
// import DoDialog from '../do.vue'
import examView from '@/views/member/components/examView.vue'
// const deptType = computed(() => useUserStore().deptType)
const { proxy } = getCurrentInstance()
const router = useRouter()
const loading = ref(false)
const showCollect = ref(true)
const total = ref(0)
const list = ref([])
const batchList = ref([])
const batch = ref([])
const show = ref(true)
const emit = defineEmits(['skip'])
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    mergeFlag: 0,
    auditStatus: '1'

  }
})
const commitTime = ref([])
const { queryParams } = toRefs(data)
const statistical = ref({})

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

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

// 合并缴费单
async function mergeFeel() {
  const res = await mergeApi({ recordIds: batch.value })
  if (res.code == 200) {
    // proxy.$modal.msgSuccess('操作成功！')
    initData()

    proxy.$modal.confirm('合并完成，是否进行审核数据提交？')
      .then(() => {
        router.push({
          path: '/member/memberSubmit'
        })
      })
  }
  console.log(res)
}

// 获取赛会列表
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
}

// 查看
function handleInfo(row) {
  console.log(row)
  proxy.$refs['examViewRef'].open(row)
}
function examViewEmit() {
  proxy.$refs['examViewRef'].close()
  initData()
}

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

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

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

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

// function netAuditFn(flag) {
//   console.log(flag)
//   if (flag == 1) {
//     proxy.$alert(
//       "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
//         '如需提交下一步审核，请将当前页面审核通过的流程合并后提交！' +
//         '</div>',
//       '提示',
//       { dangerouslyUseHTMLString: true }
//     )
//   }
//   initData()
// }
</script>

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


</style>