<template>
  <div style="background-color: #f5f7f9;padding: 20px;">
    <div>
      <!-- 搜索区域 -->
      <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="4">
              <el-form-item label="变更单号" prop="code">
                <el-input
                  v-model.trim="queryParams.code"
                  placeholder="变更单号"
                  clearable
                  style="width: 100%"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" style="width: 100%" @change="searchFN">
                  <el-option label="全部" value="" />
                  <el-option label="审核中" value="1" />
                  <el-option label="审核通过" value="2" />
                  <el-option label="审核拒绝" value="3" />
                  <!--                  <el-option label="已撤回" value="4" />-->
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <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>
            </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="code" min-width="150"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="省协会"
            align="center"
            prop="shenMemName"
            min-width="140"
            :show-overflow-tooltip="true"
          />
          <!--          <el-table-column-->
          <!--            label="道馆"-->
          <!--            align="center"-->
          <!--            prop="memName"-->
          <!--            min-width="140"-->
          <!--            :show-overflow-tooltip="true"-->
          <!--          >-->
          <!--            <template #default="scope">-->
          <!--              <div>{{ scope.row.memName?scope.row.memName:'/' }}</div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column
            label="变更团体会员数" align="center" prop="count" min-width="90"
            :show-overflow-tooltip="true"
          >
            <template #default="props">
              <span>{{ props.row.count }}个</span>
            </template>
          </el-table-column>

          <el-table-column label="审核状态" align="center" prop="status" min-width="90">
            <template #default="props">
              <div v-if="props.row.status == 1">
                审核中
              </div>
              <div v-if="props.row.status == 2" class="text-success">
                审核通过
              </div>
              <div v-if="props.row.status == 3" class="text-warning">
                审核拒绝
              </div>
              <div v-if="props.row.status == 4" class="text-danger">
                已撤回
              </div>
            </template>
          </el-table-column>
          <el-table-column label="审核进度" align="center" prop="" min-width="120">
            <template #default="props">
              <el-progress v-if="props.row.status == 2" :percentage="100" :format="format" />
              <el-progress v-if="props.row.status == 1" :percentage="0" :format="format" />
            </template>
          </el-table-column>
          <el-table-column label="提交日期" align="center" prop="content.commitTime" min-width="100">
            <template #default="scope">
              <span>{{ parseTime(scope.row.commitTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="200">
            <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.status != 1"
                type="primary" @click="handleAudit(scope.row)"
              >
                审核
              </el-button>
              <!--              <el-button-->
              <!--                :disabled="scope.row.status != 2 " type="danger" @click="handleDelete(scope.row)"-->
              <!--              >撤回-->
              <!--              </el-button>-->
            </template>
          </el-table-column>
        </el-table>

        <div v-show="total>0" class="totalCost">
          变更团体会员数合计：<span>{{ count }} 个</span>
        </div>

        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="initData"
        />
      </div>
      <!--    级位变更审核-->
      <el-dialog
        v-model="showDialog" title="团体会员信息变更审核" :close-on-click-modal="true" draggable
        width="600"
        @close="closeDialog"
      >
        <el-form :model="form" label-width="100" label-suffix="：">
          <el-form-item label="审批结果" prop="flag">
            <el-radio-group v-model="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="form.reason" type="textarea" rows="5" />
          </el-form-item>
        </el-form>

        <template #footer>
          <div class="dialog-footer text-center">
            <el-button type="primary" @click="doApproval">提 交</el-button>
            <el-button @click="closeDialog">取 消</el-button>
          </div>
        </template>

      </el-dialog>
      <memberInfo ref="memberInfoRef" />

    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue'
import { reactive } from '@vue/runtime-core'
import { ref, toRefs, onMounted } from 'vue'
import { DocumentChecked } from '@element-plus/icons-vue'
import { meList, audit } from '@/api/groupMember/addAlteration'

import memberInfo from './view.vue'

const { proxy } = getCurrentInstance()
const total = ref(0)
const list = ref([])
const batch = ref([])
const show = ref(true)
const loading = ref(false)
const showDialog = ref(false)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    ztxFlag: '1'
  }
})
const commitTime = ref([])
const { queryParams } = toRefs(data)
const statistical = ref({})
const count = ref(0)
const form = ref({
  flag: '1'
})
onMounted(() => {
  initData()
})

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

// 获取赛会列表
async function initData() {
  loading.value = true
  count.value = 0
  statistical.value.personCount = 0
  queryParams.value.commitTimeRange = commitTime.value?.toString()
  const res = await meList(queryParams.value)
  list.value = res.rows || []
  list.value.forEach(item => {
    count.value += item.count
  })
  total.value = res.total
  loading.value = false
}

// 审核窗口关闭
function closeDialog() {
  showDialog.value = false
  form.value = {
    flag: '1'
  }
}

// 审核
async function doApproval() {
  if (form.value.flag != 1 && !form.value.reason) {
    return proxy.$modal.msgError('请输入拒绝理由！')
  }
  const res = await audit(form.value)
  if (res.code == 200) {
    proxy.$modal.msgSuccess('操作成功！')
    await initData()
    await closeDialog()
  }
}
// 查看
function handleInfo(row) {
  proxy.$refs['memberInfoRef'].open(row.id)
}

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

function format(percentage) {
  if (percentage == 0) {
    return (percentage = 0 + '/' + 1)
  }
  if (percentage == 100) {
    return (percentage = 1 + '/' + 1)
  }
}

// 审核
function handleAudit(row) {
  console.log(row)
  form.value.ids = [row.id]
  showDialog.value = true
}

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

// 批量审核
function auditTime() {
  form.value.ids = batch.value
  showDialog.value = true
}

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

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

function handleDelete(row) {
  proxy.$modal.confirm('是否确认撤回变更单号为"' + row.code + '"的数据项？').then(function() {
    return withDraw([row.id])
  }).then(() => {
    if (list.value == 1 && queryParams.value.pageNum != 1) queryParams.value.pageNum--
    initData()
    proxy.$modal.msgSuccess('操作成功！')
  }).catch((err) => {
    console.log(err)
  }).finally((a) => {
    console.log(a)
  })
}

</script>

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