<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>
      <el-row justify="space-between">
        <div>
          <el-button
            :disabled="multiple" icon="DocumentChecked" color="#13B5B1" style="--el-color-black:#fff;"
            @click="batchAudit"
          >批量审核
          </el-button>
        </div>
      </el-row>
    </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-column width="260" label="操作" align="center" fixed="right">
          <template #default="{row}">
            <el-button type="primary" @click="handleView(row)">查看</el-button>
            <el-button
              :disabled="(row.auditStatus != 1)"
              type="success" @click="handleAudit(row)"
            >审核
            </el-button>
            <el-button type="warning" @click="handleInfo(row)">机构资料</el-button>
          </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>
    
    
    <!-- 审核 -->
    <el-dialog
      v-model.trim="show" title="单位会员认证审核" destroy-on-close
      width="600"
    >
      <el-form :model="form" label-width="100">
        <el-form-item label="审批结果" prop="flag">
          <el-radio-group v-model.trim="form.flag">
            <el-radio label="1">审批通过</el-radio>
            <el-radio label="0">审批拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="'备注'" prop="reason">
          <el-input v-model.trim="form.reason" type="textarea" rows="5" />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div style="text-align: center;">
          <el-button type="primary" @click="doApproval"> 提交</el-button>
          <el-button @click="show = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    
    <views ref="viewsRef" @approval="getList" />
    <!--    下载缴费凭证-->
    <el-link
      v-show="false" ref="linkRef" class="size" :href="fillImgUrl(url)" :underline="false"
      target="_blank"
    />
    <institution ref="institutionRef" />
    <viewDetails ref="viewDetailsRef" @handel-info="handleInfo" @handle-audit="handleAudit" />
  </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 viewDetails from './viewDetails.vue'
import { info } from '@/api/groupMember/authentication.js'
import views from '@/views/groupMember/authentication/viewsMerge.vue'
import institution from '@/views/groupMember/components/institution.vue'

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
}

// 机构资料
async function handleInfo(row) {
  const res = await info(row.memId)
  proxy.$refs['institutionRef'].open(res.data, 1)
}

function handleView(row) {
  proxy.$refs['viewDetailsRef'].open(row)
}

// 审核
function handleAudit(row) {
  idsList.value = [row.id]
  form.value = {
    flag: '1'
  }
  show.value = true
}

/** 重置按钮操作 */
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
}

function selectable(row) {
  return row.auditStatus == 1
}

// 批量审核
async function batchAudit() {
  form.value = {
    flag: '1'
  }
  show.value = true
}

// 批量审批
async function doApproval() {
  if (!form.value.flag) {
    return proxy.$modal.msgError('请选择审核状态！')
  }
  if (form.value.flag == 0 && !form.value.reason) {
    return proxy.$modal.msgError('请输入拒绝理由')
  }
  form.value.ids = idsList.value
  await ztxAudit(form.value)
  await getList()
  show.value = false
  proxy.$refs['viewDetailsRef'].close()
  await proxy.$modal.msgSuccess('操作成功！')
}

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

// 下载缴费凭证
function downloadOrder(row) {
  const arrUrl = JSON.parse(row.doc.payEvidence)
  url.value = arrUrl?.[0]?.url
  nextTick(() => {
    proxy.$refs['linkRef'].$el.click()
  })
}

</script>

<style lang="scss" scoped>

</style>