<template>
  <div class="app-container organization-manage">
    <!-- 搜索 -->
    <el-form :model="state.queryParams" ref="queryRef" :inline="true">
      <el-form-item label="订单ID" prop="payorderid">
        <el-input v-model="state.queryParams['payorderid.value']" placeholder="账号/公司名称" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item>
      <el-form-item label="产品ID" prop="payorderproductid">
        <el-input v-model="state.queryParams['payorderproductid.value']" placeholder="账号/公司名称" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item>
      <el-form-item label="客户ID" prop="payordercustomerid">
        <el-input v-model="state.queryParams['payordercustomerid.value']" placeholder="账号/公司名称" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item>
      <el-form-item label="支付流水号" prop="payorderlsh">
        <el-input v-model="state.queryParams['payorderlsh.value']" placeholder="账号/公司名称" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item>

      <!-- 按钮组件 -->
      <all-button
        :buttonType="['', '', 'query', 'refresh']"
        :labData="[
          {title: '全部', value: ''},
          {title: '已支付', value: '已支付'},
          {title: '待支付', value: '待支付'}
        ]"
        @labChange="labChange"
        @addButton="accountEditRef.openDialog()"
        @queryButton="handleQuery({initPageIndex: true})"
        @refreshButton="handleQuery({initPageIndex: true})"
      />
    </el-form>
    <!-- 表格 -->
    <el-table v-loading="state.tableLoading" :data="state.tableData" row-key="id" style="flex: 1" stripe border table-layout="fixed" @cell-dblclick="tableCelldbl">
      <el-table-column align="center" prop="payorderid" label="订单id" min-width="150" sortable></el-table-column>

      <el-table-column align="center" prop="payorderproductid" label="产品id" min-width="150"></el-table-column>

      <el-table-column align="center" prop="payorderpaytitle" label="支付名称" min-width="150">
        <template #default="scope">
          <el-tag v-if="scope.row[scope.column.property] == '支付宝'">{{ scope.row[scope.column.property] }}</el-tag>
          <el-tag type="success" v-else>{{ scope.row[scope.column.property] }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="payorderstatus" label="支付状态" min-width="150">
        <template #default="scope">
          <el-tag type="danger" v-if="scope.row[scope.column.property] == '已支付'">{{ scope.row[scope.column.property] }}</el-tag>
          <el-tag v-else>{{ scope.row[scope.column.property] }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="payorderprice" label="支付金额" min-width="150"></el-table-column>
      <el-table-column align="center" prop="payorderzfzh" label="支付账号" min-width="150"></el-table-column>
      <!-- <el-table-column align="center" prop="payorderstatus" label="支付状态" show-overflow-tooltip min-width="150"></el-table-column> -->
      <el-table-column align="center" prop="payorderlsh" label="支付流水号" show-overflow-tooltip min-width="150"></el-table-column>
      <!-- <el-table-column align="center" prop="productsfky" label="产品是否可用" min-width="150">
        <template #default="scope">
          <el-tag v-if="scope.row[scope.column.property] == 1">可用</el-tag>
          <el-tag v-if="scope.row[scope.column.property] == 0">不可用</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column align="center" prop="payorderpaysortid" label="支付类别id" min-width="150"></el-table-column>
      <el-table-column align="center" prop="payordercustomerid" label="客户id" min-width="150">
        <template #default="scope">
          <span>{{ scope.row[scope.column.property] ? scope.row[scope.column.property] : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="payorderopenid" label="客户openid" min-width="150"></el-table-column>
      <!-- <el-table-column align="center" prop="payorderreturndate" label="支付结果返回时间" min-width="150"></el-table-column> -->
      <el-table-column align="center" prop="payorderfkdate" label="支付时间" min-width="150"></el-table-column>
      <el-table-column align="center" prop="payordercreatedate" 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-text class="operate-btn-item" type="primary" @click="handleDictInfo(scope.row)">查看详情</el-text>
          </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>

    <!-- <AccountEdit width="50%" ref="accountEditRef" @refresh="handleQuery" /> -->
  </div>
</template>

<script setup name="Account">
import productStoreApi from '@store/modules/productStoreApi'
import useSystemManageStore from '@store/modules/systemManage'
// import AccountEdit from '../components/AccountEdit/index.vue'
import _ from 'lodash'
import usePagination from '@/hooks/usePagination'
import useFitColumn from '@/hooks/useFitColumn'
import tableCelldbl from '@/hooks/tableCelldbl'
import {_list, _view, _export, _add, _adds, _up, _ups, _del} from '@/api/app'
const router = useRouter()

const {proxy} = getCurrentInstance()
const systemManageStore = useSystemManageStore()
const {paginaionConfig, handleSizeChange, handleCurrentChange} = usePagination(handleQuery)
const {fitWidth} = useFitColumn()
// 接口封装文件
const productManageStore = productStoreApi()

const state = reactive({
  tableLoading: false,
  tableData: [],
  queryParams: {
    'payorderid.value': '',
    'payordercustomerid.value': '',
    'payorderlsh.value': '',
    'payorderproductid.value': ''
  }
})

// components组件
const accountEditRef = ref(null)

// 角色组信息
const roleList = ref([])
provide('roleList', readonly(roleList))

// 重置搜索项
const resetButton = () => {
  state.queryParams = {}
  handleQuery({initPageIndex: true})
}

// 选项卡
const labChange = (data) => {
  state.queryParams['payorderstatus.value'] = data
  handleQuery({initPageIndex: true})
}

// 查看详情
const handleDictInfo = async (query) => {
  router.push({path: '/orderesmanage/orderesinfo', query: {payorderid: query.payorderid}})
}

// 默认信息
const getRoleList = async () => {
  const {Total, Data} = await systemManageStore.sysusergroupLoad({
    pageindex: 1,
    rows: 1000
  })
  roleList.value = Data
}

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

/** 查询菜单列表 */
const getList = async (query) => {
  console.log(query, 'query')
  state.tableLoading = true
  const params = {
    pagevalue: 298,
    ...query
  }
  const response = await _list(params)
  const {Total, Data, Status} = response
  if (Status === 0) {
    state.tableData = Data.Data
  }
  paginaionConfig.total = Data.Total
  state.tableLoading = false
}

/** 删除 */
const handleDictDel = async (query) => {
  try {
    let params = JSON.parse(JSON.stringify(query))
    params['payorderid.value'] = params.payorderid
    await proxy.$modal.confirm('请问确认删除吗？')
    await productManageStore.del(params)
    proxy.$modal.msgSuccess('删除成功！')
    handleQuery()
  } catch (error) {
    console.log(error, 'error')
  }
}

onMounted((data) => {
  let query = router.currentRoute.value.query
  if (query.customerid) {
    state.queryParams['payordercustomerid.value'] = query.customerid
  }
  // 其他信息
  handleQuery({initPageIndex: true})
  getRoleList()
})
</script>
