<!-- eslint-disable unicorn/prefer-ternary -->
<script setup lang="ts" name="replace-mgr">
import type { MjGridProps } from '#/components/mj/mj-table'

import { OpenEmojiRight, OpenEmojiWrong } from '@vben/icons'

import { orderService } from '#/api/service/order'
import MjTable, {
  mj_form_date_range,
  mj_form_select,
} from '#/components/mj/mj-table'
import obj from '#/utils/obj'
import str from '#/utils/str'

const searchEvents = {
  change() {
    gridRef.value.reload()
  },
}

// 搜索表单
const searchForm = {
  items: obj.joinObjs<any>(
    {
      field: 'status',
      title: '状态',
      span: 6,
      itemRender: {
        name: mj_form_select,
        props: {
          clearable: true,
        },
        options: order_status_options,
        events: searchEvents,
      },
    },
    {
      field: 'orderType',
      title: '类型',
      span: 6,
      itemRender: {
        name: mj_form_select,
        props: {
          clearable: true,
        },
        options: order_type_options,
        events: searchEvents,
      },
    },
    {
      title: '时间',
      field: 'timeRange',
      span: 12,
      itemRender: {
        name: mj_form_date_range,
        props: { clearable: true, type: 'datetime' },
      },
    },
  ),
} as any

// 表格
const gridRef = ref()
const grid = {
  columns: [
    { type: 'seq' },
    {
      title: '名称',
      field: 'user.nickname',
      formatter: 'redaction',
    },
    {
      title: '手机/账号',
      field: 'user.phone',
      formatter({ row }: any) {
        if (row.user?.phone) {
          return str.redactionPhone(row.user.phone)
        }
        if (/^\d{11}$/.test(row.user?.account)) {
          return str.redactionPhone(row.user?.account)
        }
        return str.redaction(row.user?.account)
      },
    },
    {
      title: '头像',
      slots: {
        default: 'userAvatar',
      },
    },
    {
      field: 'money',
      title: '金额',
    },
    {
      field: 'payAmount',
      title: '实付金额',
    },
    {
      field: 'orderType',
      title: '类型',
      formatter({ cellValue }) {
        return order_type_map[cellValue]
      },
    },
    {
      field: 'orderName',
      title: '备注',
      formatter: 'redactionRemark',
    },
    {
      title: '已支付',
      slots: {
        default: 'status',
      },
    },
    { field: 'paymentTime', title: '支付时间' },
    { field: 'createTime', title: '创建时间' },
  ],
  beforeLoadData(params) {
    // 拆分时间参数
    if (params.timeRange) {
      const times = params.timeRange.split(',')
      params.startTime = times[0]
      params.endTime = times[1]
      delete params.timeRange
    }
    return params
  },
} as MjGridProps
</script>

<template>
  <div class="pay-order-mgr g-container">
    <MjTable
      ref="gridRef"
      hide-toolbar
      hide-remove
      :grid="grid"
      :service="orderService"
      :search-form="searchForm"
    >
      <template #status="{ row }">
        <div class="flex justify-center">
          <OpenEmojiRight v-if="row.status === order_status_paid" width="36" />
          <OpenEmojiWrong v-else width="36" />
        </div>
      </template>
      <template #userAvatar="{ row }">
        <div class="avatar">
          <img v-if="row.user?.avatar" :src="row.user?.avatar" />
        </div>
      </template>
    </MjTable>
  </div>
</template>

<style lang="scss" scoped>
.pay-order-mgr {
  height: 100% !important;

  .avatar {
    display: flex;
    justify-content: center;

    img {
      width: 40px;
      height: 40px;
    }
  }
}
</style>
