<template>
  <div class="app-container invoice-manage">
    <!-- 搜索 -->
    <el-form :model="state.queryParams" ref="queryRef" :inline="true">
      <el-form-item label="发票号" prop="orderinvoicecode">
        <el-input v-model="state.queryParams['orderinvoicecode.value']" placeholder="发票号" clearable
          @keyup.enter="handleQuery({ initPageIndex: true })" />
      </el-form-item>

      <!-- 按钮组件 -->
      <all-button :buttonType="['', '', 'query', 'refresh']" @addButton="accountEditRef.openDialog()"
        @queryButton="handleQuery({ initPageIndex: true })" @refreshButton="handleQuery({ initPageIndex: true })" />
    </el-form>
    <!-- 表格 -->
    <el-table v-loading="state.tableLoading" :data="state.tableData" row-key="orderinvoiceid" style="flex: 1" stripe
      border table-layout="fixed" @cell-dblclick="tableCelldbl">
      <el-table-column align="center" prop="orderinvoiceid" label="发票流水号" min-width="150" sortable></el-table-column>
      <el-table-column align="center" prop="orderinvoiceprice" label="发票金额" min-width="150"></el-table-column>
      <el-table-column align="center" prop="orderinvoiceorderid" label="订单编号" min-width="150"></el-table-column>
      <el-table-column align="center" prop="orderinvoiceyhid" label="用户编号" min-width="150"></el-table-column>
      <el-table-column align="center" prop="orderinvoicetype" label="发票类型" min-width="150"></el-table-column>
      <el-table-column align="center" prop="orderinvoicestatus" label="发票状态" min-width="150">
        <template #default="scope">
          <el-tag size="small" type="warning" v-if="scope.row[scope.column.property] === '待审核'">待审核</el-tag>
          <el-tag size="small" type="success" v-if="scope.row[scope.column.property] === '已开票'">已开票</el-tag>
          <el-tag size="small" type="error" v-if="scope.row[scope.column.property] === '已驳回'">已驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="orderinvoicegs" label="公司名称" min-width="150"></el-table-column>
      <el-table-column align="center" prop="orderinvoicetel" label="联系方式" min-width="150"></el-table-column>
      <el-table-column align="center" prop="orderinvoicecode" label="发票号" min-width="150" sortable></el-table-column>
      <el-table-column align="center" prop="orderinvoiceshuser" label="审核人" min-width="150"></el-table-column>
      <el-table-column align="center" prop="orderinvoicekpuser" label="开票人" min-width="150"></el-table-column>
      <!-- <el-table-column align="center" prop="orderinvoicecreateuser" label="创建人员" min-width="210"></el-table-column> -->
      <el-table-column align="center" prop="orderinvoicekpdate" label="开票时间" min-width="150"></el-table-column>

      <el-table-column align="center" :width="fitWidth" label="操作" class-name="small-padding fixed-width" fixed="right">
        <template #default="scope">
          <div class="operation-box">
            <el-link class="operate-btn-item" type="primary" @click="detailMethod(scope.row)">查看</el-link>
            <el-link class="operate-btn-item" :disabled="['已开票', '已驳回'].includes(scope.row.orderinvoicestatus)"
              type="primary" @click="shMethod(scope.row)">审核</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-box">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="paginaionConfig.query.pageindex" :page-sizes="paginaionConfig.sizeOptions"
        :page-size="paginaionConfig.query.rows" layout="total, sizes, prev, pager, next, jumper"
        :total="paginaionConfig.total">
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import invoiceStoreApi from '@store/modules/orderinvoiceManage'
import _ from 'lodash'
import usePagination from '@/hooks/usePagination'
import useFitColumn from '@/hooks/useFitColumn'
import tableCelldbl from '@/hooks/tableCelldbl'

const { paginaionConfig, handleSizeChange, handleCurrentChange } = usePagination(handleQuery)
const { fitWidth } = useFitColumn()
// 接口封装文件
const storeMethods = invoiceStoreApi()
const router = useRouter()

const state = reactive({
  tableLoading: false,
  tableData: [],
  queryParams: {
    "orderinvoicecode.value": "",
  },
});

function handleQuery(config) {
  if (config?.initPageIndex) paginaionConfig.query.pageindex = 1
  getList(Object.assign(_.cloneDeep(paginaionConfig.query), state.queryParams))
}

/** 查询菜单列表 */
const getList = async (query) => {
  state.tableLoading = true
  try {
    const { Total, Data } = await storeMethods.list(query)
    paginaionConfig.total = Total
    state.tableData = Data
  } catch (error) {

  }
  state.tableLoading = false
}

// 查看详情
const detailMethod = async (query) => {
  router.push({ path: '/orderinvoicemanage/orderinvoiceInfo', query: { orderinvoiceid: query.orderinvoiceid } })
}

// 审核
const shMethod = async (query) => {
  router.push({ path: '/orderinvoicemanage/orderinvoiceExamine', query: { orderinvoiceid: query.orderinvoiceid } })
}

onMounted(() => {
  handleQuery({ initPageIndex: true })
  // 其他信息
  // getRoleList()
})
</script>

<style lang="scss" scoped></style>
