<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="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="1" />
                  <el-option label="审核通过" value="2" />
                  <el-option label="审核拒绝" value="3" />
                  <el-option label="已退回" value="4" />
                  <el-option label="已取消" value="5" />
                </el-select>
              </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>-->


            <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="订单编号"
            min-width="140"
            prop="tradeNo"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="缴费编号"
            min-width="120"
            prop="wfCode"
            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-->
          <!--            label="订单名称"-->
          <!--            align="center"-->
          <!--            prop="paymentName"-->
          <!--            min-width="260"-->
          <!--            show-overflow-tooltip-->
          <!--          />-->
          <el-table-column
            align="center"
            label="缴费状态"
            min-width="100"
          >
            <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"
          >
            <!--            `auditStatus` char(1) DEFAULT '0' COMMENT '状态 0 草稿箱 1 审核中 2 审核通过 3 审核未通过 4 被退回 5 取消',-->
            <template #default="{row}">
              <div v-if="row.auditStatus==='0'"> 待提交</div>
              <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-warning"> 审核拒绝</div>
              <div v-if="row.auditStatus==='4'" class="text-danger"> 已退回</div>
              <div v-if="row.auditStatus==='5'" class="text-danger"> 已取消</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="订单状态"
            min-width="100"
          >
            <template #default="{row}">
              <span>{{ row.effect === '1' ? "已生效" : "未生效" }}</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="费用合计"
            min-width="90"
            prop="price"
          />

          <el-table-column
            align="center"
            label="缴费年限合计"
            min-width="110"
            prop="content.yearCount"
          />
          <el-table-column
            align="center"
            label="缴费时间"
            min-width="100"
            prop="commitTime"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="缴费方式"
            min-width="90"
            prop="totalYear"
          >
            <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
            :width="deptType!=='1'?260:100"
            align="center"
            fixed="right"
            label="操作"
          >
            <template #default="{row}">
              <div v-if="deptType!=='1'">
                <el-button :disabled="row.auditStatus!=='0'||row.payStatus!=='0'" type="success" @click="handelPlay(row)">支付</el-button>
                <el-button v-if="row.auditStatus==='0'" :disabled="row.payStatus!=='0'" type="warning" @click="handelCancelOrder(row)">取消订单</el-button>
                <el-button
                  v-if="row.invoiceStatus!=='1'"
                  :disabled="row.payStatus!=='1'||row.invoiceStatus==='1'||row.auditStatus!=='2'||row.price==='0'"
                  type="primary"
                  @click="makeInvoiceFN(row)"
                >申请开票
                </el-button>
                <el-button
                  v-else
                  :disabled=" row.invoiceStatus !== '1' "
                  type="primary" @click="handelLog(row)"
                >查看发票
                </el-button>
                <el-button v-if="row.auditStatus!=='0'" :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>
    <!--    <examView ref="examViewRef" :row-data="rowData" @close="initData" />-->
    <goPay
      ref="goPayRef" :a-name="deptInfo.aname" :name="deptInfo.name||deptInfo.deptName" @payment-success="paymentSuccess"
      @payment-view="paymentView"
    />
    <payView ref="payViewRef" />
    <payOk ref="payOkRef" />
    <payView ref="payViewRef" />
    <plainInvoice ref="plainInvoiceRef" @handel-success="handelSuccess" />
    <makeInvoiceLog ref="makeInvoiceLogRef" />
    <!--    <makeInvoice2 ref="makeInvoice2Ref" @handel-success="handelSuccess" />-->
    <SuccessContainer ref="SuccessContainerRef" @handel-history="handelHistory" />
    <HistoryContainer ref="HistoryContainerRef" />
    <payView ref="payViewRef" />
    <viewDetails ref="viewDetailsRef" :show-audit="false" @handel-info="handleInfo" />
  </div>
</template>

<script setup>
import { orderList, cancelOrder, refundOrder, invoiceFastRed } from '@/api/order'
import { ref, toRefs, onMounted, getCurrentInstance, reactive, computed } from 'vue'
import { listAPI } from '@/api/groupMember/audit'
import viewDetails from '@/views/groupMember/authentication/components/viewDetails.vue'
import goPay from '@/views/system/user/profile/components/goPay'
import payOk from '@/components/memberComponents/payOk.vue'
import payView from '@/views/system/user/profile/components/payView.vue'

import plainInvoice from '@/views/makeInvoice/plainInvoice.vue'
import { dateEnd, isWithinCalendarMonth } from '@/utils/ruoyi'
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'

const deptType = computed(() => useUserStore().deptType)
const deptInfo = computed(() => useUserStore().deptInfo)
const { proxy } = getCurrentInstance()
const total = ref(0)
const list = ref([])
const loading = ref(false)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    type: 1,
    queryType: 1
  }
})
const commitTime = ref([null, null])
const rowData = ref()
const { queryParams } = toRefs(data)

onMounted(() => {
  initData()
})


function paymentSuccess() {
  proxy.$refs['payOkRef'].open()
  initData()
}

function paymentView(row) {
  proxy.$refs['payViewRef'].open(row.orderId)
  initData()
}

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

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 handelView(row) {
  console.log(row)
  const res = await listAPI({
    id: row.sourceId
  })
  if (res.rows) {
    proxy.$refs['viewDetailsRef'].open(res.rows[0] ?? {})
  }
}

// 获取赛会列表
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.payTimeRange = 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: 1,
    queryType: 1,
    payStatus: ''
  }
  commitTime.value = [null, null]
  initData()
}

// 查看
function handleInfo(row) {
  rowData.value = row
  // proxy.$refs['examViewRef'].open(row)
}


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

function handelPlay(row) {
  if (row.payStatus === '0') {
    proxy.$refs['goPayRef'].open(row)
  }
}

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

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

/** 取消订单 */
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['plainInvoiceRef'].open(row.id, !row.ziZhangBu)
  }
}
</script>

<style lang="scss" scoped>

</style>