<template>
  <div>
    <div>
      <el-tabs
        v-model="queryParams.flowType"
        @tab-change="handleClick"
      >
        <el-tab-pane label="会员调动" name="会员调动审核" />
        <el-tab-pane label="个人缴费" name="个人缴费审核" />
        <el-tab-pane label="级位考试" name="级位考试审核" />
        <!--        <el-tab-pane label="段位考试" name="段位考试审核" />-->
        <el-tab-pane label="段位成绩" name="段位成绩审核" />
        <!--        <el-tab-pane label="越段考试" name="越段考试审核" />-->
        <el-tab-pane label="越段成绩" name="越段成绩审核" />
        <el-tab-pane label="信息合并" name="会员信息合并审核" />
        <el-tab-pane label="信息修改" name="会员信息修改审核" />
        <el-tab-pane label="级位信息修改" name="会员级位信息修改审核" />
      </el-tabs>
    </div>
    <div>
      <el-table v-loading="loading" border :data="list" style="width: 100%">
        <el-table-column label="序号" align="center" type="index" width="55" />
        <el-table-column
          label="业务类型"
          align="center"
          prop="flowTypeStr"
          min-width="130"
        />
        <el-table-column
          label="业务单号"
          align="center"
          prop="flowCode"
          min-width="170"
        />
        <el-table-column
          label="业务状态"
          align="center"
          prop="flowStatus"
          min-width="130"
        />
        <el-table-column
          label="所属省份"
          align="center"
          prop="shenName"
          min-width="180"
        />
        <el-table-column
          label="发起单位"
          align="center"
          prop="memberName"
          min-width="260"
        />
        
        <el-table-column
          label="提交日期"
          align="center"
          prop="examPersonData.handlerDate"
          min-width="220"
        >
          <template #default="scope">
            <div>
              {{ parseTime(scope.row.commitTime, '{y}-{m}-{d}') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="queryParams.flowType=='会员调动审核'"
          label="操作"
          align="center"
          prop="examPersonData.handlerDate"
          width="210"
          fixed="right"
        >
          <template #default="{row}">
            <span>
              <el-button style="width: 2em" type="primary" text :disabled="row.flowStatus=='审核通过'||row.flowStatus=='审核中'" @click="handelDel(row)">删除</el-button>
              <el-button style="width: 4em" type="primary" text :disabled="row.flowStatus=='审核通过'||row.flowStatus=='审核中'" @click="handelDelGather(row)">删除集合</el-button>
              <el-button style="width: 4em" type="primary" text :disabled="row.flowStatus=='审核通过'||row.flowStatus=='草稿状态'" @click="handelDelRefuse(row)">拒绝并删除</el-button>
            </span>
          
          </template>
        </el-table-column>
      
      </el-table>
      
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getAllBusinessFlowByPerId, transferDel, transferRangeDel, manageDel } from '@/api/member/detail'
import { getCurrentInstance } from '@vue/runtime-core'
const list = ref([])
const { proxy } = getCurrentInstance()
const queryParams = ref({
  perId: '',
  flowType: '会员调动审核'
})
const loading = ref(false)
const props = defineProps({
  userId: {
    type: String,
    default: () => ''
  }
})

onMounted(() => {
  queryParams.value.perId = props.userId
  getList()
})

async function getList() {
  loading.value = true
  const res = await getAllBusinessFlowByPerId(queryParams.value)
  list.value = res.data ?? []
  loading.value = false
}

function handleClick() {
  getList()
}

async function handelDel(row) {
  await proxy.$modal.confirm(`确定删除业务单号为${row.flowCode}的数据项？`)
  await transferDel(row.flowId)
  proxy.$modal.msgSuccess('操作成功！')
  await getList()
}

// 删除集合
async function handelDelGather(row) {
  await proxy.$modal.confirm(`确定删除业务单号为${row.flowCode}所在集合所有的数据项？`)
  await transferRangeDel(row.flowRangeId)
  proxy.$modal.msgSuccess('操作成功！')
  await getList()
}

// 删除审核拒绝
async function handelDelRefuse(row) {
  await proxy.$modal.confirm(`确定审核拒绝并删除业务单号为${row.flowCode}所在集合所有的数据项？`)
  await manageDel(row.flowRangeId)
  proxy.$modal.msgSuccess('操作成功！')
  await getList()
}
</script>

<style lang="scss" scoped>
.con{
  padding: 2px;
  border-radius: 2px;
  //text-align: center;
  span{
    margin-left: 5px;
  }
}

.bg{
  color: #d51515;
}
</style>