<template>
  <div class="app-container">
    <div>
      <!-- 搜索区域 -->
      <div class="from-Card">
        <el-form ref="queryRef" :inline="true" :model="queryParams" label-position="top" size="small">
          <el-row style="width: 100%;">
            <el-col :span="4">
              <el-form-item label="订单编号" prop="tradeNo">
                <el-input
                  v-model.trim="queryParams.tradeNo"
                  clearable
                  placeholder="订单编号"
                  style="width: 100%;"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="缴费单位" prop="orderName">
                <el-input
                  v-model.trim="queryParams.orderName"
                  clearable
                  placeholder="缴费单位"
                  style="width: 100%;"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="缴费编号" prop="wfCode">
                <el-input
                  v-model.trim="queryParams.wfCode"
                  clearable
                  placeholder="缴费编号"
                  style="width: 100%;"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            <!--            <el-col :span="8" style="display: flex;">-->
            <!--              <el-form-item style="width: 100%;" label="缴费时间" prop="commitTime">-->
            <!--                <el-date-picker-->
            <!--                  v-model="commitTime[0]" type="date" value-format="YYYY-MM-DD HH:mm:ss"-->
            <!--                  placeholder="开始时间" style="width: 100%;"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--              <el-form-item style="width: 100%;" label="缴费时间" prop="commitTime">-->
            <!--                <el-date-picker-->
            <!--                  v-model="commitTime[1]" type="date" value-format="YYYY-MM-DD HH:mm:ss"-->
            <!--                  placeholder="结束时间" style="width: 100%;"-->
            <!--                  :default-time="defaultTime"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <el-col :span="4">
              <el-form-item label="缴费状态" prop="payStatus">
                <el-select v-model="queryParams.payStatus" 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="4" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="审核状态" prop="auditStatus">
                <el-select v-model="queryParams.auditStatus" style="width: 100%" @change="searchFN">
                  <el-option label="全部" value="" />
                  <el-option label="待支付" value="9" />
                  <el-option label="审核中" value="1" />
                  <el-option label="审核通过" value="2" />
                  <el-option label="审核拒绝" value="3" />
                  <el-option label="已取消" value="8" />
                </el-select>
              </el-form-item>
            </el-col>

            <div class="po-r-btns">
              <el-button icon="Search" size="small" type="primary" @click="searchFN()">查询</el-button>
              <el-button icon="Refresh" size="small" @click="reset">重置</el-button>
            </div>
          </el-row>
        </el-form>
      </div>
      <!-- 表格数据 -->
      <div class="table">
        <el-table
          v-loading="loading" :data="list" :row-class-name="tableRowClassName" border style="width: 100%;"
        >
          <el-table-column label="序号" type="index" width="55" />
          <el-table-column
            align="center"
            label="订单编号"
            prop="tradeNo"
            show-overflow-tooltip
            width="280"
          />
          <el-table-column
            align="center"
            label="缴费编号"
            min-width="120"
            show-overflow-tooltip
          >
            <template #default="{row}">
              <el-button link type="primary" @click="handelView(row)">{{ row.wfCode }}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="缴费单位"
            min-width="140"
            prop="orderName"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="人数合计"
            min-width="90"
            prop="content.personCount"
          />
          <el-table-column
            align="center"
            label="费用合计"
            min-width="90"
            prop="price"
          />

          <el-table-column
            align="center"
            label="缴费时间"
            min-width="100"
            prop="commitTime"
          >
            <template #default="{row}">
              <span>{{ parseTime(row.payTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="缴费方式"
            min-width="90"
            prop=""
          >
            <template #default="{row}">
              <el-button
                v-if="row.payType==='3'" :disabled="row.payStatus==='2'" link style="width:64px;" type="primary"
                @click="handelB2B(row)"
              >对公转账
              </el-button>
              <span v-else>民生付</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="缴费状态"
            min-width="100"
            prop="status"
          >
            <template #default="{row}">
              <div v-if="row.payStatus==='0'"> 待支付</div>
              <div v-if="row.payStatus==='1'" class="text-success">缴费成功</div>
              <div v-if="row.payStatus==='2'" class="text-danger"> 已取消</div>
              <div v-if="row.payStatus==='4'" class="text-danger"> 已退款</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="审核状态"
            min-width="100"
          >
            <template #default="props">
              <span
                :class="{
                  'text-success':props.row.auditStatus==='2',
                  'text-danger':props.row.auditStatus==='3'||props.row.scoreStatus==='8',
                  'text-warning':props.row.auditStatus==='4'
                }"
              >{{ auditStatusTag(props.row.auditStatus) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="订单状态"
            min-width="100"
            prop="status"
          >
            <template #default="{row}">
              {{ row.effect === '1' ? '已生效' : '未生效' }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="开票状态"
            min-width="100"
            prop="status"
          >
            <template #default="{row}">
              <span :class="{'text-success':row.invoiceStatus === '1'}">{{
                row.invoiceStatus === '1' ? '已开票' : "未开票"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="开票时间"
            min-width="100"
            prop="status"
          >
            <template #default="{row}">
              <span>{{ parseTime(row.invoiceTime, '{y}-{m}-{d}') }} </span>
            </template>
          </el-table-column>
          <el-table-column
            :width="deptType!=='1'?260:100"
            align="center"
            fixed="right"
            label="操作"
          >
            <template #default="{row}">
              <div v-if="deptType!=='1'">
                <el-button
                  :disabled=" row.auditStatus !== '9'||row.payStatus!=='0' "
                  type="success" @click="handelPay(row)"
                >支付
                </el-button>
                <el-button
                  v-if="row.auditStatus==='9'"
                  :disabled=" row.auditStatus !== '9'||row.payStatus!=='0' "
                  type="warning" @click="handelCancelOrder(row)"
                >取消订单
                </el-button>

                <el-button
                  v-if="row.invoiceStatus==='1'"
                  :disabled=" row.invoiceStatus !== '1' "
                  type="primary" @click="handelLog(row)"
                >查看
                </el-button>
                <el-button
                  v-else
                  :disabled="row.payStatus!=='1'||row.invoiceStatus==='1'||row.auditStatus!=='2'||row.price==='0'"
                  type="primary"
                  @click="makeInvoiceFN(row)"
                >申请开票
                </el-button>
                <el-button v-if="row.auditStatus!=='9'" :disabled="row.invoiceStatus !== '1' || !isWithinCalendarMonth(row.invoiceTime) ||row.payStatus==='4'||row.redFlag==='1'||row.payType==='3'" type="danger" @click="handelReIssue(row)">换开
                </el-button>
              </div>
              <div v-else>
                <el-button :disabled="row.payStatus!=='1'||row.invoiceStatus === '1'" type="danger" @click="handelRefund(row)">退款</el-button>
              </div>

            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          v-model:limit="queryParams.pageSize"
          v-model:page="queryParams.pageNum"
          :total="total"
          @pagination="initData"
        />
      </div>

    </div>
    <conFirmOrder ref="conFirmOrderRef" />
    <examView ref="examViewRef" :row-data="rowData" @close="initData" />
    <payView ref="payViewRef" />
    <makeInvoice ref="makeInvoiceRef" @handel-success="handelSuccess" />
    <makeInvoiceLog ref="makeInvoiceLogRef" />
    <SuccessContainer ref="SuccessContainerRef" @handel-history="handelHistory" />
    <HistoryContainer ref="HistoryContainerRef" />
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { cancelOrder, refundOrder, orderList, invoiceFastRed } from '@/api/order'
import { ref, toRefs, onMounted, computed, getCurrentInstance, reactive } from 'vue'
import ExamView from '@/views/exam/level/apply/components/examView.vue'
// import examView from './components/examView.vue'
// import makeInvoice2 from '@/components/makeInvoice2/index.vue'
import { dateEnd, isWithinCalendarMonth, parseTime } from '@/utils/ruoyi'
import makeInvoice from '@/views/makeInvoice/makeInvoice.vue'
import SuccessContainer from '@/components/makeInvoice2/SuccessContainer.vue'
import HistoryContainer from '@/components/makeInvoice2/HistoryContainer.vue'
import makeInvoiceLog from '@/views/makeInvoice/log.vue'
import useUserStore from '@/store/modules/user'
import payView from '@/views/system/user/profile/components/payView.vue'
import conFirmOrder from '@/views/exam/rank/apply/components/conFirmOrder'

const deptType = computed(() => useUserStore().deptType)

const { proxy } = getCurrentInstance()

const total = ref(0)
const list = ref([])
const loading = ref(false)
const route = useRoute()
const type = ref('1')
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    type: '3',
    queryType: '1'
  }
})
const commitTime = ref([null, null])
const rowData = ref()
const { queryParams } = toRefs(data)

onMounted(() => {
  if (route.path.indexOf('rank') > -1) {
    queryParams.value.type = '3'
    type.value = '1'
  } else if (route.path.indexOf('beyond') > -1) {
    queryParams.value.type = '4'
    type.value = '2'
  }
  initData()
})

const auditStatusTag = (row) => {
  const map = {
    0: '待提交',
    1: '审核中',
    2: '审核通过',
    3: '审核拒绝',
    4: '已退回',
    8: '已取消',
    9: '待支付'
  }
  return map[row] || ''
}

const handelSuccess = () => {
  initData()
  proxy.$refs['SuccessContainerRef'].open()
}

function handelB2B(row) {
  proxy.$refs['payViewRef'].open(row.id)
}


const handelHistory = () => {
  proxy.$refs['HistoryContainerRef'].open()
}
// // 背景色
const tableRowClassName = ({
  row,
  rowIndex
}) => {
  if (row.status === '2') {
    return 'success-row'
  }
}

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

// 获取赛会列表
async function initData() {
  if ((commitTime.value[0] == null && commitTime.value[1] != null) || (commitTime.value[1] == null && commitTime.value[0] != null)) return proxy.$modal.msgError('请完善提交日期范围')
  if (commitTime.value[1]) commitTime.value[1] = dateEnd(commitTime.value[1])
  queryParams.value.commitTimeRange = commitTime.value[0] != null ? commitTime.value.toString() : null
  loading.value = true
  const res = await orderList(queryParams.value)
  loading.value = false
  list.value = res.rows
  for (const val of list.value) {
    if (val.content) val.content = JSON.parse(val.content)
  }
  total.value = res.total
}

// 重置
function reset() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    type: '0',
    queryType: '1'
  }
  commitTime.value = [null, null]
  if (route.path.indexOf('rank') > -1) {
    queryParams.value.type = '3'
  } else if (route.path.indexOf('beyond') > -1) {
    queryParams.value.type = '4'
  }
  initData()
}

async function makeInvoiceFN(row) {
  proxy.$refs['makeInvoiceRef'].open(row.id, row.payType !== '3')
  // proxy.$refs['makeInvoice2Ref'].open(row.id, '2')
}

function handelPay(row) {
  proxy.$refs['conFirmOrderRef'].open(row.sourceId, type.value, row.id)
}

function handelLog(row) {
  proxy.$refs['makeInvoiceLogRef'].open(row)
}

/** 取消订单 */
async function handelCancelOrder(row) {
  await proxy.$modal.confirm(`是否确认取消缴费编号为${row.wfCode}的订单？`)
  loading.value = true
  await cancelOrder(row.id)
  await initData()
  await proxy.$modal.msgSuccess('操作成功')
}

/** 取消订单 */
async function handelRefund(row) {
  await proxy.$modal.confirm(`缴费编号为${row.wfCode}的订单是否确认退款？`)
  loading.value = true
  await refundOrder(row.id)
  await initData()
  await proxy.$modal.msgSuccess('操作成功')
}

// 换开
async function handelReIssue(row) {
  await proxy.$modal.confirm(`开票后30天内仅可换开一次，是否确认换开？原发票将作废且无法恢复。`)
  const res = await invoiceFastRed(row.id)
  if (res) {
    await initData()
    proxy.$refs['makeInvoiceRef'].open(row.id, !row.ziZhangBu)
  }
}

function handelView(row) {
  proxy.$refs['examViewRef'].open(row.sourceId)
}


</script>

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


</style>